Code Like This
  • Lessons
  • Projects
  • Bootcamp
  • Blog
No site found for codelikethis.herokuapp.com; using CodeLikeThis content.
  1. Tracks
  2. Responsive Layout with CSS

Topics

CSS-FlexboxCSS-GridMedia-QueriesPositioningResponsive-Layout

Lessons

 Page Layout With CSS (14 slides)
 Introduction to Responsive Development (9 slides)
 Page Layout With CSS Flexbox (12 slides)
 Page Layout with CSS Grid Video (5 slides)
 Navigation (7 slides)
 Other CSS Frameworks (0 slides)

Labs

 Learn CSS Layout
 FreeCodeCamp "Responsive Web Design"

Projects

  • Mint Login

Links

  • W3Schools Positioning Exercise
  • W3Schools Responsive HTML Development
  • Responsive Website Basics (in 3 simple steps)
  • 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
  • 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.
  • https://blog.webkid.io/css-frameworks-bootstrap-alternatives/
This curriculum was created by Alex Chaffee and Burlington Code Academy, with significant contributions from Joshua Burke, Robin Hrynyszyn, Robin Rainwalker, and Benjamin Boas.
"Code Like This" by Alex Chaffee is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Creative Commons License



This site built on Sinatra, Erector, Deck, Bootstrap, and so on.