Webtech 2


project 3: photo sharing app frontend

See Hugo's project description.

Our assignment will be to create a web application, that is mobile-first and responsive using HTML, CSS and javascript, with the following components.

Check out Julien's Animation

Julien's animation uses javascript to trigger an animation by adding and removing classes changing colors or opacity.

Samantha's petition animation

Check out her animation here. This is how she does it:

  • reads the number of signees using mysqli_num_rows($results);
  • adds this number to the page using a php echo
  • reads the number off the page using jQuery .text();
  • calculates her petition progress and sets the width of the progress element using jQuery .css( )
  • the progress bar animates using a 3s transition on its width
Here's the relevent php code:
$haveSigned = mysqli_num_rows($results);
<span class="goal-number" id="haveSigned"><?php echo($haveSigned);?></span>
You can see the .css and .js by using view source.

Vernissage 2017

Wednesday, April 5th, 4-8pm

at My Private Loft, 9 Ste-Catherine East, suite 101

Vernissage details & student portfolios

Unit 2: Web Animation

Project 2: Animation

Create an animation using the techniques you have learned in the animation unit.

While you can do anything you desire, here are some ideas:

  • improve the interface for your petition, animating the display of your results, the form & the buttons / responses
  • animated web gallery of your own photos / photoshop designs
  • animated infographic sharing your own knowledge / expertise or experience
  • animate anything you want

Before you start coding, please do the following:

  • define the goal or raison d'ĂȘtre for your animation
  • do some sketching / planning
  • share your ideas & sketches / plans with a classmate and get some feedback
  • try to tell a story, create a mood, elicit a reaction with your work
  • use the skills & techniques we have learned in class, or check with me before using other techniques

due: April 19 / 21st ??

project 2 rubric

Petition Ideas & Links

ajax form with fade in

2.6 Animating with JS

Use js to trigger animations.

You can use either jQuery or native javascript.

due: end of today's class?

js animations

Keyframe Animation: Ex. 2.5

Create a keyframe animation.

This can be anything, something simple like mine, or a more complicated scene.

Add to or link from your /webtech homepage.

due: end of week 8 i.e. March 8 / March 10

animation rubric

Animation: keyframes (week 6)

Card image cap

Use keyframe animations to manipulate the timeline

Check out the video & code:


Animation: Ex. 2.4

Read & comment on some animation articles.

  • Respond to the Nick Babich article. (today in class)
  • Read another article on animation, possibly a link from Babich's article, or something else you find on my Twitter feed or through an online search. (complete for week 6, i.e. March 1 / Feb 24)
  • Read & comment & link to an article from one of your classmates. (Due end of week 7)

Add to or link from your /webtech homepage.

due: end of week 7 i.e. March 8 / March 3

Animation: Ex. 2.1, 2.2, 2.3

Card image cap

Create your own personal, original examples of the following animations.

Link to your animation page(s) from your /webtech homepage.

due: end of week 6 i.e. Feb 24 / March 1

Animation: intro (week 5)

Card image cap

You will learn a number of animation techniques in this unit including:

Added links to above!!

let's animate

week 5 lecture

Read the following article for next week.

Popular Web Animation Techniques by Nick Babich

Read Article

Unit 1: Creating a Website with a Framework (Bootstrap 4)

exercise 1.2: customize your site

    Apply what you have learned in weeks 1-4 to customize your site.
  • apply some built-in classes such as .text-center .lead etc
  • add some components such as a navbar, modal, card
  • customize your type with Google Fonts
  • customize the CSS by adding your own .css file

due: end of week 5

for week 4: customizing bootstrap

No video this week. Just a grab bag of thoughts, techniques, resources and some code snippets.

A shorter list of my most common classes

  • .img-fluid (images resize proportionately to fit container. formerly .img-responsive
  • .text-center, .text-left, .text-right
  • .text-justify
  • .justify-content-center, .justify-content-left, .justify-content-right
  • .lead (creates a lead / first paragraph style. See "No video this week..." )
  • .bg-faded / .bg-inverse (for faded or dark backgrounds on almost anything)
  • .btn (to create a button out of almost anything)
  • .btn-* / .text-* where * = primary, info, success, warning or danger

  • And some handy layout and component classes
  • .row
  • .col-sm-6 (where sm, md, lg + 1-12)
  • .nav & .navbar (lots of options)
  • .card (lots of options)
  • .modal
  • .jumbotron

project 1: webtech homepage

You design, develop and publish a home page, using HTML5, CSS3 & javascript, which links to all your projects and exercises.

    Your homepage may include
  • a front-end framework (such as Bootstrap)
  • a javascript library (such as jQuery)

due: this will be an ongoing assignment

exercise 1.1: site setup

Set up your webtech site / homepage. It should include the following:

  • linked at student####/webtech/ (check link from student list)
  • your name
  • some branding / slogan / factoid
  • nav to link to assignments
  • link to some work from last semester
  • at least one image
  • link to social media
  • use Bootstrap or Foundation or similar to make your site mobile first and responsive
  • due: end of week 4