Pop by the Polls

Overview

This is just an example, don’t do this.

Corrections:

  • This is for the General Election, not the Primaries. Anywhere you see “primary” or “primaries” mentioned, make sure to replace it with “general election” instead.
  • Visiting and taking a photo of a polling place is no longer required because of COVID-19 and remote instruction. Instead, look up your voting precinct, and use a picture of a map or a screenshot from Google Streetview
  • A sample ballot can be obtained by visiting your County’s Board of Elections website (ask me for help, I’m happy to!)
  • You can pick a Presidential candidate from any party (Republican, Democrat, Libertarian, Green, Constitution)
  • If I ever mention deploying / GoDaddy in any video, please disregard. We use GitHub pages for our projects.

The assignment is due on October 15th at 8:45 PM. It is graded for completeness, P/F. Submissions that are incomplete shall not pass.

If you would like help researching the issues, consider this website.

Visit ISideWith.com

If you would like help searching for a sample ballot, go here:

Vote.org

You can also look up your specific registration here, if you wanted a sample of your specific ballot (NC only):

NC Voter Lookup

Here is the prototype for the website we will be making.

View Prototype

Here is the Adobe XD project. You may find the nesting and labeling helpful.

Download XD Project

Here is the template repository. It includes helpful comments and placeholder files.

Repository Template

Tutorials

All of the tutorials for this assignment will be listed here.

Use Template and Deploy

Use my template. It has all the files you need.

Template

  • Name your repository “pop-by-the-polls”
  • Click “Create Repository from Template”
  • Open Visual Studio Code
  • Click “Clone Repository”
  • Select “pop-by-the-polls”
  • Pick a location to save the repository
  • Open up the project

Then follow these instructions:

  • Visit the repository on GitHub.com
  • Click the “Settings” tab
  • Scroll down to “GitHub Pages”
  • Select “master” or “main”, and then select “root”
  • Click “Save”

Make sure you regularly commit and push your changes to GitHub.

That’s it! Your project will soon be live at https://username.github.io/pop-by-the-polls/

Now, let’s write some code!

Main HTML

This is a tutorial on how to set up the main HTML of the page.

Corrections:

  • Use the United States SVG, not the North Carolina SVG.

Card HTML

This is a tutorial on how to set up the card HTML of the page.

Small Correction

Whoops! I typed something slightly wrong previously. Here’s the fix.

General CSS

Here are some easy CSS properties we can assign to get our web project closer to our XD project. The idea here is taking small steps, and verifying them as you go along.

Card CSS

This tutorial focuses on CSS that makes a decent looking card.

Header CSS

This tutorial focuses on CSS that gives the header its size and gradient.

Layout for Large Card

This tutorial focuses on the CSS you need to create a desktop layout for the large cards.

Layout for Issue Cards

This tutorial focuses on the CSS you need to create a desktop layout for the issue cards.

Layout for Header

This tutorial focuses on the CSS you need to create a desktop layout for the header.

Main Finishing Touches

This tutorial focuses on the CSS you need to put the finishing touches on the main section of your site.

This tutorial focuses on the HTML and CSS you need to create a footer.

This tutorial focuses on the HTML you need to create a navbar.

This tutorial focuses on the CSS you need to create a desktop navbar.

This tutorial focuses on the CSS you need to create a mobile navbar. Please make sure to watch this video until the end.

Corrections:

  • I made a small mistake by using absolute positioning instead of fixed positioning. I explain the fix (changing two property values) at the end of the video.
  • Please remove the “active” class that I assigned to overlay and the menu (around 19:03). I only added this to illustrate how adding a class can help us visually represent state.

This tutorial focuses on the JavaScript you need to create a navbar.