Unit 2: Final Project
Unit 2 Final Project
Your HTML structure is solid — now make it shine. Bring everything from Lessons 2.1–2.9 together into one mobile-friendly, visually polished personal webpage styled entirely with CSS.
🎨 Your Mission
Open your index.html from Unit 1 — the valid, accessible, well-structured page you already built — and transform it into a professionally styled, responsive website using CSS. All styling goes in an external css/style.css file. No inline styles, no <style> blocks in HTML. This is the page that Unit 3 will bring to life with JavaScript. Style it right.
Project Requirements
Your completed project must meet all of the following. Each requirement maps directly to lessons you've already completed in Unit 2.
Create css/style.css and link it in your <head>. No style="" attributes or <style> blocks remain in the HTML. Presentational tags like <font> and <center> are not used.
* { box-sizing: border-box; margin: 0; padding: 0; } is at the top of your stylesheet. Base font-family, font-size, line-height, and color are set on the body. Images use max-width: 100%; height: auto;.
At least two font families used (one for body, one for headings). A cohesive color palette is applied throughout. All text/background pairs pass the 4.5:1 WCAG AA contrast ratio — verified with WebAIM.
Lesson 2.4Major sections and content blocks use margin and padding to create clear visual breathing room. At least one element uses a visible border or border-radius intentionally. No elements are cramped or awkwardly spaced.
The header uses a CSS gradient, background image with overlay, or a solid color background. At least one section card has box-shadow and border-radius. A profile image, icon (emoji or Font Awesome), or decorative background is present and styled.
Use position: fixed, relative, or absolute purposefully (e.g., a sticky nav bar, an absolutely positioned badge). Demonstrate control of display — Flexbox nav, inline-block nav links, or display: none in a media query.
Use display: flex on the nav bar and at least one content area (card row, skills section, or about layout). OR use display: grid with grid-template-columns for a gallery or card grid. gap controls spacing between items.
A @media rule at the bottom of style.css changes layout or font size on screens 600px or narrower. Nav links stack, cards go full-width, and no horizontal scroll appears at 375px. Tested in Chrome and Firefox with no major differences.
Pre-Flight Checklist — Before You Submit
Work through every item below before turning in your project. This checklist mirrors the rubric — a "yes" on every line means full marks are within reach.
- CSS is linked correctly:
<link rel="stylesheet" href="css/style.css">is in<head>. Open DevTools → Network tab and confirm the CSS file loads with no 404 errors. - No inline styles remain: Every
style=""attribute and<style>block has been moved tostyle.css. No presentational HTML tags in use. - CSS reset is in place:
* { box-sizing: border-box; margin: 0; padding: 0; }is the very first rule in your stylesheet.img { max-width: 100%; height: auto; }is also set. - Typography is set: A font family is applied to the
body. Headings use a distinct font, weight, or size that creates clear visual hierarchy. - Color scheme is consistent and accessible: Background, text, link, and accent colors are cohesive throughout. At least two color pairs tested with WebAIM Contrast Checker and pass 4.5:1.
- Box model is applied: Major sections have meaningful
padding. Elements aren't cramped or touching the page edge. At least oneborder-radiusorborderused intentionally. - Visual elements are styled: The header has a gradient, background image, or strong color treatment. Section cards have
box-shadow. A profile image is circular (border-radius: 50%) or an icon is present. - Positioning is used: At least one element uses
position: fixed,relative, orabsolute. Thedisplayproperty has been used to modify at least one element's layout. - Flexbox or Grid is used: The nav bar uses
display: flex. At least one content section uses Flexbox or Grid for layout — not just single-column block stacking. - Responsive media query works: DevTools device toolbar at 375px shows the layout adapting — nav stacks, cards go full-width, no horizontal scroll, text is readable.
- Cross-browser tested: Page opened in Chrome and Firefox. No major visual differences. DevTools Console shows no red errors in either browser.
- Stylesheet has section comments: Each logical group of styles is labeled with a comment header — e.g.,
/* ── Navigation ── */,/* ── Media Queries ── */. - Folder structure is correct: Project lives in
unit2-final-project/(ormy-website/) withcss/,images/, andjs/subfolders. All filenames lowercase with no spaces. - HTML still validates: Run a quick check at
validator.w3.org. Adding CSS should not have introduced new HTML errors. Confirm zero errors. - Both files are saved: The latest changes to both
index.htmlandstyle.cssare saved. The browser preview matches what you intend to submit.
📋 Grading Rubric — 100 Points Total
| Category | Excellent — Full Credit | Satisfactory — Partial Credit | Needs Improvement | Points |
|---|---|---|---|---|
| Styling & Layout (External CSS) 2.1 · 2.2 |
● All CSS in external style.css, correctly linked. Zero inline styles or <style> blocks. Stylesheet is organized with section comments. |
● External stylesheet present and linked, but a few inline styles remain or the file has minor organizational issues. | ● No external stylesheet, or most styles are inline or in a <style> block. |
/15 |
| Typography & Color Scheme 2.4 |
● Two distinct font families (body + headings). Consistent color palette throughout. Text contrast meets WCAG 4.5:1 — verified with WebAIM. | ● Some typography and color applied but inconsistent — not all headings styled, or color palette feels random. | ● No meaningful typography or color applied. Page looks largely unstyled or default. | /15 |
| Box Model Usage 2.3 |
● CSS reset at top. box-sizing: border-box present. Margin and padding create balanced, readable spacing throughout. At least one intentional border or border-radius. |
● Some margin/padding applied but spacing is inconsistent or a few elements are cramped or touching the edge. | ● No CSS reset. Little or no use of margin and padding. Spacing appears default or unintentional. | /15 |
| Backgrounds & Visual Styling 2.5 |
● Header has a gradient, background image with overlay, or strong color treatment. Section cards have box-shadow. At least one image or icon is styled and integrated into the design. |
● Some visual styling applied but largely flat — no gradients, shadows, or rounded corners used meaningfully. | ● No background styling, shadows, or visual elements beyond plain colors. Page looks undesigned. | /10 |
| Positioning & Display 2.6 |
● At least one positioning technique (fixed, relative, or absolute) used effectively. display property used to modify layout (Flexbox nav, inline-block, or display: none). |
● Positioning attempted but minor issues. Display property used on at least one element. | ● No CSS positioning or display modifications beyond browser defaults. | /10 |
| Flexbox & Grid Layout 2.7 |
● Nav bar uses display: flex. At least one content section uses Flexbox or Grid for layout. gap controls item spacing. Items wrap or adjust appropriately. |
● Flexbox or Grid present on one element but not fully leveraged — items don't wrap or alignment properties aren't set. | ● No Flexbox or Grid used. All layout is default block stacking. | /15 |
| Responsive Design 2.8 · 2.9 |
● A functional @media query at the bottom of style.css adapts layout at 600px or narrower. Nav stacks, content fills width, no horizontal scroll at 375px. Tested in two browsers — no major differences. |
● Media query present but layout doesn't fully adapt — some overflow or readability issues at small sizes, or only one browser tested. | ● No media query. Page breaks or scrolls horizontally on narrow viewports. No cross-browser testing done. | /10 |
| Overall Design & Effort 2.1–2.9 |
● Page looks intentional and polished. Color, spacing, font, and layout choices work together to create a readable, professional result. Clear effort was made to apply all Unit 2 concepts thoughtfully. | ● Styling applied but design feels unfinished or inconsistent in places. Effort is visible but execution is uneven. | ● Minimal styling. Little evidence that Unit 2 concepts were applied deliberately. | /10 |
🧮 Score Calculator
Enter your score for each category to calculate your total. Use this for self-assessment before submitting.
✍️ Student Self-Assessment
Check off each item you've completed. Use this alongside the rubric to identify any gaps before submitting. Print or screenshot this section if your instructor asks for a self-assessment.
| Skill / Feature | Lesson | Done? |
|---|---|---|
External style.css created and linked with <link> in <head> | 2.2 | |
No style="" attributes or <style> blocks remain in HTML | 2.2 | |
* { box-sizing: border-box; margin: 0; padding: 0; } at top of stylesheet | 2.3 | |
img { max-width: 100%; height: auto; } in base styles | 2.8 | |
| Body font family declared; consistent base font size and line-height set | 2.4 | |
| Headings styled with a distinct font, size, and color from body text | 2.4 | |
| Color scheme applied — tested with WebAIM Contrast Checker (pass 4.5:1) | 2.4 | |
| Margin and padding create balanced spacing — no elements cramped or touching edges | 2.3 | |
At least one border-radius or intentional border used | 2.3 | |
| Header has a gradient, background image, or strong color treatment | 2.5 | |
Section cards have box-shadow and border-radius | 2.5 | |
| At least one image or icon is styled and integrated into the design | 2.5 | |
At least one element uses position: fixed, relative, or absolute | 2.6 | |
Nav bar uses display: flex with justify-content and align-items | 2.6 · 2.7 | |
| At least one content section uses Flexbox or Grid for layout | 2.7 | |
Viewport meta tag is present in HTML <head> | 2.8 | |
At least one @media query at bottom of style.css — stacks nav and cards at 600px | 2.8 | |
| No horizontal scroll at 375px in DevTools device simulator | 2.8 | |
| Page tested in Chrome and Firefox — Console shows no red errors | 2.9 | |
Stylesheet has section comment headers (/* ── Section Name ── */) | 2.9 | |
| HTML still passes W3C validation with zero errors after adding CSS | 1.12 | |
All files in correct folder (unit2-final-project/ with css/ and images/ subfolders) | 1.11 |
🌟 Bonus Opportunities
These optional challenges are for students who finish early or want to push their design further. Bonus points are awarded at the instructor's discretion and will not bring a score above 100.
style.css for a custom look. The Bootstrap grid must actually be working — not just linked.transition effects on card hover states (deepen the box-shadow and use transform: translateY(-2px) for a subtle lift), nav link backgrounds, or a button. Each transition must be clearly visible and intentional.font-family declarations — not just linked. Include the correct <link> tags above your stylesheet in HTML.@media query for screens 900px and narrower — reduce a 3-column grid to 2 columns, adjust padding, or tweak font sizes. Both breakpoints must be present and functional at their respective widths.📤 Submission Instructions
- Complete the pre-flight checklist above — every item should be checked before you submit.
- Test responsiveness using browser DevTools device toolbar. Confirm the layout adapts at 600px and there is no horizontal scroll at 375px.
- Open your page in a second browser (Chrome + Firefox) and check the DevTools Console in both — confirm no red errors appear.
- Run a final W3C validation pass at
validator.w3.org. Adding CSS styling should not introduce new HTML errors. Confirm zero errors. - Submit your entire project folder — not just the HTML or CSS file. Your instructor needs the full
unit2-final-project/folder includingcss/,images/, and any other assets. Zip the folder if your LMS requires it. - Be ready to walk through your page. Your instructor may ask you to explain a design decision, demonstrate your media query by resizing the browser, or point out where you used Flexbox, positioning, or a visual technique from a specific lesson.