Web 2: Content Management & Animation

582-203-VA

course resources

GitHub and version / source control

Check out this video to create a GitHub repository for your 582futura.com websites.

LIA: SPA ( learning integrated assessment: single page app )

A single page app is often a multipage website that is compiled all to one page where links, instead of loading other pages, scroll down to that section of the site.

Here are a few examples of SPAs.

Here is an article about SPAs

There are also SPAs that act more like applications on your phone:

  • GitHub
  • Slack
  • Gmail, Google Drive, Teams online, One Drive and many many more

characteristics of a SPA

  • no full page reloads
  • scroll to other sections / pages
  • animated to enhance the user experience
    • navigation
    • shopping / reservation carts
    • parallax
    • galleries
    • content, especially infographics
    • motion graphic elements as well
  • dynamic content updates i.e. modals, data updates, messages
  • endless scroll
  • lazy loading

Check out this article on SPAs from Bloom Reach

LIA: SPA project

Create a SPA on a topic of your choice. It should have the following characteristics:

  • all content in a single page
  • introduction / description
  • incorporates a gallery-style section ( photo gallery / products / services / collection etc )
  • dynamic content on user interaction ( modal, nav, check out, dynamic info like weather )
  • lazy loading & or "endless" scrolling i.e. intersection observer
  • smooth scrolling

deliverables

  • Figma with description, moodboard, mockup
  • Capyskills entry
  • SPA itself

evaluation

  • content
  • ui/ux
  • technical features / coding
  • professionalism

due: April 27th in-class presentation

2 animation project

Create a mini-site that uses animation and javascript to communicate your creative ideas or entertain the user.

I suggest doing one of the following:

  • an animated nav (hamburger, slide out, info boxes etc)
  • card animations for info or promotion
  • a booking or purchasing shopping cart
  • animate your gallery (or another gallery) adding the ability to scroll through your large-sized photos

animation: You must use a combination of 2 or more animation techniques:

  • transitions
  • 2d transform
  • 3d transform
  • @keyframes
  • SVG animations

interaction: You must also add user interaction with javascript based on at least one of the following:

  • loading
  • scrolling
  • click events
  • drag & drop

standards:

  • plan your project with Figma
  • mobile first
  • responsive
  • semantic HTML
  • effective use of animation techniques
  • good use of javascript
  • clean file structure with
    • project folder
    • index.html page
    • css/ and js/ folders
    • images/ folder

evaluation:

  • content
  • UI/UX
  • technical:
    • HTML
    • CSS
  • professionalism: on time

due: TBD April 1/2

cards demo

coding cards from scratch using html & css

note the process, doing one step at a time, making sure each thing works

SVG waves animation

Since classes were cancelled, I took the time to make a new video tutorial for SVG and @keyframes animation

SVG @keyframe animation tutorial

But first... a couple of points

  • the importance of reading instructions / client briefs
  • space is money
  • time is money
  • organization and file management is time & money
  • also... deadlines

Will an employer, client keep you on if you don't pay attention to details, or waste time & money

week 3

checklist for gallery project

  • file management
    • file naming: a-z, 0-9, - _
    • file naming: NO capitals, spaces or special characters
    • web2/ folder
    • homepage in every folder is "index.html"
    • a folder for all projects i.e. "gallery24"
    • no files you created above your "public_html" folder
    • be sure to clean up both local & remote directories
  • well structured HTML ( inspect in browser )
  • semantic tags / elements
    • do not use "div"
    • use tags that describe the content, i.e. nav, main, section, article, figure & footer
    • do not use ul and li for your nav, just nav > a works
  • CSS
    • order matters, work top to bottom. @media queries at the bottom
    • use CSS Grid i.e. display: grid; for layout
    • do NOT use display: flex; . Yes the temptation is strong
  • javascript
    • best advice... put the work in, review, read resources, look at videos, practice daily
    • use the coding style taught, it follows best practices
    • use MDN and CSS Tricks for reference
    • do NOT use W3Schools their code sucks, always has
    • however, the explanatin on W3Schools can be easier, clearer than MDN. Okay to read & learn
    • stubborn? double-check with me today.

deadlines: all exercises should be finished for Monday. Gallery with working modal should also be finished.

we will add animation next week

coding review with the sandbox and javascript

  • Peter's Sandbox: data basics
  • data types and variables
    • number
    • string
    • boolean
    • array
    • function
    • object
  • arrays
  • loops
    • forEach()
    • for
    • while
    • map / filter
  • DOM model & selectors
  • built-in methods and eventListeners
  • functions
  • objects

animated gallery

project resources

Semantic HTML

Check out this video on semantic HTML, read the Tim Berners-Lee article, if you want to geek out, and look at the MDN info on semantic HTML below

semantic HTML
Check out the web:// playlist
  • well structured, semantic html
    • include <nav>, <header>, <section>, <article> and <footer> elements
    • avoid using <div>

    • Semantic Web was first coined in 2001 by none other than Tim Berners Lee, the inventor of the internet or world-wide web. Geek out with his article: The Semantic Web

    Or just check out this resource from the Mozilla Developer Network Semantic HTML

    web design principles

    major ideas or principles of web development

    • mobile first
    • responsive
    • semantic HTML
    • accessible
    • design by grid
    • plus some other ideas
      • separation of concerns
        • HTML is for content
        • CSS is for design
        • JS is for user interaction
      • performance by design
      • progressive enhancement
      • security by design
      • DRY ( don't repeat yourself )

    inspo

    a ( web ) design workflow / process

    Almost more important than learning how to design and develop websites is to establish a workflow or process for design-based projects

    • description: describe your project
    • research other similar sites for content, design and functionality
    • mood board, create a design document with layouts, fonts, colours and forms
    • wireframe your layouts
      • mobile first
      • responsive
      • progressive enhancements
    • define semantic HTML
    • define CSS styles
    • prototype

    here is what Gemini AI returned me when I put in the above info asking if there was anything I was missing:

    Web Design Process Workflow

    A structured approach to moving from abstract ideas to concrete technical plans.

    1. Phase 1: Discovery & Strategy

      Goal: Define the "Why" before drawing pixels.

      • Project Definition: Define the audience, primary goals, and success metrics.
      • Research & Inspiration: Conduct competitive analysis and collect visual references (UI patterns).
      • Content Strategy: Gather real headings and copy. Design should frame the content, not replace it.
    2. Phase 2: User Experience (UX) Structure

      Goal: Focus on flow and structure without visual distractions.

      • Information Architecture (IA): Create a site map to define how pages link together.
      • Wireframing: Sketch low-fidelity layouts. Create versions for both Mobile and Desktop viewports.
      • Accessibility Check (A11y): Define the logical reading order (DOM order) early on.
    3. Phase 3: User Interface (UI) Design

      Goal: Bring the visuals to life.

      • Style Guide: Define the color palette, typography scale, and component library.
      • High-Fidelity Mockups: Apply styles to wireframes in Figma.
      • Interactive Prototyping: Link frames to show hover states, transitions, and navigation flow.
    4. Phase 4: Technical Hand-off

      Goal: Prepare the design for development.

      • Semantic Mapping: Label Figma layers with HTML tags (e.g., <nav>, <section>).
      • CSS Architecture: Plan class naming conventions and define CSS variables for colors/fonts.
      • Interaction Specs: Document the logic (e.g., "Add class .is-active on click").
    avoid this big mistake when designing web sites

    exercise 1.1: file management

    clean up your files on your local drive ( SSD? ) and web server

    • remove all files that are not used on your website
    • remove duplicates
    • remove / resize all images that have not been properly resized and exported for the web
    • remove all duplicates
    • make sure your files follow the file naming conventions ( see Figma file )
    • anything else?

    We will be revisiting this around midterm and at the end of the semester

    Some of you may wish to delete everything you have online and reupload your local files once properly organized. Once you make sure you have a local copy of all your files, delete your fiels online. Do NOT delete your public_html folder, just everything in it. Delete any files above your public_html folder that you uploaded. Do NOT delete folders that are not yours i.e. .cache & logs. There may be others. Delete .vscode folders!!

    due: week 1

    ex 1.2 web2/ figma planning

    Create a figma file with the following:

    • your name
    • description of the page / site / project
    • some inspo
    • moodboard including typography, colours, mobile-first & responsive layouts
    • define semantic HTML
    • note any specific CSS styles needed

    due: week 1

    If you want to add some info on how you learn best, or how I might help you, you can add it here. Or you can MIO me or just ask to speak.

    ex 1.3 web2/ homepage

    Create a homepage for web2/ located in a web2/ folder in your home directory. Your homepage should have the following

    • web2/index.html file
    • web2/css folder and style.css file in that folder
    • semantic html including tags such as header, footer, nav, section, article, p, a
    • content:
      • title ( i.e. Bruce's Web 2 )
      • your name
      • external links to 582futura.com, your root home page, your web Figma files / project
      • navigation or links to your exercises and projects ( many options for this )
      • 3 or more examples of your work i.e. photos, illustrations, layouts etc

    due: week 2

    ex 1.4 photo creation, selection & exports

    Take & select 24 photos ( approximately ) for use in your animated gallery with modal.

    • take 100 or more photos from which you will select 12, using Lightroom
    • select 12 photos from those you took for Photo 1
    • export thumbnails
    • export large sized photos
    • these should be located in a folder such as web2/photo-gallery/images/. You can prepend/postpend file names i.e. thumbnail-dsc1012344.jpg or organize into subfolders ie web2/photo-gallery/thumbnails/

    you will show me your photo selection in Lightroom and your folders

    due: week 2

    ex 1.5 animated photo gallery with modal Figma planning

    Similar to your web2/ homepage planning, but with some interaction pseudo code:

    • your name
    • description of your photo gallery project
    • some inspo
    • moodboard including typography, colours, mobile-first & responsive layouts
    • define semantic HTML
    • note any specific CSS styles needed
    • write pseudo code ( ex. 1.6 )for user interaction when they click a thumbnail image

    due: week 1

    ex 1.7 Capyskills

    Create a Figma page / project to track your Capyskills progress

    • choose a Capyskills competency to work on
    • self evaluate your level according to the grid
    • create SMART goals to improve
    • provide evidence of your present level
    • share this with a mentor / teacher
    • once you feel you have achieved the next level, provide evidence
    • share again with a mentor / teacher
    • set a new goal

    due: week 2 and ongoing througout your career

    Bonus: add a note about your goals and aspirations. i.e. What are you hoping to learn / accomplish over the next few years. Focus on 582 Multimedia, but it can be other objectives as well.

    Where would you like to be in 5 years? In 10 years?