Now that we have learned the fundamentals of HTML and basic CSS, we will move on to the next crucial step in web development: learning JavaScript. JavaScript is a programming language that allows us to create dynamic and interactive web pages. It enables us to add functionality such as form validation, interactive sliders, animated graphics, and much more. By learning JavaScript, we can enhance the user experience and make our websites more engaging and responsive.

For front-end developers, there are two aspects of JavaScript they should learn. The first part is JavaScript itself, and the other part is the DOM API.

JavaScript - The Basic Parts

In the first part, we will cover the basics of JavaScript, including its syntax and general programming concepts.

JavaScript syntax and structure

Since we are not covering a wide range of topics, this guide will use just two sources for learning. One is MDN, and the other is javascript.info.

JavaScript Tutorial by MDN 🆓

If you open this tutorial, you will see that HTML and CSS are listed as Prerequisites. We will ignore them for now since we are focusing on learning JavaScript for back-end development.

Reading these two modules is necessary for us.

• JavaScript first steps

• JavaScript building blocks

pay attention that each module has its own sub modules which you should read and learn from.

The Modern JavaScript Tutorial by javascript.info 🆓

Don't panic yet. This website's resources are extensive, but for now, you only need to focus on five modules. Read them thoroughly and understand what you are learning. Don't forget to practice everything you learn.

• An introduction

• JavaScript Fundamentals

• Code quality

• Objects: the basics

• Data types

DOM And JavaScript DOM Api

After learning the basics of JavaScript, we need to learn about the DOM. DOM is the data structure that represents the web page you are viewing. It is an interface that allows you to view, change, or listen to events that happen there. Before we go deeper, let's read more about the DOM.

• Introduction to the DOM by MDN 🆓

• Using the Document Object Model by MDN 🆓

• Locating DOM elements using selectors by MDN 🆓

• Traversing an HTML table with JavaScript and DOM Interfaces by MDN 🆓

• Introduction to events by MDN 🆓

After reading through this list, continue with these resources, which are more detailed and in-depth.

• Document by javascript.info 🆓

• Introduction to Events by javascript.info 🆓

• UI Events by javascript.info 🆓

Where to practice

You can open up your browser console and start writing code there (see this guide and this one) or you can simply run your codes in this JavaScript playground.

To be continued

In this post, we covered the fundamentals about JavaScript. In the upcoming parts, we will dive deeper into more advanced topics. Stay tuned for the next part, where we will continue to expand our knowledge and explore these exciting topics in greater detail.

Don't miss the next part by subscribing to my newsletter.