Resources: Web Development

Frontend web development resources

Resource Lists

Note: there are many excellent options, pick one and confidently stick with it.
- Recommend freeCodeCamp for several reasons, but it’s good to be aware of other options for reference
Recommended
- freeCodeCamp – complete Frontend to Backend curriculum **FREE**
Additional References
- #100Devs: 30-week software engineering Bootcamp with Leon **FREE**
- Udemy: The Complete 2022 Web Development Bootcamp (Dr Angela Yu)
- Udemy: The Web Developer Bootcamp 2022 (Colt Steele)
- Udemy: The Complete Web Developer in 2022: Zero to Mastery (Andrei Neagoie)
- Udemy: The Complete Junior to Senior Web Developer Roadmap (2022) (Andrei Neagoie)

Complete HTML + CSS
- Beginner
  - Udemy: Web Design for Web Developers (Jonas Schmedtmann) **FREE** … 2.5 hr intro
  - freeCodeCamp: Responsive Web Design **FREE**
- Advanced
  - Udemy: Build Responsive Real-World Websites with HTML and CSS (Jonas Schmedtmann)
  - Udemy: Advanced CSS and Sass: Flexbox, Grid, Animations, and More! (Jonas Schmedtmann)
CSS Advanced
- Book (highly rated)
  - Complete Guide to CSS Flex & Grid: Vanilla CSS & Tailwind CSS (Shruti Balasa) … $10
    - note: posting here so it doesn’t get lost in the list, but might consider it after utilizing the following resources on Flex/Grid
    - download: try the free 25 pg download
- Responsive Layouts
  - Conquering Responsive Layouts: 21-Day Challenge **FREE**
- CSS Selectors
  - CSS Diner **FREE**
- CSS Flexbox
  - Flexbox Froggy **FREE** (simple game)
  - Flexbox Defense **FREE** (simple game)
  - What the Flexbox? (Wes Bos) **FREE** (quality videos)
  - Flexbox Zombies (Dave Geddes) **FREE** (this looks like one for mastery after previous)
- CSS Grid
  - Grid Garden **FREE** (simple game)
  - CSS Grid (Wes Bos) **FREE** (quality videos)
  - Grid Critters (Dave Geddes) ($) (if Flexbox Zombies is good, worth buying)
- CSS Animation
  - CSS Animation **FREE**
- CSS Style Guide
  - Airbnb CSS Style Guide
CSS Preprocessor
- Sass (use in Jonas’s courses as well as fCC)
CSS Frameworks
- Tailwind CSS (highly recommended)
- Bootstrap (use in Jonas’s courses as well as fCC)

Udemy Course Projects – Jonas
- HTML + CSS
  - Omnifood
- Advanced CSS
Frontend Mentor Challenges
- Free: HTML + CSS
- Premium: HTML + CSS
Portfolio Website Examples
- freeCodeCamp: 15 Web Developer Portfolios to Inspire You
- noupe: 63 Best Web Developer Portfolio Examples
- HackerNoon: 21 Best Developer Portfolio Examples
- Next up … build the first version of yours!