VICO 3173 / 5173 Assignment

My Top 5...

Let's build a webpage that will feature 5 places of your choice. You'll need to choose a theme to get started. Your page will include your own photographs, and you will build a map that shows where your places are.

Read About Mapbox Mapbox map examples Geojson.io for creating a geojson file

Some websites for inspiration

These example websites show different themes but with a similar narrative -- some places I love for a certain reason.

National Geographic Top Tens
Every day Parisian

Assignment: Build a narrative webpage around five places of your choice

Your narrative could be about five places you like to go for lunch, five favorite spots on campus, five places you like to go to meet friends at night, etc. Keep it local so you can get pictures!

  • Choose a theme for the subject of your narrative. It can be restaurants, lunch spots, nightlife, art galleries, hiking trails, etc.
  • You will need a list of the places, addresses, description text, photos for each location.
  • Update your website before each class, and add a link for each stage of progress (v1, v2, v3, etc.)
  • We will add the Mapbox map last, but it should be placed on your page from the start.

Before you start: A few sketches and a blank canvas

  1. Start with a few quick sketches on paper that show content areas of your web page.
  2. Will you use a list? Some icons? A photo carousel? Don't forget the map!
  3. Create your project folder with a css folder, an images folder, and a blank html file.
  4. You must begin coding with a blank canvas!
  5. Build one section that is responsive and has two or three simple design elements that you will re-use throughout your project..
  6. Is your first section responsive? Test it in your browser!
  7. Next, duplicate that section, and modify it for your content needs.
  8. Test it and repeat...
  9. After the basic framework is built, add your real text, add images, and then make some design or layout variations to the sections of the case study.

Practice, Repetition, Good habits

  • Practice and repetition are the best ways to learn coding and web design!
  • I want to see your progress each step of the way.
  • We will be working in code pairs again.
  • We'll be working on this project for a few classes, so keep your files and folders organized, save your work frequently.
  • Force yourself to start over with a blank canvas for each version!

Grading

I will be looking for:

  • Good coding -- you started with a blank canvas, your psge is responsive, proper indenting of HTML code, use of annotations and spacing, use of Bootstrap's "container > row > cols" for your layout, and organized project folders.
  • Good content -- a clear theme, a compelling narrative about your places, use of your own work for the text and images.
  • Good design -- customization, use of color, fonts and typography and strong images.