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!

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!

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.

Chapter 01

Plan

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.

Lesson 01

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

Lesson 02

Our client appears!

Lesson 03

Verifying the projects needs

Go to chapter

Chapter 02

Design

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

Lesson 01

Let's start to design

Lesson 02

Moodboarding

Lesson 03

Color scheme

Go to chapter

Chapter 03

Code

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.

Lesson 01

Now let's code!

Lesson 02

After approval changes

Lesson 03

The SuperHi Editor

Go to chapter

Chapter 04

Mobile + Variation

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!

Lesson 01

Let's dig in!

Lesson 02

What do we need to fix

Lesson 03

Adding our first media query

Go to chapter

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

Your instructor

Rik Lomas

Founder + CEO

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.