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.

Example

Poster

  • 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

Interactive Tutorial for web development and moreInteractive course on HTMLInteractive course on CSS

Topics

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

Tips

If you get stuck you can always contact us on Slack and we will reply to you as soon as we can. You can also ask us to do a “huddle” (a video call on Slack) with you and then we will find a time to do that.

Requirements

Knoweldge
  • Understand the concept of Layout
Skills
  • Be able to create any layout with the tools available in CSS
You are not logged in, if you want to return this guide you need to log in via authpage