Lab 1 : Photographer's Website

For this lab, you will create a basic website for a photographer using HTML and CSS. The website you build must include:

• A menu that appears on all pages.

• A footer that appears on all pages, which includes the URL to your GitHub repository on GitHub classroom. This should be a private repository that only you and the TAs can access.

• A home page that introduces the viewer to the photographer, using a large image.

• A portfolio page that showcases 9 or 10 images from the photographer, using a CSS Grid layout to put them into a grid.

• A reviews page that lists reviews from customers, each in a separate paragraph and using styles to separate them (white space, lines, etc.).

• An about page that includes a photo of the photographer and tells the visitor a little about him or her.

• A contact page with a form that will let a visitor email the photographer to ask questions or setup an appointment.

There are many photographer web pages you can find with Google. Here is an example of a basic page with some of the features you will create: http://www.jocilynmccleve.com/.

In most professional projects you are expected to use original images or images that are licensed for use with Creative Commons licensing. You should do the same here. You can find images on Flickr or on Creative Commons that are licensed with the Creative Commons license.

Starting the lab

To start the lab, you must follow this GitHub Classroom link. This will create a private repository for you using our classroom site. We will only grade repositories created and submitted this way.

Once you "Accept the assignment" on github classroom, it will create a new repository for you and grant you access to it on github. In order to start working on the lab, simply clone the repository to your laptop or other working environment.

CSS Grid layout

To learn how to make a simple grid, see this article on getting started and see this tutorial. You make also like this tutorial at Mozilla.

Contact form

To make a contact form, you should use the service at formspree.io. This will let you make a simple form that you can submit using their web server, and they will send you email every time someone fills out the form.

If you would like to learn more about forms, see this tutorial at Mozilla.

Web design criteria

When judging the style of pages, we will use the web design principles discussed on in the Web Design Principles page on Canvas. These include:

• Usability
• Navigation
• Focus
• Spacing
• Color
• Graphics
• Typography
• Alignment
• Consistency
• Mobile First
• Engagement

We will not be judging mobile first (responsive) design for this lab.

Submission

Submit the URL for your website, which should be running on your DigitalOcean server.

Rubric for Grading

When we grade these labs, we will award points using the following rubric:

Item	Points
Has sufficient HTML content on every page (10 points per page)	50
Has a working contact form	30
Uses good web design principles	20