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 (OL or UL)
  • 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 size of their container, centered. That is, they are 80% of the distance between the silver borders of the figure.
  • figure caption elements are the same width as the image,
  • 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.
  • The text in the figure captions is left-aligned
  • each section should have a different background color. I'd like you to use RGB color, please, just to practice.
  • the lists should be 60% of the width of their containers and centered within their containers

This phase has one tricky part, and that is the sizing of the image within the figure. So, let's talk about widths of boxes.

Box Widths

Here are some boxes. Inspect each, look at the box model and make sure you understand.

Example 1, a 400px wide red box

The box above is 400px wide. It has no padding (padding goes inside the border), so the content area where the text goes is 400px wide.

Example 2, 400px wide red box with 50px padding

The box above is 400px wide but that's the content area. Inside the red lines is also 50px of padding on all four sides, so the distance between the left and right borders is greater by 50px+50px.

The width property controls the content area, not the distance between the borders. The difference between those two is the effect of padding, which goes inside the borders, but is not subtracted from the width of the content area.

Example 3, A blue box inside a 400px red box.

The box above has a blue box inside it. Without padding or margins, the blue box fills the area between the borders.

Example 4, A blue box inside a 400px red box with 50px padding.

But the box above has 50px padding, so the red box is forced to be larger, as before. Compare example 4 with example 2: the red boxes are the same size.

Example 5, a blue box with 50px margins inside a 400px red box with no padding.

The red box above has no padding, but the inner blue box has 50px margins, so its content area has be become narrower to have the whole blue box (including margins) fit in the 400px content area of the red box. Compare the size of the the outer box in example 5 with example 3. They are the same size, but the blue box is narrower, because of its margins.

Example 6, a blue box with 50px margins inside a 400px red box with 50px padding.

The boxes above combine margins on the inner box and padding on the outer box. The content area is still 400px, so the padding causes the outer box to be wider and the margins cause the inner box to be narrower. Note that there's 100px of distance between the red border and the blue border, and all that area is colored pink, because it's inside the red box.

Take home messages:

  • width is the width of the content area, and not the distance between borders
  • padding goes inside the borders and gets background color.
  • Changing the padding of an element does not affect the width of the content area of that element
  • margin goes outside the borders of an element.
  • changing the margin of an element does not affect the width of the content area of that element

If a box has to fit inside another box, its margins, border and padding all have to fit inside the content area of the outer box. Usually the content-area is a width of 100%, which means its a margins, border and padding are all subtracted from the available content area (of the outer box) so the content area of the inner box gets narrower.

Here's yet another example:

Example 7, a blue box with 50px margins and 10px border and 50px padding inside a 400px red box with 50px padding.

You''ll notice that the content area of the blue box in example 7 has gotten quite narrow. Use the inspector to see that it is 180px, because the 400px has been eaten up by 50px of margin, both left and right, 10px of border, both left and right, and 50px of padding, both left and right: 400 - 2 * (50 + 10 + 50) = 400 - 220 = 180.

Widths in Phase One

The preceding section on widths will hopefully clarify what the figures look like. Consider this screen shot:

screenshot from scott's solution. If the vertical silver lines are 500px apart, the image and caption are both 400px: 80%.

As it says, the image width is 80% of the apparent size of the figure.

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.
  • There's 2em of distance between the top figure border and the top edge of the image
  • See the the screenshot in the last section for how I'd like it to look.

Note that I had to do a fair amount of fiddling around in order to get this to look right.

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.

Equal Width Columns

Why aren't the columns equal width? In mine, they are almost the same width, but not quite. That's because flex items are scaled from their "natural size" and in this case the natural size depends on the images. My images happen to have the following widths:

  • 1024px hermione-granger.jpeg
  • 900px Hogwarts Castle
  • 1021px man and woman silhouette

So, the middle picture is a little narrower than the others, making the columns have different "natural widths," so when Flexbox scales them, the middle column is just a little narrower than the others.

To make them equal widths, you can set their width property to a percentage that is equal, and then allow flexbox to scale them up/down as needed.

Many students want the columns to have equal widths, and that's a very reasonable desire, so it could be worth the short amount of time and effort it will take.

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

How to turn this in

I'll grade the work in your mobile folder.

Upload a zip file of your code (without images) to Gradescope. To create a zip file that excludes certain kinds of files (in this case, images), you can do the following:

zip -r mobile.zip mobile -x "*.jpg" "*.png" "*.gif"

The -x excludes filenames that match the patterns that follow. Don't forget to put the patterns in quotation marks.

Solution

Tutors can look at my solution

Rubric

Here's the grading rubric for this assignment:

Gradescope

Be sure to submit to gradescope.

Time and Work

Finally, when you have completed the assignment, make sure you fill out the time and work. That link has been updated for Spring 2026. That report is required.