Advanced CSS Novice

For this project, we expect you to look at these concepts:

• CSS fundamentals
• CSS advanced

Resources

Read or watch

• CSS Reference – A free visual guide to CSS
• Can I use,,, Support tables for HTML5, CSS3, etc
• CSS Reference
• CSS Properties | HTML Dog
• Box Sizing
• CSS Specificity
• CSS specificity calculator
• Play with CSS selector

Learning Objectives

At the end of this project, you are expected to be able to explain to anyone, without the help of Google:

• Selectors, properties, and values
• The difference between block and inline styling
• How to ensure consistency across all browers (CSS reset)
• How to setup CSS variables
• The differences between inline, embeded and external CSS
• How grid systems work (with floats)
• The difference between icons webfonts and SVG icons
• The difference between pseudo-classes and pseudo-elements
• How to make background gradients
• How to animate elements in CSS
• How to transform (2d, 3d) elements
• What vendor prefixes are

Requirements

General

• Allowed editors: vi, vim, emacs, VSCode, Atom
• All your files will be interpreted on Chrome (version 78.x)
• All your files should end with a new line
• All your files should start by a comment describing the task
• A README.md file, at the root of the folder of the project, is mandatory
• Your code should be W3C compliant and validate with W3C-Validator