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

. The fundamental operations of create, read, update, and delete (CRUD) in either Python or Java

CS 340 Milestone One Guidelines and Rubric  Overview: For this assignment, you will implement the fundamental operations of create, read, update,

. 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

Retail Transaction Programming Project  Project Requirements:  Develop a program to emulate a purchase transaction at a retail store. This

. The following program contains five errors. Identify the errors and fix them

7COM1028   Secure Systems Programming   Referral Coursework: Secure

. Accepts the following from a user: Item Name Item Quantity Item Price Allows the user to create a file to store the sales receipt contents

Create a GUI program that:Accepts the following from a user:Item NameItem QuantityItem PriceAllows the user to create a file to store the sales receip

. The final project will encompass developing a web service using a software stack and implementing an industry-standard interface. Regardless of whether you choose to pursue application development goals as a pure developer or as a software engineer

CS 340 Final Project Guidelines and Rubric  Overview The final project will encompass developing a web service using a software stack and impleme