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,
places you like to go to meet friends at night, etc. Keep it local so you can get
- 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
- 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
- Start with a few quick sketches on paper that show content areas of your web page.
- Will you use a list? Some icons? A photo carousel? Don't forget the map!
- Create your project folder with a css folder, an images folder, and a blank html file.
- You must begin coding with a blank canvas!
- Build one section that is responsive and has two or three simple design elements
that you will re-use throughout your project..
- Is your first section responsive? Test it in your browser!
- Next, duplicate that section, and modify it for your content needs.
- Test it and repeat...
- 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!
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
- 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.