CSS Tutorial for Beginners | Complete CSS with Project, Notes & Code 

We need this type of javascript tutorial also

Start:: Level 1 - 12:14 •Intro •CSS Syntax •Types of adding CSS •Colors •Background Color •Types of Selectors •# Id and . class selector •Pratice set 1 - 1:05:00 •Text properties •Font properties •Absolute Units in CSS •Pratice set 2 - 1:48:52 Level 2 - 1:55:44 •Box Model in CSS •Pratice set 3 - 2:24:48 •Display property •Alpha Channel •Pratice set 4 - 2:52:32 Level 3 - 3:02:48 •Relative Units in CSS •Position properties •Z-index •Background size •Pratice set 5 - 3:43:45 Level 4 - 3:50:33 •Flexbox •Pratice set 6 -4:18:36 Level 5 - 4:47:32 Transition - 4:48:26

Level 1 - 12:14 - Syntax - 15:47 - Including CSS - 19:53 - Color - 28:48 - Background color - 34:10 - Color system - 39:44 - Color palette - 54:40 - Selectors - 56:38 -- Pratice set 1 - 1:04:55 - Text - 1:17:26 - Units in CSS - 1:42:02 -- Pratice set 2 - 1:48:52 Level 2 - 1:55:44 -- Pratice set 3 - 2:24:49 -- Pratice set 4 - 2:52:33 Level 3 - 3:02:48 - Pratice set 5 - 3:43:46 Level 4 - 3:50:33 - Flexbox - 3:50:48 - The Flex model - 3:53:56 - Flexbox direction - 3:58:17 - Flex properties - 4:03:53 -- Pratice set 6 - 4:18:36 - Media queries - 4:34:55 -- Pratice set 7 - 4:43:16 Level 5 - 4:47:32 - Transition - 4:48:26 - Transform - 4:59:04 - rotate - 4:59:26 - scale - 5:05:17 - translate - 5:09:00 - skew - 5:12:34 - Animation - 5:13:37 - Animation shorthand - 5:25:15 - Animation % - 5:28:00 -- Practice Set 8 - 5:29:31

Thank You, learnt a lot from this video

श्रद्दा दिदी, नमस्कार। मै अर्जुन थापा, नेपाल से। मैने आपको HTML और CSS Full course आपका Channel से सिख गया। आपका सिकानेका Strategy बहुत अच्छा लगा। मेरा दिल तो गार्डेन गार्डेन हुआ,, दिदी।।। उम्मिद करता हु,, भबिस्य मे आप ऐसा ऐसा भिडियो बनाकर Upload किजिए ता कि हम भि कामयाबी बन सकु। धन्यबाद दिदी ❤❤❤

Wow. Such an incredible way of teaching. You have lots of skills. You deserve a high status in Coder's Life. I have no words for appreciate your effort in coding life.

in this video, at 4:07:57, some video content is missing. video portion is directly jump from justify-content to align-content. flex-wrap and align-items this two portion is missing. But yes didi, you are a great teacher. If i might be become successful guy then definitely your guidence role will be huge in my successful career.

I'm 30 years old. I learned basics in school and never continued. It took me 10 days to complete this video and practice. I can say I got 90% hold of everything that is taught in this video. I want to say this video is really good for the beginners. Thank you "Shraddha didi".

It is very useful for me 😊😊 thank u mam❤❤ Who is watching this video in 11 April 2024😊😊🎉 😂😂😂😂

Diiii! I don't know how much happy and satisfied I am from this lecture. But, I should definitely say that uh are the best teacher for us.!!

Didi, just want to thank you from the bottom of my heart.🙂, you explained CSS beautifully, all the concepts were very easy to understand. I'll definitely come back here anytime I need to revise my CSS in the future.

Who is watching this in 2024

who learn css in 2024 from apna college 👉👉👉🏾

Started the video on 18July'23. Day1- 00:42:50 Day2- 01:49:02 Day3- 03:17:00 Day4- 04:29:40 Day5- Did nothing due to other work. Day6- 05:28:05 Completed the video on 27July'23 :) Thank you "Shraddha Didi" for such an amazing video.

I've been following your HTML and CSS tutorial series on RU-vid, and it's been incredibly helpful! Each video has broken down complex concepts into simple, understandable steps, and I've learned so much from them. Thank you for the excellent content!

Very productive session for me. I am not that type of person who do commenting on yt video but this video won my heart. This is first time i learned CSS, i had no expereince of CSS, After watching this video, i think i can handle any type of industry oriented CSS related projects.

Completed the whole lecture in 2x. Did practical on each step. It took me 5 days to complete this. Thank god I found it. It helped a lot.

It's takes lots of work behind-the-scenes we appreciate your work... Thank you for this lovely highly productive content ❤

Level 1 - 12:14 - Intro - CSS Syntax - Types of Adding CSS - Colors - Background Color - Types of Selectors - # Id and . Class Selector - Practice Set 1 - 1:05:00 - Text Properties - Font Properties - Absolute Units in CSS - Practice Set 2 - 1:48:52 Level 2 - 1:55:44 - Box Model in CSS - Practice Set 3 - 2:24:48 - Display Property - Alpha Channel - Practice Set 4 - 2:52:32 Level 3 - 3:02:48 - Relative Units in CSS - Position Properties - Z-index - Background Size - Practice Set 5 - 3:43:45 Level 4 - 3:50:33 - Flexbox - Practice Set 6 - 4:18:36 Level 5 - 4:47:32 - Transition - 4:48:26 Level 6 - Project Amazon Clone - Start - 5:38:38 Made some formatting improvements for better readability.

Thanks ma'am because of you right now I am in royal Enfield working as a web development

How to download images

We need this type of JavaScript tutorial also with notes ❤️

We want bootstrap in one shot

Now concept of Height and width is clear.....kudos

I apriciated I learn a lot here❤ May Allah give you success in every walk of life

This is my First Time absorbing information from you & your channel. I can easily say, you make the process of learning ceaseless for guys like me who wanna fubar the keyboard when asked to code. I legit detest coding, to this day I do, even after you teaching it. Somethings in life you can't change your opinion & feelings for, but even while hating it your explanation is so grandeur, it just slid in my mind easy. Thanks for being the way you just did it for me.

Really great content Shradha - I have been a software engg for over 20 years and I am so happy and proud to see such super simple and yet very high-quality content on this topic (Y) One important thing I noticed is that in Level 4, you may have jumped from justify-content to align-content skipping flex-wrap and align-items

12 th student aajao jaldi 😅

I salute to your explanation... 🎉🎉❤❤.. Understandable thank you😊

You may have forgotten to discuss flex-wrap - TIME STAMP ( 4:08:00)

It's 12:27AM here in Karachi, Sindh, Pakistan and I opened RU-vid to in order to see a CSS full course video so that I can get an idea and do it practically tommorow morning in library but suddenly this video appeared making me feel so glad...I have no words to pay gratitude to your all the team out there specifically, Shardha I am heavily indebted to you for making HTML language such an easy task for me before and now CSS..Again bundle of thanks for such wonderful content. Insha'ALLAH very soon will visit India the Golden Soil♥️🌹

I've done to watch full video,I knew many things,but learn huge..

I am very thankful to you, Didi, you taught me a lot or important CSS, it is because of you that I have learned CSS or because of you, I am now able to get into the line of coding, I am thankful to you from the bottom of my heart, Didi. 🥰😍🤩

mind blowing presentation...Fantastic! Clear explanations and practical examples make learning CSS a breeze. Thank you!🙌

I have been waiting for this course for a long time since learning html it finally arrived❤❤

very nice css course and it is absolutely for beginners and does not require any knowledge before.

Legends skipping college and....watching this whole playlist😂❤

Thank you for making this course. My exams just finshed and I was about to start your css playlist and I saw this video. And I am really excited to watch this because it is latest and as I finshed this. A big wait for this kind of java script course. Really helpful videos really appreciate it❤

Fantastic! Clear explanations and practical examples make learning CSS a breeze. Thank you!🙌

Great learning experience in apna college I am studying since apni kaksha till journey going on with these teachers from once they were students . I must say Aman Bhaiya gives his honest and best efforts ❤😊

Notes: 1:04:31(where to use class selector) 1:25:32 1:41:16(font family) 1:43:37(font size) 1:57:58(content and margin) 1:59:05(height and width of content) 2:01:35 2:26:43(creating a nav bar without flexbox) 2:44:40(drawback of using display:inline for , instead use display: inline-block) 2:46:01 2:46:25 2:48:05(visibility vs display:none) 3:05:15 (%) 3:06:42 3:08:17 3:14:58(vh and vw) 3:15:25 (explanation of vh)( 20vh means 20% of viewport height) 3:20:28(position static) 3:21:28(position relative) 3:26:30(absolute vs fixed) 3:29:16(we use position fixed for creating navbars) 3:30:06(sticky) 3:31:35(z index) 3:36:25(summary of positions) 3:40:42(backcround-size:cover) 3:51:32(flex box definition) 3:56:59( text-align : center) 4:08:02(flex properties for flex container) [direction of flexbox(flex-direction) is by default, row direction so main axis = x axis cross axis = y axis for aligning items along cross axis we have align-items.For aligning items along main axis, we have justify-content . when flex-direction is row, items will render in row direction, main axis is in row direction. and when flex direcion is column, items will render in column direcion, main axis is in column direction. ] 4:39:32(media query) 4:54:00(transitions) 4:59:07(transform)

Your teaching method is amazing mam .You are doing well mam and i request you please bring this type of JavaScript tutorial as soon as possible and i hope you come back with new JavaScript video soon 📸

The most awaited tutorial ❤ Looking forward to JavaScript with projects also.

Thanks for this amazing full course. It is really helpful and made me confident to start frontend.

i am watching your all lecture, HTML, CSS, And Next Java Script Learn, very very Amazing project, i am creating this same project, didi😍🤩😍

Im an international student and it’ll help me a lot to brush up my previously learnt concepts. Thanks apna college team❤ even helping me in Canada. Been studying from Aman bhaiya from my 11th grade. So grateful for having you guys in my era. Means a lot ❤

just started learning now , you are the best teacher mam 😀

All video on different topics are really helpful for me. Thanks a lot. You should start to provide online coaching also.

You're a great teacher to explain everything. I'm just a beginner and don't know about css but now i know everything about this I need this type of complete shot in JavaScript 😊

The most needful tutorial ❤ Looking forward to JavaScript with projects also.

bhaii mai kal se dekh raha hu

didi tumchya ya lecture ne life change zali ahe mazya jivnala navin diksha milali aahe thanks a lot for these lecture and teach me🥰

Really feel blessed to have you as a teacher😀THANK YOU SO MUCH💖 MAM for this tutorial...

Mam please upload... javascript lec like this html and css lecture... eagerly waiting mam please upload javascript lecs from basic to advanced soon mam

I had a problem with aligning the text. I was figuring out what to do, then finally i realized that i wrote 'centre' instead of 'center' value for text-align attribute.

If teachers like you are available on every platform then every student who don't even have a it background he can learn the programming in easiest ways really appreciate excellent teaching

i was never used to watch tutorials barely used to watch any tutorial more then a min but i watched yours fully without skip or speed up actually i even rewinded and most of the time paused and tried it on my own laptop

It is very useful for me thank u mam Who is watching this video in 18🤣🤣 April 2024

I'm watching this today sat 27, 2024.. and this girl is so ..good ..the way of her teaching.. is so good.. better than wscube🤝🏻 I'm from Pakistan

Thank you so much! Just went through the HTML one shout and it cant get better to learn CSS from you

She is the best teacher. If she uploads such tutorial of Javascript, it will be very helpful for students. Thank you so much didi from Pakistan.

u r best mam no body can teach like u ...........aap to aisa padate ki pattar ko bhi samaj me aa jaye

First all of 'Thank you very much didi' . I am from Bangladesh. This video is very helpful for me.

Unfortunately, this video is missing the part of text-wrap and align-items of Flex properties for Flex container at 4:08:00. This video was really helpful for me to understand well as a beginner. U should check the missing part of the video. Thanks.

Where are the downloaded images?

Really Loved it, Thank you so much Shraddha di

What a great demonstration of HTML and css and such kinds of illustrations are very difficult to find on the RU-vid. Thanks for posting such a great material on css which is a building block of and front end.

This video is very helpful for me thank you shraddha didi❤and amit bhaiya

Best notes I see hear. Thanks thanks thanks you and your team....

Thank you mam!!! We need this type of javascript tutorials also❤

I am very grateful of you mam. I have learned CSS and HTML from you .I am from Pakistan . In this era there is many institute that teach web development but it is too much expensive they are just making fool innocent student now I have learned both with no cost thanks

Thanks a lot, today I hve completed 👌💯 enjoyed the CSS session 🫸🫸

Great lecture mam..hats off to your dedication and way of teaching complex concepts in a simple manner..

You're doing great! Learning from RU-vid has been incredibly helpful in my front-end development journey. Completed HTML, almost done with CSS, and then onto JavaScript! Thank you for the valuable content! Happy coding! 😊

Thankyou so much didi its really helpfull. you are the best teacher !!!

This video is very useful video.. Your teaching skill is very good and easy to understand. Keep it up di...

Didi your teaching style is too good, I already know basic and intermediate CSS but the way you are explaining it to beginners is really awesome. I just landed on the video to check out the projects but the way you started explaining kept me watching from the beginning. Too Good 🤩

Thank You So much Shraddha Didi for providing such a good Content and explaining every single topic in a easy way. Project was also very Amazing. We are also waiting for this type of JavaScript Tutorial and many more.

#div1{ width: 100px; height: 100px; background-color: green; border-radius: 50%; } #div2{ color: rgb(255, 255, 255); background-color: rgb(75, 71, 71); height: 80px; padding-top: 10px; font-size: large; } button{ color: white; background-color: orange; } big{ color: orange; } #div3{ padding-left: 30px; padding-top: 20px; padding-bottom: 15px; background-color: black; height: 180px; width: 80px; } #red{ background-color: red; border-radius: 50%; height: 45px; width: 45px; } #yellow{ background-color: rgb(204, 204, 10); border-radius: 50%; height: 45px; width: 45px; } #green{ background-color:rgb(11, 139, 11); border-radius: 50%; height: 45px; width: 45px; } this is code of stylesheet for practice set 3

Your Alpha delta course is so expensive in my country and Y are the only 1 one who can teach me programming language your teaching way is so simple easy to learn

I'm your biggest fan . You are my inspiration in coding. After html I was waiting for this CSS course. Thank You A lot😊😊

We Want this type of JavaScript and php tutorial in one shot with projects... And Thank you so much for this...

Didi, just want to thank you from the bottom of my heart.🙂, you explained CSS beautifully, all the concepts were very easy to understand. I'll definitely come back here anytime I need to revise my CSS in the future.👍

You are a great youtuber with good teachers to teach coding and development. You are amazing and same for your team. Don't stop make more videos on web development 🥰🥰🤝👏👏👏👏

Thanks in MILLIONS didi...💗 I completed this entire lecture in 4 days with notes & project...!!!💗

Thank hou aap ka video ma,m mere liye bahot helpful rha apko dil❤ se thank you ❤

thank you soo much for beautifully teaching this course

Amazing session mam, waiting for javascript session like this in one video with all imp topics.

We want a css like JAVASCRIPT zero to hero video which will be more detailed and simple than all other videos on RU-vid, this hope is from me. Thanks looking forward to your video🙏🏼👍

Colour:Hex type {255,0,0} yani #ff0000 means f ki value 16 hai to ff=16*16 =256 yani dono system same hai but type of writing is different.

**MY TIMESTAMPS** Day 01 - 1:26:07 Night 01 - 2:08:53 Day 01 and Night 03 - Not attended because of Exam Day 04 - Skipped night 05 -2:38:19 Day 06 and night 06 - 3:03:25 day 11 - 4:08:06

Day 1-1:06:05 Day 2- 1:55:45 Day 3- 2:55:55 Day 4- 3:50:33 Day 5- 4:47:32 Day 6- 5:38:31

Nice video ma'am. Very helpful. We have reached pro-level in CSS with the help of this tutorial....😀

Very very helpful video Shraddha didi thank you ❤❤😊

Awaiting one from you Shraddha didi..and your the one of best tutor on RU-vid❤. Thanks a lot for uploading a video beforehand of our Exams😊..

i was just trying to find out this CSS lecture by you didi... but couldn't 😢.....but suddenly i found it with upload time 43mins ago.... perhaps you heard my wish❤... thanks a lot from deep of my heart. i watching your lectures regularly and sincerely.

thank you so much , this is a great help to your side maam.

i don't know Hindi but i understand your lectures mam tq

Hello! There might have been a small mistake while editing this video, the segmental videos of the following subtopics of the Flex Properties have been mistakenly skipped. Subtopics: -- Flex-wrap -- Align-items 4:07:57

best youtube css complete video you are genius