web1: HTML, CSS & javascript

feedback

intro

  • 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

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