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