Top 10 Skills You Need

Ready to have your mind blown with how few skills you actually need to know to build your first web page? Plus, I show you how that is with a breakdown of the Slack landing page.

Resources Overview

A walkthrough of the resources mentioned on this page and who they’re appropriate for.

Free Courses

Intro to HTML/CSS: Making webpages – Khan Academy

This course offers clear videos that walk you through the basics of HTML and CSS.

The screen is split into the code editor and the webpage preview, so you understand how the code translate to the visual output.

Appropriate exercises follow each video to put what you learned into practice.

Learn HTML & CSS Correctly

A free course with short, bite-sized videos of how to do different things in HTML and CSS, like adding images, embedding links and key concepts like CSS selectors, margins and paddings.

One of the best part is the walkthrough of how to build a blog page from scratch.

CSS Cascade

A beautiful walkthrough of how browsers interpret competing CSS styles. Test questions are sprinkled through out. Have fun!

Lynda Courses

These Lynda courses offer a great mix of theory and practical knowledge. Not only will you learn how to do things but also why they work. Lynda offers a free 1-month trial, and many libraries also offer free access, so check your local library website!

HTML Essentials

CSS Essentials

CSS Layouts: From Float to Flexbox and Grid

If you’ve had issues with laying out your pages, this course is gold! There are exercises that goes along with the videos.

It’s also a great choice if you need to update yourself on Flexbox and Grid (like me).

You should already have a basic understanding of CSS as this course assumes you know responsive designs, so take the CSS Essentials course first!

HTML Exercises

Rithm School HTML & CSS basics exercises

W3School HTML Exercises

The exercises are broken down into categories like headings, paragraphs, formatting, links and more, so you can practice specific skills.

W3School HTML Quiz

Test your HTML knowledge with their quiz!

CSS Exercises

CSS Diner

Think you know how to use CSS selectors? Try CSS Diner and test yourself

W3School CSS Exercises

Like the HTML exercises, they’re broken down into categories – like border, font, lists, box model and more, so you can test yourself on specific skills.

W3School CSS Quiz

Ready to take on the quiz after exercises? Try it out here!

Project Ideas

General Assembly Dash

Walks you through step-by-step of how to add in your HTML and CSS and turn plain HTML into a pretty webpage. Great for those who are struggling to put the concepts together.

Create Your Own Project

Copy your favourite website or browse for one on SquareSpace Templates. They’re all mobile responsive, so you don’t have to come up with any designs.

Tip: Take one section – header, navigation, blog post, footer – build it in your own HTML and CSS. Keep doing this until you have a full webpage. Expand upon this to build a complete website.

Responsive Web Design Projects – FreeCodeCamp

Have a resource you love that’s not mentioned here, please let me know!