- Videos
- Courses
- Practice
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.