Responsive Web Page

In this assignment, you'll show your command of these concepts and skills

  • Flexbox
  • Responsive web pages
  • Media queries
  • Absolute and Relative Positioning
  • Validation

The idea of the assignment is to build a page describing yourself (or a fictional character). I used Hermione Granger.

There will be three sections with similar content types (a figure, with a caption, some paragraphs, and some lists), but different background colors, pictures and text.

You'll add some media queries so that there's a different layout for wider devices.

Previewing

You'll want to view your work while you develop it and before you turn it in. The URL will be:

https://cs.wellesley.edu/~youracct/cs204-assignments/mobile/assign.html

For security and honor code reasons, the browser will ask you for a username and password. This will be the username and password for your Tempest account (the one you use to login using VSCode).

To Do

This implementation will be in three phases:

  • first, a relatively simple page with three big blocks, consecutive on the page, and
  • second, a more complex page that uses Flexbox, and
  • third, media queries to be responsive: switch from vertical to horizonal layout if the screen is wide enough

First Phase

  • make a directory mobile for this assignment in your cs204-assignments folder
  • Set up the basic page HTML in a file called assign.html. I suggest you use the template in the reading.
  • make a subdirectory for your images: images
  • write your HTML:
    • three sections
    • each with a img with a figcaption, with a figure surrounding both.
    • some paragraphs
    • a list
  • style your content
  • validate the result

Styling

  • use margins and padding to keep text from jamming up against the borders
  • figures have a two-pixel border in silver. That is, there will be a 2px silver border around both the image and the caption, even before repositioning the caption by using absolute positioning.
  • images are 80% of the width of their container, centered
  • figure caption elements are 80% of the width of their container, centered
  • figure caption elements have a background color that is 50% transparent yellow. You'll have to use the RGB for yellow, which is full red and green and zero blue.
  • figure text is centered within its container
  • each section should have a different background color. I'd like you to use RGB color, just to practice.
  • refer to the screencast:

This phase shouldn't take too long, but if you have trouble, please ask.

Phase Two

This phase changes the layout and style some. The focus is on flexbox and position absolute/relative, both of which we learned in the readings.

  • Use a flexbox layout to make the three sections vertical for narrow devices/horizontal for wide devices
  • The caption for the three big figures has moved. It's now in front of the picture, overlapping the top of it
  • The caption background color is still 50% transparent yellow, so you can see a bit of the picture through it.
  • The top, left and right edges of the caption box are flush with the image. You'll use position relative/absolute for this.
  • The image is 80% of the figure, centered
  • There's 2em of distance between the top figure border and the top edge of the image
  • There's a screenshot below for how I'd like it to look.
The caption is in front of the top of the picture.

Note that I had to do a fair amount of fiddling around in order to get this to look right. One thing to remember is that the padding inside something is the same distance as the margin outside of a child.

I urge you not to get bogged down in getting the positioning of the caption just right. If you get reasonably close, that's good enough for me.

Phase 3: Responsive Page

Next, you have to make it responsive. If there's lots of horizontal space (> 768px) it should switch to a three-column layout, like this:

Three column layout on wide devices

Important note: it is not required that all the columns be the same width. You can if you want to, but they might naturally be different, and that's not an error.

In the reading on mobile and responsive we'll learn how to do this dynamically. If you start on this assignment before we get there, you can either read ahead, or add some extra CSS at the end of your file to override the earlier CSS and switch to wide (three-column) layout. You can comment that extra CSS out to switch back. Later, you'll learn how to do it dynamically.

Final Checklist

  • Make sure your name is in the files.
  • Make sure everything works and looks nice
  • Make sure both the HTML and the CSS are valid
  • Submit a Gradescope item, so (1) I know you are done, (2) I have a consistent rubric, and (3) you can easily see feedback on your work.

How to turn this in

I'll grade the work in your mobile folder; no need to do anything else

Solution

Tutors can look at my solution

Time and Work

Finally, when you have completed the assignment, make sure you fill out the Time and Work report. That report is required.