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

I really like that Jeff. Really good use of white space and the hover states for colours are very cool.

Thanks !

I just had a look at your project. Here’s my feedback:

  • Your links on the nav bar don’t work.
  • I think you should stick that nav bar to the top of the page.
  • Have you tried using the inline-block attribute to display sveral blocks on the same line ? In my opinion, using the whole width of the page for one block is too much (but that is just my opinion :slight_smile: )

Hi everyone!!

Finished my project today, have a look:
https://ja-saldivar.github.io/website-design-system/

Any feedback would be appreciated.

Happy coding!

1 Like

This was a lot of fun!

I went with a more subtle approach in how the styles were displayed in the guide. I went went with a minimal soft gray theme to present the colors (two of which are used, subtly, in the guide itself), the fonts (one of which is in use), and the elements the styles are for.

  • In this iteration, heading levels 2, 3, and 4 are all the same font size
  • The page is not responsive (yet)
  • Certain parts of the HTML should probably based on CSS grid, but aren’t (at least not yet)

Repo
Live (Pages)

Thumbnail as the page is designed, assuming a certain screen resolution [again, this page is not responsive (yet)].

Thumbnail

3 Likes

Hey guys!

I just finished this project. Would appreciate any feedback or suggestions.

HTML & CSS - GitHub - btucks/btucks.github.io
Live Site - https://btucks.github.io/

Hey guys, this one took me some time but here it is.

https://github.com/rodVieira021/Website_Design_System.git

Hi everyone!
I just finished my own website design system. I Had lots of fun making this!
Feel free to check this:
Repo
Live

Any feedback or suggestions would be appreciated.
Hope you have a good day!

Annie

2 Likes

Hi everyone,

Here is my attempt at the website style guide project:

Live site

Repository

Steve.

3 Likes

awesome job !! I love how you implemented your colors into the header. I will try that on mine

I really love how you kept your css file minimal. Mine is a hot mess

Layout is incredible, that’s what I’m working on improving.
My only issue is the contrast of the headers against the background color.

My website design project …

Live - Style Guide
Respo - GitHub - Tomorrowsdoughnutstoday/Arron-s-Blog-s-Styleguide: Website style guide

It’s been really great to see other projects - will be taking inspiration to jazz mine up a bit!

Jess

Here is my style guide. As you can tell I worked off the example pretty closely. I noted in the README that the main thing I need to work on is semantic CSS. Meaning, naming my classes in a descriptive and module fashion. I’ll refer back to the solution saved in my GitHub and the sites linked in my README for future website projects so that I can improve my CSS class naming.

Hello everyone, here’s my style guide.

You can check out the code on GitHub and view the style guide live.

I thoroughly enjoyed this project. It was fun to do. Thank you for having a look.

Thanks Orincy! I look forward to seeing your project.

1 Like

This is the my style guide project, style-guide-project/ html / please take a look and give me any feedback you might have.

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

6 Likes

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

3 Likes

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!