Emily Kauffman

Back to teaching

CIS 275 Lecture 17: Layout Lab

Goals

  1. Review of concepts
  2. Work on the project

Review of Concepts

We've covered in detail positioning and layouts. So far in our web design and development toolkit we have HTML, design basics including some color theory, typography, and CRAP principles, we have CSS, and we know how to make page layouts. At this point, you have a lot of the technical skills needed to make websites. Nice!

In the next two weeks, we'll be starting our second book, Don't Make Me Think by Krug. If you don't have this book yet, you should think about finding it soon. It's pretty inexpensive and a lot of publishers have made books free online during the pandemic, so that might be worth checking out.


Reset/Normalize CSS


Layout Project

The mastery exam was meant to be a coding exam that was completed in the classroom to demonstrate that you were familiar with layouts and positioning, and able to recreate a site based on a mock up. That is no longer feasible due to this class being remote, and so I've come up with a project that accomplishes similar goals.

Prompt

You're a famous photographer! When did that happen?? Anyway, you've decided that you want to show off your photos by making a photography site. These photos do not have to be good. We're just working on our layout skills!

You have a lot of creative freedom here, but you should make sure your work falls within these constraints:

  1. Must have a landing page (index.html).
  2. The landing page must contain at least 8 photos displayed in a grid. This grid can be in whatever dimensions you want, but it must have at least two columns and at least two rows (this means no 8x1 or 1x8 configurations). You can do more than 8 photos if you want.
  3. The landing page and photo grid must be laid out using a fluid layout (should use flexbox or floats, not fixed).
  4. Each photo on your landing page must link to a page specific to that image.
  5. The site should include the typical web page components: header, title, footer, navigation.
  6. Each individual photography page should include at a minimum: the image, a caption, and a paragraph or two about the photo.
  7. Each individual photography page should include at least two columns in the layout.

This represents the minimum you should do to successfully complete the project. You should feel free to go further – such practice will only improve your skills. All markup for this project should be in accordance with the HTML5 and CSS3 specifications. Feel free to be as creative as you want here! I'm excited to see what you come up with.

I don't care if you use other photography websites as motivation, in fact, I encourage it! Just make sure all the code that you write is your own.

Some inspiration:

  1. https://www.lisamicheleburns.com/
  2. https://whitedoor.photoshelter.com/gallery-collection/Corporate-Event-Galleries/C0000rJvJyN6Toss
  3. https://www.doryyounes.com/
  4. https://www.mpkelley.com/gallery

Dates

I had the due date originally set for April 9th but am changing this to April 12th at 11:59 PM.

Grading

The project will be worth the same as the mastery exam: 30% of your grade. The rubric:

  • 10% design decisions (CRAP principles)
  • 30% correctness of HTML (semantics and syntax)
  • 30% correctness of CSS (semantics and syntax)
  • 30% fulfills layout requirements above

In Class Exercises

  1. Make one post in Lecture 17's channel stating a reflection on today's content, and something you're confused on, if anything.
  2. Start on the project!

Additional Resources

  1. A Guide to CSS Layouts