SuperHi FM

Lesson 01

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

Join Rik Lomas, CEO and founder of SuperHi, as he guides you through the real-world process of planning, designing, and coding your first website. Learn how to work with clients, wireframe, design, code, and take your website live.

Transcript

00:01

(upbeat music) - Hello and welcome to the SuperHi plan, design and code, your first website course. I'm your host and instructor, Rik Lomas. And I'm also the CEO and founder of SuperHi. And over the last 15 years I've made a lot of websites. Most of them pretty good, some of them not so good, but some that have won awards. And on this course what we're gonna talk about is the real world way of how we go about this process. I'm in my bedroom right now.

00:38

This isn't a fancy studio and I don't have some weird mascot with me. This is gonna be very, very real world to talk about the way that I would actually do this. So in the course there's gonna be five different things we're gonna to cover. The first one is gonna be how we work with clients. You may not have a client and you might be working on your own projects, but you'll still go through the same process of when you plan your website.

00:58

The second thing is we're gonna actually wireframe our site up. So we're gonna use pens and paper. Pens, paper to actually sketch out what we're thinking. The third thing we'll do is we'll brand and design this website up. So how do you go about adding colors and typography and layout to our stuff? So how do we go from this into something that looks like a real world web design? The fourth thing that we'll do is we'll code up the website.

01:20

So we'll take the designs that we make on the computer and turn it into a real website that's mobile friendly too. Number five, we'll go live. We'll add a domain to this and we'll actually get it onto the internet. Now of course there are some tools that we actually need as part of this course. The first one of course is pens and paper. We need these to actually sketch things out. But we also need some digital tools as well. So there's three things that we're going to be using.

01:43

We're gonna be using Notion to actually plan out this site, write some stuff up, kind of make some notes. Second one is we're gonna be using Figma to actually brand and design this site. And the third one is a SuperHi Editor to get some code onto the Internet. Now how do we actually start this? Well maybe we're going to work on a project, in this project in this course what we're gonna do is work with a fake client. They're gonna email me any second now and we'll talk about how we get the requirements from the client.

02:11

And how we actually go about thinking on this website. So if I check my computer right now, we may have got an email from the client. Let's go and see.

Private notes

A place for you to post notes about anything on this page. Only you can view your notes.

SuperHi FM

Want some ambient music in the background? Play our radio station!

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!