🔅 A CSS Unit Deep Dive - Learn CSS Units & When To Use Them

00:00 intro
01:09 Pixel unit
06:15 em & rem
12:10 %, vh, vw
14:12 ch unit

There’s at least 40+ different length units in the CSS specification and initially I was going to go over literally each one of them until I realized how silly of an idea that was. The truth is, many of these units should either not be used at all or are rarely used for web design.

🎯 𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐦𝐞𝐧𝐭 𝐒𝐤𝐢𝐥𝐥𝐬 𝐟𝐨𝐫 𝐏𝐫𝐨𝐝𝐮𝐜𝐭 𝐁𝐚𝐬𝐞𝐝 𝐂𝐨𝐦𝐩𝐚𝐧𝐢𝐞𝐬 🔥

✅ A roadmap is the best way to kick-start your attempt to become a front-end developer.

📌 𝗕𝗮𝘀𝗶𝗰 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:
1. Data types
2. Functions
3. Scope in JavaScript
4. Closure
5. Event loop
6. Prototype and prototype chain
7. Class and inheritance
8. DOM
9. bind/call/apply
10. Promise
11. WebAPI
12. Task queue
13. Call stack
14. Async/await
15. Generators
16. Typescript

📌 𝗕𝗮𝘀𝗶𝗰 𝗛𝗧𝗠𝗟 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:
1. block element
2. import
3. etc - infinite questions

📌 𝗕𝗮𝘀𝗶𝗰 𝗖𝗦𝗦 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:
1. Class and other selectors
2. Pseudo Classes
3. Box Model
4. Pseudo Elements
5. CSS type - flex, grid, normal
6. How to center
7. pseudo classes and elements
8. All element states - active, hover
9. Media queries
10. Pre-processors - SCSS or LESS
1. mixins
11. CSS constants
12. BEM
13. Import

📌 𝗕𝗮𝘀𝗶𝗰 𝗪𝗲𝗯 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:
1. Page rendering cycle
2. HTTP / HTTPS / https2
3. CORS
4. Local storage/Session storage
5. Cookie
6. JWT
7. XHR
8. Micro Frontend
9. REST/GraphQL/Socket connection
10. Browser Concepts
11. Debugging Application
12. Chrome Dev Tool Features

📌 𝗔𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:
1. OOPs concept
2. Design Patterns
a. Singleton
b. Provider
c. Prototype
d. Observer
e. Module
f. HOC

3. Understanding V8 in-depth
a. JIT
b. Interpreter
c. Execution
d. Compiler
4. Currying

📌 𝗕𝗮𝘀𝗶𝗰 𝗥𝗲𝗮𝗰𝘁𝗝𝗦 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀 (bonus): -
1. Introduction JSX
2. React Component
3. Component State and Props
4. Adding Style (CSS)
5. Functional and Class components
6. React Lifecycle Methods
7. Virtual DOM
8. React Hooks
9. Custom Hooks
10. Context API
11. Synthetic Events
12. Routing
13. Data Flow (Redux/Flux)
14. Server-Side Rendering
15. Unit Testing
16. Jest & React Testing Library
17. Mocking Data
18. Understanding Webpack (Bundler)
19. Babel, env, prettier, linter

Free Books and Courses to learn Frontend Development
👇👇

Frontend Development Free Course with Project

Frontend Development Roadmap

Frontend Developer Free Book

Frontend Interview preparation handbook

Foundations of Frontend Development Free Udemy course

Javascript Resources

Like for more ❤️

ENJOY LEARNING👍👍

Express.js Learning Roadmap: From Basics to Advanced

1. Getting Started with Express.js

Introduction to Express.js: Understand why Express.js is used and how it simplifies Node.js applications.

Setup: Install Node.js and Express using npm. Create a basic Express server.



2. Core Concepts

Routing: Define routes using app.get(), app.post(), app.put(), and app.delete().

Middleware: Understand middleware functions and use built-in, third-party, and custom middleware.

Request and Response: Handle HTTP requests (req) and responses (res).



3. Templating Engines

Introduction: Learn about templating engines like EJS, Handlebars, or Pug.

Dynamic HTML: Render dynamic content using templates.



4. Working with RESTful APIs

Create APIs: Build RESTful APIs with Express.

Handle Query Parameters: Parse URL parameters and query strings.

Send JSON Responses: Format and send JSON data to clients.



5. Middleware and Error Handling

Middleware Basics: Use next() for request flow.

Error Handling: Implement custom error-handling middleware.

Logging: Use libraries like morgan for logging requests.



6. Database Integration

Connect to Databases: Integrate MongoDB (Mongoose), MySQL, or PostgreSQL.

Perform CRUD Operations: Build database-backed routes for Create, Read, Update, Delete operations.



7. Authentication and Authorization

Authentication: Implement user authentication using sessions, cookies, or JSON Web Tokens (JWT).

Authorization: Restrict routes to specific user roles.



8. File Uploads and Static Files

File Uploads: Use multer for handling file uploads.

Serve Static Files: Use express.static() to serve images, CSS, and JavaScript files.



9. Advanced Features

CORS: Enable Cross-Origin Resource Sharing for APIs.

Rate Limiting: Protect APIs from abuse using rate-limiting middleware.

Real-Time Features: Integrate with WebSockets for live data.



10. Testing and Debugging



Unit Testing: Test routes using supertest and Jest or Mocha.

Debugging: Use tools like node-inspect or debug library.


11. Deployment



Prepare for Deployment: Use environment variables and production-ready configurations.

Deployment Platforms: Deploy on Heroku, Vercel, or AWS Elastic Beanstalk.

Scaling: Optimize your app for performance and scalability.


12. Build Projects



Beginner: Build a to-do list API.

Intermediate: Develop a blog backend with user authentication.

Advanced: Create a real-time chat application using Express and WebSockets.

Deploy your projects to demonstrate your skills.

📂 Web Development Resources

ENJOY LEARNING 👍👍