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

HI everyone,

Have a look at my completed project.
It’s pretty simple but I used flexbox because I understand it a whole lot better.

Live site: Codecademy: Design System Project
Code: GitHub - KamilahAhmed/style_guide: Codecademy project: website style guide project

Any feedback will be really appreciated, Thanks in advance.

Hey Kameelah,

That looks great, i really like the choice of circular color swatches and the site was really nice and responsive when I re-sized it.
My only challenge would be that the typography section looks a little cramped.

Here’s my effort:
Live Site: Web Design System
Repo: GitHub

Thanks for the feedback, I’ve worked on it and made it more responsive. I tried to view your live project but I keep getting a 404 error. Hope to see it online soon.

1 Like

I made this basic design system and added left nav

will edit it though hopefully as i go along the course

Hi Everyone

This is my version of the Web Style Guide. I made it with the upcoming Portfolio project in mind. I really enjoyed creating it. Any feedback would be much appreciated.

https://jennyseal.github.io/StyleGuideEg/

Thank you very much.

1 Like

I kept it simple.

Live Site
Github repo

2 Likes

It took a while this project - probably spent a little longer on it than necessary… I had trouble trying to get images centred within divs, and getting background images looking ok.
Still needs some work but here it is…

https://martinpaulgray.github.io/Sheriff_Georgie_Stylesheet/

2 Likes

https://piko0101.github.io/websiteguide/
Hello, this is my finished project. I’ll appreciate any feedback!

2 Likes

Wow, i love it it looks awesome, well done

Hi Guys,

Check out my finished version. Simple , much like the example but I’m happy with it.

slowly learning.

Thanks
Luke.

Well, I just tried to recreate the example from memory, I’m quite surprised that I could do it pretty easily without having to peak for a solution elsewhere. I guess I am learning! :slight_smile:

Here is my style guide, based on a website I helped build but only using Elementor in Wordpress so didn’t need to use HTML/CSS. I wanted to practice using white space more in this project. (There is no responsivity, it only looks right on desktop screens).

Live Version
Github Repository

Hello Codecademy! Here’s my project:

I’m looking for some feedback regarding the structure (semantics) of the html, or any improvement you find I could make. Thanks!

Hey everyone! Late last night or I guess it was technically early this morning :blush: I completed the website style guide project. I know that getting feedback is vital; I appreciate any feedback or suggestions on how I can improve this project.

A few things to note:

  • The name Allie Newton Designs is the name of the future business I hope to launch once I have all my certificates and a proper portfolio website

  • If the repository link below doesn’t work, please feel to email me at: allie.n0284@gmail.com and I’ll fwd a read only copy of the project

Also if you need feedback on this or other projects, let me know by email or by replying to this post. I’ll gladly return the favor! :slightly_smiling_face:

Thank you all!

My Style Guide (repository)

I got stuck a lot in the Fotomatic project before this because I don’t know CSS that well. I tried using media queries for this project and I couldn’t get it so that my CSS doesn’t break at different widths. But I have a bug somewhere that will shrink the body’s width in device mode on chrome dev tools. Anyway Please look at my code and give feedback. Thanks.

website_design_system