
Taught by
Rik Lomas
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!
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!
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.
Ana Wang
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
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!
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!
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 workDon’t worry, we are here to help you with:
Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!