In this assignment, you will incorporate CSS media queries into a new website which will highlight a hobby, interest, or academic pursuit of yours.

INSTRUCTIONS TO CANDIDATES

ANSWER ALL QUESTIONS

In this assignment, you will incorporate CSS media queries into a new website which will highlight a hobby, interest, or academic pursuit of yours. This will allow your page layout to change based on whether a visitor to your site is using a smartphone, tablet, or desktop computer. For reference, here is an example site which links to three different style sheets based on viewing width.

Media Queries

To begin, you will need to replace the existing link to your external style sheet with the following code. This goes inside the head section of each of your HTML documents.

As the comments indicate, these media queries assess a viewer’s browser width or device width and use that information to determine which of three style sheets to use for the page: mobile.css, tablet.css, or desktop.css.

Alternate Style Sheets

Now that your Web pages have the flexibility to access different style sheets, the next step is to optimize the layout with CSS for each of the widths specified. In the example site, a three-column layout is used for desktop viewing, a two-column layout is used for tablets, and a one-column layout is used for smartphones. You should similarly structure your HTML code with div tags in order to “float” sections of content alongside each other when appropriate. In addition to layout changes, feel free to tweak the formatting to optimize each of the three style sheets.

As before, you should write your HTML and CSS documents using a plain text editor. Here is a list of required elements to include.

1. Add media queries to each of your HTML pages to choose among alternate style sheets. Feel free to copy and paste the code above.
2. Create three separate CSS style sheets—desktop.css, tablet.css, and mobile.css—that correspond to the media queries.
3. Add div tags to logical column sections of your HTML documents.
4. Add style rules that allow your divs to float next to each other.
5. Modify each style sheet for optimal viewing with different browser widths.
6. Smartphone layout should be one column, tablet and desktop layouts should be two or more.

The primary goal of this assignment is for you to incorporate CSS styles that affect page layout while using media queries to choose among separate style sheets. In doing so, you can anticipate and design for a variety of viewing experiences.

Grading

This assignment is worth 10 points.

• Each HTML page should contain active media queries, as provided above. (1 point)
• There should be three style sheets associated with the media queries. (3 points)
• Div tags should be added to logical sections of the HTML on all pages. (2 points)
• Floats should be used in the CSS to position content side-by-side, width-permitting. (2 points)
• Smartphone layout should be one column, tablet and desktop layouts should be two or more. (2 points)

Related Questions

. Introgramming & Unix Fall 2018, CRN 44882, Oakland University Homework Assignment 6 - Using Arrays and Functions in C

DescriptionIn this final assignment, the students will demonstrate their ability to apply two ma

. The standard path finding involves finding the (shortest) path from an origin to a destination, typically on a map. This is an

Path finding involves finding a path from A to B. Typically we want the path to have certain properties,such as being the shortest or to avoid going t

. Develop a program to emulate a purchase transaction at a retail store. This program will have two classes, a LineItem class and a Transaction class. The LineItem class will represent an individual

Develop a program to emulate a purchase transaction at a retail store. Thisprogram will have two classes, a LineItem class and a Transaction class. Th

. SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 1 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of

. Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of