HOW TO BECOME A GREAT FRONTEND DEVELOPER?

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

Blog

HOW TO BECOME A GREAT FRONTEND DEVELOPER?

Hrithik Bansal

Join Our Newsletter. No Spam, Only the good stuff.

Related