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

Hi everyone,
Here’s the style guide I whipped up for this task: Website Design System.
Any feedback is welcomed!


Here is my spin on this project hope you enjoy/ find it useful!!

Git Design-System

feel free to take a look at the other stuff on my profile too, its the previous projects on the fullstack development course i have done so far.

Any feed back will help massively!!!

All the best
Josh MC
J.F Web Studio

1 Like

I like this alot its very well presented, easy to navigate my only suggestion is to add the font sizes you intend to use through out the site to keep consistency… (I can see you have sort of done this in the text styles but just pop the size in pixels next to them to clarify the actual size, not everyone wants to have to inspect the page to find them :wink: )
Other than that yours is a perfect representation of a design system!

Hey gais, check out mine below. Appreciate any feedback :heart_eyes: :heart_eyes:
Source code:


Hey Joshua,

Thanks for the feedback! That’s a good idea, I probably should have done that. Next time! :sweat_smile: :stuck_out_tongue_winking_eye:

Hey is there any chance you could publish it live to GitHub pages and post the link?

What ive done is on my github its not as pretty as yours but its a basic example of the detail you could go in to :slight_smile: :slightly_smiling_face:


Hey ladies and gentlemen!

I’ve finished this project, though i think i didn’t strictly follow the script.

It’s a cross over design, as it’s not just about aesthetic but also functionality. It’s been uploaded to my website, as i’m using it for this entire course, until i’m able to create a masterpiece for myself!

Hi here is a link to my very basic style guide. It was also my first time using gist. I am not entirely sure how others made a previewable page- perhaps that was separate from gist. thanks for any feed back


Here is my website style guide. I added a few features such as topic menus at the top and a resource list at the end of each section that provides links to

  • example color schemes
  • color scheme generators
  • example font and style combinations
  • web accessibility contrast checkers
  • Web design examples and ideas

View the web page at


Feedback is appreciated.

Best Regards!


Hi Aidan, I like the effects in the header title. It gives the page a fresh/unique appearance. Also, the layout is inviting (not cluttered with lots of text); hence, I wanted to look through the page as soon as I opened it. Nice work!

1 Like

Hi, like the layout. In some cases the test is difficult to read given the font and background color (not enough contrast). See contrast checker WebAIM: Contrast Checker

Hi chip! I’m liking the style guide, nice and detailed withsome cool little layout techniques in there! Good job!

1 Like

Hi everyone ! :smiley:

I want to share my style guide project with you. I am learning web development since 2 months and I used HTML and CSS. I made 3 rows of threes differents typographies, 3 rows of color charts circles and a section about-me. I sticked a nav bar at the top.

Thanks for your feedback, I give you the links of my github and my site and three pictures in this post.

Have a nice day and have fun with coding ! :v:t3: :slightly_smiling_face:


GitHub link: GitHub - CindyGraffin/Website-Design-System
My site link:


Yeah, I wanted these to be intentionally subtle, but its probably a little TOO subtle.

1 Like

Hi, everyone!
This is my attempt at building a Website Design System.

You can view the page at:
and here is the link to the repo:

Feedback is appreciated especially design-wise.

Kind Regards!


Nice Work! Looks like you put some time into this project. I like your use of menus and separation of color, fonts, styles, and text html and css files. I found this helpful. One suggestion, I wasn’t sure how to get back to your submenus on each page without scrolling to bottom or top of page; hence, a “back to submenu” option might be helpful at the end of each section within a page that takes the user back to the sub menu.

1 Like

Beautiful Site! :heart_eyes: and really informative!

1 Like

Thank you so much!!!

Thank you so much for the suggestion. I’ll definitely add 'back to submenu" functionality.