KFox HTML CSS

ID224 Advanced HTML & CSS Class

This site is a space to host my projects and assignments from this class. To see my work, use the "projects" button in the menu above, or you can

click this link to see my projects

About Me

My name is Kelbe Fox and I am a student in the Web Development program at Butler Community College. I have developed my skills in several areas since beginning this degree, including HTML, CSS, Javascript, and even PHP.

I used my existing HTML and CSS skills to make this site functional and responsive. For example, if you are using a smartphone, my CSS and Javascript automatically adjusts the page to display properly on a smaller screen. If you're on a desktop or laptop, you can resize the window to see these changes happen.

This home page itself has also been updated as I've gained new skills throughout the semester. The nav bar now becomes a menu-buttton at small screen sizes. This way, the menu can be toggled on or off to minimize screen real-estate on small devices.

Favorite Quote:

“The cat could very well be man’s best friend but would never stoop to admitting it.” —Doug Larson

Resources

Here are a few links to some of my favorite resources for web development.

W3 Schools HTML Elements: The W3 Schools website has an absolute ton of useful knowledge. One of the base building blocks they offer is a list of HTML Elements and their uses.
W3 Schools CSS Properties: Another highly valuable resource from the W3 Schools is their list of CSS properties and their uses.
Css Selectors Cheat Sheet: This list of different CSS Selectors is actually hosted by Butler Community College!
Color Palatte Picker: Paletton.com has an extremely customizable color picker that helps users create complimentary or contrasting color schemes.
Google Fonts: Google has a huge database of free fonts that can be used to personalize the look of any site.
CSS Grid Generator: Though I designed my Module-3 Grid manually, this tool will be extremely useful in the future. It provides an easy interface that lets you visually design a grid layout, and then it generates the code for you!
W3 Schools Responsive Web Design: Yet another home-run from W3 Schools, their unit on responsive web design is informative yet easy to follow!
WAVE Web Accessibility Evaluation Tool: This handy site lets you copy/paste any URL to automatically evaluate that web page for accessible compatibility. It even highlights specific errors or missing features, and shows which part of the code needs updating.
Axe browser extension: This extension turns your browser into a tool to evaulate web pages for accessible compatibility as well!
Picture Elements: W3 schools have a simple yet solid explanation of how to use picture-elements in responsive web design. These elements allow varying image files (usually of varying sizes) to be loaded based on the viewport size.
Prepros Sass Compiler: Sass Compilers work along with code editors to take CSS to the next level. They allow designers to organize nested style rules, and other tools like variables and even calculations in their CSS designs. While there are many Sass Compilers available, Prepros has a convenient free version that is easy to use!
Explanation of Modular CSS: This article has easy-to-understand explanations of modular CSS, as well as multiple types of modular frameworks including OOCSS, BEM, and SMACSS.
Anatomy of a Pattern in a Pattern Library: This article explains what to include in a pattern library in simple, piece-by-piece instructions.
A11Y Style Guide: This guide is a great example of a simple, clean, and replicatable pattern-library.
CSS Interactive Cards: This tutorial shows how to use just a few CSS rules to add responsive motion when hovering over cards or images.
Javascript Scroll-to-Top-Button: This webpage shows multiple methods to add a scroll-to-top button at the bottom of any page. A basic version can be donw with an HTML link, but the tutorial also explains how to make a more sophisticated version with Javascript and CSS.
Responsive Mobile Navigation Bar: This page is a working demo of a simple nav bar that can be smoothly transitioned onscreen or offscreen on mobile devices. The page links to a quick youtube tutorial showing the necessary Javascript and CSS in detail.
Inkscape: a free software for making vector images and SVG's SVG-edit: a free website for creating and editing SVG images: Both of these resources can make SVG's. Inkscape is a downloadable software with a few more bells and whistles, and SVG-edit is an online svg maker for quick and easy editing right inside your browser.
SVG OMG: This online tool can optimize SVG files to help to fix/remove inefficient and redundant code. Simply upload your SVG file, play around with various settings, and view the results in live preview.