If you want to learn HTML and CSS you can do it with free resources. The web is full of free high-quality resources; the problem for a beginner is having a path. So I distilled the best free resources I know and I have added context to create a path with them.
The best overall resource I know is web.dev guides by Google:
Studying these three guides will give you the foundation of your knowledge. Maybe, you can warm up your brain by reading these all-in-one articles:
- A Blog Post With Every HTML Element by @patrickweaver
- A Complete Guide to CSS Concepts and Fundamentals by @taniarascia
This is the first step. The next one is writing code. There are some videos that you can follow along:
- HTML & CSS Full Course (2024) by @bytegradcom
- HTML / CSS Tutorial – Create an Order Summary Component by Madision Kanna
- Learn HTML & CSS – Full Course for Beginners by @perborgen
- CSS Tutorial – Full Course for Beginners by Dave Gray
These videos are very long; I suggest you follow one or two before moving on to the third step.
Practice
If you think that the second step is where you practice, you are wrong. Practice means something else.
Practice means:
- find a web page you like
- recreate it using your knowledge
- if you get stuck at some point, use Google search to find a solution
- if you can't find a solution, then ask to Claude.ai or ChatGPT.com
- if you are still stuck, ask for help in a community (for example Stack Overflow)
Iterate these steps web page by web page, changing the type each time (you can recreate pages from a corporate website, then others from an ecommerce website and so on).
Avoid falling into the Tutorials Hell
Many developers, myself included, fall into the Tutorials Hell.
Watching a video and following the teacher will not make you a developer, because it will not teach you how to think like a developer.
You have to develop projects on your own to build a developer mental model and learn how to solve coding problems. If at the beginning, when you get stuck, you think that you don't have enough knowledge, so it's best to follow new tutorials, please don't do that. Go ahead building your project.
Continuous Learning
As you develop projects on your own, you should continue to learn new concepts as well as deepen the ones you already know.
There are two resources that I think are the best for this purpose:
Kevin and Ahmad are CSS experts and are great to teach. You should learn from at least one of them.
Following, I list additional high-quality resources from which you can get value.
First, web.dev has also:
- Learn Images
- Learn Forms
- Layout patterns
- Component patterns
- Animation patterns
- Articles on some topics including HTML and CSS
Google Search Results
Like I said, when I get stuck, I use Google search in the early stage to find a solution. I don't always click on the first result; I look for specific sources on a case-by-case basis:
- if I need a solution to a specific problem, I look for results from Stack Overflow
- if I need to remember something, I look for results from W3Schools
- if I need to deeply investigate something, I look for results from MDN
- an alternative to W3Schools and MDN that I like is the Almanac section on CSS Tricks
Responsive Images
- How to think about HTML responsive images by Dan Cătălin Burzo
- Responsive Images in CSS by Chris Coyer
Forms
- A Guide to HTML & CSS Forms (No Hacks!) by Daniel Schwarz
- How to Build HTML Forms Right series by @austingil
SVG
- SSSVG
- CSS with SVG: Real World Usage by Craig Buckler
- Introduction to SVGs: A Beginner's Guide to Scalable Vector Graphics by @hunormarton
- Easy SVG Customization And Animation: A Practical Guide by Adrian Bece
CSS Fundamentals
- The CSS Cascade by Amelia Wattenberger
- CSS Selectors: A Visual Guide
- Practical Uses of CSS Math Functions: calc, clamp, min, max by Stephanie Eckles
CSS Flex and Grid
- What The Flexbox? by @wesbos
- Responsive Layouts, Fewer Media Queries by Temani Afif
- CSS Grid by @wesbos
- Building a Scrapbook Layout with CSS Grid by Michelle Barker
- Techniques for a Newspaper Layout with CSS Grid and Border Lines Between Elements by Marco Troost
- Using CSS Grid the right way by Violet Peña
Creativity
The following two YouTube channels are great for learning how to create creative components with CSS:
- Online Tutorials by Muhammad Irshad
- Code With Random by Adil Ahmed
while these articles are for general CSS animations:
- How to make CSS Animations by Patricia Silva
- Transitioning to Height Auto by Keith J. Grant
Custom Emails
Custom email development is a tricky task because email clients aren't as good as browsers. If you need to learn this skill, the following are great resources:
- Why Does Email Development Have to Suck? by Hristiyan Dodov
- My Wonderful HTML Email Workflow by @joshwcomeau
- Good Email Code by Mark Robbins
References and Examples
A reference is like a glossary. Earlier I have mentioned Almanac of CSS Tricks. Here are other useful ones:
- References by HTML Dog
- CSS Reference by Codrops
The following give you examples both on good and bad HTML code:
News
- 2024
- Old Dogs, new CSS Tricks by Max Bock
- 2023
Test Yourself
There are web apps that you can use to test yourself solving exercises. For example:
Recap
If you want to learn HTML and CSS:
- Build the foundation of your knowledge using Google guides
- Write code following other developers using YouTube videos
- Develop projects on your own
Then, keep learning using other resources that I have listed finding the ones that work best for you: maybe, you prefer written content over videos or an explanation style over another one.
Before You Go
- if you find this guide helpful, please share it so that I can put effort to create new ones
- if you find this guide very helpful, please donate (only) one dollar to me by PayPal so that I can put more effort to create new ones
Top comments (0)