This is super timely given a lot of the content we and other sites have been posting lately centered around learning, complexity, changing roles, and more. Sacha captures it nicely:
Sounds like a good goal. Let’s help by putting some responses in there!
I’ll be there in Seattle for the kickoff, giving a talk about how to think like a front-end developer. I’ve been working on it for ages, and I think I have a talk ready that helps set the stage for where we are at in the world of front-end development, through the lens of tons of other front-end developers I admire in this industry. I hope it’ll be an entertaining romp through all their minds and how they think.
The topic of how accessible it is for newbies and seasoned developers alike to learn CSS has been gaining steam as the complexity of the tools around it has become skewed more toward traditional programming. Rachel Andrew has much more to say about this in her post, HTML, CSS and our vanishing industry entry points. Robin also has thoughts on where and how to learn CSS in the modern age.
The question of how and where to learn 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 me dump a bunch of possible answers here and you can apply all those “well, that depends” caveats as you see fit.
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.
Jon Duckett’s is incredibly well-designed and approachable:
Jennifer Robin’s covers a bit more ground and is designed to be useful for either personal reading or classroom learning.
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.
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.
Prefer video? Jessica Hische and Russ Maschmeyer’s Don’t Fear the Internet is a super eight-part series that gets you going with HTML & CSS — it even delves into the all-important topic of typography.
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.
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 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:
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 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.
The way you actually learn is going to be 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 and know what to do.
And if they were taught be 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.
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 probably 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.
❌ “I’d like to be able to select an element based on if it contains another particular selector”
❌ “I’d like to be able to select an element based on the content it contains”
❌ “I’d like multiple pseudo elements”
❌ “I’d like to be able to animate/transition something to height: auto;“
❌ “I’d like things from Sass, like @extend, @mixin, and nesting”
❌ “I’d like ::nth-letter, ::nth-word, etc”
✅ “I’d like all the major browsers to auto-update”
Ouch. Oh well. I’m not sure how hotly requested all those actually are or how feasible it is to even implement them. They’re merely ideas that I thought we be useful in 2013, and as it turns out, I still do.
This time, instead of me making my own list, let’s have a gander around the internet at other people who have rounded up CSS desires.
In observing several sources of conversation around things people desire in CSS, these seem like the most common asks:
Parent queries. As in, selecting an element any-which-way, then selecting the parent of that element. We have some proof it’s possible with :focus-within.
Container queries. Select a particular element when the element itself is under certain conditions.
Standardized styling of form elements.
Transitions to auto dimensions.
Fixed up handling of viewport units.
Notably, what’s interesting to me is the lack of people asking for style scoping. It came up a little, but not a ton. It seems like such a big part of the CSS-in-JS conversation, so I’m surprised to see so little mention of it in the context of general “what does CSS need?” conversations.
Jen Simmons asked what’s on our lists
Making a wish list of all the things I’d love to see happen in the world of CSS in 2019. What’s on your list? Things you want to learn? Problems you want help solving? New properties you need? Design ideas you wish you could code? Resources you’d love to have? Name your desire.