Install and setup stuffs 🚧
For learning Web Development you need to first set up the following things
Things you need and need not.
- A 🖥️ with any OS ✔️
- A good light weight IDE: VSCode, Atom ✔️
- One of the most used web browsers: Firefox, Edge ✔️
- Using super light Notepad Text Editor ❌
- High designing skills ❌
- Basic programming knowledge ✔️
Fundamentals First 💪
Fundamental building blocks of web development is
- HTML - HyperText Markup Language
- CSS - Cascade Style Sheet
- Have a really good grasp of HTML and CSS first.
- Build some layouts using Flexbox, Grid, etc.
- Learn web development basics from MDN
- If you want to learn like challenge-based, use FreeCodeCamp
- Check out JS in 14-min by @jgthms
- Built some small projects like tick-tac-toe, drum kit simulator.
CSS-Frameworks, SASS & API Handling 🌟
CSS frameworks are used to build layouts in a short period. An important thing to consider is unless you have a good grasp on CSS and JS don’t use them.
- Some CSS Framework: Bootstrap,TailwindCSS , Bulma
- You don’t need to learn every framework out there. Just be good at one framework.
- Now learn SASS
- It’s a preprocessor that converts written SASS code to CSS.
- It provides additional features like nesting etc.
- Learn JS API handling
- Build a weather app using any of your frameworks using free weather API
At this point, you have completed everything as a frontend web developer beginner.
Advance/Speciality Section 🔥
Frontend Frameworks ✨
In the long run and when building scalable web applications, building it just using these fundamental blocks can be hectic and tough to maintain. This is where frontend frameworks come into the picture. Learn one framework well and then you can learn other ones with ease.
- ES6 Syntax
Package managers are used to managing libraries in a project. It helps us to organize them and also shares between teams.
Bundlers are used to transpile your JS code into a native JS code. It helps us to use ES standard JS in projects. . You don’t need to have a really deep knowledge of bundlers. But knowing some of their basic commands and their working will be useful.
Some Frontend Frameworks & To Get Started
Most Popular Frontend Frameworks:
- Made by Facebook
- Super flexible
- Has a good amount of learning curve
- Ecosystem is really powerful
React is a library rather than a front-end framework, and it does one thing well, rendering of DOM. It has a strong community and a lot of documentation. Its flexibility comes at the cost of app maintainability.
- React Official Tutorial
- Free Code Camp
- Udemy Stephen Grider
When you learn React, Two common terms are class components and functional components using hooks. Learn the Class component first. It gives you an idea about abstractions in hooks.
- Made by Google
- For very large scale app
- High learning curve
- Tightly enforced coding / very less flexibility
- Complete frontend framework with routing etc.
- Complete Typescript
Angular is for large scale app and has a bigger size compared to react and others.
- CodeCraft Angular - The best angular tutorial for free.
- Complete frontend framework
- Good documentation and Eco-system
- Small learning curve
- Performance a bit down compared to others
- Template-based syntax
Vue started as a solution to issues that React and Angular couldn’t solve during that time. Simple, yet powerful community-driven framework.
- Vue Starting Point
- Still in beta
- Minimal learning
- Docs are neat and well made
Svelte is a compiler rather than a framework. It’s much faster and lighter compared to the rest of the frameworks. Svelte is still under beta but soon will be a major one.
- Svelte Tutorial
There are a lot more frameworks out there like EmberJS, Preact, and also frameworks build on top of the above ones like NextJS from React, Sapper from Svelte, etc.
Linting And Formators
Linting and formatting are applied to make your code typed by the various developer to a uniform one. It enforces code style for the team so that maintenance can be a lot easier.
Some of the linting tools are:
Handling errors & finding solutions 🕵️♀️
Testing ensures your code is working correctly or not. It runs a set of codes and checks your given condition is satisfied or not. Some of the testing libraries are
- Browser developer tools are your best friend
- Use Browser Dev Tools like Inspector, Console, Debugger to check for errors in UI and webpage code
- Stackoverflow will be the most visited site for you 😊
- It’s a broad field and master one, then you can easily conquer the rest of them.
Steps for doing projects 👩💻
Some good starting projects:
- To-Do List
- Graph Builder
- Sorting Analyzer
😍 All the best 😊