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
Top comments (0)