/project0

First project for C50 course at H

Primary LanguageHTML

project0

First project for C50 course at H

This readme file is used to track the fulfillment requirements list provided for the project. This list is an eight item unordered list.
What follows below are the notes on how these were fulfilled. Note comments are intersperse throughout the code that allows a grader to better able to pinpoint the item.

NOTES ON 8 REQUIREMENTS

1 Must have four pages

There are four pages. The index plus one page for each of the three phases of my life. In index page has a menu that allows branching to each of the three phases. Each of the three phases has a return button.

2 The web site must include the following lists

  • ordered list - see comment 2.1 - the bucket list in retired.HTML
  • one table - see comment 2.2 - the family structure table in youth.html
  • one image - see comment 2.3 - photo in index.html

3 The style sheet heh_style.css is used to modify some html popular elements. Note that it is not used as consistently as would be the case in a practical situation as this is an academic exercise. However, note that most of the text is in the Arial font.

4 Must have 12 selector examples (5+5+1+1) A key feature of CSS is the flexibility of the selectors. 12 examples are detailed

  • 5 Different CSS properties 4.1 p.normal and font-family in heh_style.css 4.2 p.normal and font-size in heh_style.css 4.3 p.special and font-weight in heh_style.css 4.4 p.special and padding-top in heh_style.css 4.5 p.special and padding-bottom in heh_style.css
  • 5 Different CSS selectors 4.6 .normal selects normal in p 4.7 .special creates a new selector in p 4.8 .goodsize is selected for image size 4.9 .grid-item is defined in the head of adult.html 4.10 .grid is defined in the head of adult.html
  • 1 use of an ID selector 4.11 dream is selected with # in heh_style.css
  • 1 use of a class selector 4.12 in adult.html 5 Demonstrate use of @media
  • 5.1 used to resize grid 6 Use Bootstrap 4
  • 6.1 imports it into the adult.html style 7 scss/sas Note that SASS moves the comments around between the two files.
  • 7.1 in heh_glob.css/scss shows example of variable
  • 7.2 in heh_glob.css/scss shows example of nesting