Transitioning from HTML and CSS to JavaScript Plus 14 Resources
Table of contents
Introduction
If you are starting your coding journey with HTML and CSS, transitioning to JavaScript can be challenging. This article will give you a brief introduction to JavaScript, discuss how different it is from HTML and CSS, why you may find it challenging at first, and provide some resources to help you get started.
Prerequisites
You will need to know basic HTML and CSS to get the most out of this article but do not worry if you don't, we’ll briefly talk about them.
Let’s dive in 😊
What are HTML and CSS?
HTML and CSS are the core building blocks of the web. They are used together to create websites. HTML defines the structure of the webpage and CSS defines the look and feel. Usually, people who want to start a web development career study HTML, CSS, and JavaScript (in that order) at the very beginning of their journey.
Check out my previous article for more information on the fundamentals of HTML and CSS.
What is JavaScript?
JavaScript is mostly known as the programming language of the web. The Mozilla Developer Network web documentation defines it as "a scripting or programming language that allows you to implement complex features on web pages".
After a webpage has been structured and styled with HTML and CSS, JavaScript adds interactivity. It can update and manipulate content already structured with HTML and CSS, perform calculations, and validate data. For example, submitting a form and receiving a thank you message on the webpage could be JavaScript at work. Some unit conversion websites may use JavaScript to perform calculations as well.
How is JavaScript different from HTML and CSS?
JavaScript is a programming language. HTML and CSS however are controversial when it comes to defining them as actual programming languages. This debate has been never-ending among programmers and to be fair, both sides of the argument may be valid depending on how you look at it.
So what is a programming language? A programming language allows you to instruct a computer to perform specific tasks. It is a way for programmers to communicate with computers, just like the English language allows me to communicate with you through this article.
Most languages considered to be programming languages have similar syntaxes (structure) and semantics (meaning). You can perform calculations and write logic that manipulates data with programming languages. HTML and CSS do not exactly allow you to perform calculations or manipulate data (although some parts of CSS allow you to perform some form of calculations). Their syntax and semantics also differ from most programming languages.
Why can the transition be challenging?
The challenges in the transition from HTML and CSS to JavaScript lie in the understanding of their differences. HTML and CSS can be easy to learn. You do not have to understand data structures, implement logic, perform calculations (that are, of course, not CSS calculations😁), or manipulate data. JavaScript on the other hand requires you to know and understand data structures, and how to conditionally perform instructions, among other things that can be overwhelming at the start – especially if all you know about coding is HTML and CSS.
It is not impossible to learn or even master JavaScript. It will take consistent learning and applying what you have learned through building projects. Solving and participating in coding challenges are also good ways to help you learn quickly.
Resources to get you started with JavaScript
Here are some resources to help you get started with and practice JavaScript. My personal favorites are the Scrimba JavaScript course for getting started and Frontend Mentor for participating in challenges.
Video tutorials
Scrimba - Learn JavaScript for free
JavaScript Crash Course For Beginners
Reading tutorials
The Modern JavaScript Tutorial
Cheatsheets
JavaScript Cheat Sheet & Quick Reference
Practicing and participating in challenges
Learn to Code with 10,000+ Interactive Challenges
Conclusion
Getting started with JavaScript when you only know HTML and CSS can be challenging. This article discussed the differences between HTML, CSS, and JavaScript. We also looked at why the transition from HTML and CSS to JavaScript can be challenging and provided beginner-friendly resources that can help you get started.
Thanks for reading!