resources: general
making a change just to see. Change in GitHub
exercises & projects
CMS unit
Check out this video tutorial to install Wordpress
presentations
presentations are short and not evaluated, but an essential formative exercise. You can present
- Capyskill & level
- Figma (just a quick glance)
- objective
- audience
- animations
- design including
- typography
- colour scheme
- challenges I faced
- what I learned
- what I would do with more time & money
centering stuff
much confusion
css animation resources
Kevin Powell & Kyle are 2 popular YouTubers who focus on CSS & javascript content & will help you fall deeply, madly in love with CSS, or at least appreciate it a bit more.
- top 10 CSS tips
- CSS grid playlist from Coding2Go (not bad but uses flex for stuff that could be accomplished using grid)
- Kyle: CSS animations in 15 minutes
- Kyle: 72-video CSS playlist
- Kyle: CSS course
- Kevin Powell: CSS animation tips
- Kevin Powell: 3d CSS
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 animation notes
here are some random notes / reminders
- design svg in Illustrator then open in VSC using "open with > text editor"
- locate the path or elements you want to animate
- move the embedded styles to an external css stylesheet
- add the animation styles to your css
- use transitions or @keyframe animations as desired
here are some helplful links
3d transform
let's start with a 3d transform cube demo
And a cube demo example here
You can check out my 3d-transform demo here
tips & reminders
don't forget for 3d-transform to work you need:
- set camera /
perspective: 1000px; - set
perspective-origin: ranslate(-50%, -50%) rotateX(90deg); - set
tranform-style: preserve-3d; - add
tranform: translateZ()
Capyskill of the day
HOS.1.1 Manage tasks & deadlines
project 1: animation SPA
Using some of the animation techniques we learned in class, create a single page app that shares your love of an area, subject, topic or skill in which you have expert knowledge / experience
deliverables:
due: Feb 28 (presentations)
- ex 1.6 figma design file with
- project description
- research / inspiration / moodboard
- including 3 sites with animations that you like
- typography (2 fonts?)
- colour scheme (3 colours?)
- wireframes / layouts
- html structure
- notes on animations
- css??
- your site should follow web best practices
- mobile first
- responsive using css grid and
- @media queries
- minmax
- clamp
- well structured html
- semantic html
project 1 exercises
create animation demos of the following
- ex 1.1 transitions Feb 5/6
- ex 1.2 2d transforms Feb 5/6
- ex 1.3 3d transforms Feb 12/13
- ex 1.4 @keyframe animation Feb 12/13
- ex 1.5 svg animation (bonus if Capy is involved) Feb 19/20
plus 1.6, put it all together in a gallery or mini site Feb 21
Capyskill of the day
NGE.1.1 Create a project plan.
animation demo
this card animation combines a number of animation techniques in something that is easily adaptable to a number of use cases. Here is cards.css
- css transitions
- css 2d transforms
plus it uses a number of css techniques espcially regarding pseudo elements and selctors
simplified single card animation
Be sure to checkout MDN's CSS Animations CSS Transitions & CSS Transform documents.
Plus, check out typescale
See my Figma design file
covid animation challenges
Feel free to work through these video tutorials & challenges
Capyskill of the day
VA.1.1 Generate ideas for a design project
- mission control / virtual desktops
- ctrl + left / right arrow to move back and forth
- check GitHub for .vscode
- remove password from Github
- change ssh password in CyberPanel
- page layout
- mobile first
- Figma
class notes on GitHub
Check out the Web2 repository with notes on using GitHub, CSS grid, animation techniques
proposed units & projects
What do you think?
- web animation units
- series of animation exercises
- a gallery / collection of animations
- animated SPA (single page app) project
- Capython collaborative project
- CMS (content management system) project using Wordpress
- collaboration with 2nd-year students in web://4
- personal project (LIA)
setting up GitHub
- in your root folder create a .gitignore file
- check if git is installed
- in VSC terminal type: git -v
- not found? On Windows: install git by downloading and running the "Click to download" link
- sign into GitHub online
- connect VSC to GitHub
- VSC click the settings avatar > Backup & Sync settings
- in version control you will
- stage changes
- add a commit message
- commit
- push or sync to upload files
- you may need to add your GitHub user name & email. In VSC terminal paste & run
- git config –global user.email “you@edu.vaniercollege.qc.ca”
- git config –global user.name “Your Name”
- you may need to click through and authorize a bunch of stuff
