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.
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.
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.
This assignment is worth 10 points.
DescriptionIn this final assignment, the students will demonstrate their ability to apply two ma
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. Thisprogram will have two classes, a LineItem class and a Transaction class. Th
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
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