Homework 2

Due: Thursday April 16, 11pm.

Submission instructions: On Crowdgrader, please submit to this assignment. You need to login with your @ucsc.edu id.

To submit:

• In the py4web dashboard, go to the app you created.
• Under the sections "Files in <your app>", there is a button "Download App". Please be sure to select the correct app in which you did the homework!
• Click on the button; it will download a .zip folder for you.
• You should then upload the .zip folder to this assignment.

Homework Assignment

Your goal is to make a web page that looks like this:

(click on the page to view at full size). To do this, you must follow the following rules (you cannot just work any way you want).

Homework Setup

Starter Code

We provide you starter code for the page. These resources require @ucsc.edu login to view.

• A hw_html_assigned.zip folder. Please download this zip file in the apps/ folder of py4web, and uncompress it. This is the application that you have to complete.
• An images.zip folder, containing all the images needed to create the page.
• An alltext.txt file, provided for your convenience, containg all the raw text of the page, so that you don't have to spend time copying text.

Instructions

First, unzip the hw_html_assigned.zip folder provided above in the apps folder of py4web. The py4web app is ready to be used, except for two things:

• You need to edit templates/index.html and add your work below the comment. Do not erase the [[extend 'layout.hml']] or the Bulma style file will not be loaded.
• You can put the images under the static/ directory, in the appropriate place.

To do the homework, you must use Bulma css. You need to build a page that consists of three <section class="section">:

1. For the top section, use (somewhere, you need to figure out where) <div class="level"> to get things aligned; see the levels documentation.
2. For the middle section, use <div class="column"> to build the colums; see the columns documentation.
3. For the bottom section, use tiles via <div class="tile">; see the tiles documentation.

You must do as described above; you should not use for instance tiles for the middle section.

In building the page, do not use any additional css; you can do the page relying entirely on Bulma with no additional css style file added or style=... commands. In building the page, here is what I used, in no particular order:

• I used the container, level, box, level, column, title, subtitle, tile classes for div, along with their modifiers.
• All colors I used are obtained via the is-primary, is-info, etc, modifiers of Bulma.
• I used the modifiers is-italic, has-text-weight-bold, has-text-white, is-pulled-right, notification, among others.
• I used the tags:
  • section
  • div
  • span
  • p
  • img
• No other tag except the above is necessary.
• The images should be linked from the appropriate place in the static files.
• I used a width="300" on the UCSC logo to ensure the proper size.

The resulting page, if you use Bulma, will be responsive, that is, if you squish it to a smaller size, it should adapt, with the columns sliding one under the other appropriately if the page becomes small.