Burlington Code Academy
  • Home
  • Bootcamp
  • Events
  • Blog
  • Apply
No site found for btvca-curriculum.herokuapp.com; using Bootcamp content.
  1. Home
  2. Tracks
  3. Responsive Layout with CSS

Topics

CSS-FlexboxCSS-GridMedia-QueriesPositioningResponsive-Layout

Lessons

 Page Layout With CSS
 Introduction to Responsive Development
 Page Layout with CSS Grid Video
 Page Layout With CSS Flexbox
 Navigation

Labs

 Image Wrapping
 Make It Pretty
 Shift It Around
 FreeCodeCamp "Responsive Web Design"

Projects

  • Mint Login

Links

  • W3Schools Positioning Exercise
  • W3Schools Responsive HTML Development
  • Responsive Website Basics (in 3 simple steps)
  • Mozilla CSS Grid Tutorial - A thourough walk-through of CSS Grid and related tools
  • Grid Garden - a step-by-step game that teaches you CSS Grid
  • Incredibly Easy Layouts with CSS Grid - Jen Simmons shows you how to do a common responsive image gallery in just two lines of code.
  • Using Flexbox + CSS Grid Together: Easy Gallery Layout - Jen Simmons explains how to nest Flexbox and Grid together to make common layouts easy.
  • Flexbox Froggy - a step-by-step test-driven game that teaches you flexbox
  • Flexbox Defense
  • How Flexbox Works With Animated Images
  • Learn CSS Flexbox in 5 Minutes
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox
  • https://yoksel.github.io/flex-cheatsheet/#align-items
  • https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
"Burlington Code Academy Curriculum" by Burlington Code Academy is licensed under:
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Creative Commons License