Project 1

Project 1

HTML & CSS

See course schedule for due date.

Getting Started

  • Store all you work in a folder called project1.
    Do not use spaces or upper-case letters.
  • You will create a zip file of this folder called project1.zip and submit it via Canvas.
  • Download the following starter code: Starter Code

Overview

You will create a CSS-style website with 4 web pages:

  1. index.html Home page with your own unique content.
  2. resume.html Your professional resume.
  3. courses.html A list of courses you have taken.
  4. Create and link a fourth page of your choosing, i.e., project page, photo gallery, interests, etc.

Important Features

Your website must use...

  1. a Bootstrap 4.0 stylesheet to optimize mobile display.
  2. a linked stylesheet to give all your pages a unique but consistent "look and feel."
  3. use a media query to format your resume for printing.
  4. correct use of embdeded CSS to customize two of the pages.
  5. correct use of inline CSS to customize at least two special tag instances.

Resources

While you must follow the requirements below, you can pick your own colors, decorations and sample content. Your web pages can and should look different and unique.

zyBook CSS References HTML Reference Bootstrap Reference

Requirements

The following references are helpful. Please use them.

# Description Points
1 You must add content and at least 5 correctly used HTML tags to your index.html. This page must include at least one image and one absolute hyperlink. 10
2 You must add content and at least 5 correctly used HTML tags to your resume.html page. This page must use a table to format one of your resume sections. 10
3 You must add content and at least 5 correctly used HTML tags to your courses.html page. This page must use a nested list. 10
4 You must add content and at least 5 correctly used HTML tags to your 4th page. 10
5 All your pages must link in both the top nav menu and your bottom footer menu. Additionally, your nav menu items should properly used the "active" class to indicate the current loaded page. 5
6 In addition to the Bootstrap used in the starter template page, you must add at least 3 different Bootstrap components. These can be used in any of the four pages, but ideally each page should have at least one additional Bootstrap component. 5
7 All your HTML must validate at https://html5.validator.nu 5
8 All pages must use a linked a stylesheet called custom.css. You should add style to at least 12 different HTML tags, at least 3 different class names (i.e., .classname), and at least one id (i.e., #idname). Thus, your web pages should use at least 3 different class names and at least one id name. You must use at least 15 different CSS properties. 30
9 You should use embedded CSS to give two of your pages some unique styles that override either Bootstrap's CSS or your custom CSS. 5
10 You should use inline CSS to give two HTML tags styles to override either the embedded CSS, Bootstrap's CSS or your custom CSS. 5
11 All your CSS must validate at https://jigsaw.w3.org/css-validator/ 5

HOW TO SUBMIT

Make sure all your files (html, css and images) are in one folder called project1. Create a zip file of this folder and submit via Canvas.

DO NOT SHARE FILES OR CODE

This project is individual. You should not share your html or css code with anyone in the class. While it may be natural for your resumes to have similar structure and styles, excessive similarity (especially in source code formatting) is a sign that you used someone else's files but changed the content. When you do this, you learn less about the syntax and rules of HTML and CSS. You are expected to author all your files from scratch and protect them so that no one can copy your hard work.