"CSS for Beginners"

Full Course - 24 25 Chapters

Author Links

👋 Hello, I'm Dave Gray.

✅ Check out my YouTube Channel with all of my tutorials.

🚩 Subscribe to my channel

☕ Buy Me A Coffee

🚀 Follow Me:

• Twitter
• LinkedIn
• Blog
• Reddit

Description

📺 YouTube Playlist for this repository.

🚀 This repository shares ALL of the resources referenced during the CSS tutorial series.

🎓 Academic Honesty

DO NOT COPY FOR AN ASSIGNMENT - Avoid plagiarism and adhere to the spirit of this Academic Honesty Policy.

⚙ Free Web Dev Tools

• 🔗 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

🕹️ Learning Games

• 🔗 Flexbox Froggy
• 🔗 CSS Grid Garden

📚 References

• 🔗 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

📚 Typography Resources:

• 🔗 MDN: Fundamental Text and Font Styling
• 🔗 CSSFontStack.com: Websafe Fonts
• 🔗 MDN: Styling Links
• 🔗 MDN: White-Space

📚 Color Resources:

• 🔗 Coolors Contrast Checker
• 🔗 WebAIM Contrast Checker
• 🔗 Coolors Palette Generator
• 🔗 ColorHub.app Palette Generator
• 🔗 HTML Color Codes

🖼️ Image Resources:

• 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

💻 Source Code

• 🔗 Chapter 2 Starter Code
• 🔗 Chapter 3 Starter Code
• 🔗 Chapter 4 Starter Code
• 🔗 Chapter 5 Starter Code
• 🔗 Chapter 6 Starter Code
• 🔗 Chapter 7 Starter Code
• 🔗 Chapter 8 Starter Code
• 🔗 Chapter 9 Starter Code
• 🔗 Chapter 10 Starter Code
• 🔗 Chapter 11 Starter Code
• 🔗 Chapter 12 Starter Code
• 🔗 Chapter 13 Starter Code
• 🔗 Chapter 13 Completed Code
• 🔗 Chapter 14 Starter Code
• 🔗 Chapter 14 Completed Code
• 🔗 Chapter 15 Starter Code
• 🔗 Chapter 15 Completed Code
• 🔗 Chapter 16 Starter Code
• 🔗 Chapter 16 Completed Code
• 🔗 Chapter 17 Starter Code
• 🔗 Chapter 17 Completed Code
• 🔗 Chapter 18 Starter Code
• 🔗 Chapter 18 Completed Code
• 🔗 Chapter 19 Starter Code
• 🔗 Chapter 19 Completed Code
• 🔗 Chapter 20 Starter Code
• 🔗 Chapter 20 Completed Code
• 🔗 Chapter 21 Starter Code
• 🔗 Chapter 21 Completed Code
• 🔗 Chapter 22 Starter Code
• 🔗 Chapter 22 Completed Code
• 🔗 Chapter 23 Starter Code
• 🔗 Chapter 23 Completed Code
• 🔗 Chapter 24 Starter Code
• 🔗 Chapter 24 Completed Code

🚩🚩🚩 📺 Youtube Video for the Bonus Lesson

• 🔗 BONUS: Chapter 25 Starter Code
• 🔗 BONUS: Chapter 25 Completed Code