CSS Tutorial – Zero to Hero (Complete Course)
August 5, 2024 2024-08-05 7:26
CSS Tutorial – Zero to Hero (Complete Course)
Learn CSS in this full course for beginners. CSS, or Cascading Style Sheet, is responsible for the styling and looks of a website.
In this course, we cover CSS from the ground up. You will learn everything from basic skills, such as coloring and text, to highly advanced skills, like custom animations.
You will learn about:
•Coloring
•Formatting
•Text
•Layout
•Grid
•Flexbox
•Animations
•Transitions
•And more!
💻 Code: https://github.com/Video-Lab/css-course-content
🎥 Course from Jad Khalili. To view more content from this instructor, visit:
https://www.udemy.com/user/jad-khalili/
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Course Achievements & Results
⌨️ (0:02:36) Introduction to Course
⌨️ (0:11:19) Downloading Necessary Software
⌨️ (0:12:30) Where to Find Project Files
⌨️ (0:14:28) What is CSS?
⌨️ (0:17:09) Creating & Linking a CSS Stylesheet
⌨️ (0:20:39) How to Test a Stylesheet
⌨️ (0:22:12) What is a Selector?
⌨️ (0:25:54) Classes & ID’s in HTML
⌨️ (0:31:52) Specificity & When to use Selectors
⌨️ (0:39:13) Pseudoselectors
⌨️ (0:47:58) Advanced Selectors
⌨️ (0:59:30) Attribute Selectors
⌨️ (0:09:38) What are Properties?
⌨️ (1:12:59) The CSS General Rule
⌨️ (1:17:37) Types of Colors
⌨️ (1:24:53) Coloring Text
⌨️ (1:32:30) Background Colors
⌨️ (1:36:56) Images/URL’s in CSS
⌨️ (1:42:30) Other Background Properties
⌨️ (1:48:59) Opacity/Transparency
⌨️ (1:52:17) Gradients
⌨️ (2:04:12) Introduction to Types of Units
⌨️ (2:15:57) Text Manipulation
⌨️ (2:23:54) Font Size, Bolding & Style
⌨️ (2:30:33) Font Families
⌨️ (2:37:08) Including External Fonts w/ Google Fonts
⌨️ (2:43:14) Using External Fonts
⌨️ (2:49:07) The CSS Box Model
⌨️ (2:53:18) Changing Content Size
⌨️ (2:59:07) CSS Borders
⌨️ (3:05:51) Margin & Padding
⌨️ (3:15:17) Float & Display Types
⌨️ (3:27:47) What is Flexbox?
⌨️ (3:31:35) Creating a Flex Container
⌨️ (3:34:09) Flex Direction & Wrap
⌨️ (3:38:26) Content Alignment
⌨️ (3:44:45) Flex Item Order
⌨️ (3:49:32) Shrink, Grow, & Basis
⌨️ (4:00:03) The ‘flex’ Property
⌨️ (4:03:21) Item Alignment
⌨️ (4:08:16) Grid vs Flexbox
⌨️ (4:11:14) Creating a Grid
⌨️ (4:13:30) Template Columns & Rows
⌨️ (4:21:12) Justify & Align Grid
⌨️ (4:28:10) Row & Column Gaps
⌨️ (4:33:13) Column & Row Lines
⌨️ (4:40:46) Grid Area
⌨️ (4:44:38) The Transition Property
⌨️ (4:58:05) Transformation Functions
⌨️ (5:12:26) Creating Animations w/ Keyframes
⌨️ (5:20:30) Adding an Animation
⌨️ (5:23:23) Animation Properties
⌨️ (5:34:49) Website Transformation Challenge
⌨️ (5:38:22) Website Transformation – SOLUTION
⌨️ (6:13:32) What to Learn Next
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://www.freecodecamp.org/news
source
Comments (49)
@videolab969
Thanks for featuring me! I hope you all enjoy the content. Good luck learning CSS!
@InspirePathway_01
If you wanna to see motivational content, join with me ❤
@berstae
alright, Let's MOVE ONn!
@Abhinav-bg5vx
now i learned how to move on !!!!
@avatarfreefire1289
Watched this course two years ago to start my journey as a web dev and stopped working for a year. 😕 I almost forgot everything and here I am after 2 years.
@claudiaariasgonzalez6941
I have a question how i can start use CSS for digital marketing
@Exposingthetruestories
alright, lets move on
no position
great videos anyway
@HalloBro393
I am basically learning HTML & CSS from freecodecamp, so how can I earn certificates related to these?
@LUBA24
Good tutorial
@jimmonte9826
The descriptions for next-sibling (+) and subsequent-sibling (~) combinators at around 0:52:00 do not appear to match the CSS documentation. Both only select an element when the component selectors have the same parent. However, the subsequent-sibling combinator does not require the selectors to be adjacent.
@Ezekiel_unabor
I wish there was a love reaction
@jaegercrown964
This is one of the finest css tutorial and the fact that this was uploaded 4 years ago, i couldn't find any better css tutorial than this
@studywithdeepti7112
Thank you so much
@janaranjania2537
Subtitle running too late 😢😢
@skreddysasi3404
💯💯💯
@smartgadgets5996
This video better than college 😅 thanks a lot.. 2023 still watching
@user-zt6xe1kh2w
can anyone help the subtitles dont work i am in troube
@user-zt6xe1kh2w
the subtitle dont work correctly
@nancynancyclark
Best tutorial!
@yogeshpande4282
Please create a course for
SCSS or Sass
@farhankhaliq002
Hello there I am facing problem in making linear gardients according to code can you please give me some guideline about gradients
@V27045
#CheckList
Day 1 – 1:42:36 Other background Properties
Day 2 – 2:16:04 Text Manipulation
Day 3- 3:15:29 Float & Display Types
Day 4- 4:21:12 Justify & Align Grid
Day 5- 4:44:38 The Transition Property
@mo.G_2020
aiit, I finished the vid
@suryaimmadisetty5252
subtitles are wrong timings …1@#$%^&
@onepixelplus
Fantastic! Clear explanations and practical examples make learning CSS a breeze. Thank you!🙌
@imnottheillest
Thank you Tom Holland!
@DramaQueen-qb5fb
I learned a lot from it. Thanks a lot.!.!🤍
@constantine6812
4:32
Grid-gap = Gap
Grid-column-gap = Column-gap
Grid-crow-gap = Row-gap
@clorofolle
The subtitles in this one are either wrong or out of sync, please fix!
@sasinduadithya6245
The subtitle is not good
@paulmupin565
Your tutorial is very understandable and interesting, its very helpful, is there any tutorial for HTML?
@rajeevmohan7538
It's faster with 1.5x
@englishguru0007
⌨ (0:00:00) Course Achievements & Results
⌨ (0:02:36) Introduction to Course
⌨ (0:11:19) Downloading Necessary Software
⌨ (0:12:30) Where to Find Project Files
⌨ (0:14:28) What is CSS?
⌨ (0:17:09) Creating & Linking a CSS Stylesheet
⌨ (0:20:39) How to Test a Stylesheet
⌨ (0:22:12) What is a Selector?
⌨ (0:25:54) Classes & ID's in HTML
⌨ (0:31:52) Specificity & When to use Selectors
⌨ (0:39:13) Pseudoselectors
⌨ (0:47:58) Advanced Selectors
⌨ (0:59:30) Attribute Selectors
⌨ (0:09:38) What are Properties?
⌨ (1:12:59) The CSS General Rule
⌨ (1:17:37) Types of Colors
⌨ (1:24:53) Coloring Text
⌨ (1:32:30) Background Colors
⌨ (1:36:56) Images/URL's in CSS
⌨ (1:42:30) Other Background Properties
⌨ (1:48:59) Opacity/Transparency
⌨ (1:52:17) Gradients
⌨ (2:04:12) Introduction to Types of Units
⌨ (2:15:57) Text Manipulation
⌨ (2:23:54) Font Size, Bolding & Style
⌨ (2:30:33) Font Families
⌨ (2:37:08) Including External Fonts w/ Google Fonts
⌨ (2:43:14) Using External Fonts
⌨ (2:49:07) The CSS Box Model
⌨ (2:53:18) Changing Content Size
⌨ (2:59:07) CSS Borders
⌨ (3:05:51) Margin & Padding
⌨ (3:15:17) Float & Display Types
⌨ (3:27:47) What is Flexbox?
⌨ (3:31:35) Creating a Flex Container
⌨ (3:34:09) Flex Direction & Wrap
⌨ (3:38:26) Content Alignment
⌨ (3:44:45) Flex Item Order
⌨ (3:49:32) Shrink, Grow, & Basis
⌨ (4:00:03) The 'flex' Property
⌨ (4:03:21) Item Alignment
⌨ (4:08:16) Grid vs Flexbox
⌨ (4:11:14) Creating a Grid
⌨ (4:13:30) Template Columns & Rows
⌨ (4:21:12) Justify & Align Grid
⌨ (4:28:10) Row & Column Gaps
⌨ (4:33:13) Column & Row Lines
⌨ (4:40:46) Grid Area
⌨ (4:44:38) The Transition Property
⌨ (4:58:05) Transformation Functions
⌨ (5:12:26) Creating Animations w/ Keyframes
⌨ (5:20:30) Adding an Animation
⌨ (5:23:23) Animation Properties
⌨ (5:34:49) Website Transformation Challenge
⌨ (5:38:22) Website Transformation – SOLUTION
⌨ (6:13:32) What to Learn Next
@ammarbouzenka1577
You have a great way of explaining…
Where can i find your html courses please?
@yashwanththati1001
If this guy had a GF suddenly , he said "Let's Move on !" it would be a Instant Breakup 😂
@a.t2032
48:11
@Lemon-ej4pn
Well it works in notepad even if you don't put the semicolon 1:12:56
@nikablujolina2369
Anyone needing notes on this as a lifelong reference, here ya go: file:///Users/veronikakochetova/Downloads/CSS%20Easy%20Blueprint.pdf
@ramonapereira128
You though us how to type the codes but can you please tell us how to go to that black thing to type the code
@user-nu2om4vb5l
Don't waste your time on watching this course.
@vaishaliranjan4862
Halfway done🎉
@abhayrathore1530
glad that i got this video for css.great work👍 learned alot.
@CamaguNcoso
Currently doing the Responsive Web Design course with freecodecamp. It's amazing at the moment and I still have to learn a lot with HTML and CSS. What I love about the course is its ability to teach and correct you when you are incorrect
@Abhinavkumar-og3xd
Please speak in hindi.
@Byiahhh
attribute selector 1:02:40
@sagarutwani4739
37:14 sorry but bulshit concept, that class and id is more powerful than selector etc..
it is a waterfall process, just place the code of selector below class and id and then see which code will effect🤐🤐🤐
@mscit_08_omprakash40
I don't know you but Thank you so much from my side I had started this course on march 25 and finished on April 2 You are such an inspiration to me and many as well. Love from India ❤ more specially is the way to speak thanks again!
@mostlycoffee7
great course
@stevelin2415
While the idea is great, some of the examples are confusing and not so clear. Pseudo classes/elements, only a few of them are mentioned.