Skip to content

AntonV0/website-design-system

Repository files navigation

Website Design System

Challenge Project from Codecademy's Full Stack Engineer Career Path

By Anton Vlasenko (AntonV0)

Project Outline

The goal of this challenge project is to create a basic design system that can be used for future website designing projects.

I chose to focus on 3 visual design categories:

  • Website colour schemes (5 designs with hexadecimal reference)
  • Common font combinations (10 examples with Google Font hyperlinks)
  • Button styles (8 designs with HTML and CSS code provided)

For each category, I chose multiple examples to display some of my favourite styles and designs that I have found online. This project is intended to be used as a reference for future projects, so I have made the designs easy to copy and implement.

This is the largest Codecademy project I have completed so far. It was a great lerning experience that vastly broadened by understanding of HTML and CSS fundamentals.

Please note that there was no starter code for this project - everything is hand coded.

What I Learned

HTML

  • Designing a webpage from scratch and structuring it correctly with HTML semantic elements, classes, and ids.
  • Adding many fonts from Google Fonts API, with hyperlinks to them provided.
  • Using character entity references to display code that can be copied and pasted into any code editor with correct indentation.

CSS

  • Creating custom RGBA and hexadecimal colours and shadows
  • Using differnt types of gradients for the header background and some button styles
  • Using flex and inline-block displays
  • Various CSS animations for buttons using transitions, transformations and keyframes
  • Implementing :hover and :active pseudo-classes
  • Using :before and :after pseudo-elements to further style buttons