The final project incorporates HTML and CSS you have learned throughout the semester.
create a responsive web page that incorporates JavaScript commands and HTML 5 semantic tags
create screen and print css
create navigation menus
create icon bars
To see a video describing what you need to do, watch:https://youtu.be/Wc7ncOIo30c
There are 5 parts to this final project
1) Create the folder structure and make design decisions 3 points
2) Create a page (or pages) that meet a set of HTML and JavaScript criteria. You will decide the content of the page (or pages). 35 points
3) Create print.css and screen.css for your page 30 points
4) Transfer the graphics and files to the web 2 points
5) Test your page live to make sure it works 5 points
The topic of the project is up to you. If you want to use an existing assignment as a starting point, that is OK
1. Create a new folder named finalproject
Example of what your folder and file structure should look like in the main directory (2 points):
2. Inside the finalproject folder, create a media folder and a css folder.
3. Create a new page named index.html and save the page into the finalproject folder. Think about the following design aspects of the project (you will be asked to share this information in the final project showcase)
purpose of the site
intended audience
color scheme used AND why you chose those colors
layout and design used AND why you selected them (grid-view vs CSS Grid, horizontal vs vertical menus or push vs overlay menus etc)
Example of what the finalproject folder should contain: (1 point)
4. Create any additional pages you need to meet requirements. Make sure these pages are linked into your index page.
Your index.html page can include all the requirements OR you can create multiple pages and link to them from your index.html page to meet all the requirements
1. Include the viewport <meta> tag 1 points
2. Include <meta> tags for keywords and a description 1 points
3. Include at least 4 images (one can be a background image) . 2 points
all images should be stored in the finalproject/media folder
all images should have alt text that includes keywords from the page.
all images and backgrounds should be responsive.
text and content should flow around images that are embedded in pages
4. Include all required HTML tags: <!DOCTYPE html>, <html>, <head>, <title> and <body>, in addition to <article>, <section>, <header>, <footer> and <nav>. 10 points
5. Include links to both the print and index (or screen) css files (remember to adjust the media for printing.) 2 points
6. Use a Grid-View or CSS Grid layout (this should also be in the external style sheet) 2 points
7. Include at least one <h1> and one <h2>, <h3> or <summary> tag 2 points
8. Include a menu with at least 4 links in a <nav> element (the links do NOT need to be to your own pages) . NOTE: If you are using the push or overlay menus, you can replace the <div> tag with the <nav> tag . 4 points
9. The title for the page should be in the <head> section 1 point
10. The <footer> section should include contact information. You should also have copyright information either in the header or the footer ( © followed by your name) 1 point
11. Include a JavaScript Event Handler, JavaScript Function and/or JavaScript method 5 points
12. Include an icon bar 4 points
index.css minimum requirements include ( 20 points):
1. All elements should use box-sizing set to border-box; 1 point
2. Using CSS Grid or Grid-View, set up the default for mobile, a breakpoint for tablets/laptops and another breakpoint for desktops 2 points
3. The <h1>, <h2>, <h3> and <summary> tags should be styled to include a font color, text-shadow, font family, and font size. 2 points
4. All link states should be styled - you select the colors and effects. 2 points
5. The navigation menu should be styled as a menu where links display as buttons or you can change the cursor to a pointer and have the links animate when you point at them 5 points
6. Include a google font or a custom font. 2 points
7. The <body> tag should be styled to include font family and a background image or color 2 points
8. Include an icon bar and the styling for the bar 2 points
9. Include at least 1 CSS3 transition or animation effect 2 points
print.css minimum requirements (12 points)
1. All images are hidden 2 points
2. All text is black and 12 pt 1 point
3. The background color is white. 1 point
4. All borders, text shadows, box shadows etc are removed. 1 point
5. Margins, padding etc are set to 0 1 point
6. CSS Grid or Grid-View layout should be set up for printing. All widths should be set to 100%. 3 points
7. Links can display underlined, but the colors should be removed 1 point
8. Everything should display as block rather than inline or side by side. 1 point
9. To avoid having your JavaScript print, use the following: 1 point
script {
display:none;
}
HINT: Use the default, * , for most of your
changes and then add in element modifications when needed.
1. Add the final project link to the assignment menu:
<li><a href="#">Final Project</a>
<ul>
<li><a href="finalproject/index.html">finalproject/index.html </a></li>
</ul>
</li>
2. Save all your changes and test the links offline to make sure they work.
3. Transfer all files and folders to the web.
1. To see your page live, display your assignment page and select the link OR enter lisabalbach.com/your username/finalproject/ You don't need to enter the file name because files named index.html will automatically display and do not need to be typed in.
2. Make sure your page displays the way you want it to and test the JavaScript code to make sure it works. If nothing happens, press F12 and click the Console tab to see the error.
| 1. Created the finalproject folder with the css and media folders inside it and a page named index.html. Inside the media folder there should be at least 4 images. Inside the css folder there should be at least 2 css files: index.css (or screen.css) and print.css | 3 points |
| 2. Created an index.html page with the minimum HTML requirements | 35 points |
| 3. Created an external index.css (or screen.css) file with the minimum requirements | 20 points |
| 4. Created a print.css file with the minimum requirements | 12 points |
| 5 . Linked the finalproject/index.html page into the assignments.html page | 2 points |
| 6. Tested the index.html page "live" online to make sure it works | 3 points |
| Total | 75 points |