Final Project: 5-Page Personal Web Site Solution

ote: Make sure you know how to create your own Zip file before the due date to avoid a crisis at the end of the semester.
To complete this final project successfully, you should first read through all steps of this document so you know what you need to do. Then do each step as described below in the order given. There are sample screen shots at the very end of this document for you to use to get some ideas about what your pages might end up looking like, but each person's site will look different.

Note that in developing your site's pages, you should always make backups of your work so that no problems can arise that would be a disaster for you. Save your work frequently and back up your entire final project folder after each session of work. Loss of files will not be considered a valid excuse for missing work or accepting late work.

You may use any text editor you like. All HTML and CSS appearing within your pages must be valid HTML 5 and appropriate for this class. Further, all HTML it should be from your own keyboarding or copied and pasted from your own previous work in this class.




Step 1: Download, Extract, and Prepare for Your Site
To begin this project, you need to download the final project starter files, which are in the form of a “.zip” file available from the Canvas Assignments page for the final project. The numbered items below will help to guide you to success in this step.

From within Canvas’s Assignment area, download the final project’s starter zip file, “YourName-FinalProject.zip”. Download it to a location that you plan to use as your working version of this final project. A flash drive or a hard drive on a laptop (or even a home computer) or cloud storage are all good examples.
Once you download this .zip file to an appropriate place, extract (unzip) the folder and files that are contained within it. (If you don't know how to extract its contents, Google it and mention your operating system -- Windows, Mac, or whatever.)
After successfully extracting the zip file's contents, rename the main final project folder, replacing "YourName" with your own actual first initial and last name (no spaces).
Next, familiarize yourself with those starter files. Look at the existing web pages in both a browser and an editor. Then you'll be ready to get to work on creating and modifying the pages that will make up your personal site. Note that some of the pages should sound familiar to you – resume, feedback, and favorite links should remind you of pages from your earlier assignments. You will be able to reuse some of that old code in this final project as you will see shortly.
For each of the existing 5 HTML starter pages, put your name in the "title" tag area in the "head" section (on line 5) replacing the words "Your Name".
For each of the existing 5 HTML pages, put your name in the HTML comment area just above the closing "head" tag (on line 12), replacing the blank line and words "(your name)".
Step 2: Creating the Site Navigation
For this part of the final project, you will create a nav bar on your home page and then copy it to your other 4 pages. Follow the general guidelines below.

Open your home page (index.html) in your text editor and locate the “nav” area. Within the "nav" area, locate the text for “Link 1”, “Link 2”, etc. Modify this area so that you have 5 working links to the 5 pages listed below (make a note of each page’s filename). Just work on the nav bar on the home page, leave the other pages' code alone for now. Below is a list of the 5 links you should have, in this order. The links should appear vertically (each on its own line) as shown below:

Home
Favorite Links
Resume
Other
Feedback


Note that the "Other" link should not really say "Other", but should instead be appropriate for whatever kind of "other" page you end up having (as explained later). For example, if you end up doing a page about your travels, that link (or button image) might read "My Travels" or "Vacation". For another example, see the sample screen shots below, where the link is to a "My Family" page that we can imagine has some family pictures and descriptions of family members.
After working on the nav bar on the home page (index.html), test it in the browser to make sure each of the 5 links work properly (and using your browser’s “back” button to return back to your home page to try the next nav link.) If it all works, then copy and paste the “nav” code from your home page over to all 4 of your other pages.
Next, use the browser to test that all 5 pages have a working set of links on the nav bar.
If all links on all pages are working, then go back to your editor and remove the <a tags from around the link on each page to itself. (Leave the text there -- remove just the surrounding "a" tags.) That way, you don’t end up having active links to the page you are already on. Each page’s nav bar should end up with 5 entries -- 4 of which are real clickable links and one of which that indicates the current page but is not a clickable link. For example, on the home page "Home" should not be a link, on the resume page "Resume" should not be a link, etc. Test again in the browser to confirm the nav bar looks and acts appropriately. Also double-check that there is equal consistent spacing between all entries on the nav bar and that links don't shift or move around from one page to another as you click from one to the other.




Step 3: Creating the Content for the 3 Familiar Pages
Find your original resume page from assignment #1. This is your customized resume page that includes your own information and should be named "resume1.html" (or whatever you called your assignment 1 part 2 resume page). Carefully copy the code from within your old resume page’s “body” tag and paste it into your new resume page’s code below the existing <h1, replacing all of the “sample text”. That resume should not contain any generic information from the original video – replace any of that kind of info with either your own actual truthful info or with some of your own made up info. Be very careful about what code you are copying and where you are pasting it. Use a validator to make sure the entire page's code is valid. Also test it in a browser to make sure it looks as expected.


Do the same for the favorite links page, using the relevant part of your old favorite links page from assignment 2 part 2 and pasting it into your new favorite links area below the existing <h1, replacing all of the sample text. Test the resultant page's code in a validator and test the page in a browser. Also, if that original favorite links page had an image on it (top of page), you should copy that image file into your final project folder too so that the browser can find and display that image on your page.


Lastly, do the same for the feedback page, using your original assignment 5 part 1 feedback form to fill in the page content for the new feedback form page. Again, test the resultant page's code in a validator and test the page in a browser.


Remember how your original feedback page from assignment 5 would bring up a “thank you” response page after submitting the form? Well, you need to have this site's feedback page do that same thing. There is already a "response.html" page in the set of files you are given for this final project, so you just need to copy over the relevant code from your original assignment 5's "thank you" response page like you did the other pages above. After doing so, test it in the browser to make sure it works when you submit feedback.
You should copy over the 2 image files for those 2 pages, "want-feedback.png" and "we-are-listening.png", so that those feedback pages will each have their original images displaying in the browser.




Note that the given "layout.css" style sheet file already has the needed styles to keep your feedback and response pages looking good as far as their layout is concerned. That said, you will still need to give them the same personal styles that you give the rest of your site's pages, but that will be addressed in a later step below. For now, just realize that you should not copy "form.css" or "site.css" from your assignment 5 part 1 folder into this personal site.


Next you need to make changes to your feedback form page. When it was originally created in assignment 5, it was supposed to be used within a business web site for customers to give the company some business related feedback. But now it is being used for feedback on your personal web site, so some changes are in order. Change the list of choices in the select list (next to the label "Your feedback is regarding") as follows: The label should ask which is their favorite page in your web site. Then remove the choices for "Products", "Shipping", and "Customer Service", etc. and replace them with the names of the 5 pages within this personal web site. Adjust any other HTML names or id's as needed to be more appropriate. Make any other form related changes as you see fit.


Use your working navigation bar to test that these 3 pages act properly within the context of the overall web site of 5 pages. These files should all be in the same main folder and all working together properly. That said, the 3 old files from the old assignments should not be within this same main final project folder at this point, so delete them if necessary.


Notes: if you did not do the original assignment parts (or cannot find them) for any of the needed pages here (favorite links, resume, or feedback form pages), then you should not worry too much about that right now. That page can just remain without any legit content for now. Hopefully after you have finished the rest of the steps below you will still have time to recreate any missing page content by going back to the original assignment for that page and following those instructions to complete the content before submitting.

Also note that you do not need to worry about the style of these 3 pages yet.
Lastly, note that you must also copy any images that are used by these 3 pages into your new final project folder so that your new site’s pages can find and display them in the browser.
Step 4: Create New Page Content for the 2 New Pages
The 2 new pages, "home" and "other", need some content. Here are the guidelines for this content. Don't worry about the style of these pages quite yet, just get some content created for them.

For both "home" page (index.html) and "other" page (other.html), there are some overall guidelines for the content. Then after that there are also specific guidelines for each of these pages. There will be deductions for content that does not live up to these guidelines.

General Page Guidelines:

The content that you add to these 2 pages must be mostly text (some appropriately sized images are fine too) and must take up the majority of the page space when in the browser at a window size of 1280 pixels (width) by 1024 pixels (height) window. If it looks like very little effort was put into this page content, including lack of information, meaningless wording, or lots of spelling issues, then there will be deductions.


The content that you add to these 2 pages must be your own original writing. Remember, this is a personal web site, so make it personal! If you are writing about travels in Europe, for example, write about your own experiences, your own feelings, and what you actually did! Copying and pasting or even rewording something from a travel web site into your own personal web site will be cause for deductions.


For every image that you add to these 2 pages, you should place the image in your final project folder, give it a descriptive filename, and include it in what you eventually submit. In your code, you should add some appropriate html alternative text (using the "alt" attribute). If the image needs resizing, you can use appropriate "height" and "width" attributes (or you can resize it in a graphics program like Photoshop.) Images of you or that you took yourself are best, but other images can be used too.


All HTML code should be proper and valid HTML 5 code appropriate for this class.
Specific Page Guidelines

1. Home Page (index.html) Requirements:

Create a paragraph introducing you and your site (several sentences)
Also include an ordered list of interests or hobbies or activities that you like to do
An unordered list of short personal (possibly humorous) trivia items (such as "I'm obsessed with American Idol")
A small picture of yourself (or of a role model of yours or someone you admire)
Add a paragraph to explain about that picture and why you chose it
If you need more info to fill up the page, add other appropriate personal information, perhaps about your background, your family, etc.
You can also insert a second image if you like, but these images must be small and not dominate the page
See the sample screen shot below for a sample of what appropriate content could include.
2. "Other" Page (other.html) Requirements:

Decide on the subject matter for your "other" page and a title for the page
Examples of subject matter: your family, your favorite hobby, your travels, etc.
It's page content must be appropriate for this type of personal web site
The page should contain truthful, original information in your own words and be written with proper HTML 5 coding
The page must have at least one image relevant to its topic. In fact you may include several images, but the page's physical space in the browser cannot be dominated by images -- and each image should have surrounding text to explain its relevance from your own point of view.
The text for this page does not have to be perfectly written, but it should be grammar and spell-checked and written in complete sentences. You are not texting on your web page! There should be enough text to cover most of the page space in the browser.




Step 5: Create Your Own LOGO
You are required to create a logo of some kind for use at the top of all of your pages. To help you do this, there is a prepared handout as well as some guidelines below.

http://www.faculty.rcc.edu/mcleod/html/handouts/creating_logos.html




The logo must include the text "Firstname Lastname's World" where you substitute your own actual first and last name, and you may also choose to substitute another word (or 2 or 3) for "world", such as "place", "space", or whatever works for you and your site.
Be mindful of the colors that you choose for your logo, it will be helping to set the color scheme for your site that you will end up using when you set background colors and text colors later.
You may use any of the Web sites indicated on the handout page, but you don't have to use them. If you have better options, you are encouraged to use them! For example, you may know of a better web site. Better yet, if you have some graphics skills, you are encouraged to use a graphics app of your own (such as Photoshop) to create your own logo or to modify an existing logo that you have (or acquire) to fit your needs.
In addition to the required text on the logo, the logo can have (but is not required to have) some other artwork, photo(s), background, texture, etc.
The logo should be placed toward the top of all pages in the site in the “header” area, using an HTML <img tag. Include appropriate alternative text on this img tag using the "alt" attribute.
In the sample home page screen shot shown below, the "Joe Student's World" logo at the top of the page was created for this purpose. Use this to get an idea of what is required. It does not have to be beautiful, but it should integrate well with the rest of the site's design.
 

Step 6: Creating the Styles for Your Site
Here you are asked to create some custom styles for your site to consistently style all pages (all 5 main pages plus the feedback response page too). Note that your current site has a style sheet named “layout.css”. The styles you create in this step should NOT go in that existing style sheet. You should create a new CSS file in your final project folder and add an appropriate <link tag into the “head” section of all of your pages to connect them to your own custom style sheet. Here are the guidelines for these styles:

Use your HTML/CSS editor to create a new file that will become your main style sheet for your own formatting. Begin by just writing a few basic styles for the "body" -- maybe try a background color, such as body{background:yellow;} and then save it as "mystyles.css" into the same folder as all the other site's files. This will allow you to quickly test the style sheet and know if it is working. Once your style sheet has valid formatting saved in a .css file, then create a <link tag to that style sheet file in the "head" section of all of the .html pages. There is a comment already within the "head" section of each page indicating where that "link" tag should go. Start by adding the appropriate "link" tag into the "head" section of your home page only. Then test your home page in a browser to confirm that you can see the CSS formatting you created and saved (such as the yellow background color) in the browser. If it doesn't work then you need to double check the "<link" tag for correctness as well as the style sheet file for valid styles and that the filename matches exactly the name in the "link". Once these new styles are working on your home page, you can then proceed to copy/paste that link tag into all of your other pages (including the feedback "thank you" response page) and test that all these pages are sharing those styles in the browser. Once these styles are working on all pages, you can then continue adding more styles into your style sheet, as indicated below.
You must come up with a color scheme (backgrounds and text color combination) that is going to be consistently applied to all of your site's pages. (You may not use "black" for text or "white" for the background.) Your color scheme must "agree" with the colors that appear in your logo image.
Write some styles for your nav bar links that help to make these links look more interesting and act more like a typical navigation bar, including some changes when the mouse moves over them. Use selectors like a:hover to accomplish this. You could use background and text color changes for example. When link styling, be sure that the links are easy to read against their backgrounds at all times. For example if you have a purple background color for your links area, then a (purple) visited link will become hard to read unless you change the default browser purple color for visited links to something with more contrast. (You avoid this issue by using the "a:visited" selector to set a more appropriate color in your style sheet.)
Your styles must include fonts and text colors, including different text and fonts on headings than on other text. Make sure that the text is easy to read against its background on all pages and that your use of colors and fonts on these pages is consistent and appropriately coordinated throughout the personal site's pages.
All formatting should be done with CSS styles inside this separate style sheet file, not with styles buried inside the HTML pages themselves and not within the given "layout.css" file. Points will be awarded only for styles that are physically inside your style sheet file, NOT for what you might put within the "style" tags of a page's "head" section and NOT for "style attributes" within the HTML tags of the "body" section.
The only thing you are required to do with that "layout.css" style sheet file is to change one setting – toward the bottom of the file you will find a background color setting for "fieldset" of "floralwhite" – change this to some other color that works better on your feedback form page with your own color scheme. Any other changes you wish to make to the form should be made within your own "mystyles.css" file.
Validate your CSS styles using a standard CSS validator – as indicated in the "Testing" step below.


Any other styles that you would like to add to enhance your pages is fine as long as it enhances the site's appearance and is applied to all pages.




Step 7: Testing Your Final Project Site
Of course you have probably been testing your site as you work with each page, but you should also test the entire site again in the browser, using a Chrome browser at 1280x1024 resolution just like it will be graded. Test each navigation link (on each page). Make sure all images also appear as expected on any main or portfolio pages. Your feedback form page should display the feedback "thank you" page when the form is submitted. And that feedback "thank you" page should look like and act like it is part of the rest of the web site – with links to get back to the rest of the site.

HTML Standards and Validation Requirements
Your pages should be written with HTML 5 standard code. All HTML in your submitted project should be either created by you specifically for this project or for a previous assignment (some of that may be the book's code or video's code.) All HTML will be graded for quality of coding and should validate as HTML 5 and written with high standards, including closing all tags, adding descriptive alternate text for images, use lowercase tags and attributes etc., as promoted in this class. You are expected to have valid HTML5 code with tags properly closed and use lowercase tags and attributes just like you have been encouraged to do throughout this course. Below are two validation and standards tools that you might find useful for this purpose:

W3C HTML Validator: Use this tool to check your HTML
https://validator.w3.org/#validate_by_input



Closing Tag Checker: After the above tool says it is "valid", check further for other issues
https://www.aliciaramirez.com/closing-tags-checker/



CSS Standards and Validation Requirements
Your CSS should also be validated to make sure it does not have errors. You can use the W3C's CSS validator tool or another similar tool for this purpose. Be sure to fix any errors that the validator may find. The tool's link is shown below.

W3C CSS Validator: Use this tool to check your CSS
https://jigsaw.w3.org/css-validator/#validate_by_input





Code Formatting Standards
Your HTML and CSS code should be formatted nicely and consistently. It should be very readable. If you are using the "Brackets" editor, use the "Beautify" extension to help format your code. If not, you are still expected to submit code that is as well organized and indented as consistently as "Beautify" does. If you aren't using "Beautify", here are free online tools that do similar formatting of HTML and CSS:
HTML: https://www.freeformatter.com/html-formatter.html

CSS: https://www.freeformatter.com/css-beautifier.html





Page (Content) Size
Each of the required pages for your personal Web site must be built so that they have appropriate content that fills most of the available screen space when displayed within a browser window of 1280x1024 resolution using reasonable and appropriate image and font sizes. Your pages will be graded by displaying your site in a maximized Chrome browser window at 1280x1024 resolution, so be sure your site's pages work properly in that environment -- they should fill the screen appropriately and avoid a horizontal scroll bar (vertical scroll bar is ok if your page is longer). One way to test this is to right-click your desktop and set the screen resolution to 1280x1024 (or the closest to that available) and then maximize your browser window when testing. If your own development computer screen cannot be set at that particular resolution, you can instead test at the next highest resolution and then test it with a browser that is not quite maximized to simulate that size.

For grading purposes, if it looks like you did the minimum effort to put the minimum content on your pages, you can expect a minimum score for your pages. They should contain at least as much information as you see on the sample screen shots below.

Other Details
Be mindful of the file sizes of all images you add to your pages (no image should be larger than 300K please). Remember to insert your own name in the "title" and in an HTML comment just in the "head" section of each page in your personal site. Each page should have a "h1" heading (or image) at the top to identify it, such as "Joe Student's Resume", with your own name filled in.

Spell-check all of the text on your pages. If you are using Dreamweaver or the "CSE HTML Validator" editors, they have built-in spell-checking tools, as do other editors. If you have access to our school lab computers, both are installed there. If you are using Brackets, it does not have a built-in spell checker, but you can use the extension manager to search for a spell checking extension and install one to use. You can also search for an online tool for web page spell checking. A much less elegant solution is to visit each page in the browser and copy/paste its text (avoiding the code) into Microsoft Word (or some other word processing app you have access to) to check it there only to return to your code editor to fix any misspellings. Any way you want to do it is fine, but excessive spelling errors will result in deductions.

Step 8: Extra credit (max of 15 points)
It is possible to earn some extra credit points if you go above and beyond the basic requirements as follows. Do so only if you have time. Each extra credit item is worth a maximum of 5 points. Quite honestly, the 5 points is probably not worth the effort involved for any of these, but if you have time or need the points, go for it.

Button Image Links: Your navigation bar has button image links for each page instead of the given text. These images should be reasonably sized, act as links when clicked, and have the page they link to clearly indicated on them. All link images that make up the nav bar should look similar to one another and work well with the existing color scheme. Note that there are many online tools for creating such images, just search for one if you don't have graphics skills or apps available to you.


Multi-Column Resume: Break up your resume page's resume information into 2 columns – with resume headings in the left hand column and resume details in the right hand column, as shown in the sample resume screen shot below. This can be done with a 2 column table or it could be done with CSS if you have enough CSS skills to do it.


Multi-Column Home Page Content: Break up your Home page's main content into 2 columns of information by creating a table of 2 (or more) columns (or you can do it with CSS if you prefer.). The result could look something like the sample home page screen shot shown below.
 

Step 9: Submit your Final Project in Canvas
Carefully read through what is required to be turned in for this project. It would be a shame for you to lose points unnecessarily after all the work you put into it! Below are the submission requirements.

Test your site to make sure all pages are working properly.
Make sure your last name is part of the name of your final project folder.
Make sure that all of the files needed to display all of your web site's pages and resources (images, style sheets, etc.) are all within your site's main folder.
Zip up your final project folder with all of your web site's files within it.
After zipping, check to make sure your last name is part of the name of the zip file too. If not, rename it.
Submit your zip file into Canvas's Final Project Assignment page as your final project assignment submission. Submit just that one zip file – nothing else.
You must submit your zip file prior to the due date. There is no lateness allowed on this project, so just submit whatever you have at that point. Partial credit will be given as needed for whatever you submit that isn't complete.
 

Sample Screenshots
The sample screenshots shown below may help you to see what is expected of your home page, resume page, nav bar, logo, color scheme, fonts, and extra credit possibilities. You should not attempt to copy it though, it should be used to get some ideas of appropriate design, content and layout.

You do not need to turn in any screen shots, these are just samples for you to look at!

Note that a background image is in use on the navigation column only and just a background color in the main column. All other pages should share the same background color and background image.

Note that the "Other" link has been changed to "My Family" since it is assumed that Joe Student here is doing his "other page of choice" about his family.

Note the home page's organization includes a 2 column table with the "trivial matters" in the left hand (first) column and the "my idol" details in the right hand (second) column. This is not a requirement but it can earn you some extra credit points.






Note the resume page's resume information has a two column table based layout with the resume headings in the left hand (first) column and the resume detailed data in the right hand (second) column. This is not a requirement but it can earn you some extra credit points. Note also that the logo image is assumed to be above the heading here but has been scrolled off screen to show the rest of the resume content. Also note that this resume content may differ somewhat from the resume you created in the original assignment, which is fine. It is just an example, shown here more for its layout features than its logo or resume content.