The Frontend Basics series
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.
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, ...
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.
Thanks for reading! Read the next post. 👇