You’re going to start by learning two computer languages: HTML (a markup language) and CSS (a stylesheet language). Every page you see on the internet uses them! There’s a lot of really cool languages you can use to complete different tasks, but for Web Development, you’ll start by focusing on HTML and CSS, and later learn more advanced languages.

HTML is used to create the structure of a webpage – the paragraphs, headings, forms, bulleted lists, images, etc. CSS is used to design the page – where are the paragraphs going to go? What’s the font-size of the heading? What’s the width of the image? What background-color will the navigation bar be? etc…

HTML & CSS Analogy

Imagine you are a professional developer opening your own office in downtown Manhattan, New York. After weeks of hiring construction workers to help build the office, you drive past it on a cold fall morning, and see the wood frame of the building emerging out of the ground. You can start to see the outline of your soon to be masterpiece! This is the html, the structure. It includes all the pieces you need, but it’s only a light outline, and not everything is put together yet. From this point on, it’s all about decoration and positioning. What color walls are you going to use? Where is the desk going to go in the office? This is the CSS, the design.

Still confused? It’s okay, I’m here to point you in the right direction. The resources provided will go in much more detail!

9 Curated Resources

This course is on sale right now, and it’s honestly a great best values. It has 30 hours of content, it’s curriculum covers through Javascript and jQuery – all the way to Bootstrap and WordPress (the two things I’d recommend learning after HTML and CSS anyway). I believe it comes with a few other things like free Bootstrap themes, free webhosting, and a free e-book too.

Internetingishard - HTML & CSS

free, Text-based Course

One of the most beautiful looking courses I’ve seen, and the knowledge it presents is just as high quality. Explains a lot of the fundamentals that other courses do not, and uses great custom imagery to better get the points across

Progate - HTML & CSS

free, Interactive Course

An alternative to Codecademy. Progate goes a little more in depth with the content in my opinion. There’s around 16 hours of HTML & CSS material and it has a really nice user interface!

Codecademy

free, Interactive Course

Probably one of the most popular platforms right now for learning coding. You learn to code in an online editor as they explain each part of code, and give you practice problems. They have a couple of other web development courses so check em’ out!

Most people don’t know Khan Academy teaches stuff besides your basic high school and college math, but they have a HTML and CSS course! Sadly it’s not Sal teaching it (the usual voice you hear with most Khan videos), but this teacher does a great job at explaining everything. The course has an online editor attached too for practice problems!

w3schools

free, Reference Sheet and Guide

Pretty much anything you end up Googling, w3schools will have an answer. It is a full, very detailed guide for HTML and CSS. It also serves as a good reference sheet, so leave it around incase you ever want more documentation on something web dev related.

CSSReference.io

free, Reference Guide

Explains all the most popular CSS properties. Very similar to w3schools except presented in a slightly different way. Both have their strengths. This may be better for learning while w3schools may be better for quick referencing.

Learn.ShayHowe

free, Written Course

If you’re not much of a video course girl or guy, then here is a very well designed and informative HTML and CSS course. Reads kind of like a textbook.

This is a book I’ll always have on the shelf at the office. It is BEAUTIFULLY designed. This book must of won an award or too for book design. It’s content inside is just as good though, and is pleasant to read. Great if you prefer to learn through physical books.