See course schedule for due date.
Store all you work in a folder called project1.
When naming folders and files do not use spaces.
You will create a zip file of this folder called project1.zip
and submit it via Blackboard.
View the following sample solution to under stand the big picture:
While you must follow the requirements below, you can pick your own colors, decorations and sample content. Your web page template will look different and unique.
The HTML and CSS are "minified," i.e., all extraneous whitespace is removed. Your HTML and CSS must be properly formatted. While it is possible to reverse-engineer the solution, be warned that the coding of the solution is unique, so copying the solution will be easy to detect.
You are permitted to use your browser's object inspector to see the hierarchy (i.e., tree-like structure) of the sample solution and to see the CSS applied to each individual element.
The following references are helpful. Please use them.
zyBook CSS References HTML Reference
Create a web page named template.html that meets the requirement described below.
| Description | Points |
|---|---|
| The page must validate at https://html5.validator.nu | 4 |
The page must use a linked a stylesheet called style.css
|
1 |
| HTML tags should be properly indented. Start and end tags should line up. Child tags should be intended relative to parent tags. | 4 |
The page must include all of the following tags and structures:
| Tag | Description | Points |
|---|---|---|
| div |
Use this as the outer-most container. The margins of the body
cannot be changed for some browsers, so using an outer container is a common practice
to achieve certain layouts.
The outer-most div will contain the
header, main and footer elements.
|
1 |
| header |
Used for the website title (h1), navigation menu (nav),
and a logo or website image (img)
that will be on every page.
|
2 |
| nav |
Used for the top navigation menu of the website.
Create an unordered (ul) list (li) of hyperlinks (a) to sample pages, i.e., home, resume, courses, bio, etc.
|
3 |
| main |
Used for the main content of each individual page. Create a main with a
web page title (h2), sample content sections (section) and sample
related content areas (aside)
|
3 |
| section |
Used for storing a section of related content. Create a sample section with a heading (h3),
paragraphs (p), a sample table (table, thead,
tbody, tr, th, td) and
a sample lists (ul or ol and li).
|
4 |
| aside |
Used for side content related to a section.
Create a sample aside with a subheading (h4) and paragraphs (p).
The aside will go inside of a section.
|
2 |
| footer |
Contains information about the page. Create a sample footer with information about
the author of the page and the date the page was last updated.
|
1 |
Create a stylesheet named style.css that meets the following requirements:
| Description | Points |
|---|---|
| Must validate at https://jigsaw.w3.org/css-validator/ | 4 |
| CSS should be properly indented. CSS properties should be indented and line up for each selector. | 4 |
| Tag | Description | Points |
|---|---|---|
| body | Add a neutral background color or gradient | 1 |
| header |
Add a dark background color of your choosing with light text.
Set overflow to auto.
Set box-sizing to border-box.
Set the width to 100%.
The website title (h1) should float left and
the navigation menu (nav) should float right.
|
3 |
| nav |
Transform the unordered list of links in the nav so they look
like buttons that float left to right.
Set the padding and margin of the ul to zero.
Set the list-style of the ul to none.
Set the li tags to float left with
padding and margin set to zero.
Set a tags in the nav to display inline-block and
add a border and padding to make the links look more like buttons.
|
7 |
| main |
Set the background color to white or a very light color.
Set overflow to auto.
Set box-sizing to border-box.
Set the width to 100%.
Add padding so the text is not too close to the edge.
Add a box-shadow.
|
3 |
| aside |
Make the font-size smaller, add padding and a very light background color
|
2 |
| footer | Make the text centered. | 1 |
The page will have three different layouts:
| Device | Description | Points |
|---|---|---|
| Mobile |
The goal is to maximize the space for content on small display devices.
Do not set the width using explicit px values.
Using 100% for width is OK because it maximizes the available space.
Use minimal padding and margin.
|
3 |
| Tablet |
Use a media query to set the following styles if the browser is 700px or wider:
Set the width of main to approximately 650px and use auto margins
to center the main.
Make the header fixed (i.e., sticky) so when you scroll it will always be at the top.
Finally, set the width of the aside areas to approximately 200px and
float them right so they are not in the middle of the section content.
|
9 |
| Desktop |
Use a media query to set the following styles if the browser is 1000px or wider:
Position the header and footer to the left of the main
content area in a 2-column format using the following technique.
Set the width of the outer-most div container to approximately 950px and
center it using auto margins.
Set the width of the header and footer to about 300px and float them to the left.
If the footer gets stuck in the middle, use clear: left to force it below the header.
Set main to float right. Note that the width of the main area should
have already been set to 650px from the previous media query, i.e., 700px or greater.
|
13 |
Use your template to create 3 or more linked pages.
| Page | Description | Points |
|---|---|---|
| Home | Make a home page. Who are you? What is your purpose in the world? Add a nice picture that you like. | 5 |
| Resume | Make a resume page. Good opportunity to use multiple sections and lists, e.g., skills. | 10 |
| Courses | Make a page that lists all the courses you've taken. Use a table to list your courses (course number, name, semester taken, etc) | 10 |
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 Blackboard.
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.