Welcome!
  • Course Overview
Git Essentials
  • What is Git?
  • See Git in Action
  • Important Note About Text Editing Software
  • Quick Note For Mac Users
  • Git Your Hands Dirty
  • Setup Your GitHub
Intro to Node.js & NPM
  • The Need for Automation and Organization
  • A Quick Note
  • Node.js Introduction
  • NPM Introduction
  • Important Note About Package Versions To Save You Frustration
Webpack Essentials
  • Webpack Introduction
  • Setup Your Text Editor To Understand PostCSS Syntax
  • CSS With Webpack
  • Important Note
CSS Architecture
  • CSS File Architecture
  • What is BEM?
  • Complete Two Blocks
Quick Webpack Timeout
  • Webpack Dev Server
Mobile-first Essentials
  • What does "Mobile-first" Mean?
  • Responsive Images
  • Tips for Testing Responsive Images
Let's Build!
  • Creating Reusable Blocks
  • Headline Block
  • Column Layout Block
  • Attention to Detail (Part 1)
  • Attention to Detail (Part 2)
Git Timeout
  • Git Branches
Building "Our Features" Section
  • Styling Our Features (Part 1)
  • Styling Our Features (Part 2)
Building "Testimonial" Section
  • Styling Testimonials (Part 1)
  • Quick Note
  • Styling Testimonials (Part 2)
  • Styling Testimonials (Part 3)
Let's Finish Styling our Site
  • Styling our Footer
  • Hexadecimal to RGBA Color In The Next Lesson
  • Styling our Header (Part 1)
  • Styling our Header (Part 2)
  • CSS Grid (Overlapping Content)
  • CSS Grid For Columns
JavaScript Organization
  • Object-Oriented Programming
  • The JS Module Pattern and "webpack"
Writing JavaScript for Our Header Menu
  • How to Avoid Spaghetti Code
  • Adjusting Our Mobile Menu
  • Animating Hamburger Menu Icon Into an "X"
  • Optional: Removing Floats from Site Header
Revealing Elements on Scroll
  • Revealing Elements on Scroll
  • Quick Note
  • Revealing Elements on Scroll (Part 2)
  • Revealing Elements on Scroll (Part 3)
Desktop Sticky Header
  • Desktop Sticky Header (Part 1)
  • Desktop Sticky Header (Part 2)
  • Desktop Sticky Header (Part 3)
Build Our Own Modal / Lightbox Overlay
  • Building a Modal From Scratch (Part 1)
  • Building a Modal From Scratch (Part 2)
Code Splitting & Lazy Loading
  • Code Splitting With Webpack
  • Lazy Loading Images for Faster Page Loads
Building and Deploying
  • Preparing Our Files for Go Live (Part 1)
  • Preparing Our Files for Go Live (Part 2)
  • Note About Vendor JS File
  • Preparing Our Files For Go Live (Part 3)
  • Preparing Our Files For Go Live (Part 4)
  • Go Live! Deploying our Site to GitHub Pages
Netlify (Automated Builds & Cloud Functions)
  • Netlify Introduction
  • Cloud Functions / AWS Lambda Example (Part 1)
  • Cloud Functions / AWS Lambda Example (Part 2)
  • Cloud Functions / AWS Lambda Example (Part 3)
  • CORS Solution (Test Cloud Function from Localhost)
Integrating React Into Our Workflow
  • Integrating React Into Our Workflow
Git Timeout
  • Git Tips - How to Handle (and Avoid) Merge Conflicts
Looking Forward
  • Job Interviews
  • Next Steps & Career Progression
  • Bonus Lecture