Vefþróun@Tækniskóli
← All projects/3 - The fundamentals/HTML & CSS - Responsive Design

Guide: HTML & CSS - Responsive Design

Description

One of the most crucial aspects of web development is responsive design: the ability to adapt to the user's screen or device. Currently, half of all online traffic (if not more) is originated from mobile devices, meaning a website needs to be able to function and look good under very different conditions. In this Guide you will research about this and create a responsive website.

Knowledge

  • Understand what is responsive design

Skills

  • Be able to create a responsive website
  • Be able to use CSS Flexbox and CSS Grid to create responsiveness

Topics

  • <head> viewport
  • CSS Media queries & breakpoints
  • Responsive grid
  • Mobile first

Action Points

  • Read up on responsive design
  • Find out what are breakpoints good for and how to implement them in CSS
  • Create a responsive grid system in CSS (set of classes) that allows you to use up to 4 columns in the site
  • Find out what is the "mobile first" strategy
  • Create a responsive website

Deliverable: Responsive website

  • Submit:
    • Glitch Project URL
      • Add comments for each relevant code block
    • Project description and details in the README.md file
  • Minimum requirements
    • Include a responsive grid in CSS created by you (i.e. a set of classes you can add to your Markup, which will automatically show the content in a responsive way)
    • Website that responds to different screen sizes (at least 2 breakpoints)
    • Use of Flexbox and/or CSS Grid to change the website’s layout
    • Multi-column layout (as opposed to have all the content in a single column)
    • At least one instance of use of different images (at the same position) for different breakpoints
    • At least one page should be available
  • Theme ideas:
    • News website
    • Social media website
    • Image gallery
    • “Team” page for a company
    • A full-screen landing page

Resources