Project Summary: Hello I have a final project of making a basic car selling website the basic home page and colors are already available. My course is Introduction to Web Development. These are the instructions: Web Project Assignment (200 points) You will submit your completed web site as a .zip file via Blackboard, and it will also be uploaded to your web server space. Requirements: File and Folder Structure (5 points) Ensure that all of your project files are kept within a folder called web_project_LASTNAME o Make sure that your home page is named index.html o All html files should have a .html extension and all CSS files should have a .css extension o Make sure that all filenames have descriptive names (i.e. eiffel-tower.jpg instead of 13242A.jpg) o Media/supporting files should be organized into subfolders (i.e. images, videos) User-Centered Design (25 points) Create a complete web site consisting of 5-10 HTML pages. o All pages in the site should have a consistent look and feel that demonstrates a user-centered design (simple to use, focused on the user experience) o Site design should be aesthetically appealing and style(s) should be appropriate for the chosen content and audience HTML 5 for Content Structure (25 points) Code the site using HTML 5 tags and conventions o HTML should be used only for structure of content on the page (all page layout and styling should be done via CSS). CSS for Page Layout and Styling (50 points) Use external style sheet(s) to apply all aesthetic styling to the HTML pages (layout, fonts, colors, etc.) o Use external style sheets Embedded style sheets may be used to override defaults on specific pages only Inline styles should NOT be used Make proper use of type, id, and class selectors o Use CSS for page layout All pages should have either a fluid layout or a fixed-width layout (be consistent after you make this choice). Fixed-width pages should take into consideration that the average monitor width is 960 pixels. At least one page must have a multiple-column layout You can use float or any type of positioning to create the column-based layout Relative URLs (5 points) Use relative URLs for all links except those that go outside your web site to other Internet sites o Make sure that when linking to content in a subfolder, you use a relative URL with the folder name (i.e. images/myphoto.jpg) o If linking to an item in a folder up one level from the folder youre in, remember to use the ../ notation (i.e. ../images/myphoto.jpg) Site-Wide Navigation Bar (10 points) Create a site-wide navigation bar that is consistent on all pages (home page can differ if desired; Home link should appear on all other pages) o Utilize an unordered list to create the navigation bar o Use CSS to style the navigation bar o Style the hover state for the links so that the menu items appear to have a rollover effect Style Links with CSS Pseudo-Classes (5 points) Style links in the content areas of your pages using CSS pseudo-classes o Include styles for all four link states (link, visited, hover, active) Fonts and Colors (5 points) Choose fonts and colors that are appropriate to your theme and aesthetically appealing throughout o All fonts should be declared using a font stack that ends with a generic font family (i.e. serif, sans-serif) o Use at least one Google Web Font somewhere in your site (preferably for a heading) o Color scheme should be aesthetically appealing (use Adobe Color CC site for ideas if needed) and text /background color combinations must have good contrast so that text is easy to read Images (5 points) Include at least 5 images within your site o Ensure that image copyright is not violated (use your own images, images offered for free use, or images used with permission) o Ensure that all images are displayed at the correct width and height so that image proportions are not distorted Ordered or Unordered List (5 points) Include at least one list (ordered or unordered) in addition to your navigation bar Table (5 points) Include at least one table with appropriate content o Use a colspan or rowspan somewhere in the table o Make sure that the table border is showing (not invisible) Input Form (5 points) Include at least one form to capture user input o The form can contain any fields, labels, or groupings that are appropriate to your input content o Your form does not need to function (you are only creating the front end), but it must include a Submit button o Remember the usability rules for forms; make your form easy for the viewer to use Video (10 points) Include at least one video that pertains to your content; choose one of the following: o Use an embedded video that you own (be sure to include code for the HTML 5 video tag). Often students can create their own videos on their smartphones. o Embed a YouTube video Social Media Integration (10 points) Choose one of the following: o Integrate a Facebook page using an inline frame (note that you must choose a Facebook page that is publicly available; a private page will not be displayed others or me when viewed) o Integrate a Twitter account or hashtag feed using an inline frame JavaScript (20 points) Integrate a custom JavaScript of your choosing that provides a substantial feature for your web site (i.e. photo slideshow, interactive calculator). o You may choose to download and implement an existing script that is available for free online, or create your own script Upload to Web Server (10 points) Upload your completed web project to your web server account o You should upload the contents of your web project folder into the main folder of your web server account (do not upload the web project folder itself, just what is inside it) o If you upload correctly and named your home page index.html as required, then you should be able to view your home page by going to: http://thompson.rmu.edu/courses/infs2150B/YOURUSERNAMEHERE/ o Check that all links work properly and all content displays correctly once uploaded. Sometimes, things will work on your own computer but will not show up on the server copy. This means that you may have hard-coded filenames (from your C drive, perhaps) or did not use relative URLs. Go back and fix these issues and then re-upload. o You must also turn in a .zip of your entire completed web project site to Blackboard.