π Hello, I'm Dave Gray.
β Check out my YouTube Channel with all of my tutorials.
β Buy Me A Coffee
π Follow Me:
πΊ YouTube Playlist for this repository.
π This repository shares ALL of the resources referenced during the CSS tutorial series.
DO NOT COPY FOR AN ASSIGNMENT - Avoid plagiarism and adhere to the spirit of this Academic Honesty Policy.
- π Google Chrome Web Browser
- π Visual Studio Code (aka VS Code)
- π Live Server VS Code Extension
- π vscode-icons VS Code Extension
- π Github Themes VS Code Extension
- π W3C CSS Validator
- π Specificity Calculator
- π HTML Special Characters
- π Can I Use
- π Flexbox Froggy
- π CSS Grid Garden
- π MDN: CSS
- π MDN: CSS Basics
- π MDN: Applying Color to HTML Elements using CSS
- π MDN: CSS Values and Units
- π MDN: The Box Model
- π MDN: Styling Lists
- π MDN: Display Property
- π MDN: Floats
- π MDN: Basic Concepts of MultiCol
- π MDN: Margin Collapsing
- π MDN: Position
- π MDN: Flexbox
- π MDN: Basic Concepts of Grid Layout
- π MDN: Grid Template Areas
- π MDN: CSS Images
- π MDN: CSS Background Images
- π Chip Cullen: Content Layout Shift
- π MDN: CSS Media Queries
- π MDN: CSS Pseudo-Classes and Pseudo-Elements
- π MDN: CSS List of Pseudo-Classes
- π MDN: CSS List of Pseudo-Elements
- π MDN: CSS Custom Properties (Variables)
- π MDN: CSS Functions
- π MDN: CSS Transform
- π MDN: CSS Transition
- π MDN: CSS Animations
- π MDN: Organizing Your CSS
- π Scott O'Hara: Ordering CSS for Everyone
- π Get BEM: Introduction
- π MDN: Grid and The Danger of Markup Flattening
- π CanIUse.com: display: contents
- π MDN: Fundamental Text and Font Styling
- π CSSFontStack.com: Websafe Fonts
- π MDN: Styling Links
- π MDN: White-Space
- π Coolors Contrast Checker
- π WebAIM Contrast Checker
- π Coolors Palette Generator
- π ColorHub.app Palette Generator
- π HTML Color Codes
- Placeholder Image Generators:
- π 21 of the Best
- Sites with Freely-Usable Images:
- π Unsplash.com
- π Pexels.com
- π Gratisography.com
- π Pixabay.com
- Image Editing / Resizing Software:
- π For Windows: Irfanview
- π As a Service: Canva.com
- π Suggestions for Macs
- Full Featured Editor for Windows/Mac/Linux:
- π Gimp
- Image Compression (shrink file size):
- π TinyPNG
- π Chapter 2 Selectors
- π Chapter 3 Colors
- π Chapter 4 Unit & Sizes
- π Chapter 5 Box Model
- π Chapter 6 Typography
- π Chapter 7 Styling Links
- π Chapter 8 List Styles
- π Chapter 9 Mini Project
- π Chapter 10 Display
- π Chapter 11 Float
- π Chapter 12 Columns
- π Chapter 13 Position
- π Chapter 13 Completed Code
- π Chapter 14 Flexbox
- π Chapter 14 Completed Code
- π Chapter 15 Grid Layout
- π Chapter 15 Completed Code
- π Chapter 16 Images
- π Chapter 16 Completed Code
- π Chapter 17 Media Queries
- π Chapter 17 Completed Code
- π Chapter 18 Card
- π Chapter 18 Completed Code
- π Chapter 19 Pseudo
- π Chapter 19 Completed Code
- π Chapter 20 Variables
- π Chapter 20 Completed Code
- π Chapter 21 Functions
- π Chapter 21 Completed Code
- π Chapter 22 Animations
- π Chapter 22 Completed Code
- π Chapter 23 Organization
- π Chapter 23 Completed Code
- π Chapter 24 Final Project
- π Chapter 24 Completed Code
π©π©π© πΊ Youtube Video for the Bonus Lesson