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.

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