Homework 2 Responsive Websites with Flexbox Solution

$30.00

Description

1 Assignment Objectives

The goal of this assignment is to sharpen your skills with CSS3, specifically responsive design and flexbox. In this assignment, you will only be writing CSS, the HTML is provided for you. Using media queries, your website’s style will respond differently based on the page’s width. This assignment is to be completed individually, you are permitted (and encouraged) to use online resources like Mozilla’s MDN. In addition, it is recommended to complete some challenges on Flexbox Froggy to learn the basics of Flexbox.

If done properly, your CSS should result in the following views:

Desktop

1

Left: Tablet, Right: Phone

2 Setup

For this assignment, you will be editing one file, solution.css, which is linked to page.html. If you open index.html, it will show three frames of page.html with different widths for desktop, tablet and mobile views to assist you with responsive development. You must not edit these html files.

3 General CSS

The first part of the assignment is to create the general properties that will be used with commonly with all widths of your webpage. Style the following elements as directed:

  • body

Background color of #eee

  • header

Background color of #49516f

Must have a flexbox layout

Have items aligned to center

Padding of 20px top and bottom

  • header h1

Margin of 0 on all sides

Text color of white

  • header span

Margin of 0 on all sides

2

Text color of white

  • .logo class

Padding of 5px on all sides

Margin of 10px on all sides

Height and Width of 100px

Border of 5px width, solid type and white color

  • .posts class

Must have a flexbox layout

Flex elements must wrap into multiple lines

  • .post class

Must automatically grow to flex parent (Hint: MDN Link)

  • .post-body class

Height of 200px

  • .post-body class

Height of 200px

  • .post-container class

Margin of 10px on all sides

Padding of 10px on all sides

White background color

Must have a flexbox layout

Have items aligned to center

  • .post-pic class

Height and Width of 200px

Right margin of 10px

3.1 Responsive View I: Desktop

This will be your first media query that you create in your solution.css file. This media query should match the media where the minimum width is 999px. These are the properties that the query will overwrite:

  • .posts class

Set the direction of the flexbox to column

Align the items of the flexbox to center

  • .post class

Set the maximum width to 800px

Set the element to automatically flex to it’s parent

If done correctly, you should see that elements in the header are centered and the posts will grow to a maximum of 800px:

3

3.2 Responsive View II: Tablet

Your second media query will be for the Tablet view that match the maximum width of 998px and a minimum width of 400px. Here are the properties:

  • header

Justify the content of the flexbox to center

  • .posts class

Set the direction of the flexbox to row

The flexbox must wrap elements

  • .post-container class

Have the flex direction to a column

  • .post class

Have the element flex to 50% of the parent

  • .post-pic class

Width of 100%

Height of auto

If implemented correctly, your tablet view should resemble the following:

4

3.3 Responsive View III: Phone

Your last media query will be for the Phone view that match the maximum width of 399px. Here are the properties:

  • header

Have the flex direction to a column

Align text to the center (Hint: you don’t need flex for this one)

  • .logo class

Have the border radius be 50%

  • .posts class

Must have an automatic flex basis

Have the flex direction to a column

  • .post-container class

Have the flex direction switch to a column

  • .post-pic class

Width of 100%

Height of auto

The correct style for your phone view should resemble the following:

5

4 Submission

Upload your solution.css file to Canvas as LastName_FirstName_Assignment2.css.

Good Luck!

6


error: Content is protected !!