Assignment Chef icon Assignment Chef

[Solved] ICT580-Assessment 3: Create a responsive template

5.0 1 customer review Digital download

Digital download

$25.00

Availability
In stock
Checkout
One item

Need a hand?

Message us on WhatsApp for payment or download support.

WhatsApp QR code
Assessment 3 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 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. ◼ Requirement Using what we have learned in class, you are to create a responsive design that meets the following criteria:
(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 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 one column at the bottom of the screen (Icons should be under each other).
  6. The page footer should be centred across the bottom of the screen
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 centred across the bottom of the screen.
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.
Tips (optional) o Target Context = Result shows how to change a layout from pixels to percentages.