Embark on a comprehensive 6-hour CSS tutorial that takes you from zero to hero in web styling. Master the fundamentals of Cascading Style Sheets, starting with basic concepts like coloring and text formatting, and progressing to advanced techniques such as custom animations. Explore essential topics including layout design, Grid and Flexbox implementation, transitions, and more. Follow along with hands-on coding exercises and access the provided GitHub repository for course content. Benefit from a well-structured curriculum covering selectors, properties, units, the CSS Box Model, and external font integration. Conclude with a practical website transformation challenge to apply your newly acquired skills. Perfect for beginners, this course equips you with the knowledge to create visually stunning and responsive web designs.
Overview
Syllabus
) Course Achievements & Results.
) Introduction to Course.
) Downloading Necessary Software.
) Where to Find Project Files.
) What is CSS?.
) Creating & Linking a CSS Stylesheet.
) How to Test a Stylesheet.
) What is a Selector?.
) Classes & ID's in HTML.
) Specificity & When to use Selectors.
) Pseudoselectors.
) Advanced Selectors.
) Attribute Selectors.
) What are Properties?.
) The CSS General Rule.
) Types of Colors.
) Coloring Text.
) Background Colors.
) Images/URL's in CSS.
) Other Background Properties.
) Opacity/Transparency.
) Gradients.
) Introduction to Types of Units.
) Text Manipulation.
) Font Size, Bolding & Style.
) Font Families.
) Including External Fonts w/ Google Fonts.
) Using External Fonts.
) The CSS Box Model.
) Changing Content Size.
) CSS Borders.
) Margin & Padding.
) Float & Display Types.
) What is Flexbox?.
) Creating a Flex Container.
) Flex Direction & Wrap.
) Content Alignment.
) Flex Item Order.
) Shrink, Grow, & Basis.
) The 'flex' Property.
) Item Alignment.
) Grid vs Flexbox.
) Creating a Grid.
) Template Columns & Rows.
) Justify & Align Grid.
) Row & Column Gaps.
) Column & Row Lines.
) Grid Area.
) The Transition Property.
) Transformation Functions.
) Creating Animations w/ Keyframes.
) Adding an Animation.
) Animation Properties.
) Website Transformation Challenge.
) Website Transformation - SOLUTION.
) What to Learn Next.
Taught by
freeCodeCamp.org
Related Courses
Related articles
Reviews
4.0 rating, based on 2 Class Central reviews
-
Review:
I recently had the pleasure of taking the "CSS Tutorial - Zero to Hero (Complete Course)," and I can confidently say that it's an absolute gem for anyone looking to master CSS. -
I this course I have learnt lots of new things in the CSS Tutorial-Zero to Hero course that how to design the whole website in addition there were lots of things which was interesting for me and I love them but the most important part is this that I got familiar with some new topic such as selectors, background color, background image, how to margin the images, and etc...
