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.

Pair Programming¶

Pair Programming strongly encouraged. Please see the spreadsheet I mailed out.

Here's how I think it can work: Let's suppose that Hermione and Ron are working together on this assignment. They decide to use Hermione's account, so she'll do the typing and Ron and she will collaborate on the coding. When they are done, I'll grade the files in Hermione's account.

Hermione should also share the files with Ron so that he has a copy. She can use tar and the drop command to do that. Just tar up the directory containing all the work and drop the tar file to Ron's account. See Transfer Files Using Drop

Of course, they might work together for a while but then diverge, maybe due to incompatible schedules, a difference of opinion, or something else entirely. If that happens, Hermione should drop the partially finished files to Ron, using exactly the same steps.

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 SSH or CyberDuck). The browser will remember those credentials, so you won't have to give them a zillion times.

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.

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:

Important note: it is not required that all the columns be the same width. You can if you want to, but they will 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. If you have a partner, both names should be 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; no need to do anything else

If you worked with your partner throughout the assignment, only one partner needs to submit to Gradescope. The person who submits should be sure to add their partner to the group submission. )

If you diverged, each partner should submit to Gradescope.

Solution¶

Tutors can look at my solution

Time and Work

The following link has been updated for Fall 2023.

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