Based on your proposed topic, create at least three HTML documents and two CSS documents that will contain the following requirements from Tutorials $1-3$ and $5$:

$**$Use comments to identify each of the required elements below.$**$

You may not use a website generator program to create your website. You must write your own code for your website. You may use any of the coding challenges as templates to begin each document, modifying it as needed to reflect your own color scheme and content. For instance, use a home page from one of the coding challenges. Modify the content, etc. Then use your home page as a template to create your other HTML pages. You should have a consistent navigation bar and color scheme across your website. Link all pages to the two CSS files. One CSS file can deal with formatting and the other CSS file could deal with the layout.

Refer to the appropriate tutorial to create the required elements

From Tutorial $1$ Intro to HTML:

Set metadata of the document

Use sectioning$,$ grouping, and text$-$level elements

Link to CSS file$($s$)$

Include navigation list with hypertext links

Include inline images

Include character references

From Tutorial $2$ Intro to CSS:

Format lists, background, and text

Use pseudo classes$/$elements

Use contextual$/$attribute selectors

Use pseudo classes for hypertext links

From Tutorial $3$ Page Layouts:

Use both block and floating elements

Create a floated layout

Create a grid layout

Experiment with relative and absolute positioning

Handle overflow

Tutorial $5$ Mobile Design:

Implement responsive design to different screen widths using @media and flex$/$flexbox

Include a pulldown menu $($optional$)$

Anything else you decide to include will be up to you! Also keep in mind that this is the same project that will be expanded on later on in Part $2$ for Tutorials $7$ and $9.$ Just remember to have fun!

Submit files separately or zip all files into one folder and submit the zipped file$/$folder$.$

HTML pages should have html extensions and CSS pages should have css extensions. Create your files using Notepad$++.$

Continuing from Project Part $1,$ implement the following requirements from Tutorials $7$ and $9$:

Use comments to identify each of the required elements for Project $2.$

If you wish for required elements to be considered from Project $1,$ each required element must be identified with an appropriate comment.

$**$Required elements not properly identified will not be graded.$**$

If you are unable to zip files, please submit files individually. Only submit files with zip, HTML$,$ CSS$,$ and image file extensions. PDF and DOCX files are unacceptable.

You may also upload your files to your GitHub repository.

Tutorial $7$ Web Forms:

Create and format a form with multiple field sets

Include the following input types: text, date$/$time$,$ radio buttons, spinners, range sliders, and check boxes

Create a selection list

Create and format a text area

Include at least one input that is set for a mobile keyboard type $($e$.$g$.$ number, email, url, etc.$)$

Validate data with patterns and field lengths

Validate data with by having certain fields required

Use the focus pseudo class to format valid and invalid selected boxes

Include a datalist and use it for input

Create a submit and cancel$/$reset button

Tutorial $9-$ JavaScript:

Create and call a JavaScript function that keeps track of the current day and time

Send an alert using JavaScript

Use a Math method

Delay one command or run a command at a specified interval

Convert between a number and a text

Include a countdown function

Note: including a JavaScript file with the Tutorial $7$ requirements is not necessary since we did not discuss the form JavaScript file in this class.

If you want to include more HTML and$/$or CSS documents, you are free to do so$.$ Be creative and have fun!