Reference no: EM131776787
In this assignment, you will create a new website that incorporates CSS media queries into the design. This will allow your page layout to change based on whether a visitor to your site is using a smartphone, tablet, or desktop computer. With media queries, you can anticipate and design for a variety of viewing experiences.
New Website
Using the design you created in the Wireframing assignment as your guide, create a new website of at least five pages. The subject matter of the site is up to you but should be a topic of academic interest-whether related to your major or an area of specialized knowledge. Each of the web pages should include images and/or text and there should be clear navigation between each of the pages.
Media Queries
Next, you will create three different CSS style sheets: "mobile.css," "tablet.css," and "desktop.css." Link to your external style sheets with the following code. This goes inside the head section of each of your HTML documents.
<!-- Media query for narrow browser width -->
<link rel="stylesheet" media="only screen and (max-width: 480px)" href="mobile.css">
<!-- Media query for medium browser width -->
<link rel="stylesheet" media="only screen and (min-width: 481px) and (max-width: 960px)" href="tablet.css">
<!-- Media query for full browser width -->
<link rel="stylesheet" media="only screen and (min-width: 961px)" href="desktop.css">
<!-- Prevent smartphones from scaling pages down -->
<meta name="viewport" content="initial-scale=1">
As the comments indicate, these media queries assess a viewer's browser width and use that information to determine which of three style sheets to use for the page: mobile.css, tablet.css, or desktop.css. Make sure these links match your CSS file names and their location.
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. For example, a three-column layout could be used for desktop viewing, a two-column layout for tablets, and a one-column layout for smartphones. You should 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.
Here is a list of required elements to include.
Add media queries to each of your HTML pages to choose among alternate style sheets. Feel free to copy and paste the code above.
Create three separate CSS style sheets-desktop.css, tablet.css, and mobile.css-that correspond to the media queries.
Add div tags to logical column sections of your HTML documents.
Add style rules that allow your divs to float next to each other.
Modify each style sheet for optimal viewing with different browser widths.
Submitting Your Assignment
Upload your site files to the i6 Unix server. Your files and directories should go in the i6 directory called "public_html." Test your pages again once they are live on the Web server, varying browser width to observe style changes.
Submit the following here in NYU Classes:
The URL to your assignment in the general form of: https://i6.cims.nyu.edu/~netid/
A compressed archive containing all the files (HTML, CSS, and images) of your website
Grading
This assignment is worth 12 points.
A new website of at least five HTML pages with images, text, and hyperlinks
Media queries, as provided above, on each page and three different style sheets associated with the media queries
HTML div tags added to logical sections of the HTML on all pages
CSS floats used to position elements next to other elements
Smartphone layout should be optimized for narrow browser widths; tablet and desktop layouts should be optimized for wider browsers
Optionally, for extra credit:
Incorporate a CSS3 web font into your site
Use the CSS position property to specify a non-default positioning method for some aspect of your page layout