Create a responsive web page using grid-view OR CSS grid.
Create media queries that adjust the display for mobile, laptop or desktop machines.
Create print and screen css
Adjust your page for search engine optimization (SEO)
To see a video explaining the assignment, view: https://youtu.be/TgF_UmwDHtI
Create a new page on any topic that interests you. Name the page myResponsivePage.html Create an external css file named myscreen.css and save the file into the Lesson11/css folder. Create a second external css file named myprint.css and save the ifle into the Lesson11/css folder.
HINT: Use the zen/home.html, zen/css/print.css and zen/css/screen.css files as a model for Grid-View. Use the seuss/suess.html, seuss/css/seussScreen.css and seuss/css/seussPrint.css as a model for CSS Grid. Both examples include what you need to do in this assignment.
To see two see another example, view:
HTML Minimum requirements (10 points)
1.. Include the viewport <meta> tag
2. Include <meta> tags for keywords and a description
3. Include at least 2 images with names and alternate text that reflect the keywords or content of the page . All images should have responsive sizing.
4. Include links to both the print and screen css files (remember to adjust the media for printing.)
5. Add grid classes to sections of the html that should display in that format
6. Include at least 1 <h1> tag
7. Include at least 3 links in a <nav> element (the links do NOT need to be to your own pages)
8. Include at least 1 paragraph in a <section> or <div> element
9. Create an additional <section> element or an <aside> element that contains content (you could use it for images or text)
10. The title for the page should be in the <header> section
11. Create a <footer> section that includes © followed by your name
The structure below is what was used in the zen pages - it is similar to what you need to do:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header>
<h1></h1>
</header>
<section>
<nav>
</nav>
<div>
</div>
<aside>
</aside>
</section>
<footer>
</footer>
</body>
</html>
The structure below was used in the seuss page, it also meets the requirements for the assignment:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<article>
<header>
<h1></h1>
</header>
<section>
<nav>
</nav>
</section>
<section>
</section>
<section>
</section>
<footer >
</footer>
</article>
</body>
</html>
myscreen.css Minimum requirements include (10 points)
1. Set up either CSS Grid or Grid-View with the default for mobile, a breakpoint for tablets and another breakpoint for desktops. Make sure you have at least 3 columns in your page.
2. If you are using Grid-View, all elements should use box-sizing set to border-box;
3. The <h1> tag should be styled to include a font color, text-shadow, background-color and box-shadow.
4. Create a menu with at least 3 links.
5. Make sure all link states are styled - you select the colors and effects.
6. Include at least 1 image that is not in the background.
7. Include either background colors or background images in two different sections of the page.
8. All images and text should be responsive.
9. Make sure the CSS you are using is necessary (don't include CSS that doesn't work)
myprint.css Minimum requirements (5 points)
1. All images are hidden
2. The <nav> or menu is hidden
3. All text is black and 12 pt
4. The background color is white.
5. All borders, backgrounds, text shadows, box shadows etc are removed.
6. Margins, padding etc are set to 0
7. Widths should be set to 100%
8. Links in content areas that are not menus, can display underlined, but the colors should be removed
9. Everything should display as block rather than inline or side by side.
10. If you are using CSS Grid, set up a template for printing. To see an example, view: seussPrint.css
HINT: You will need to look at your changes by displaying the page offline in the browser and pressing CTL + P to see print preview. Many of the changes can be applied using the *{ }. There will be other changes you need to make that require the element or class which is why previewing the page is critical. In both seussPrint.css and your zen print css, *{ } was not able to make all the print changes
1. Add the Lesson11 assignment links to the textbook assignment menu.
<li><a href="#">Lesson 11</a>
<ul>
<li><a href="Lesson11/Acme-Vertical/home.html">Responsive Acme
website</a></li>
<li><a href="Lesson11/zen/home.html">Responsive zen
website</a></li>
<li><a href="Lesson11/seuss/seuss.html">Responsive Dr. Seuss
website</a></li>
</ul>
</li>
2. For the lab assignment, add a link to the responsive web page you created
Example:
<li><a href="#">Lesson 11</a>
<ul>
<li><a
href="Lesson11/myResponsivePage.html">My own responsive web page</a></li>
</ul>
</li>
3. Save all your changes and test the links offline to make sure they work. Then transfer assignments.html and myResponsivePage.html to the server.
4. Open the css folder and transfer myscreen.css and myprint.css
5. Open the media folder and transfer the images you used in your page.
6. Check the pages live to make sure they display and email me when they are ready for correcting.
| 1. created responsive page with minimum HTML requirements | 10 points |
| 2. created screen css with minimum requirements | 10 points |
| 3. created print css with minimum requirements | 5 points |
| 4. assignments page updated with new links | 5 points |
| Total | 30 points |