Start at the beginning: the importance of learning the basics
If you're an early-career developer, Twitter is overflowing with people tweeting great tips -- and some absolute rubbish -- about how to improve your skills and become better at your job. I've spoken to more than a few people who've asked me, "how should I start?". And I tell everyone the same thing: learn the basics.
However you learn best -- book, video, interactive tutorial -- you need to learn HTML and CSS before you can call yourself a web developer. I don't think that's a particularly controversial statement.
Where I started
I started building websites when I was ten years old. I was lucky enough to grow up with computers in the house, and had a book called "Make Your Own Webpage" which taught me the basics of HTML (as it was in 1999). You can even read it on archive.org.
A few years later, I built my personal website full of webrings and stolen gifs with the help of Lissa Explains It All, the ultimate HTML bible for anyone on the internet in 2002. (It's still online today, but pretty out of date!)
Fast-forward through LiveJournal, Greymatter, Blogger, Wordpress, pretty much any pre-2010 blogging site/CMS framework you can imagine -- and now I'm building websites (or web apps) as my actual job, using React. A fair bit has changed -- but not as much as you'd think.
I'm telling you this because I still use the knowledge I learned when I was ten every day at work. HTML tags are still HTML tags, they're still written much the same way -- HTML5 got rid of some of the ones I used to use (pour one out for
marquee) and introduced some new ones, but the fundamentals are still the same. Most of the websites that I built in 1999 would still render today.
Frameworks serve a purpose, but they don't replace the basics
Besides, in a few years we'll probably using the newest, hottest framework and React will become the butt of jokes in the way that Angular has. Or you'll land a job at your dream company and find they use Vue, or some state management library from 2011 which has no documentation. I'm not saying don't learn React -- I'm saying learn the basics first, so you can apply your knowledge to all manner of other frameworks and tools.
The same goes for CSS. There was a particularly bad take floating around Twitter recently where someone suggested that junior developers should skip CSS and just learn Tailwind. I have used Tailwind, and I dislike it for various reasons, but I can see use cases for it such as quick prototyping and a set of nice defaults in the absence of specialist design. However, it doesn't and shouldn't "replace" CSS. Tailwind is literally just a library of someone else's CSS classes, except you have a separate class for nearly every rule instead of writing all your rules together in reusable classes for each component. Instead of learning hundreds of class names, why not learn the CSS rules they translate to and write one CSS class with multiple selectors? When you go to your next job or project and find they don't use Tailwind, it'll slow you down as you need to learn the selectors all over again.
I'd recommend going in the order HTML, CSS, JS. That way, you can build something in HTML, add CSS to it as you learn it, and finally soup it up with your new-found JS knowledge.
If you're a backend engineer who only touches the frontend occasionally, you don't need to go too deep -- but you need a decent grasp of which element does what (semantic HTML) so you can make sure you're using the right elements and not creating any accessibiliy problems.
I usually recommend these tutorials which provide a really nice overview of different types of elements. Try using some of the tags in Codepen, and watch things render before your eyes.
Learn from how other people do it. Web pages are so bloated with scripts and analytics these days that it's hard to just right-click and "View Source" in the same way that I did back in the early 00s -- I learnt a lot of HTML by nicking other people's code! But you can use browser dev tools to look at the structure of the page (the Document Object Model or DOM, as it's known):
Codepen comes in useful again here to easily write and apply CSS styles to HTML, and have it update instantly.
Again, MDN has a great beginners' guide. CSS Tricks is my favourite place for useful CSS knowledge (I referred back to their Flexbox cheatsheet for YEARS) and really clearly written guides.
- CSS basics -- MDN
- CSS Almanac -- CSS Tricks -- a guide to nearly every selector and property in CSS
- CSS Tricks guides for in-depth info
- CSS fundamentals on egghead.io by Tyler Clark (video)
You want to start with vanilla JS. Having a solid foundation in that will make it easier to use frameworks and libraries in the future.
Besides the obligatory MDN article, these resources have been recommended by folks on Twitter - there are more suggestions in the replies.
- Wes Bos's Beginner JS Notes & Reference
- Wes Bos -- 30 Day Vanilla JS Coding Challenge
- Vanilla JS Academy (structured course)
No mentions yet.