Vefþróun@Tækniskóli

Guide: 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.

Knowledge

  • Understand the concept of Layout

Skills

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

Topics

  • Floats
  • Positioning
    • z-index
  • Display
  • Box Model
  • Flexbox
  • CSS Grid
  • Transform translate

Action Points

  • Read tutorials on each of the listed topics
  • Create small, proof-of-concept, demos on a sandbox such as CodePen or Glitch
  • Re-create the cover of a website (or magazine? poster?) you like
  • Read-up on why developers are afraid of CSS "float"
  • Find what which one is better Flexbox or CSS Grid (spoiler alert: they complete each other)

Deliverable: Demo

  • Submit:
    • Glitch Project URL
      • Add comments for each relevant code block
    • Project description and details in the README.md file

 

  • Minimum requirements
    • One page per topic, containing a demonstration of how it works
    • Link pages via a menu