#2 Layout Design

Intro

Flex — Content First

Problem statement:

  • It is a fixed layout and a single page with no scrolling.
  • The header, navigation, and footer should have a height of 50px.
Simple Layout

Basic structure

1. Structure of HTML, 2. CSS, 3. Output

Aligning Content(Section and Article) and Aside

Content and Aside alignment
Flex grow: 1

Aligning Main and Footer

Main and footer
Aligning section and article
Final output

--

--

--

Frontend developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Loco Translate

How to Communicate Expectations to Stakeholders as Developers?

5 Reasons Business Technology Fails & How to Break the Cycle — JMARK

Supercharge your Git experience

Getting Started with CSS Flexbox

Result Code 22 Reported in Self-check: checkUpdate API Not Integrated

Is App Academy a Scam? — 5 myths and truths about coding bootcamps

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Kovuri

Abhishek Kovuri

Frontend developer

More from Medium

The Ultimate CSS Animation Series Part 1: Transform Basics

CSS Animation series thumbnail

CSS Box Model

How To Build Responsive Web Pages Using Tailwind CSS

Best CSS Button Generator | Generate CSS Buttons Code

Best CSS Button Generator | Generate CSS Buttons Code