Lab 1 : Photographer's Website Solution

For this lab, you will create a basic website for a photographer using

HTML and CSS. The website you build must include:




* A responsive Bootstrap 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.




* A portfolio page that showcases 9 or 10 images from the

photographer, using the Bootstrap grid, the CSS Grid, a masonry CSS

layout, or some other technology to arrange the photos.




* 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.




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/](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](https://creativecommons.org/) licensing. You should do the

same here. You can find images on

[Flickr](https://www.flickr.com/creativecommons/) or on [Creative

Commons](https://search.creativecommons.org/) that are licensed with

the Creative Commons license.




Starting the lab




To start the lab, you **must** follow this

[GitHub Classroom link](https://classroom.github.com/a/L_qOXExg). 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.




Tutorial




Use the [tutorial](tutorial.md)

in the Wiki for tips on using Bootstrap and creating grid layouts.




Web design criteria




When judging the style of pages, we will use the web design principles

discussed on the Web Design Principles page on Canvas. Please be sure

to review this. The most important principles are:




* navigation -- make the menu system simple and consistent

* spacing -- use white space effectively to make the site clearer

* color -- use color effectively to make the site appealing

* typography -- make it pleasant to read

* consistency -- everything should match

* responsive design -- the site should work as well on mobile as on

desktops; mobile-first designs for mobile, then expands to desktop




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) | 40

Has a working Bootstrap menu that is customized (not the default look) | 30

Has a grid layout for photos | 20

Uses good web design principles | 10




For the web design principles, you will receive 2 points for each for

spacing, typography, color, consistency, and responsive design. We

will subtract 1 point for a principle if you need some work, 2 points

if you need a lot of work.