This is a complete list of free resources to kick-start your web development journey. In this blog, you will be going to know how much should I learn from HTML, CSS, and JavaScript.

Lot of people who what to make their career in the field of web development. They are confused that, how much should I learn or how much time should I spend on the basics. A lot of people spend their time learning basics or are stuck in a tutorial loop. This is not a better way to learn web development, because web development is a lifetime learning process.

Don't try to complete HTML then move on to CSS and try to complete it after that learning complete JavaScript. This thing takes lots of time. The best way to learn web development is project-based learning. But for those who are complete beginners and want to know what are the topics show I know to start project-based learning. So, I am going to give you a list of topics and free resources.

HTML

What is HTM
How HTML tags work
Types of tags
Create Division
Semantic tags
Attributes
Create Form, Table and List
Accessibility & SEO Optimization

CSS

Fundamentals

What is CSS
CSS Selectors (Basic, Complex [Combinators], Pseudo-classes, Pseudo-elements)
CSS Properties (Color, Background color, Font family, style, size)
Basic Understanding of values and units
CSS Specificity & Inheritance
Box Model (Margin, Border, Padding)
Display (flex, grid)
Positioning (Static, Relative, Absolute, Fixed, Sticky)

Advanced

Layouts (Flexbox, Grid)
Shadows
Gradients
Transforms
Transitions
Animations
CSS Variables
Media Queries (for responsiveness)

CSS Framework

Bootstrap or Tailwind CSS

JavaScript

Fundamentals

Running JS (Script tag, Link external file, Browser console)
Variables:
- Declarations (var, let, const)
- Scope (Global, Function, Block)
Data Types:
- Primitive Types (undefined, null, Boolean, Number, BigInt, String, Symbol)
- Array
- Object
Conversion (Explicit and Implicit Conversion)
Equality (== vs ===)
Loops (while, do…while, for, break/continue, for…in, for…of, forEach)
Control Flow (if…else, switch, try/catch/throw.
Expressions & Operators:
- Assignment Operators
- Arithmetic Operators
- Logical Operators
- Conditional Operators
- Comparison Operators
- Relational Operators
- Bitwise Operators
- String Operators
- Comma Operator
- Unary Operators
Functions:
- Function Declarations
- Function Expressions
- Calling Functions
- Parameters & Arguments
- Scope
- Arrow Functions
ES6