Web Programming
Tutorial 2
To begin this tutorial, please download [Link] from the course website.
When you finish, zip all your deliveries to submit to this tutorial’s submission box. The
zip file’s name should follow this format: tclass_sid.zip where tclass is your tutorial
class name (e.g. clc01, clc02, etc.) and sid is your student’s ID (e.g. 2101040015).
Activity 1 – Japan Flag
(10 mins) Use HTML and CSS to create the following Japan flag on a page with dark
background:
Try doing this exercise with and without Flexbox.
Delivery: japan_flag folder with possible HTML and CSS files.
Activity 2
(20 mins) Use the given card-numbers folder as a starter pack. Use your
understanding of CSS Flexbox to create the following bordered box which contains flash
cards:
The card container is represented using a div and has 4 images, each
representing a number. This card should be 500px wide and 200px tall with a
solid #698733 border of 0.5em width and a border-radius of 1em.
The four images in the card should take up 70% of the height of the card, be
centered vertically within, and space-evenly horizontally.
(Challenge) Once you've finished this exercise to get the expected output, how
can you modify your CSS to get the numbers in the order "3 2 1 0"? How about
"2 3 1 0"? For the second ordering, try to use the order property.
Delivery: card-numbers folder with added [Link]
Activity 3
Use the given responsive-web-page folder as a starter pack. Create a responsive web
page using flex box that includes a header, navigation bar, main content area, sidebar,
and footer. The layout should adjust for different screen sizes using media queries.
Header: spans the full width of the page.
Navigation bar: below the header, with horizontal navigation links.
Main content area: includes a section for articles (content) and a sidebar for
additional content.
Footer: spans the full width of the page.
Responsive design:
o On large screens (desktops), the sidebar should be next to the main
content.
o On small screens (mobiles), the sidebar should be below the main
content.
➔ Delivery: responsive-web-page folder with added [Link] file.
Activity 4 – Simple DOM interaction
In this activity, you’ll add some simple interactivity to the given [Link]. The
script [Link] has been linked in this page. In [Link], write JS code to
select all images on the page ([Link]) and set their src attribute into
[Link].
Delivery: modified [Link]
Activity 5 – Capitalize all paragraphs
Write JavaScript code in [Link] to capitalize text on all paragraphs of the
webpage [Link]. DOM objects have a textContent property that you can
access to get the text in the element, or set to change the text.
Delivery: modified [Link]
Activity 6 – Quadratic Equation Solver
Inside the equations directory there are [Link] and [Link], which is
already embedded into [Link]. Your job is to modify [Link] to add
functionality to [Link] (and leave [Link] unchanged) so that a user can
solve quadratic equations on it.
Delivery: modified [Link]
