Pinned Repositories
accessibility-fixer-upper
Fix and debug all the accessibility problems found in this website.
animal-rescue-website
Re-design an animal rescue website by applying everything learned this term.
animated-clock
A lesson in using CSS keyframe animations to make a clock face with rotating hands.
background-images
Use multiple images as background to create more complex design solutions.
banner
Use a type system with a little bit of CSS to create a banner.
basic-accessibility
A quick look at some basic additions to a website to make it more accessible.
basic-jekyll-site
Write the code necessary to make a very basic Jekyll powered website with shared header & navigation.
but-em-buttons
An exercise making a banner with a button that transitions to hover & active states.
button-styles
A CSS code exercise looking at using multiple classes to create consistent styles.
call-to-action-banner
Use CSS position along with float to create a call to action banner.
mariescharfe's Repositories
mariescharfe/accessibility-fixer-upper
Fix and debug all the accessibility problems found in this website.
mariescharfe/animal-rescue-website
Re-design an animal rescue website by applying everything learned this term.
mariescharfe/animated-clock
A lesson in using CSS keyframe animations to make a clock face with rotating hands.
mariescharfe/basic-accessibility
A quick look at some basic additions to a website to make it more accessible.
mariescharfe/basic-jekyll-site
Write the code necessary to make a very basic Jekyll powered website with shared header & navigation.
mariescharfe/but-em-buttons
An exercise making a banner with a button that transitions to hover & active states.
mariescharfe/coming-soon-page
Create a business card website to act as the coming soon page for your portfolio.
mariescharfe/css-concatenation
Learn how to combine many CSS files together into a single CSS file for better performance.
mariescharfe/designing-form-errors
Write up code for accessible, well designed form error messages with a little Javascript to help.
mariescharfe/ecommerce-pattern-library
A term-long project redesigning an ecommerce website focusing on making a pattern library.
mariescharfe/fancy-hover-boxes
An exercise using transitions to create hover boxes that fade from black & white to colour.
mariescharfe/fastness-fixer
Fix a bunch of performance problems and pass the performance budget.
mariescharfe/frozen-not-in-time
Create an animated introduction banner about ice cream.
mariescharfe/geohub
A small pattern library to help demonstrate the Patternbot include system.
mariescharfe/interactive-polaroids
Create interative polaroid images with CSS transitions and transforms.
mariescharfe/interactive-svg
Make an embedded SVG graphic with animations & transitions.
mariescharfe/javascript-less-carousel
Learn to implement a functional and reusable carousel without Javascript.
mariescharfe/only-keyboards-allowed
Solve keyboard focus problems in this small accessibility-related exercise.
mariescharfe/patternbot
A GUI application for making style guides and pattern libraries.
mariescharfe/portfolio
The starter portfolio repository, basically empty, but with a few helper files.
mariescharfe/portfolio-microdata
Look at writing the code necessary for describing portfolio piece using Microdata and Schema.org.
mariescharfe/responsive-banner
Practice using position, absolute, and relative in a responsive setting by recreating a responsive hero banner.
mariescharfe/robot-parts-co
A lesson in using honest SEO techniques and microdata to optimize a website.
mariescharfe/svg-icon-sets
Use SVG icons sets to create a small layout with different icons.
mariescharfe/svg-line-drawing
An exercise to create a banner graphic while practicing animating SVG strokes using stroke-dashoffset.
mariescharfe/svg-smiley-face
Hand write SVG code to create an interactive smiley face.
mariescharfe/this-site-aint-no-sloth
Create a simple responsive website that conforms to our performance budget.
mariescharfe/using-css-variables
Learn how to use CSS variables to make your CSS more easily understood and more maintainable.
mariescharfe/using-svg-icons
Use Illustrator & Spritebot to generate some SVG icons and use them in a website.
mariescharfe/video-background
Create a video background for the header of a website.