ECS 162 Assignment 2 

ECS 162 Assignment 2 
You are encouraged, but not required, to work on this assignment
in teams of two.
Please submit by 10pm, Thursday April 11, on Canvas.
We'll make a Web page for one of the current exhibits at the
Manetti Shrem museum (it closes on the 14th, so catch it quick if
you want to see it in real life!). We'll learn about CSS for responsive
pages that work on a variety of screen sizes, practice working with
a designer, and do our first bit of Javascript.
Please do not put your Web pages for this assignment on the
internet; the famous artist does not want UC Davis posting
random stuff without his approval.
Jamie, our designer, has given us six mock-ups for how the Web
page should appear, on three different viewport widths (phone,
tablet, laptop) and in response to a "read more", "read less"
button. You can download them all here.
Assignment 2 ECS 162 S19 https://web.cs.ucdavis.edu/~amenta/s19/museumAssn.html
1 of 3 6/16/2019, 9:15 AM
While the user might have to scroll down in your implementations,
they should never have to scroll right. Most elements, including
the header, footer, main region, paragraphs and the images
themselves, should not have fixed widths, but should depend on
the width of the body. The orange header bar, for instance, should
always fill the width, for widths in the laptop and tablet ranges the
image should always be on the left, the title of the exhibit should
be on the right, and both should be fully visible.
You can check how the mobile design appears on phones using
the emulator in Chrome developer tools.
The "read more" and "read less" buttons should toggle between
the views with more or less content. We can hide and reveal
content using the display: none; property in CSS. The other
buttons don't have to do anything (or even be "button" elements);
they're just for show.
You are required to implement the page using Flexbox. You may
not layout libraries such as Bootstrap, or css properties such as
float, absolute, or grid. Correction! You need to use float to "float"
text around the pictures in the tablet view. Here is an example:
floaty.zip. But try and use flexbox in most other situations.
Here is a zipped directory containing the three images, and a
starter HTML file, "exhibit.html", containing all the text. Please
maintain this diretory structure, where the images are in "assets"
and the html and css are in "source". Only hand in the "source"
directory (we don't need 200 copies of the images). See
"source/readme" for information on colors and fonts.
I suggest you start by implementing the "web" design. Begin by
printing out the mockup, and sketching in what belongs to the
Web elements "header", "main", etc. Not everyone has to assign
the same elements to every part of the picture (ie. is there a "nav"
element inside the "header"? Before it? Not at all?). It's also helpful
to give every HTML element to which you assign css a different
background color during development (and put them back to
white when you're done).
When you're done, zip up the "source" directory and submit it
Assignment 2 ECS 162 S19 https://web.cs.ucdavis.edu/~amenta/s19/museumAssn.html
2 of 3 6/16/2019, 9:15 AM
using Canvas. You and your partner should submit identical files.
There is no need to submit the "assets" directory to us, we have it!
Assignment 2 ECS 162 S19 https://web.cs.ucdavis.edu/~amenta/s19/museumAssn.html
3 of 3 6/16/2019, 9:15 AM