KFox Portfolio - HTML & CSS

Projects

Below is a list of assignments from this semester. Each one focuses on a different aspect of HTML and/or CSS.

M1: Creating a home page

For the first assignment, I built this site to host my projects along with some information about myself as a student and web developer.

M1: Layout 1, Gallery

Here is a placeholder page created as part of our M1 assignment.

M2: Flexbox and Columns

This alternate version of my home page has slightly different content styled with several different flexox and column rules.

M3: Grids and Responsive Design

This page has images and info about trees changing colors in the fall. The real purpose of this page is to utilize a grid-based layout that rearranges based on viewport size.

M4: Accessibility and Inclusive Design

For this project, I evaluated my home page and all previous projects for accessible compatibility. I did this using NVDA Screen Reader as well as WAVE (Web Accessibility Evaluation Tool). I updated some tag IDs to make my site more screen-reader friendly, and I added missing alt-text to a couple photos. I also made sure my colors and contrast are optimal and easy to view. Finally, I added skip links above the nav bar on each page. These links are invisible to many users, but they allow screen readers to more easily access the main content of each page.

M5: CSS Pre-Processors

In this module we used a CSS Preprocessor called Prepos to write style rules with special types of coding and element nesting in scss files. The preprocessor takes those files and compiles them into standard CSS, before exporting them into a finished css file.

M6: Sass and Advanced CSS

For this module we continued working with Preprocessors, CSS, and responsive design. I created a blog/TIL page that can be filled with articles and responsive picture-elements.

M7: CSS Architectures and Pattern Library

In this module, we refactored our CSS with Modular BEM organization, and created a pattern library which updates and catalogues the UI elements of Butler's "Web Developer Tutorials and Resources" site.

M8: Behavior and Interactivity

In this module, we added new Javascript along with some updated CSS to add more interactive motion elements to our pages. This includes the homescreen menu collapsing for mobile devices, as well as aditional Javascript tools on the M8 pages.

M9: Scalable Vector Graphics

For this module we learned how to create and incorporate SVG's into our site. They are a handy tool to create crisp, rescalable, and even animatable images without using too much bandwidth.

M14: Bootstrap Site

We created a simple web page for this module using the Bootstrap Framework. It comes with tons of prewritten CSS, Javascript, and HTML components that are highly customizable.

M15-16: Final Site

For these modules we created a whole new website to implement our new skills from the ground up!