Module 1: Workspace
This is an Advanced HTML & CSS portfolio. It showcases already established HMTL & CSS skills and sets up a frame work to showcase our work over the semester.
Helpful Resources:
Module 2: Flexible Cases
In this assignment, we practice using flexboxes and columns to create flexible layouts. We do this through a series of case use examples.
Helpful Resources:
Go to project >>>>
Module 3: Grids, RWD, and Printing
We further experiment with flexible layouts, this time with CSS Grids and media queries. I even play with CSS variables.
Helpful Resources:
Go to project >>>>
Module 4: Adding Accessibility
I have gone through my entire site and made changes so it's accessible. The goal is to make the site friendly for users with vision, auditory, mobility, or cognitive impairments. Images have alt text, colors have good contrast, aria has been added where necessary, and various other structure changes have been made so the pages work well with accessibility tools. If you hit tab on any page and go to the top, you will find a “Skip to Content link” which bypasses the navigation(s) and goes right to the main content.
Helpful Resources:
Module 5: Introducing SASS
For this assignment we followed Ninja's SASS Tutorial. We learn about variables, mixins, modules, etc. Being able to write variable code made it eaiser to develop a flexible page. After completing the tutorial, I then went through and updated the page for current web design standards.
Helpful Resources:
Go to project >>>>
Module 6: Advanced CSS and SVGs
We experiment with advanced CSS techniques this week. We go over alternate ways to make images responsive, how to work with SVGs, working with dark mode designs, etc.
Helpful Resources:
Go to project >>>>
Module 7: Behaviour and Motion
With this week's lesson, we learn how to use animation and JavaScript to add motion and interactivity to a page. This functionality can be created using CSS animations, transformations, jQuery, and plain JavaScript. The idea with this assignment is to balance design with function.
Helpful Resources:
Go to project >>>>
Module 8: Pattern Library
This is a very small example of what a pattern library can look like for the ButlerCC Web Developer Tutorials and Resources. The idea behind this assignment is to learn how to audit a pre-existing site and build documentation that can be used by other developers.
Helpful Resources:
Go to project >>>>
Module 9: Bootstrap
The goal of this exercise is to practice working with the Bootstrap pattern library. The assignment will show how easily you can create page layouts using Bootstrap's components and classes.
Helpful Resources:
Go to project >>>>
Module 10: Git and GitHub
In this exercise we practice working with Git. We learn some basic commands and upload our work to GitHub.
Helpful Resources:
Go to project >>>>
