CSS Tutorial In Hindi (With Notes) 🔥

CSS Tutorial For Beginners in Hindi: In this CSS3 tutorial in Hindi we will learn everything you need to learn about CSS from scratch. We will first discuss why we need CSS and what CSS is after which we will gradually build pace and learn several intermediate to advanced level concepts.
Finally, I have a project waiting for all of you where we will together build a responsive E-Commerce Website like Flipkart!
Download HandWritten Notes:

Text Tutorial and Code:

⌚ TimeStamps:
Introduction - 00:00:00
Chapter 0 [What is CSS?] - 00:08:21
Chapter 1 [Our First CSS Website] - 00:23:48
Chapter 1 Practice Set - 00:57:12
Chapter 2 [Colors & Backgrounds] - 01:06:32
Chapter 2 Practice Set - 01:47:20
Chapter 3 [CSS Box Model] - 02:00:39
Chapter 3 Practice Set - 02:36:09
Chapter 4 [Fonts & Display] - 02:49:20
Chapter 4 Practice Set - 03:29:10
Chapter 5 [Size, Position & Lists] - 03:45:26
Chapter 5 Practice Set - 04:27:15
Chapter 6 [CSS Flexbox] - 04:35:59
Chapter 6 Practice Set - 04:59:37
Chapter 7 [CSS Grid & Media Queries] - 05:06:56
Chapter 7 Practice Set - 05:30:07
Chapter 8 [Transforms, Transitions & Animations] - 05:41:23
Chapter 8 Practice Set - 06:47:37
Flipkart Clone Project - 07:09:12

Best Hindi Videos For Learning Programming:

►C Language Complete Course In Hindi -

►JavaScript Complete Course In Hindi -

►Django Complete Course In Hindi -

Follow Me On Social Media
Comment "#HarryBhai" if you read this 😉😉

[CodeWithHarry]

I hope this helps. Make sure you download my handwritten notes from the description.
After the Flipkart clone project, which project would you like to watch me make next?

[masoommohii]

World's Richest person who is providing Free Knowledge 🙏

Salute to your hardwork 😘

[Hafijur]

🎯 Key Takeaways for quick navigation:

00:00 *🚀 Introduction to CSS Tutorial*
- CSS explained through examples and handwritten notes.
02:25 *📝 Importance of CSS and HTML*
- HTML as the skeletal layout, CSS for design and styling.
06:10 *⚙️ Installing VS Code*
- Instructions for installing VS Code on Windows, Mac, and Linux.
10:49 *💼 Benefits of Learning CSS*
- High demand for CSS skills in web development.
11:43 *🎓 First Line of CSS*
- Setting up an HTML file and adding the first line of CSS.
20:16 *📄 Adding CSS to HTML*
- Different methods to add CSS to an HTML document.
22:38 *🗂️ File management and permissions*
- Deleting files and folders in Windows.
24:05 *🖥️ Setting up a basic HTML file*
- Creating an HTML file and adding a basic structure.
25:33 *🌐 Understanding the Document Object Model (DOM)*
- Explaining the DOM as a tree-like structure of a website.
28:00 *🔠 HTML ID and class attributes*
- Differentiating between ID and class attributes in HTML.
33:49 *🎨 Adding CSS to HTML*
- Discussing three ways to add CSS: style tag, inline CSS, and external CSS.
40:06 *🎯 CSS selectors*
- Introducing CSS selectors for styling HTML elements.
44:39 *🎓 Selectors in CSS*
- Element selector applies rules to all instances of that element.
46:59 *🎨 Styling with Classes and IDs*
- Classes are more commonly used for styling than IDs in professional websites.
48:48 *🔗 Grouping Selectors*
- Grouping selectors allows applying the same rules to multiple elements.
53:02 *🧩 Styling Priority and Comments*
- Inline styles have the highest priority, followed by internal and external stylesheets.
57:25 *🏋️‍♂️ CSS Practice Set*
01:07:54 *🎨 CSS basics and class usage*
- CSS classes are commonly used for styling elements.
01:11:16 *🌈 Color representation in CSS*
- CSS supports various color representations, including named colors, RGB, HEX, and HSL.
01:14:05 *🎨 Setting margin and padding in CSS*
- The universal selector `*` can be used to set margin and padding for all elements.
01:19:53 *🖌️ Working with background colors and images*
- CSS provides properties like `background-color` and `background-image` to style backgrounds.
01:32:14 *🎨 Setting Background Size Property*
- Setting background size to 'contain' makes the image fully visible without changing its aspect ratio.
- Background position allows you to position the background image within its container.
01:40:58 *📌 Exploring Background Attachment Property*
- Background attachment 'fixed' keeps the background image fixed while scrolling the content.
01:43:48 *🖍️ Utilizing Background Shorthand Property*
- The background shorthand property allows setting multiple background properties in a single declaration.
01:47:08 *🚀 Practicing CSS with Chapter 2 Practice Set*
- Creating a navigation bar with a dark blue background and light-colored items.
01:55:41 *🔳 Setting background size property in CSS*
- Demonstrates how to set background size in CSS using the `background-size` property.
01:58:05 *🧩 Understanding CSS clarity and problem-solving attitude*
- Emphasizes the importance of clarity in CSS understanding.
02:00:30 *📦 Moving to Chapter 3: Box Model in CSS*
02:19:52 *📐 Understanding Margin Collapsing*
- Margin collapsing occurs when two margins from different elements overlap.
02:26:07 *📦 Box Sizing: Content Box vs. Border Box*
- Box sizing determines whether padding and borders are included in an element's width and height.
02:36:06 *🛠️ Practical Application: Creating a Website Layout*
- Demonstrated how to create a basic website layout using HTML and CSS.
02:43:57 *🖌️ Adding Borders and Margins*
- Adding border and margin using CSS.
02:49:02 *🎨 Introduction to Display Property*
- Explaining the display property in CSS.
03:05:07 *✏️ Text Alignment and Text Decoration*
- Demonstrating how to use the text-align property to align text within a container.
03:08:03 *🖌️ Text Decoration Property*
- Text decoration property can be used to underline, overline, or apply a line-through effect to text.
03:08:51 *🔄 Text Transform Property*
- Text transform property can change the case of text to uppercase, lowercase, or capitalize the first letter of each word.
03:09:51 *📏 Line Height Property*
- Line height property controls the space between lines of text.
03:32:56 *🎨 Setting heights for inline and inline-block elements*
- Changing the display property to `inline-block` allows setting height and width.
03:35:21 *🎨 Managing space between inline elements*
- White space between inline elements affects their layout.
03:36:46 *🎨 Adding and styling a footer with Google Fonts*
- Adding a footer with copyright information and Google Font.
03:39:19 *🎨 Creating a basic webpage layout with CSS*
- Using CSS to create a simple two-column layout.
03:40:13 *🎨 Styling navigation links*
- Setting text decoration to `none` to remove underlines from links.
03:43:06 *🎨 Demonstrating `display:none` and `visibility:hidden`*
- `display:none` removes an element from the layout.
03:44:54 *🎨 Using `text-transform` to change text case*
- Using `text-transform: uppercase` to change text to uppercase.
03:45:50 *🎨 Introduction to size, position, and units in CSS*
- Discussion on the importance of size, position, and units in CSS.
03:51:02 *🎨 Understanding `em` and `rem` units*
03:53:46 *🎨 Using `vw` and `vh` units for responsive design*
03:57:06 *📏 CSS Units Overview*
03:58:33 *📏 CSS min/max-height/width Property*
04:02:22 *📐 CSS Position Property*
04:20:50 *📐 Z-index and List Style Property*
04:25:11 *📝 List Style Image Property*
04:26:28 *🧩 Flexbox Introduction*
04:46:18 *📦 The flex-direction property in CSS allows you to change the direction in which flex items are displayed inside a flex container.*
04:49:13 *🎁 The flex-wrap property in CSS controls whether the flex container is a single-line or multi-line layout, and the direction of the cross-axis.*
04:50:36 *🔄 The align-items property in CSS controls how flex items are aligned in the cross-axis of the flex container.*
04:52:57 *🤔 The align-content property in CSS aligns the flex lines within the flex container when there is extra space in the cross-axis.*
04:55:22 *🔄 The order property in CSS allows you to control the order in which flex items appear in the flex container.*
04:56:48 *🧍 The align-self property in CSS allows you to override the align-items property for individual flex items.*
04:57:48 *📏 The flex-grow property in CSS specifies how much a flex item will grow relative to the rest of the flex items.*
04:59:16 *🧶 The flex-shrink property in CSS specifies how much a flex item will shrink relative to the rest of the flex items.*
05:04:42 *📐 CSS Grid Layout allows you to create complex layouts on a webpage using rows and columns.*
05:10:03 *📊 Grid Layout Properties Overview*
05:13:14 *🛠️ Using Grid Gap Property*
05:14:39 *📦 Understanding Grid Containers and Items*
05:18:18 *🖼️ Applying Grid Column Property*
05:23:44 *📱 Understanding Media Queries*
05:35:52 *📐 Creating Layouts with CSS Grid*
05:41:26 *🔄 Introduction to Animation, Transition, and Transforms*
05:48:45 *🔄 Advanced Transformations in CSS*
05:59:18 *🎓 Understanding Practical Use Cases of Transform Properties*
06:00:44 *🔄 Introduction to 2D and 3D transform methods*
06:05:14 *🔄 Understanding transition properties*
06:07:08 *🔄 Applying transitions with JavaScript*
06:16:42 *⏩ Setting transition shorthand property*
06:17:43 *🔄 Transitioning multiple properties*
06:19:34 *⏩ Introduction to CSS animations*
06:22:51 *🔄 Properties used to set animations in CSS*
06:25:11 *🔧 Transition and Animation Properties*
06:26:04 *📝 Using Animation Shorthand Property*
06:28:25 *🔄 Understanding Animation Properties*
06:33:03 *💡 Using Animation Timing Function*
06:34:30 *🎯 Applying Animations to Elements*
06:51:35 *🟢 Creating a Progress Bar Animation with CSS*
06:54:28 *🔄 Creating a Rotating Image Animation with CSS*
06:56:43 *🖼️ Creating a Image Slider with CSS*
07:09:01 *🛒 Creating a Homepage for an E-Commerce Website with HTML and CSS*
07:16:54 *🎨 Styling the header and navigation bar*
07:21:08 *🎨 Using variables and copying styles from other websites*
07:22:31 *🎨 Adding a logo and styling the navigation bar*
07:25:28 *🎨 Creating a search bar*
07:26:23 *🎨 Setting the container height and styling the main content*
07:29:11 *🎨 Styling the search button*
07:31:02 *🎨 Adding images and creating card elements*
07:41:16 *🎨 Adding dynamic content and final touches*
07:44:41 *🏏 CSS Styling for a Card Element*
07:47:10 *🎨 Styling Images and Text*
07:48:38 *🛠️ Creating Utility Classes for Margin and Text Alignment*
07:54:09 *🔄 Displaying Multiple Card Items*
07:56:14 *🃏 Replicating Card Designs for Different Items*
07:58:18 *🖼️ Creating a Slider and Adding Horizontal Lines*
08:02:35 *📱 Making the Website Responsive*
08:10:37 *📱 Styling for Mobile Responsiveness*
08:14:27 *💡 Design Tips and Advice*
08:15:51 *🎨 Designing vs. Replicating Websites*

Made with HARPA AI

[volturegaming]

I just completed this course, I am 14 years old and I really appreciate it for making CSS learning so easy. Thanks!

[sourabhnegi]

Disclamer - He is not providing free knowledge, he is just getting love, support and good blessings of all new learners in return of his knowledge

[MuhammadYamman]

I watched your HTML course first. Now watching this. Really helpful and easy to understand. Respect for you from Pakistan 🇵🇰. Learning & knowledge had no boundaries.

[ojgfysl]

I am watching your CSS tutorial from Bangladesh. This is the best CSS tutorial ever. Thanks for making this beautiful tutorial.

[Pari_agrawal]

गुरू ब्रह्मा गुरू विष्णु, गुरु देवो महेश्वरा गुरु साक्षात परब्रह्म, तस्मै श्री गुरुवे नमः

[deliverking]

Nobody knows how much this man has helped me to clear my exams otherwise I couldn't pay my expenses, really this man deserves to be respected...love from Pakistan

[himanshulalwani]

harry bhai please make a complete video of your learning journey how you learned what your learned and when from starting to end.
Those who agree with me like this comment and comment yess so that harry bhai can notice this.

[rajjaiswal]

⌚ TimeStamps:
Introduction - 00:00:00
Chapter 0 [What is CSS?] - 00:08:21
Chapter 1 [Our First CSS Website] - 00:23:48
Chapter 1 Practice Set - 00:57:12
Chapter 2 [Colors & Backgrounds] - 01:06:32
Chapter 2 Practice Set - 01:47:20
Chapter 3 [CSS Box Model] - 02:00:39
Chapter 3 Practice Set - 02:36:09
Chapter 4 [Fonts & Display] - 02:49:20
Chapter 4 Practice Set - 03:29:10
Chapter 5 [Size, Position & Lists] - 03:45:26
Chapter 5 Practice Set - 04:27:15
Chapter 6 [CSS Flexbox] - 04:35:59
Chapter 6 Practice Set - 04:59:37
Chapter 7 [CSS Grid & Media Queries] - 05:06:56
Chapter 7 Practice Set - 05:30:07
Chapter 8 [Transforms, Transitions & Animations] - 05:41:23
Chapter 8 Practice Set - 06:47:37
Flipkart Clone Project - 07:09:12

[herikarajput]

1:02:38 CSS is crucial for web design and understanding how CSS works is essential for beginners and experienced developers.
2:05:16 Using classes for styling and various ways to represent colors in CSS.
3:07:54 Learn about setting margin, padding, and border in CSS.
4:10:32 Using text decoration and text transform properties in CSS
5:13:10 Z-index specifies the stack order of an element.
6:15:48 CSS grid is a shorthand property for grid row gap and grid column gap.
7:18:26 CSS animations provide more control over animating CSS properties.
8:21:02 Styling the navigation menu and creating a search bar with CSS
Crafted by Merlin AI.

[sounaksaha]

Thanks Now who wants this ONE video of JAVASCRIPT like so that bhaiya can see the comment. YOU ARE GOD HARRY BHAIYA

[gautampoddar]

Even paid courses don't have this kind of content where every topic is touched in detail with their practical real life uses.

[Animeculture]

2:45:01 .box1{ margin: 0px 9px 2px 3px;} this is used for placing top right left bottom margin

[amirmunir]

Nobody knows how much this man has helped me to clear my exams otherwise I couldn't pay my expenses, really this man deserves to be respected...love from Pakistan 😇🥰

[athenamoments]

Bhai agar koi seriously sikhna chahta he to video pura akhiri tak dekho, you will feel proud of yourself on completing the video and will be excited to create your own website. :)

[kishanparmar]

Hii I'm in class 6th and wants to Learn HTML this video is very helpful and I completed this video in 4 days😊

[comedyvlogs]

यह मेरे लिए बहुत ही सहायक रहा... मै बहुत ही खुश हूँ ... Thanks harry bhai... 🍫🦋🍬🍫🤞

[divyanshpandey]

White hat jr. Be like:-
Is sajan ko Kya takleef hai bhai??🤣🤣