ECS 189H Assignment 2
Please submit by 10pm, Friday April 14, as a zip file, on Canvas.
This lab is an exercise in fluid layout, celebrating Spring.
You are required to implement
Danielle's design, in as fluid and responsive a way as
you can.
That means:
- Avoid giving most elements, especially the
page, the header and footer, and the main region,
fixed widths; the entire header,
for instance, should be visible in any (reasonably large) window,
and it should take up the full width, and the
graphical elements should be at its
left and right ends
regardless of the width of the window.
- All six vegetable pictures should always appear on the Web page (although
maybe you have to scroll down to see them). Avoid making the user
scroll right (or change the window width!) to see some of them.
- None of the buttons have to do anything!
- Implement both the mobile phone design and the laptop/tablet design,
and make sure the mobile desgin shows up on phones using the emulator
in Chrome developer tools.
- On phones, have all the
photos in a single column. On a laptop, depending on the width of the
window, use a different number of photos per row.
- There are some old-fashioned ways of implementing responsive
Web pages, that will come up in Web searches,
including using float and inline,
and libraries like Bootstrap, but
you are required to do this implementation using Flexbox.
- Stick as close to the design as you can,
while making it responsive.
It's surprisingly hard!
Watch this space for more
instructions and tips that should help you work through
this implementation.
- Download Danielle's assets.zip, which
contains all the graphics she drew for the page as well as the photos.
Make the directory "Assets" a sibling directory of the
the one that contains the yolo.html and yolo.css files you are working
on, so that, for instance, you would put the
carrot image into yolo.html using a relative path that looks like this:
<img src="../Assets/carrot.jpg"> . This will make it
easier to grade!
- You'll need a cursive-like font for the motto (you only live once -
plant vegetables). Check out Getting Started with Google Fonts.
Please submit a zip file on Canvas, that contains:
-
Your html file.
- Your css file.
No need to submit the assets (all Danielle's graphics and the
photos), we have them.
