$24
Assessment 3: Create a responsive template Solution
Due: see the course outline for a specific date
This assignment will test your understanding of CSS, HTML, specifically how to use CSS media queries, flexible layouts, and flexible images to create a responsive web design. If you have any questions or concerns regarding this assignment, please don't hesitate to contact your instructor at Yousef.alghamdi@ucalgary.ca.
For this assignment, you will be redesigning a blog template. You will not be creating an HTML file for this assignment. The HTML file will be provided for you by the instructor in D2L under Content and Dropbox sections. You will find a model/folder named "assignment_3". Within this model are the files for this assignment. The first file is the HTML file. You may modify the contents of this file if you would like, but it is not required for this assignment. Additionally, you will find a folder named 'css' which contains a CSS file named 'style.css' and an 'imgs' directory containing all images for this assignment.
The existing template was created using a 'mobile first' approach. However, the previous designer only tested the website using an iPhone in landscape mode (480px × 320px). While the site works well when viewed on devices with these dimensions, it does not look right when viewed on tablets, desktop computers, or mobile devices in portrait mode.
Your job is to create a completed responsive layout design for this template. Again, you may modify the contents of the HTML file if you would like, but it is not required to complete this assignment. You may not create additional HTML files to complete this assignment! Please don’t!
Requirement
Using what we have learned in class, you are to create a responsive design that meets the following criteria:
The HTML file should include one or more<link elements for your CSS file(s) related to your responsive design. You may include all of your responsive designs in a single file
(using @media media queries) or using multiple CSS files (with the media queries specified in the media attribute of your <link element. Your design should support the following breakpoints:
o Screens with a maximum width of 480px
o Screens with a minimum width of 481px and a maximum width of 768px o Screens with a minimum width of 769px
Less than 481px wide
The rules in the CSS file applied to screens with a maximum width of 480px should result in the following:
The page navigation should be displayed as a list of horizontal links across the top of the page. These links can span more than one line if necessary.
The logo should be displayed centred on the page and below the page navigation.
The list of recent articles should be displayed in a single column.
All images should fit on the screen and should have a small amount of white space on either side of them.
Social networking links should be displayed in one column at the bottom of the screen (Icons should be under each other).
The page footer should be centred across the bottom of the screen.
Page 1 of 4
Between 481px and 768px wide
The rules in the CSS file applied to screens with a minimum width of 481px and a maximum width of 768px should result in the following:
The logo should be displayed in the upper left-hand corner of the screen.
The page navigation should be displayed as a list of vertical links to the right of the logo.
The main image should not have anything to the left or right of it.
The recent articles should be displayed in two columns of equal width. Images should not extend beyond the borders of its column.
Social networking links should be displayed in two horizontal rows below the recent articles.
The page footer should be centred across the bottom of the screen.
Greater than or equal 769px wide:
The rules in the CSS file applied to screens with a minimum width of 769px and a maximum width of 1024px should result in the following:
The logo should be displayed in the upper left-hand corner of the screen.
The page navigation should be displayed as a list of horizontal links to the right of the logo.
The main image should not have anything to the left or right of it.
The recent articles should be displayed in four columns of equal width. Images should not extend beyond the borders of its column.
Social networking links should be displayed in a single horizontal row below the recent articles.
The page footer should be centred across the bottom of the screen.
Images should never extend beyond the edge of their parent element. Be sure to take the necessary measures to ensure that this doesn't happen.
Bounce Marks (5 points):
(1 point) Take screenshots for each breakpoint (Media queries). For this assignment, you should have three screenshots. Please, name the screenshots based on the breakpoint
such as ‘769px.image’.
(4 points) Create a CSS file named 'print.css' and apply it to the web page so that it modifies the display of the page when printed. You should only modify the contents of the <head element in the HTML file, and you should NOT modify the contents of 'style.css'. When printed, the web page should have the following features:
(1 point) The following elements should not be displayed on the printed page (Hit: ‘Display: none’):
Navigation links
Slide image
Social Network links
(1 point) Text color should black for all the page.
(1 point) Font type of Arial for large text, e.g. article headers.
(1 point) Font type of Times New Roman for small text, e.g. paragraph.
Submit (Only submit a single .zip file)
Name your folder responsive_blog_project.
Right-click on the folder and choose ‘Send to’ - ‘Compressed (zipped) folder’.
Upload the zipped folder to the Assignment 3 Dropbox
Page 2 of 4
Tips (optional)
Review the CSS code, closely identifying any CSS code that refers to the width. Please note that the viewport meta tag has been not added in the head section.
Use this concept to convert your widths from pixels to percentages:
Target ÷ Context = Result shows how to change a layout from pixels to percentages.
Modify all pixel-based selectors that refer to the width. That includes margin and padding, but please review the information on the introduction to guide you in finding the correct target and context.
Add your comment to show the math for each selector you change.
Start with the first media query, @media (max-width: 481px) and then adjust each selector in the other media queries. If they do not display properly for a media query, do not move to another media query. Keep working on it until you meet the media query requirements.
Remember! If a selector in the main CSS uses a float and the media queries do not need one, you need to add: float: none; This applies to any selector that may inherit a property that the smaller screens do not need.
Convert selectors with width properties from pixel to percent.
Adjust images to display at 100% in the container that they are placed.
Create media queries to adjust the properties to meet the various screen sizes.
Page 3 of 4
Evaluation
This assessment is graded out of 25 points and will be evaluated using the following rubric.
Learners may receive partial scores or zero for unacceptable work.
Complete % of the
requirements
At
At
At
leas
Marking Component
least
least
Score
t
60%
90%
30%
#
Less than 481px wide
8
1
The page navigation should be displayed as a list of horizontal
0.25
0.5
1
links across the top of the page. These links can span more than
one line if necessary.
2
The logo should be displayed centred on the page and below the
0.5
1
2
page navigation.
3
The list of recent articles should be displayed in a single column.
0.5
1
2
4
All images should fit on the screen and should have a small
0.25
0.5
1
amount of white space on either side of them.
5
Social networking links should be displayed in one column at the
0.25
0.5
1
bottom of the screen.
6
The page footer should be centred across the bottom of the
0.25
0.5
1
screen.
#
Between 481px and 768px wide
8
1
The logo should be displayed in the upper left-hand corner of the
0.25
0.5
1
screen.
2
The page navigation should be displayed as a list of vertical links
0.25
0.5
1
to the right of the logo.
3
The main image should not have anything to the left or right of it.
0.25
0.5
1
4
The recent articles should be displayed in two columns of equal
1
2
3
width. Images should not extend beyond the borders of its
column.
5
Social networking links should be displayed in two horizontal
0.25
0.5
1
rows below the recent articles.
6
The page footer should be centred across the bottom of the
0.25
0.5
1
screen.
#
Greater than or equal 769px wide:
9
1
The logo should be displayed in the upper left-hand corner of the
0.25
0.5
1
screen.
2
The page navigation should be displayed as a list of horizontal
0.25
0.5
1
links to the right of the logo.
3
The main image should not have anything to the left or right of it.
0.25
0.5
1
4
The recent articles should be displayed in four columns of equal
1
2
3
width. Images should not extend beyond the borders of its
column.
5
Social networking links should be displayed in a single horizontal
0.25
0.5
1
row below the recent articles.
6
The page footer should be centred across the bottom of the
0.25
0.5
1
screen.
7
Comments to show the math for each selector
0.25
0.5
1
Final
/25
Page 4 of 4
