When I first started learning frontend development, I was determined to avoid JavaScript.
I found it confusing – I didn't understand anything about how the DOM worked and I didn't think I'd use it that much anyway. I already knew HTML and CSS and that's pretty much all you need for designing websites, right?
Much to my dismay, I soon discovered that not only is JavaScript very much needed for designing websites but almost all websites depend on it.
JavaScript is used in some form or the other by 97% of all websites on the internet. There's just no getting away from it.
Since avoiding it didn't work, I decided to tackle the problem head on. I made an effort to write at least one line of JavaScript code everyday and started building applications to learn more.
To my surprise, once I got started I realised JavaScript wasn't the monster I thought it was. I was even - dare I say it - enjoying learning JavaScript.
If you're trying to move from HTML and CSS to JavaScript and you're finding it difficult like I was, then this is the article for you.
The reason JavaScript seems overwhelming at first is because there's a lot to learn.
So this article will serve as a high-level beginner's guide to learning JavaScript. I'll narrow things down, cover what JavaScript is and what it's used for, and recommend some courses to help you start your JS learning journey.
Table of Contents
- What is JavaScript?
- What is JavaScript Used For?
- How to Write JavaScript Code
- JavaScript Projects for Beginners
- JavaScript Tutorials for Beginners
What is JavaScript?
JavaScript is a programming language that makes web pages interactive. This involves everything from changing colors to collecting user input and passing it to a server.
JavaScript is used in conjunction with HTML and CSS to build fully functional webpages.
A common analogy is to think of a webpage as a human body: HTML is the skeletal structure responsible for how the body is formed, CSS is the skin and determines how the body looks, and JavaScript is the muscle that allows the body to be functional.
With the advent of JavaScript frameworks, a lot of modern websites are heavily reliant on JavaScript and won't work without it.
What is JavaScript Used For?
JavaScript is a very complex language that can be used for anything from client-side rendering to creating large-scale applications.
We'll be focusing on the more common uses of JavaScript when building webpages:
1. JavaScript lets you manipulate HTML and CSS
You can use JavaScript to change the HTML of a page by adding or deleting elements from the DOM or by updating element attributes. You can also use it to change the styling of an element.
Most interactive actions on a webpage such as toggling a drop down menu or displaying a modal are usually done by using JavaScript to manipulate HTML and CSS as needed.
Recommended reading: How to Manipulate the DOM - A Beginner's Guide.
2. JavaScript lets you carry out mathematical operations and algorithms
JavaScript is a programming language and can be used to compute complex mathematical equations and algorithms.
This allows us to carry out calculations on the client-side such as determining the number of characters in a form or getting the height of an element from the top of the screen.
Recommended reading: How to do Math in JavaScript with Operators.
3. JavaScript lets you manipulate complex data with data structures
You can use JavaScript to handle data structures in different formats such as arrays or objects.
There are multiple operations you can do on these data structures such as adding and deleting elements or filtering and sorting. This is widely used in real life situations to manipulate user data.
Recommended reading: JavaScript Data Structures.
4. JavaScript lets you detect and respond to user interactions on a page
JavaScript uses event listeners such as scroll or click to monitor how the user interacts with a page. These listeners are used to carry out certain functions based on the event.
For example, you can use the onClick event listener to display an element when a user clicks a button.
Recommended reading: Understanding Events in JavaScript.
5. JavaScript lets you communicate with a server
You can use JavaScript to communicate with a server or a database by sending and receiving data.
For example, when a user submits a form on a webpage, you can create a fetch request to POST the data in that form to a server and process the returned response from the server.
Recommended reading: How to Make a GET Request and POST Request in JavaScript
How to Write JavaScript Code
You add JavaScript to a basic webpage as a script tag in an HTML file.
The code can be written directly in the script tag or imported as an external .js file using the src attribute.
<!-- using the script tag -->
<html>
<head>
<title>Home</title>
<script>
// JavaScript code goes here
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
<!-- importing a JS file -->
<html>
<head>
<title>Home</title>
<script src="main.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
How to Run JavaScript Code
JavaScript is a language that runs in the browser. Most browsers are equipped with developer tools and these tools contain a panel called the Console.
The console is a runtime environment for JavaScript code. This means you can write JavaScript code directly into the console and see the results right in your browser.
To open the console, navigate to the developer tools in your browser on your laptop or desktop. There are different ways to get to the developer tools depending on which browser you're using: Chrome, Safari, Firefox or Microsoft Edge.
You can also use online code editors to run JavaScript code. Popular ones include CodePen and CodeSandbox.
Online code editors are a good way to get familiar with interacting with the DOM using JavaScript, as you can see all the changes happening to your project in real time.
For example, in the Pen below, I'm using JavaScript to change the text of an element with the id attribute name.
For a more in-depth look into everything about JavaScript, checkout The JavaScript Handbook.
JavaScript Projects for Beginners
When it comes to JavaScript, much like with everything else, practice makes perfect. The best way to learn JavaScript is to build projects, and there's no limit to projects you can build using JavaScript.
A good approach is to build things that solve problems. For instance, I was having trouble copying the content from a Word document into an HTML list, so I built a Text-to-HTML Converter.
Building applications is also a good way to understand basic concepts in JavaScript and get some real-life experience with practical application.
These are some resources for ideas on projects to build when learning JavaScript:
JavaScript Tutorials for Beginners
Aside from building projects, it also helps to follow a guided tutorial when trying to learn JavaScript.
Most courses attempt to cover all the important concepts you need to know, and some provide a certification at the end to help improve your résumé.
Here are some online courses and curricula that provide a good introduction to JavaScript, and a few that cover more advanced concepts.
1. freeCodeCamp
If you have no prior coding knowledge, freeCodeCamp is an excellent place to begin your tech journey. They have a variety of courses, all explained in a simple-to-grasp format.
There is also a large online forum which makes it easy to receive help or feedback from other people while taking the courses.
Recommended course
Suited for: Beginners
2. Udemy
Udemy is a paid online platform that offers courses for a wide range of skills. Most of the courses are short-term, and can be learned in your free time.
Recommended courses
Suited for: Beginner and intermediate learners
3. Udacity
Udacity is a tech-focused learning platform that offers Nanodegrees for their courses. Courses can take anywhere from 2 to 6 months, depending on how many hours you're able to commit. They're a great way of gaining in-depth knowledge in a skill relatively quickly.
Recommended courses
Suited for: Intermediate developers
4. Zero To Mastery
Zero To Mastery offers practical courses for people looking to advance their career. If you're looking to apply for a job or start a career in tech without any prior experience, it's helpful to learn a course that offers real-life usage. This is especially useful for the interview stage.
Recommended courses
Suited for: Experts and professionals
Conclusion
Despite how it seems, JavaScript is one of those things that gets easier with practice. Hopefully, this article will be a helpful starting point on your journey to JavaScript mastery.
If you found it useful or you have any other questions, feel free to reach out to me on Twitter or send me a message on my website.
Top comments (1)
This was quite a good read for me. As a newbie, who is still overwhelmed by how much I need to learn, breaking down JavaScript like this was very helpful.
Thank you Jemima.