Description
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
1Left: 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:
33.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:
43.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:
54
Submission
Upload your solution.css file to Canvas as LastName_FirstName_Assignment2.css.
Good Luck!
