Assessment 3: Create a responsive template

Assessment 3: Create a responsive template (25 points)
Due: see 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:
1. 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.
2. The logo should be displayed centred on the page and below the page navigation.
3. The list of recent articles should be displayed in a single column.
4. All images should fit on the screen and should have a small amount of white space on
either side of them.
5. Social networking links should be displayed in two columns across the bottom of the
screen.
6. The page footer should be centred across the bottom of the screen.
Page 2 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:
1. The logo should be displayed in the upper left-hand corner of the screen.
2. The page navigation should be displayed as a list of vertical links to the right of the logo.
3. The main image should not have anything to the left or right of it.
4. The recent articles should be displayed in two columns of equal width. Images should
not extend beyond the borders of its column.
5. Social networking links should be displayed in two horizontal rows below the recent
articles.
6. The page footer should be centered 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:
1. The logo should be displayed in the upper left-hand corner of the screen.
2. The page navigation should be displayed as a list of horizontal links to the right of the
logo.
3. The main image should not have anything to the left or right of it.
4. The recent articles should be displayed in four columns of equal width. Images should
not extend beyond the borders of its column.
5. Social networking links should be displayed in a single horizontal row below the recent
articles.
6. 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):
o (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’.
o (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)
1. Name your folder responsive_blog_project.
2. Right-click on the folder and choose ‘Send to’ - ‘Compressed (zipped) folder’.
3. Upload the zipped folder to the Assignment 3 Dropbox
Page 3 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:
o 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.