ABCs of CSS

Using keypress navigation, explore 26 layouts containing 26 code snippets, font-families and color palettes to help build your portfolio and boost your creativity.

Tech Stack

  • ReactJs
  • Javascript
  • CSS/SCSS
  • Styled Components

This application was originally built using vanilla Javascript, but later refactored to use React hooks and styled components.

Styled components make it easy for us to pass props into our CSS so that we can render styles based on the users route parameters.

Accomplishments

I spent a good amount of time making all of the individual CSS examples and creating eye-catching color combinations that would excite the user.

Recently I created a copy-to-clipboard component, giving the user the added ability to copy the provided font-family and color-palette directly to their clipboard. By enabling this feature, we have greatly reduced the efforts required by the user, thus enhancing the overall user experience.

Future Improvements

I still have quite a few features I would like to add to this application. Number one being a homepage that explains in detail the applications overall purpose.

My main goal however, is to set up a back-end that allows users to create an account to showcase their work and receive feedback from other developers. This is a feature that I will implement in the future as I expand my experience to working with back-end technologies like Mongo and Express.

Other Projects

Honda Canada

This is an e-commerce (like) application that uses local storage and the context API to maintain the users cart items, cart total and currency preference.

View Project

Covid-19

This application receives data from multple API endpoints, allowing users to stay up-to-date with the latest stats and news stories regaring the Covid-19 virus.

View Project

© 2020. Made withloveand frustration by Cassie Rossall.