1. First Learn the basics of HTML and CSS
JavaScipt was invented to use in the front end to make the website dynamic without reloading the page and performing DOM Operations.
After knowing how to design a web page, Learn the following basics things:
- Data Types
- Method chaining
3. Perform simple DOM Operations
DOM(Document Object Model) is a programming interface for web documents. It represents the structure of web pages. If you don't know about DOM you can learn it here.
Here are a few operations you can try:
- Select the div
- Change the content of the div
- Perform events on the button
- Change the style of elements
- Add events logic like mouse move, button click, scrolling events, etc.
4. Intermediate Phase
Learn the following things:
- Learn about APIs
- Fetch data from the backend without reading the web page using Fetch or Axios
- Add and remove elements from the document
- Learn to use third-party libraries like Charts or animation libraries
- Fetch data from APIs and load it dynamically from the document
5. Advance Phase
And these last 20% of topics make top developers and many people stop learning because of this.
- Arrow functions
That's it. You are ready to build mini projects. In the journey, you will find many ideas and new topics to learn.
To make your work easier I have created a Front-End Developer Roadmap there you will learn Front-End Development in 3 phases.
I have mentioned important topics in sequence with the best resources to learn those topics.
Here is the link to Complete Roadmap: Link