web1: HTML, CSS & javascript



  • content
    • theme? photo ideas? creativity?
  • features
    • what can the user do? hover? click? close? modals?
  • technical
    • html / css / js + anything in particular
  • personal reflections
    • add anything you want

feedback notes

  • what did your group like about your project

keep the momentum

Here are some good resources to keep up your momentum

creative coding & generative design

Check out my demo. Click on the circle (ellipse) to drop some acid (jazz)

Do it yourself!! p5*js resources

modals & javascript

css for creating a modal, its overlay & a close button

part 4: getAttribute(), parentElement, innerHTML

see the in-class demo

walkabout demo

exercise 4.1: js demos

Create a web page that features elements that will be dynamically altered using javascript. Your page should include the following:

  • CSS stylesheet linked to your HTML page
  • a javascript file linked to your HTML page
  • 3 elements on your page with different properties triggered by a javascript event listener applied to each
  • basic description for each element explaining what will happen when the user interacts with that element
  • link back to your main homepage as well as a hyperlink to this project on your homepage titled '4.1 js demos'
  • HTML, CSS and JS files uploaded and linked to the 2022.micromediaweb.com server in student#/web1/

due: November 15th at the end of class

project 4: walkabout gallery

Create a web gallery with photos you have taken during the walkabout or your own urban ambulations. Your gallery should include the following:

  • gallery images with captions
  • photos must be taken by you and edited in Photoshop
  • clickable images that load larger views
  • css animation techniques
  • javascript for user interaction
  • a title for your gallery i.e. not "gallery"
  • your name
  • link back to your web1 homepage
  • header, footer, nav
  • css grid for layout
  • media queries for a mobile-first, responsive site

due: November 29th at the middle of class

walkabout photos

Flickr album


Javascript is for user interaction. Remember that HTML is for content. And CSS is for layout and design.

part 1: console.log(), selectors & variables check out part 1 video

part 2: addEventListener, conditional / if statements check out part 2 video

part 3: querySelectorAll, arrays & loops check out part 3.1 video and then part 3.2 video

part 4: getAttribute(), parentElement, innerHTML and finally the part 4 video

in-class demo

gallery demo

animation exercises 3.1 - 3.4

create an animation page with the following animations: (10 marks each)

  • a css3 transition
  • a 2d transform
  • a 3d transform
  • a keyframe animation

due: Oct. 25th at the end of class

CSS Animation

animation page

Animation on a web page can have many purposes

  • delight and entertain
  • create visual interest
  • help focus attention
  • enhance user interaction
  • improve the user experience

In this animation unit we will focus on the 4 types of animation that are considered best practices.

  • CSS3 transitions
  • 2d transform
  • 3d transform
  • keyframe animations

Check out these animation demos

keyframe animation

Checkout the keyframe animation demo

parts of a web page

In groups of 2 or 3, open some web pages and identify various elements. You can use this list to help you:

  • header
  • footer
  • navigation
  • heading
  • subheading
  • sidebar
  • aside
  • figure
  • caption
  • table
  • pull quote
  • leader, lead
  • social media links
  • tab bar, nav bar

Create a web page for Web 1: HTML, CSS and Javascript which will link to all your exercises and projects.

It should include the following:

  • linked at student####/web1/ (check link from student list below)
  • your name
  • 2 or 3 things about yourself
  • 2 or 3 links to a site you think others in the class would like, but may not be aware of

connect via ftp...

due: August 30

nothing more to see here... go away