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

Projects Challenge Projects
#329

My style guide (not the cutest but I tried)
Live - My Website Style Guide
Github - GitHub - oswhyteknits/styleguide: A Design Style Guide

4 Likes
#330

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

3 Likes
#331

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
#332

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!

#333

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

Website:
https://freddy-noor.github.io/Website-Style-Guide/

#334

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:

#335

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

#336

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: https://joshua-mcfield99.github.io/Design-System/

1 Like
#337

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!

https://www.highlandrocket.com/

#338

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

#339

Hello,

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
https://quercus-alba.github.io/webdesign/

GitHub

Feedback is appreciated.

Best Regards!
:slightly_smiling_face:

1 Like
#340

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
#341

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

#342

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

1 Like