Christina explains how to add colors and other design elements to take your webpages beyond just black text on a white background. She shows how to use selectors, how the box model defines the spacing and sizing of page elements, and how to style text and manage basic layouts with Flexbox and Grid. She also covers working with advanced selectors, creating fluid layouts, and determining when to use the float and position properties. Plus, at the end of the course, you'll walk away with an actual project—an online résumé page.
Topics include:
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts
Contents
00-Introduction
01-Styling documents consistently
02-What you should know
03-Tools and sample projects
01-Getting Started
01-HTML and CSS
02-Browser developer tools
03-Referencing CSS
04-Project overview and setup
05-Optimizing images and retina displays
06-Project Relative paths
07-Absolute paths
02-Core Concepts
01-CSS specifications and the W3C
02-CSS syntax and terminology
03-CSS values and units
04-The color and property values
05-Type and universal selectors
06-Class and ID selectors
07-Class and ID selector exercise
08-Descendant selectors
09-Grouping selectors
10-Inheritance and specificity
11-The cascade and importance
12-Project Adding colors
13-Pseudo-class selectors and links
14-Project Styling links
03-The Box Model
01-Introduction to the box model
02-Inline, block, and display
03-The box model properties
04-The box properties syntax and usage
05-Debugging the box model
06-Padding, margin, and border
07-Margin and layouts
08-Project Adding content wrappers
09-Project Margin and padding
04-Typography
01-Typography for the web
02-Changing the font-family
03-Font-weight and font-style
04-Web fonts with @font-face
05-Web fonts with Google Fonts
06-Project Google Fonts
07-The font-size property
08-Font shorthand
09-Text-decoration, text-align, and line-height
10-Project Typography styles
05-Layouts Float and Position
01-Introduction to float
02-The float and clear properties
03-Float and collapsed container
04-Layouts and the box model
05-Project Float and box model fix
06-Position
07-Position and z-index
06-Layouts Flexbox and Grid
01-Introduction to Grid and Flexbox
02-Introduction to Flexbox
03-Flexbox Orientation and ordering
04-Flexible sizing
05-Flexbox exercise
06-Flexbox Alignment
07-Project Flexbox alignment
08-Introduction to CSS Grid
09-The explicit grid
10-The implicit grid
11-Grid placement properties
12-Project Grid columns and Firefox Grid Inspector
07-Advanced Selectors
01-Introduction to advanced selectors
02-Relational selectors Combinators
03-Project Updates with combinators
04-Pseudo-class selectors First and last
05-Project Advanced selectors
08-Fluid and Responsive Layouts
01-Introduction to responsive design
02-Project Creating fluid layouts
03-Flexible background images
04-Project Flexible background image
05-Introduction to media queries
06-Media queries, widths, and breakpoints
07-Testing responsive layouts
08-Project Media queries and responsive layout
Download
Login to Download - Registration is Free in BlackJoomla but you should have points for download - FAQ
If after login, appears Warning (The security token did not match...) please refresh page and login again
Message
Before send Article, Video, contribution Please study FAQ
All of files compressed by WinRAR - use from Latest WinRAR before install
Password for all files:BlackJoomla.com