https://github.com/mtapirina/mtapirina.github.io-website-style-guid

My Website Style Guide - Codecademy Challenge Project
https://github.com/mtapirina/mtapirina.github.io-website-style-guid

codecademy-challenges codecademy-pro style-guide

Last synced: about 1 month ago
JSON representation

My Website Style Guide - Codecademy Challenge Project

• Host: GitHub
• URL: https://github.com/mtapirina/mtapirina.github.io-website-style-guid
• Owner: mtapirina
• Created: 2022-11-11T09:17:04.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-18T19:06:27.000Z (about 1 year ago)
• Last Synced: 2023-10-18T20:24:49.650Z (about 1 year ago)
• Topics: codecademy-challenges, codecademy-pro, style-guide
• Language: CSS
• Homepage: https://mtapirina.github.io/mtapirina.github.io-website-style-guid/
• Size: 1.07 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Codecademy Challenge Project: 

# Build a Website Design System

__Prerequisites:__

_To complete this project, you should have completed the Codecademy lessons covering the CSS box model, 

display and positioning, colors, and typography. You can use more advanced CSS layout concepts 

like flexbox, CSS grid, or responsive design, but they wonʼt be required._

__Project Requirements:__

In this project, youʼll build a style guide/design system for your website. Developers and

designers use design systems in order to organize the look and feel of a website or web application. 

Design systems help to document the visual vocabulary and reusable components of a large website.

As your websites grow larger and more complex, having a consistent set of styles will help them stay 

cohesive and enjoyable for users! It also helps as you start working with other developers, as you 

can have a consistent reference for how your website should be built.

Your style guide/design system will include at least a section on colors, fonts, and specific text

styles, but it can be extended to as many other areas as youʼd like. 

## My Website Style Guide.

This is an example of how this style can be used to create a website page - https://tapirina.com

![style-test](https://user-images.githubusercontent.com/116927372/201451696-3b572eb2-cc5f-45cb-b6ce-603aef17d986.png)

### Style Guid:

I use this style guidesystem for my website.

part 1

![project-2-1](https://user-images.githubusercontent.com/116927372/201428591-0c1defa5-8485-44be-8f06-28c57dfad718.png)

part 2

![project-2-2](https://user-images.githubusercontent.com/116927372/201428603-399d4313-103c-4483-88d4-e7e7d51a5649.png)