Simon Callsen's repositories
callsen.ca
My personal website.
simon-personal-portfolio-site
My personal portfolio website
dog-rescue-pattern-library
A term-long project redesigning a dog rescue website focusing on making a pattern library.
video-background
Create a video background for the header of a website.
css-concatenation
Learn how to combine many CSS files together into a single CSS file for better performance.
basic-jekyll-site
Write the code necessary to make a very basic Jekyll powered website with shared header & navigation.
portfolio-microdata
Look at writing the code necessary for describing portfolio piece using Microdata and Schema.org.
robot-parts-co
A lesson in using honest SEO techniques and microdata to optimize a website.
student-slideshow
Student Work Slideshow for ACCE displays
javascript-less-carousel
Learn to implement a functional and reusable carousel without Javascript.
designing-form-errors
Write up code for accessible, well designed form error messages with a little Javascript to help.
svg-icon-sets
Use SVG icons sets to create a small layout with different icon.
interactive-svg
Make an embedded SVG graphic with animations & transitions.
animated-clock
Use CSS keyframe animations to make a clock face with rotating hands.
interactive-polaroids
Create interative polaroid images with CSS transitions and transforms.
responsive-banner
Practice using position, absolute, and relative in a responsive setting by recreating a responsive hero banner.
confectionery-website
Create a single-page website for a confectionery store—showing what you learned this term.
this-site-aint-no-sloth
Create a simple responsive website that conforms to our performance budget.
accessibility-fixer-upper
Fix and debug all the accessibility problems found in this website.
fastness-fixer
Fix a bunch of performance problems and pass the performance budget.
retina-images
A quick look at exporting retina ready images using the compressive JPG technique.
background-images
Use multiple images as background to create more complex design solutions.
leafy-decorations
Use background images to create design elements on a masthead & banner.
registration-form
Create a registration form using HTML’s form & input elements with functionality supplied by Formspree.
events-calendar
Use HTML table elements to create a calendar of events.
contact-form
Create a functional website contact form using Formspree as the message sender.
data-table
Create a chart of data using HTML table elements.
icon-cards
Combine together grids, modular type & CSS components to make a series of link cards with icons.
icon-navigation
Combine together grids, modular type & CSS components to make a responsive navigation with icons.
list-groups
A small, super simple exercise to get practice using list groups.