Build a Website Style Guide Challenge Project (HTML, CSS)

Here is my web style guide project. Cocademy!

Based off the example given but each section with their own html page. Needs a lot of refinging - especially till figuring out how to vertically centre text!

Here is my project:

Page: Website Design System
Code: GitHub - araedesigns/website-design-system: Website Design System project for Codecademy FEE Career Path

hi, this is my project.

Code in Github
Live Website

Hey guys,

just got done with the challenge. Please let me know what do you think :))

1 Like

My solution is extreeeeemely similar to the example code provided, but that’s because I learn much better with slow and steady guidance, but where I actually write the code myself. I.e. I’m not good at guessing, I learn better through repetition. Okay, so that’s my excuses out of the way.
I’m so pleased with the result of this exercise and I hope it will form the basis for my own personal style guide for all future projects. Despite having learnt bazillions since I joined Codecademy in October 2023, this is the first time I’ve been confident enough to share anything I’ve produced. :partying_face:

The GitHub repository:

The GitHub page:
https://copyncode.github.io/OnlineKitStyles/

Laura (copywriter → coder)

1 Like

Hello, I’ve just completed this project. My site is also very similar to the example site but I did try to be a little creative with it. I feel like I’ve learned a lot with building this design system and I’m much more comfortable with the concepts of html and css!
Live website
GitHub repository

1 Like

This took me a couple of days, trying to do a few different things. I hope this works.

2 Likes

Here’s my site, hopefully this works since I haven’t really played with GitHub. This took me a couple days to get the styles just how I wanted them, but hopefully this can be a helpful reference for someone !

1 Like

Love it! Had to fork it to view, couldn’t see if it was deployed to GitHub pages but looks good!

Hello guys - long time lurker here. I just finished the website style guide for the full stack course. If anyone could review my code and tell me what you think would be much appreciated. Happy to review your code in return.

Love the concept. An interesting way to showcase your website style guide. I would suggest adding some CSS styling to your buttons.

Hello everyone, I completed the project today. Had to google a lot to figure some things out but I am pleased with the outcome. It’s very similar to the original project because I used it as a template. Still a lot to improve so I’m happy about any input on what could’ve been done better :slight_smile:

Nothing wrong with using Google - it’s a resource. I use it all the time to fill in my knowledge gaps.

I’ve just had a look at your code and the website in a browser. Looks good!

I like the use of the comments function in your HTML code - breaking up the sections and making your code clean and legible. I need to start doing that.

Suggestions - maybe throw in a navigation bar and some buttons? Also a little bit more whitespace between your div borders and the text?

Please have a look at my website if you have time:

https://rikwallant.github.io/

Use inspect to view the code or have a look at my Github repository - GitHub - RikWallant/rikwallant.github.io

My website style guide.

1 Like

https://grgrnkoo.github.io/

I did an absolutely wrong task, covering all topics from a course. Spent 2 days on it, so I don’t want to spend 1 more on doing a right task that covers half of techniques used here. would like to get your review on that website

Hello everyone!
Here is my solution. :cowboy_hat_face:
Github: GitHub - RomchukAnton/StyleGuide: this is a challenge project from Codecademy. Build a Website Design System.
live version: Website Style Guide

Here is the link to my final Website Style Guide Project: WebSite Style Guide

Here is my style sheet, any advice wwelcome:

Web Style Sheet

My Style Guide is here: Portfolio Site Style Guide. I’d love to get any feedback on the responsiveness. Thank you!