Frontend Web Basics
Web Dev has two subparts- the Frontend and the Backend of the website. Frontend is what you see in a browser whereas Backend (which cannot be seen) handles the logic and functionality that is necessary for everything to work :computer:
The frontend of a website is made up of 3 major types of files:
1. Hyper Text Markup Language (.html)
2. Cascading Style Sheets (.css)
3. JavaScript (.js)
Although you can do various courses on different educational platforms, we would recommend just going through W3Schools & CSS Tricks while also trying out the examples provided in the sites for HTML, CSS as well as JavaScript. Mozilla documentation is another wonderful place to learn JS.
(or)
If you prefer learning by watching videos, The Net Ninja is one of the best resources to learn anything related to Web Dev. You can see their playlists on HTML, CSS and JavaScript.
Further Topics to Cover :books:
Follow either the reading or video link and cover the following topics in the same order:
| S.No. | Topic | Reading Link | Video Link |
|---|---|---|---|
| 1. | JSON | Link | Link |
| 2. | AJAX | Link | Link |
| 3. | JQuery | Link | Link |
| 4. | Bootstrap | Link | Link |
| 5. | MaterializeCSS | Link | Link |
| 6. | Sass | Link | Link |
| 7. | Other http requests | Link | Link |
Once you get familiar with a framework, it’s very easy to shift to other frameworks since all important features, especially Grids are quite similar in all frameworks.
Upon learning and practising everything above, you’ll be more than just a cliché frontend developer.
Useful Chrome Extensions :heart_eyes:
|S.No.|Extension| |—-|—–| |1.|CSS Viewer| |2.|ColorPick Eyedropper |3.|Moesif Origin & CORS Changer
Done? :disappointed_relieved:
Not yet! Now that you’ve explored the basics of Frontend Web, it’s time to Dive Deep!
| S.No. | Framework | Link |
|---|---|---|
| 1. | ReactJS | Link |
| 2. | VueJS | Link |
| 3. | AngularJS | Link |
We hope you now know the roadmap to being a professional Frontend Web Developer :v: