Skip to content

Latest commit

 

History

History
30 lines (24 loc) · 1.74 KB

README.md

File metadata and controls

30 lines (24 loc) · 1.74 KB

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