The Frontend Basics series

In the Frontend Basics series, you will learn the fundamentals of the Internet, HTML, CSS, and JavaScript.

This is the first part of the Frontend Basics series subtitled Introduction which will introduce the topics covered in the series.

This series is for you who are just getting started with front-end web development.
If I was to start learning web development from scratch all over again, these are the resources I wish I had when I got started. I am solving the little challenges I faced and recommending relevant resources to you.

The first resource I am sharing is the frontend roadmap diagram from roadmap.sh. Check it out 👇

This roadmap will serve as the guide for the Frontend Roadmap series.

roadmap.sh also has roadmap diagrams for frontend frameworks like React, Angular, and Android if you are interested in mobile app development.

Table of contents

Note: For each post, I will be teaching the essentials and sharing relevant resources to learn more about them.

Section 1 - Internet

• How the internet works

• Domain Name, DNS and How it works.

• Servers and hosting

• What is HTTP?

• Browsers and how they work.

Section 2 - HTML

• HTML Essentials & Semantics

• HTML Forms and validations

• HTML Tables and layout

• HTML Conventions and Best Practices

Section 3 - CSS

• CSS Essentials and syntax

• CSS Box Model and Styling

• CSS Base/Resets and UA Stylesheets

• Making layouts with CSS - display, positioning, flexbox, grid and floats

• Responsive design with CSS and media queries

• CSS Worthy mentions - clip-path, pseudo-selectors, ...

Don't panic

If you're reading this, you may be overwhelmed by the sheer amount of things you have to learn to become a developer. But I want you to know that learning is a journey, not a destination.

When you're motivated to code, CODE. And when you're not motivated to code, do the next best thing: READ coding articles. When you get tired, don't quit, REST. You will feel better after a little break, I promise.

Programming can be hard. But if you code, read and rest, there is nothing that can stop you.

• Me.

Thanks for reading! Read the next post. 👇