Midterm Project: Building a Multi-Section Website

For the midterm project, in lieu of an exam, you will go through the process of creating a professional-looking website. Rather than building everything from scratch, you'll work with starter files and a comprehensive style guide that provides HTML patterns and utility classes. This project consists of 10 exercises, each focused on implementing a specific section of the Natural Areas Conservancy website. You'll build each section incrementally, learning to apply CSS Grid, Flexbox, responsive design, and JavaScript interactions, while following established design patterns and best practices.

I am expecting that this assignment will take you around 8-10 hours to complete (+ or -). Given this, my recommendation is that you complete this project in several sittings versus saving it all for one day.

Setup Instructions

Download Midterm Starter Files

Download the midterm.zip file, unzip it and move the unzipped midterm folder into the mser521 folder (see diagram below).

mser521
    ├── intro-html
    ├── lab02
    ├── lab03
    ├── lab04
    ├── lab05
    └── midterm
        ...

Within the midterm folder, each exercise folder (01_hero, 02_nav, etc.) contains:

1. An index.html file (start with basic HTML structure)
2. A corresponding CSS file (hero.css, nav.css, etc.)

All exercises should also link to ../utility-classes.css for base styles, which you will not edit

Before You Begin

Before you begin, please read How to Use the Style Guide carefully. Then, when you're done, complete the exercises.

Exercises

#	Exercise	Time Estimate	Walkthrough
1	Hero Section	1/2 hour	🎥 Video
2	Navigation	1/2 hour	🎥 Video
3	Video Introduction	1/2 hour	🎥 Video
4	What We Do	1 hour
5	Join Our Efforts	1/2 hour	🎥 Video
6	The NYC Nature Map	1/2 hour
7	Forests in Cities Network	1 hour
8	Carousel	1.5 hours
9	Putting Everything Together	1.5 hours
10	Scrolling Effects	1.5 hours	🎥 Video

General Tips

1. File Paths: Always use relative paths (../images/filename.jpg, ../styles.css)

2. CSS Variables: Use variables from styles.css:

   • Colors: var(--black), var(--white), var(--persian-coral), etc.
   • Container: var(--container-max-width), var(--container-outer-padding)

3. Responsive Design: Include mobile styles at max-width: 768px (and tablet at 1024px if needed)

4. CSS Classes: Reuse utility classes from styles.css (.btn, .heading-1, .grid, .card, etc.) instead of redefining them

5. Semantic HTML: Use appropriate HTML5 elements (<section>, <article>, <nav>, etc.)

6. Accessibility: Include alt text for images, proper heading hierarchy, aria-label where needed

Good luck with your implementation!

What to Submit

Please make sure that you have completed all 10 exercises.

When you're done, please create a link from your homepage to the index.html page at the root of your midterm folder (see Sarah's homepage for an example). Then, commit and push all of your edits to GitHub and, paste a link to your GitHub Repository and to your GitHub pages in the Moodle submission.