YoVDO

CSS Tutorial - Zero to Hero (Complete Course)

Offered By: freeCodeCamp

Tags

HTML & CSS Courses Computer Science Courses Web Development Courses Flexbox Courses

Course Description

Overview

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.

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

Intro to HTML and CSS
Udacity
Responsive Web Design Fundamentals
Google via Udacity
HTML5 and CSS Fundamentals
World Wide Web Consortium (W3C) via edX
CSS Basics
Microsoft via edX
Advanced CSS Concepts
Microsoft via edX