SuperHi FM

Search:

Catalog Cart About Sign in

BEGINNERCOURSE

Plan, Design + Code Your First Website

Gain a whole range of new creative and digital skills so that you can design and build your first website from start to finish – all for free!

Rik Lomas

Taught by

Rik Lomas

Sign in to get started

Plan

Plan

Lesson 01

Welcome to the Plan, Design + Code Your First Website course

Lesson 02

Our client appears!

Lesson 03

Verifying the projects needs

Design

Design

Lesson 01

Let's start to design

Lesson 02

Moodboarding

Lesson 03

Color scheme

Code

Code

Lesson 01

Now let's code!

Lesson 02

After approval changes

Lesson 03

The SuperHi Editor

Mobile + Variation

Mobile + Variation

Lesson 01

Let's dig in!

Lesson 02

What do we need to fix

Lesson 03

Adding our first media query

Get access to Plan, Design + Code Your First Website

Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
Projects and code that you can alter and include in your own sites and portfolio
Resources to get you started and going post-course

Sign in to get started

Your instructor

Rik Lomas

Rik Lomas

Founder + CEO

With support from...

Ana Wang

Ana Wang

Content

Course structure

Chapter 01

Plan

Lesson 01
Welcome to the Plan, Design + Code Your First Website course
Lesson 02
Our client appears!
Lesson 03
Verifying the projects needs
Lesson 04
Setting up a kanban board on Notion
Lesson 05
Making wireframes
Lesson 06
Getting a budget approved
Lesson 07
Client sign off on project

Chapter 02

Design

Lesson 01
Let's start to design
Lesson 02
Moodboarding
Lesson 03
Color scheme
Lesson 04
Color tints
Lesson 05
Text treatment
Lesson 06
Picking typefaces
Lesson 07
Creating a logomark
Lesson 08
Color styles with Figma
Lesson 09
Adding a logotype
Lesson 10
Components in Figma
Lesson 11
Making text styles
Lesson 12
Site layout with grids
Lesson 13
Laying out our pages
Lesson 14
Client approval

Chapter 03

Code

Lesson 01
Now let's code!
Lesson 02
After approval changes
Lesson 03
The SuperHi Editor
Lesson 04
Basic tag setup
Lesson 05
Adding links
Lesson 06
Basic styling with CSS
Lesson 07
Styling links
Lesson 08
Hover states with CSS
Lesson 09
Margins and transitions
Lesson 10
Common stylings
Lesson 11
Exporting images as SVG from Figma
Lesson 12
Changing the layout's width
Lesson 13
Adding typography with Google Fonts
Lesson 14
Adding CSS flexbox to our header
Lesson 15
Styling our footer with CSS flexbox
Lesson 16
Adding CSS Grid to our tagline
Lesson 17
Adding project images to our portfolio
Lesson 18
Grouping text content
Lesson 19
Molding our layout
Lesson 20
Creating an about page
Lesson 21
Contact page and selected navigation styles
Lesson 22
Let's publish and sent to the client!

Chapter 04

Mobile + Variation

Lesson 01
Let's dig in!
Lesson 02
What do we need to fix
Lesson 03
Adding our first media query
Lesson 04
Adding our desktop layout
Lesson 05
Adding a second style to our media query
Lesson 06
Fixing the header layout
Lesson 07
Fixing the grid
Lesson 08
Fixing our header for mobile
Lesson 09
Testing on our phone
Lesson 10
Adding a contact form
Lesson 11
What variations can we add?
Lesson 12
Variation 1: text underlines in navigation
Lesson 13
Variation 2: Alice's layout
Lesson 14
Variation 3: social images in footer
Lesson 15
Variation 4: highlighted words in text
Lesson 16
Variation 5: Jaclyn's grid layout
Lesson 17
Variation 6: GIFs and videos
Lesson 18
Variation 7: border radius
Lesson 19
Variation 8: background gradients and images
Lesson 20
Variation 9: linking to projects
Lesson 21
Setting up our domain
Lesson 22
Social images and optimizing for search
Lesson 23
Thanks for taking our course!

SuperHi students work at the best

Our students are based all over the world and work at creative companies large and small. Why not check out some of their work?

View student work

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

This free course is go-at-your-own pace and has 4+ hours of video lessons that will teach you, from start to finish, how to get your very first website online. It's an introductory, crash course to learn a range of new creative, digital skills so that you can start making things online for fun or take your career to the next level.

We'll cover project management essentials and how to work with clients, how to wireframe and then design a visual brand and website using Figma, and finally, how to code your design from scratch using HTML, CSS and the SuperHi Editor (free access included).

The course project will be a client looking to get their portfolio online. You can also remix this course to get your own website (or a friend's) online too!

What you’ll learn

How to work with a client and set up a project plan.
How to design a brand using Figma — we'll cover fonts, colors and how to create a logo, even if you're not a designer.
How to code your website from scratch — learn the basics of HTML and CSS using our intelligent code editor, the SuperHi Editor.
How to plan and wireframe your design — we'll be creating a 3-page website including a contact form.
How to convert your wireframe into a design using Figma.
How to get your website online including a walkthrough on domains and hosting.

Requirements

A computer (Windows, Mac or Linux) with the latest version of Chrome installed and a broadband internet connection. You’ll also want to set up a Notion and Figma account (they're free and we'll walk you through setup in the course). That’s it!

Target Audience

This course is made for anyone who's curious about the world of technology, design and code and is interested in making things on the internet. No previous experience necessary!

You could be interested in taking the first steps to a digital freelance career, or looking to get creative and build your own website from scratch. From designers looking to dip their toes into code, to aspiring project managers wanting to work in creative fields — if you've been interested in making a career change and aren't sure which direction you want to take, we're here for you. Creativity and curiousity – that's all we ask of you!

This is an introductory course and you don't need any prior knowledge — just the desire to make something and learn new skills.

Welcome to the course! In the first lesson, get a mysterious email from our future client, Aria Oslo. We work out what she needs and make a plan of action for the project.

Now we've done wireframes and agreed to the project, we dive into moodboarding, colors, typefaces and site layouts.

Once we've got approval for our site designs, we can now start coding them up! We use the SuperHi Editor to add structure and look-and-feel to our website, piece by piece.

Now that we've finished the desktop version, we'll add in a responsive design and discuss the many variations we can add to this project!

Rik (he/him) is a Mancunian coder, teacher and CEO of SuperHi. He was the co-founder of Steer (a code school in London) and has taught several thousand people to code. He is a bit too old to be posting memes on our social media and recently featured as a Sour Patch Kid in the Macy's Thanksgiving Parade.