Description
We’ll make a Web page for one of the current exhibits at theManetti 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 responsivepages that work on a variety of screen sizes, practice working witha designer, and do our first bit of Javascript.
Please do not put your Web pages for this assignment on theinternet; the famous artist does not want UC Davis postingrandom stuff without his approval.
Jamie, our designer, has given us six mock-ups for how the Webpage 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.
While the user might have to scroll down in your implementations,
they should never have to scroll right. Most elements, includingthe header, footer, main region, paragraphs and the imagesthemselves, should not have fixed widths, but should depend onthe width of the body.
The orange header bar, for instance, shouldalways fill the width, for widths in the laptop and tablet ranges theimage should always be on the left, the title of the exhibit shouldbe on the right, and both should be fully visible.
You can check how the mobile design appears on phones usingthe emulator in Chrome developer tools.
The “read more” and “read less” buttons should toggle betweenthe 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 maynot layout libraries such as Bootstrap, or css properties such asfloat, 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 astarter HTML file, “exhibit.html”, containing all the text. Pleasemaintain 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 byprinting out the mockup, and sketching in what belongs to theWeb elements “header”, “main”, etc.
Not everyone has to assignthe 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 towhite when you’re done).
When you’re done, zip up the “source” directory and submit it
using Canvas. You and your partner should submit identical files.
There is no need to submit the “assets” directory to us, we have it!