HOW TO BECOME A GREAT FRONTEND DEVELOPER?
Tags: webdev, html, css, javascript
Published: 2023-01-14 13:52:56

Before starting learning about development we should understand what are the main components or skills needed to be a good developer. We know the front end is what we see on our browser or application screen and there are many technologies available to do that. The first thing that comes on the path is learning programming or scripting language that tells computers what to do and how to do.

In our case, we want to be a front-end developer. Then there are many ways of building a frontend of any website or application. Let's see step by step what they are -

**Learn the Basics - HTML**

Learning HTML is our first step in the journey of becoming a front-end developer. In simple words, this defines the skeleton of the website.

> - Learn Basics of HTML
> - Understand the Structure and Tags
> - Learn about Forms
> - Semantic HTML
> - SEO (Search Engine Optimization)


**Learn the Basics - CSS**

After learning HTML the next step is learning CSS ( Cascading Style Sheets ). This will beautify the skeleton of the website which we have designed using HTML. I am sharing some important topics to learn -

- FlexBox
- Grid
- Media Queries
- Pseudo Elements
- Pseudo Classes

**Learn the Basics - JavaScript**

Now you can build basic or static websites. To add functionality that we will learn JavaScript. If you want to be a good front-end developer this language will be your good friend. Since I started working in javaScript I fall in love with it. It has a lot to learn but here are a few important topics with which you can start jour journey -

- Learn Basic Syntax
- DOM Manipulation
- Fetch API / Ajax
- Async Await
- Event Listeners
- ES6+ JavaScript
- Promises
- Classes
- Array Methods
- Scoping
- Hoisting
- Closures

Hurry !! you have became a front-end developer and you can build amazing websites using the skills you have learned so far.

Now you can stop your journey here or you can continue learning some amazing stuff that will improve your development. I am sharing the steps you can follow if you want to continue your journey toward learning more advanced tech skills.

Learn any CSS Framework

CSS is enough for styling but if you want to make your development fast then you can use the CSS frameworks -

- Bootstrap
- Tailwind
- Materialize
- Bulma
- Semantic UI
- Foundation

Learn any CSS Preprocessor mostly SASS and SCSS

- SASS / SCSS
- Postcss
- Less
- Stylus
- Stylecow

Now you are good with styling libraries or frameworks. Before moving forward in our learning journey learn some additional stuff that will improve your development skills and will save you a lot of time during development.

Learn basic usage of Version Control System

- Git
- GitHub

Pick a JavaScript Framework / Library

The most popular ones:

- React
- Vue
- Angular
- Svelte
- Meteor
- Remix

Basic things to learn in React

- Components
- Vue
- JSX
- State
- Events
- Conditional Rendering
- useState
- useEffect
- useRef
- useContext
- useReducer
- useMemo
- useCallback

Learn some of the React UI Frameworks

- Material UI
- Ant Design
- Chakra UI
- React Bootstrap
- Rebass
- Blueprint
- Semantic UI React

Learn to use popular React packages

- React Router
- React Query
- Axios
- React Hook Form
- Styled Components
- Storybook
- Framer Motion

Learn how to manage state in React with state management tools

- Redux
- MobX
- Hookstate
- Recoil
- Akita

Things to learn after learning React

- Next JS
- Gatsby
- TypeScript
- React Native
- Electron

Important things to learn in Next JS

- Static Site Generation
- Server Side Rendering
- Incremental Static Regeneration
- Dynamic Pages
- CSS / SASS Modules
- Lazy loading Modules
- API Routes

Learn to test your apps with some of these libraries/frameworks

- Jest
- Testing Library
- Cypress
- Enzyme
- Jasmine
- Mocha

Learn to deploy your websites

- Netlify
- Vercel
- Firebase
- GitHub Pages
- Heroku
- Render

Other important topics you should know

- PWA
- Web Sockets
- CORS
- JSON
- RESTful APIs
- GraphQL APIs
- Basic Security
- Web Accessibility

Some tools to help lint and format code

- ES Lint
- Standard
- Prettier

Optional Things to learn

- Webpack
- Parcel
- SnowPack
- Rollup.js
- Gulp

Project Ideas

- E-commerce Website
- Personal Blog App
- Portfolio App
- Business Website
- Google Clone
- Amazon Clone
- Netflix Clone
- Youtube Clone
- Google Drive Clone
- Food Delivery App
- Whatsapp Clone
- Facebook Clone