🖌️
HTML/CSS - MERN 2021
  • Overview
  • Class Notes
    • Week 1 - Apr 17, 21st
    • Week 2 - Apr 24, 28th
    • Week 3 - May 1st, 5th
    • Week 4 - May 8th, May 12th
  • Intro
    • Welcome to MERN Full Stack
  • How The Web Works
    • DNS, TCP/IP, HTTP, HTML
    • Evolution of the Web Page
    • How a Web Page Gets Loaded
    • Chrome Dev Tools
  • Getting Started
    • IDE - Visual Studio Code
    • Version Control - Git/GitHub
  • Building An Article
    • Organizing Projects
    • Boilerplate HTML
    • Important HTML Rules
    • Common HTML Elements
    • Article HTML
    • Container Elements
    • Article Layout
    • Introduction to CSS
    • Article CSS
    • First Article - Chrome Dev Tools
  • Building a News site
    • Article Grid
    • Showcase Article
    • Navigation Bar
    • Footer
  • Important CSS Concepts
    • Colors
    • Typography
    • Block-level vs. Inline Elements
    • Box-Model
    • Emphasizing Text
    • Centering Elements on the Page
    • Border-radius
    • Box-shadow
    • Background Images
    • Grid vs Flexbox
    • Flexbox
    • Grid
    • Units
  • OTHER
    • Forms
  • Exercises
  • Chrome Development Tools Intro
  • html-tags
  • HTML Cheatsheet
  • super-hero CSS
  • FE Masters - 3 Column Preview
  • CSS Box Model
  • CSS Display Property
  • Orange & Black
  • Four Square
  • Chrome Developer Tools - CSS
  • Centering Page Content
  • Basic HTML/CSS
  • Grids/Flex
  • DOM API
  • COPYING A MODEL
    • Basic Article With Image Float
    • Student Profile Page
    • Profile Card
    • Front-end Mentor Challenges
    • Collectionui.com
    • HTML & CSS - Jon Duckett
    • Others
  • RESOURCES
    • CSS Cheatsheets
    • Browser Support for HTML/CSS
    • Normalize CSS
    • Other Resources
Powered by GitBook
On this page

Was this helpful?

Grids/Flex

These exercises have you replicate the following grid/flex models.

PreviousBasic HTML/CSSNextDOM API

Last updated 4 years ago

Was this helpful?

Clone the Git repository for these challenges

Exercise 1

Exercise 2

Exercise 3

Exercise 4

Resources

LogoIntro to the CSS Grid course - Scrimba.comScrimba
LogoYour first Flexbox layout - Flexbox tutorial - Scrimba.comScrimba
https://github.com/annechinn/blocks-challenge.gitgithub.com