# ✅Roadmap To  Become Full Stack Developer

✔️ A full-stack developer is a combination of a Front-end developer and a Back-end developer.

✔️A full stack is made up of the front-end that deals with the user interface, the back-end that deals with data validation, and the database that acts as storage—a repository of information from the front-end through the logic layer.

![Full-Stack Development](https://www.knowledgehut.com/_next/image?url=https%3A%2F%2Fd2o2utebsixu4k.cloudfront.net%2Fmedia%2Fimages%2F1633506955249-Image-1%20(1).png&w=3840&q=75 align="left")

### ✅RODMAP TO BECOME FRONTEND DEVELOPER

☑️Front-end development is the development of visual and interactive elements of a website that users interact with directly. It's a combination of HTML, CSS and [JavaScript](https://roadmap.sh/javascript), where HTML provides the structure, CSS the styling and layout, and JavaScript the dynamic behaviour and interactivity.

☑️As a front-end developer, you'll be responsible for creating the user interface of a website, to ensure it looks good and is easy to use, with great focus on design principles and user experience. You'll be working closely with designers, back-end developers, and project managers to make sure the final product meets the client's needs and provides the best possible experience for the end-users.

**⭐Learn the Basic - HTML :-**

1. Basic
    
2. EMMET
    
3. META TAG & HEADING & PARAGRAPH
    
4. ANCHOR TAGS, LIST & TABLES
    
5. FORMS & INPUT TAGS
    
6. INLINE & BLOCK ELEMENTS
    
7. ID'S & CLASSES
    
8. ENTITIES
    
9. SEMANTIC HTML
    
10. SEO BASIC
    

**⭐Learn the Basic -CSS :-**

1. BASICS
    
2. SELECTORS
    
3. POSITIONING
    
4. BOX MODEL
    
5. DISPLAY
    
6. SPECIFICITY
    
7. FLEXBOX
    
8. GRID
    
9. MEDIA QUERIES
    
10. PSEUDO-CLASSES
    
11. BOX SHADOW
    
12. VARIABLE & CUSTOM PROPERTIES
    
13. ANIMATIONS & KEYFRAMES
    
14. TRANSITION
    

**⭐LEARN THE BASICS -JS :-**

1. BASIC SYNTAX
    
2. DOM MANIPULATION
    
3. FETCH API/ AJX
    
4. ASYNC AWAIT
    
5. EVENT LISTENERS
    
6. ES6+ JAVASCRIPT
    
7. PROMISES
    
8. CLASSES
    
9. ARRAY METHODS
    
10. SCOPING
    
11. HOISTING
    
12. CLOSURES
    

**⭐LEARN ANY CSS FRAMEWORK :-**

👇🏿These are the most popular you can pick one

1. BOOTSTRAP
    
2. TAILWIND
    
3. MATERIALIZE
    
4. BULMA
    
5. SEMANTIC UI
    
6. FOUNDATION
    

**⭐LEARN ANY CSS PREPROCESSOR MOSTLY SASS AND SCSS :-**

1. Sass/ Scss
    
2. postcss
    
3. Less
    
4. Stylecow
    

**⭐LEARN BASIC USAGE OF VERSION CONTROL SYSTEM :-**

1. GIT
    
2. GITHUB
    

**⭐LEARN THE BASICS OF PACKAGE MANAGERS**

1. NPM
    
2. YARN
    

**⭐PICK A JAVASCRIPT FRAMEWORK /LIBRARY**

👇🏿These are the most popular you can pick one :-

1. REACT
    
2. VUE
    
3. ANGULAR
    
4. SVELTE
    
5. METEOR
    
6. REMIX
    

### **⭐BASIC THING TO LEARN IN REACT :-**

1. Components
    
2. jsx
    
3. props
    
4. state
    
5. events
    
6. conditional Rendering
    
    ### IMP TOPIC:-
    
7. Use state
    
8. Use Effect
    
9. Use reducer
    
10. Use Memo
    
11. Use callback
    

**⭐LEARN SOME OF THE REACT UI FRAMEWORKS:-**

1. Material UI
    
2. Ant Design
    
3. Chakra UI
    
4. React Bootstrap
    
5. Rebass
    
6. Blueprint
    
7. Semantic UI React
    

**⭐Learn to use popular React packages :-**

1. React router
    
2. React Query
    
3. Axios
    
4. React Hook Form
    
5. Styled Components
    
6. Storybook
    
7. Framer Motion
    

**⭐Learn how to manage state in React with state management tools :-**

1. Redux
    
2. Mobx
    
3. Hookstate
    
4. Recoil
    
5. Akita
    

**⭐Things to learn after learning React:-**

1. Next js
    
2. Gatsby
    
3. TypeScript
    
4. React Native
    
5. Electron
    

**⭐Important things to learn in Next JS :-**

1. Static Site Generation
    
2. Server Side Rendering
    
3. Dynamic Pages
    
4. API Routes
    
5. CSS / SASS Modules
    

**⭐Learn to test your apps with some of these libraries / frameworks :-**

1. Jest
    
2. Testing Library
    
3. Cypress
    
4. Enzyme
    
5. Jasmine
    
6. Mocha
    

**⭐Learn to deploy your websites :-**

Some free popular service

1. Netlify
    
2. Vercel
    
3. Firebase
    
4. Github Pages
    
5. Heroku
    
6. Render
    

**Optional Thing to learn :-**

1. Webpack
    
2. Parcel
    
3. SnowPack
    
4. Rollup.js
    
5. Rollup.js
    

**PROJECT IDEAS :---**

## WAIT FOR BACKEND ROADMAP....

THANKU.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1689531601118/ead274ca-0407-4919-bba7-fbbac464b5ce.gif align="center")

.