It is important to learn HTML before JavaScript if you are going to become a front-end developer. HTML is right behind JavaScript in terms of popularity, with 56% of respondents stating they use it daily.
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.
But HTML is the technology the web is built on and understanding it is crucial to your long-term success.
Let’s dig a bit deeper to understand why learning HTML before JavaScript is so beneficial and how it can have massive long-term implications.
Should you learn HTML before Javascript?
We recommend learning HTML before Javascript. HTML is the foundation of web development and structures the content on web pages. It is the markup language used to create the layout of a webpage, including headings, paragraphs, images, and links.
Javascript, on the other hand, is a programming language used to add interactivity to web pages. It is used to manipulate the HTML and CSS (Cascading Style Sheets) of a webpage, create animations, and respond to user input.
To use Javascript effectively, it is important to have a solid understanding of HTML since it provides the structure and content that Javascript manipulates. Without knowledge of HTML, it can be difficult to understand how Javascript interacts with web pages.
Therefore, it is recommended to learn HTML first before diving into Javascript. Once you have a solid foundation in HTML, you can then move on to learning Javascript and how it can be used to add interactivity to your web pages.
Do you need to learn HTML before JavaScript?
Historically web pages have been built with pure HTML, CSS, and JavaScript. They are the three musketeers of web development.
- HTML is a markup language that gives a web page structure.
- CSS is a styling language that gives style to your markup.
- JavaScript helps make your HTML and CSS interactive.
Without knowing anything about HTML it is almost impossible to use JavaScript in context.
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.
You can use HTML and CSS without JavaScript, but the results aren’t great. It is a good way to practice the fundamentals but won’t get you very far in terms of becoming job-ready.
Without learning HTML you are going to find it incredibly difficult to get a decent developer role.
Overall, before modern frameworks, learning HTML before JavaScript was incredibly important.
JS frameworks have changed the game
JavaScript frameworks like React have changed this approach. Its simplicity and effectiveness have made React absolutely worth learning.
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.
If you intend to just use React, you may not need to learn HTML before JavaScript. The introduction of JS frameworks and libraries has lowered the need to learn HTML before JavaScript. However, I highly advise against this.
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. You wouldn’t learn HTML before Python if you wanted to be a backend developer, so following the correct process is important.
Why it’s important to learn HTML before JavaScript
As someone trying to learn JavaScript quickly, it can seem like a good idea to skip straight to it. Missing out on HTML and CSS along the way.
However, there are plenty of great reasons to make sure you understand HTML before moving on to JavaScript. Let’s take a look at a few of them below.
1. Context
Learning HTML before JavaScript gives you a better understanding of how the main front-end technologies fit together. It provides the scaffolding on which your CSS and JS rest upon.
It’s far more difficult to grasp the things JavaScript can manipulate if you have never used them or learned about them before. It’s hard to generate a form or an image if you don’t know the relevant attributes these elements need.
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.
2. Depth
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.
Skipping HTML and jumping straight to JavaScript is a symptom of this.
Taking your time to learn HTML, then CSS, and then JavaScript will put you in good stead later down the line. Go vanilla and avoid any time of library or framework until you are clued up on the fundamentals of each of the aforementioned technologies.
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.
4. Accessibility
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.
Creating accessible pages is incredibly difficult to do if you do not pick up HTML before JavaScript.
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.
5. Motivation
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.
Diving straight into JavaScript means you don’t have this cushion. You can sometimes be hitting your head against the wall for hours trying to solve a single issue.
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.
Learning HTML, CSS, and JavaScript
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.
Just remember becoming a software engineer is a long process and isn’t something that happens in a week. Be patient and take your time.
Conclusion
Overall, you should learn HTML before JavaScript if you intend on getting a good job. There are more than 40,000 front-end developers in the United States and I can guarantee every one of them took the time to learn HTML before picking up JavaScript. You should too!
Resources
Nathan Britten, the founder and editor of Developer Pitstop, is a self-taught software engineer with nearly five years of experience in front-end technologies. Nathan created the site to provide simple, straightforward knowledge to those interested in technology, helping them navigate the industry and better understand their day-to-day roles.
