Background image
logologo symbol

1 - Introductory Course

HTML & CSS - Layouting

Description

Being able to layout a website, i.e. to display elements in certain positions, is fundamental to front-end web development. When you make a design file or receive one from someone you should be able to imagine how to best use HTML and CSS to translate that static image file into a live web page. To exercise this skill, you will learn about all relevant features of CSS , namely the Box Model, Flexbox and CSS Grid.

Topics

  • Box Model
  • Display property
  • Position property
  • Flexbox
  • CSS Grid
  • Transform property

Goals

Knowledge

Understand the concept of Layout

Skills

Be able to create any layout with the tools available in CSS

Idea for return

  • description:
    • Create a poster (or re-create an existing one) using HTML and CSS. Your web page must look like something you'd see on the walls of a city, advertising a concert or some event. The idea is that you'll exercise your CSS skills to position things in unusual and interesting ways. Pro tip: the transform property is your friend. Bonus: make it interactive and/or animated!
 
  • Submit:
    • Repository URL
      • Add comments for each relevant code block
      • Add Project description and details in the README.md file
    • Public URL (no need for a custom domain). Tip: use surge.sh.
 
  • Minimum requirements
    • One poster

Materials

MDN's CSS layout course — box model, flexbox, grid and positioning, in the order this guide lists them.A Complete Guide to Flexbox — the diagram-per-property page every developer keeps open. Bookmark it.A Complete Guide to CSS Grid — same thing for Grid.Flexbox Froggy — a game for learning flexbox properties. Twenty minutes here saves you hours of guessing.Grid Garden — the same idea for CSS Grid.Interactive Tutorial for web development and moreInteractive course on HTMLInteractive course on CSS