Course Assignments - Githubissues

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

Section 1: Welcome, Welcome, Welcome

[x] Watch Lecture 1: Welcome to the Most Advanced CSS Course Ever!
[x] Review Note 2: READ BEFORE YOUR START
[x] Watch Lecture 3: Setting up Our Tools

Elapsed Time: 15 minutes (setting up notes, vs code, starter files, github, etc.)

Section 2: Natours Project — Setup and First Steps (Part 1)

[x] Watch Lecture 4: Section Intro
[x] Watch Lecture 5: Project Overview
[x] Watch Lecture 6: Building the Header - Part 1
[x] Watch Lecture 7: Building the Header - Part 2
[x] Watch Lecture 8: Creating Cool CSS Animations
[x] Watch Lecture 9: Building a Complex Animated Button - Part 1
[x] Watch Lecture 10: Building a Complex Animated Button - Part 2 ** Commit and push project to github

Elapsed Time: 1 hour 10 minutes (w/ notes)

Section 3: How CSS Works: A Look Behind the Scenes

[x] Watch Lecture 12: Three Pillars of Writing Good HTML and CSS (Never Forget Them!)
[x] Watch Lecture 13: How CSS Works Behind the Scenes: An Overview
[x] Watch Lecture 14: How CSS is Parsed, Part 1: The Cascade and Specificity
[x] Watch Lecture 15: Specificity in Practice
[x] Watch Lecture 16: How CSS is Parsed, Part 2: Value Processing
[x] Watch Lecture 17: How CSS is Parsed, Part 3: Inheritance
[x] Watch Lecture 18: Converting px to rem: An Effective Workflow
[x] Watch Lecture 19: How CSS Renders a Website: The Visual Formatting Model
[x] Watch Lecture 20: CSS Architecture, Components and BEM
[x] Watch Lecture 21: Implementing BEM in the Natours Project

Elapsed Time: 2 hours (w/ notes)

Section 4: Introduction to Sass and NPM

[x] Watch Lecture 22: Section Intro
[x] Watch Lecture 23: What is Sass?
[x] Watch Lecture 24: First Steps with Sass: Variables and Nesting
[x] Watch Lecture 25: First Steps with Sass: Mixins, Extends and Functions
[x] Watch Lecture 26: A Brief Introduction to the Command Line
[x] Watch Lecture 27: NPM Packages: Let's Install Sass Locally
[x] Watch Lecture 28: NPM Scripts: Let's Write and Compile Sass Locally
[x] Watch Lecture 29: The Easiest Way of Automatically Reloading a Page on File Changes

Elapsed Time: 1hr30min (had some trouble w/ npm)

Section 5: Natours Project — Using Advanced CSS and Sass (Part 2)

[x] Watch Lecture 33: Review: Responsive Design Principles and Layout Types
[x] Watch Lecture 34: Building a Custom Grid with Floats
[x] Watch Lecture 35: Building the About Section - Part 1
[x] Watch Lecture 36: Building the About Section - Part 2
[x] Watch Lecture 37: Building the About Section - Part 3
[x] Watch Lecture 38: Building the Features Section
[x] Watch Lecture 39: Building the Tours Section - Part 1
[x] Watch Lecture 40: Building the Tours Section - Part 2
[x] Watch Lecture 41: Building the Tours Section - Part 3
[x] Watch Lecture 42: Building the Stories Section - Part 1
[x] Watch Lecture 43: Building the Stories Section - Part 2
[x] Watch Lecture 44: Building the Stories Section - Part 3
[x] Watch Lecture 45: Building the Booking Section - Part 1
[x] Watch Lecture 46: Building the Booking Section - Part 2
[x] Watch Lecture 47: Building the Booking Section - Part 3
[x] Watch Lecture 48: Building the Footer
[x] Watch Lecture 49: Building the Navigation - Part 1
[x] Watch Lecture 50: Building the Navigation - Part 2
[x] Watch Lecture 51: Building the Navigation - Part 3
[x] Watch Lecture 52: Building a Pure CSS Popup - Part 1
[x] Watch Lecture 53: Building a Pure CSS Popup - Part 2 ** Commit and push project to github

Elapsed Time: 10hours

Section 6: Natours Project — Advanced Responsive Design (Part 3)

[x] Watch Lecture 54: Section Intro
[x] Watch Lecture 55: Mobile-First vs Desktop-First and Breakpoints
[x] Watch Lecture 56: Let's Use the Power of Sass Mixins to Write Media Queries
[x] Watch Lecture 57: Writing Media Queries - Base, Typography and Layout
[x] Watch Lecture 58: Writing Media Queries - Layout, About and Features Sections
[x] Watch Lecture 59: Writing Media Queries - Tours, Stories and Booking Sections
[x] Watch Lecture 60: An Overview of Responsive Images
[x] Watch Lecture 61: Responsive Images in HTML - Art Direction and Density Switching
[x] Watch Lecture 62: Responsive Images in HTML - Density and Resolution Switching
[x] Watch Lecture 63: Responsive Images in CSS
[x] Watch Lecture 64: Testing for Browser Support with @supports
[x] Watch Lecture 65: Setting up a Simple Build Process with NPM Scripts
[x] Watch Lecture 66: Wrapping up the Natours Project: Final Considerations ** Commit and push final project to github

Elapsed Time: 3 hours (w/ notes, etc.)

Section 7: Trillo Project — Master Flexbox!

[x] Watch Lecture 67: Section Intro
[x] Watch Lecture 68: Why Flexbox: An Overview of the Philosophy Behind Flexbox
[x] Watch Lecture 69: A Basic Intro to Flexbox: The Flex Container
[x] Watch Lecture 70: A Basic Intro to Flexbox: Flex Items
[x] Watch Lecture 71: A Basic Intro to Flexbox: Adding More Flex Items
[x] Watch Lecture 72: Project Overview and review resources
[x] Watch Lecture 73: Defining Project Settings and Custom Properties
[x] Watch Lecture 74: Building the Overall Layout
[x] Watch Lecture 75: Building the Header - Part 1
[x] Watch Lecture 76: Building the Header - Part 2
[x] Watch Lecture 77: Building the Header - Part 3
[x] Watch Lecture 78: Building the Navigation - Part 1
[x] Watch Lecture 79: Building the Navigation - Part 2
[x] Watch Lecture 80: Building the Hotel Overview - Part 1
[x] Watch Lecture 81: Building the Hotel Overview - Part 2
[x] Watch Lecture 82: Building the Description Section - Part 1
[x] Watch Lecture 83: Building the Description Section - Part 2
[x] Watch Lecture 84: Building the User Reviews Section
[x] Watch Lecture 85: Building the CTA Section
[x] Watch Lecture 86: Writing Media Queries - Part 1
[x] Watch Lecture 87: Writing Media Queries - Part 2
[x] Watch Lecture 88: Wrapping up the Trillo Project: Final Considerations Elapsed Time: 5-6 hours w/ notes

Section 8: A Quick Introduction to CSS Grid Layouts

[x] Watch Lecture 89: Section Intro
[x] Watch Lecture 90: Why CSS Grid: A Whole New Mindset
[x] Watch Lecture 91: Quick Setup for This Section
[x] Watch Lecture 92: Creating Our First Grid
[x] Watch Lecture 93: Getting Familiar with the fr Unit
[x] Watch Lecture 94: Positioning Grid Items
[x] Watch Lecture 95: Spanning Grid Items
[x] Assignment 96: Grid Challenge (complete and push to new branch)
[x] Watch Lecture 97: Grid Challenge: A Basic Solution
[x] Watch Lecture 98: Naming Grid Lines
[x] Watch Lecture 99: Naming Grid Areas
[x] Watch Lecture 100: Implicit Grids vs. Explicit Grids
[x] Watch Lecture 101: Aligning Grid Items
[x] Watch Lecture 102: Aligning Tracks
[x] Watch Lecture 103: Using min-content, max-content and the minmax() function
[x] Watch Lecture 104: Responsive Layouts with auto-fit and auto-fill

Elapsed Time: 2 hours with notes

Section 9: Nexter Project — Master CSS Grid Layouts!

[x] Watch Lecture 105: Project Overview and Setup and review resources
[x] Watch Lecture 106: Building the Overall Layout - Part 1
[x] Watch Lecture 107: Building the Overall Layout - Part 2
[x] Watch Lecture 108: Building the Features Section - Part 1
[x] Watch Lecture 109: Building the Features Section - Part 2
[x] Watch Lecture 110: Building the Story Section - Part 1
[x] Watch Lecture 111: Building the Story Section - Part 2
[x] Watch Lecture 112: Building the Homes Section - Part 1
[x] Watch Lecture 113: Building the Homes Section - Part 2
[x] Watch Lecture 114: Building the Gallery - Part 1
[x] Watch Lecture 115: Building the Gallery - Part 2 **Challenge - create and push new branch
[x] Watch Lecture 116: Building the Footer
[x] Watch Lecture 117: Building the Sidebar
[x] Watch Lecture 118: Building the Header - Part 1
[x] Watch Lecture 119: Building the Header - Part 2
[x] Watch Lecture 120: Building the Realtors Section
[x] Watch Lecture 121: Writing Media Queries - Part 1
[x] Watch Lecture 122: Writing Media Queries - Part 2
[x] Watch Lecture 123: Browser Support for CSS Grid
[x] Watch Lecture 124: Wrapping up the Nexter Project: Final Considerations ** Commit and push final project to github

Elapsed Time: 6 Hours w/ Notes.

Section 10: That's It, Everyone!

[x] Watch Lecture 125: See You Next Time, CSS Master!
[x] Review Note 126: My Other Courses + Updates

Elapsed Time: 2 minutes

ameerghazal / Advanced-CSS---Sass-Course

Course Assignments #1