The question of how and where to learn HTML & CSS is a highly reasonable thing to ask. The answer depends on all sorts of things: how serious you are, your current foundation, what other resources are available to you, what you hope to do with what you learn, and how much time you have, among probably a zillion other things.
Let’s look at a bunch of options and you can choose the ones that feel right to you.
You could read a book.
There are a ton of books out there that cover HTML and CSS (and often together). They probably all do a fine job. There’s no need to chronicle all the choices here. These two are my personal recommendations. You probably don’t even need both.
Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics
Jennifer Robbins’ covers a bit more ground and is designed to be useful for either personal reading or as a classroom textbook.
You could go through a free online course or guide.
Frontend Masters
Frontend Masters has a very in-depth bootcamp they give away for free. It’s 21 hours of high-quality video learning! If it clicks with you, you can sign up for the more advanced paid courses.
freeCodeCamp
freeCodeCamp is also (wait for it) free and has a step-by-step process to it where you don’t just watch, there are tasks for you to complete.
Khan Academy
Khan Academy has an Intro to HTML/CSS: Making webpages course that’s packaged in a super cool format. It’s like video in that you get to hear the instructor talk you through the learning, but what you see is a real live text editor and real-live output. Sometimes the teacher is controlling the code, and then sometimes it breaks for challenges in which you take over and edit the code yourself.
Don’t Fear the Internet
Jessica Hische and Russ Maschmeyer’s Don’t Fear the Internet is an eight-part series that gets you going with HTML & CSS — it even delves into the all-important topic of typography.
Through short tutorial videos, you’ll learn how to take a basic WordPress blog and manipulate the CSS, HTML (and even some PHP!) to match your aesthetic.
Interneting is hard
Oliver James has a wonderful online course called Internetting is Hard (But it doesn’t have to be).
We designed HTML & CSS Is Hard to be the only introduction to HTML and CSS that you’ll ever need. If you put in the effort to read every section and write every code snippet, this tutorial has the potential to replace hundreds or even thousand of dollars worth of online courses and live training.
Scrimba / Intro to HTML
Eric Tirado has an Intro to HTML course on Scrimba, which is also a neat platform in that Eric’s voice guides you through the course, but visually it’s a combination of slides with a real code editor and preview.
You could read through all the posts in our Beginner’s Guide.
We have a guide (a collection of articles, videos, and links) called Just Starting Out with CSS & HTML. I hope there is stuff in there that can help kickstart or augment your early learning because that’s the intent.
You could find and take a paid online course.
I often join gyms because the accountability of paying for something gets me to do it. I know I can do situps, pushups, and go for a jog for free, but the gym membership makes a thing of it. Well, same could be said about paying for a course on HTML and CSS.
These are broad generalizations, but good places to start:
- Beginners: Treehouse, Lynda.com
- Intermediate: Design+Code, Udemy, Udacity, Pluralsight, Coursera
- Advanced: Frontend Masters, Wes Bos
You could go to an in-person code school or coding bootcamp
If you wanna put even more skin in the game, you could consider literally going to school. If you don’t have a college degree, that’s an option, although you’ll be looking at a broad education rather than a ticket to leveling up your web design and development skills alone. I’m a fan of that just for the general mind-broadening it involves.
But assuming you’re going to go to a coding-specific school…
- There are options that exist in single cities. I know someone who went to the All-Woman’s coding bootcamp Hackbright in San Francisco. There are places like Actualize in Chicago, Center Centre in Tennessee, and HackerYou in Toronto.
- There are bigger outfits like, Flatiron school (with campuses all around the U.S.) and General Assembly (with campuses all around the world).
There are probably dozens — if not hundreds — more, so this is more to inform you of the possibility of schooling. You don’t even have to go to a physical school since plenty of these offer online courses, too (but with the advantage of live instruction and cohorts). For example, LambdaSchool has the novelty of being free to start and paid later in the form of letting them take a portion of your salary after you get a job in the industry.
You could practice on CodePen.
Not every second of your learning should be strictly following some course laid out by a book, class, or teacher. It wouldn’t even be that way if you tried. You might as well embrace that. If something tickles your muse, go play!
I hope CodePen is a rewarding place to do that, making it both easy and useful, while providing a place to connect with other folks in the field.
You could build a personal site and learn what you need to get it done.
That’s how absolutely countless developers have cut their teeth, including me. I wanted a personal website years ago, and I struggled through getting a self-hosted WordPress site online so I could have full control over everything and bend it to my will. Once you have an actual website online, and you know at least some people are seeing it, it gives you all the motivation in the world to keep going and evolve further.
Equally as common: build a website for your band. Or a friend, friend-of-a-friend, or the business of your mother’s business partner’s sister. When you have a real project (a real website on the live internet) you have that feet-in-the-fire feeling that you’re responsible for something real that real people are going to see and you have to get it done and do a good job. That works tremendously well for some people.
You will actually learn by doing a combination of all this stuff.
People are obsessed with asking musicians if they’re “self-taught”. Like, if they are, their amazingness triples because it means their creative genius was delivered by a lightning bolt at birth. They don’t need anyone else to learn; they merely look at those guitar strings or piano keys and know what to do.
And if they were taught by a teacher, then, well, that’s all out the door. If they are good at all, then it’s because the teacher delivered that to them.
Total nonsense.
People learn anything — music and web development included — inside a hurricane of influences. Let’s stick with music for a second. Learning to play comes in many forms. You learn by listening to music an awful lot. You can do fundamental practice, like finger exercises and going up and down scales. You can learn to transpose chords on a chalkboard. You can watch YouTube all day and night. You can sign up for online courses. You can go to local jams to watch and play along. You can join a band. You can take lessons from someone advertising on Craigslist. You can go to a local music school. You can read books about music.
You get the idea.
You can and will do all of that. With learning web design and development, getting anywhere will involve all sorts of ways. There’s no silver bullet. It takes bashing on it lots of different ways. There’s no requirement to sprinkle money on it, but you do need multiple angles, time, and motivation.
This site has lots to read and watch!
#58: HTML & CSS – The VERY Basics
Beginner Concepts: How CSS Selectors Work
The Moment CSS Started Making “Sense”
CSS Basics: Fallback Font Stacks for More Robust Web Typography
CSS Basics: Styling Links Like a Boss
CSS Basics: The Second “S” in CSS
CSS Basics: The Syntax That Matters & The Syntax That Doesn’t
CSS Basics: Using Fallback Colors
A Funny Thing Happened on the Way to Learning JavaScript
Absolute, Relative, Fixed Positioning: How Do They Differ?
CSS Basics: Using Multiple Backgrounds
Learning to Learn
The Snowballing of Practice
Web Technologies Hanging Out Together
Web Technologies and Syntax
Go forth and build websites, the ol’ ShopTalk mantra!
Really loving the content being made this year.
https://www.freecodecamp.org/ is by far and away one of the best online courses I’ve come across so far.
Yes of course! Let me update this post because that deserves a prominent spot.
I second this. It’s a nice, challenging format, too.
For Russian speakers (and those who just visit websites out of curiosity) there are decent interactive lessons on “HTML Academy”. But you’d better know the orginal language at least a bit. Likewise anyone who want to really know coding must know English somewhat.
I started with books and Geocities. Followed the tutorials in the book and learned how to FTP code to a server.
I also second Khan Academy. My daughter’s use it to learn code and love it.
I’d also like to mention YouTube. I’m biased to YouTube because that (combined with Codepen) is my teaching platform of choice. However, I use it all the time for learning, too. I am a visual learner and it’s accelerated my understanding of many projects/topics/languages.
I recently started a channel called, The Stack, to be a web dev educational channel: https://www.youtube.com/channel/UCzDpCbn_eCsor93LHFSIGFA. The focus is HTML, CSS, and JavaScript. I think it could be helpful for a lot of people. Hopefully, this turns from curated content to original content in the future.
This is a great post and topic. Keep up the awesome work, Chris!
Great list of resources and tactics!
I’ve created Frontend Mentor if anyone would like to practice building projects with designs to work to.
Hope it helps!
Is anyone else a product of Neopets? I started out building Pet Pages and I know there are others who did so too! There was a massive community of people willing to teach you how to do it, too, and writing guides and tutorials about coding.
Hello Chris what happened with https://internetingishard.com/ ?
I don’t know! I swear it worked when I wrote this. I’ve made a note to check in a week and if it’s still down I’ll remove it.
Hey Chris, the Learn HTML and CSS Correctly course is worth mentioning here.
https://ilovecoding.org/courses/htmlcss2
Full disclosure, I created this course
Team Tree House is <3 Such great educationists and their way of teaching. Quiz and code challenge adds fun to learning. I recommend it to almost everyone who asks me to learn Front-end Development professionally.
This is a great article – well organized and well presented. I am a credentialed teacher and a professor of art teaching web design to beginners and have a background working in the industry …that goes back to before the web became a graphical sensation.
Tip for those learning AND instructing:
Watch your assumptions. Everyone has assumptions (UX 101). Know yours. You may think your friend John you are helping knows the difference between the web and the internet but they might not and yeah, things like this matter.
Today I find this especially true with many students (including my college students) who often do not even walk in the door knowing the difference between IE and Chrome, a web app and a web site, an operating system and a browser, or even the idea of a ‘class’, etc. Starting out from a bigger picture of things makes a huge difference in a student’s ability to acquire sufficient skill and knowledge to both develop and design for the web… or anything else.
Coming from working in the industry on design and engineering teams which always included psychologists, I knew theory re this but now as a teacher, I am experiencing this in action even more directly. Thank you for this great succinct article.
Thanks for the advice
I have learned my courses on free platforms so far. Like Google , YouTube.
There were lots of people who share their knowledge with others through wonderful Free Platforms. Hope lot of people come forward and share their knowledge also.
Hope I can get along with frontend
I think you should add the MDN-Learning-Section as well. :)
A good combo is this free online book with videos and interactive exercises: https://htmlandcssguidebook.com
MDN Web Docs are my favorite: https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer
Hello Chris,
Thank you for putting up this great collection.
I have bookmarked this page.
Not sure if you are aware of the following site:
https://learn.shayhowe.com/html-css/
I have used the above site to train interns and new joiners in my company.
Trust you will find this helpful.
I have been also looking for practical hands on workshop to learn HTML css (learn by doing).
Let me know if you are aware of any such program?
I have been following you and I have learnt a lot of css tricks from your site. So Kudos to you and your team.
Hey Chris, the Learn HTML and CSS Correctly course is worth mentioning here.
https://www.behelpme.com/learn/
Full disclosure, I created this course
Glad that I came across such an important and productive content, I really appreciate your effort and I will definitely share it
A new and fun way to learn CSS – https://cssbattle.dev/learn