It’s always tempting when learning something new to try and run before you can walk.
The urge to build more complex apps can lead you to cut corners early on but this won’t help in the long.
It is the technology the web is built on and understanding it is crucial to your long-term success.
- HTML is a markup language that gives a web page structure.
- CSS is a styling language that gives style to your markup.
Vanilla JS interacts directly with the DOM and uses an element’s ID or Class to manipulate it. Without it, web pages would have just remained static and we’d be stuck with every page looking like it was designed 20 years ago.
Without learning HTML you are going to find it incredibly difficult to get a decent developer role.
JS frameworks have changed the game
These frameworks abstract away the interaction with the DOM so you don’t necessarily target specific elements using IDs or classes.
Instead, you import, render, and modify components as needed, rather than directly manipulating HTML markup.
UI libraries like Material UI allow you to import entire components without ever having to write a line of HTML.
There will always be times when you need to debug components or understand the way a component will present itself. Without knowing HTML it’s incredibly difficult to understand how these components will render. Or how the different attributes can affect usability.
Getting past technical interviews will be tough if you can’t even answer basic questions about HTML and CSS.
Learning to code is a process and skipping HTML in favor of speed won’t pay off in the end.
A solid understanding of HTML helps you to put things into context when you move onto the more complex programming concepts that present themselves in JS.
Entry-level software engineering roles will still pepper you with technical questions throughout the interview process.
A solid understanding of HTML and CSS is the absolute minimum amount of knowledge required in these situations.
In interviews, the questions tend to progress in difficulty. It’s going to be hard to prove your worth to an employer if you can’t discuss the benefits of semantic HTML or explain how you’d lay out a simple web page.
Studying HTML before JS gives you a greater depth of knowledge to be able to show off what you know. You will be able to talk more fluently about front-end concepts with HTML in your back pocket, so don’t skip it.
3. Going Vanilla
With most jobs demanding some sort of React or Vue knowledge, it’s easy to see why people are so keen to jump into frameworks. The same goes for CSS frameworks like BootStrap and Tailwind CSS.
So many developers want to build things as quickly as possible that they don’t take time to learn the underlying technology.
Remember learning to code is a marathon, not a sprint. Don’t take shortcuts early on and you’ll have a better holistic understanding of web development in the long run.
As you become a more experienced developer, accessibility will come up on your radar time and time again.
Google puts a lot of weight behind accessibility. They even include Lighthouse, their accessibility tester, in the Chrome developer tools. It has also become increasingly important for SEO, with accessible sites doing better in the search rankings.
On a personal level, you also want to create products that can be used by everyone, regardless of their background.
There are tonnes of HTML attributes that help with screen readers and other products designed specifically for accessibility. The way you choose to lay your site out also impacts it greatly.
You need to understand the basics of HTML to be able to give your users the best experience possible.
You are going to need a lot of motivation when learning to code, especially if you go the self-taught route.
One of the great things about HTML and CSS is instant feedback. Simply write a few lines of markup, stick a class on it and you have created something out of nothing.
These easy wins are important early on and will keep you hungry when learning more difficult concepts.
Appreciating the process and moving through each stage properly will give you the tools you need later on. It helps with your critical thinking and makes you more technical-minded.
Overall, this helps with your motivation in the later stages of learning to code.
One of the best resources on the internet is the Front-End Developer Roadmap on GitHub. You don’t have to follow it exactly but it’s a fantastic outline of the things you should get familiar with on the journey to becoming a front-end engineer.
I’ve provided a screenshot of it below but check out the link above for the full version. It’s a fantastic way to keep on track when learning.