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

aidanklee · November 9, 2021, 2:13pm

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

joshua-mcfield999070 · November 16, 2021, 12:39pm

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

joshua-mcfield999070 · November 16, 2021, 12:42pm

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 )
Other than that yours is a perfect representation of a design system!

freddy_coder22 · November 17, 2021, 9:12am

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

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

aidanklee · November 17, 2021, 12:18pm

Hey Joshua,

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

aidanklee · November 17, 2021, 12:20pm

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

joshua-mcfield999070 · November 17, 2021, 12:51pm

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

highlandrocket · November 18, 2021, 4:57am

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/

ruby5657632607 · November 19, 2021, 2:06am

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

gist.github.com

https://gist.github.com/hpschoetz/08ad431c980ebdfbc9696c78788001fd

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Playfair+Display:ital,wght@0,400;1,700&family=Raleway&display=swap" rel="stylesheet"> 
  </head>
  <body>
    <header>
      <h1 id="pageTitle">Style Guide</h1>
    </header>

This file has been truncated. show original

styles.css

body {
  font-family: 'Raleway', sans-serif;
  margin:0;
  background-color: #CAFCE8;
}
header{
  background-color: #CAFCE8;
  padding: 10px;
  width: 100%;
  font-style: italic;

This file has been truncated. show original

chip4117001401 · November 24, 2021, 1:43am

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!

chip4117001401 · November 24, 2021, 2:02am

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!

chip4117001401 · November 24, 2021, 2:15am

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

aidanklee · November 24, 2021, 8:22am

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

cheche96 · November 28, 2021, 11:22am

Hi everyone !

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 !

Pictures:

GitHub link: GitHub - CindyGraffin/Website-Design-System
My site link: https://cindygraffin.com/

mreed4 · November 29, 2021, 4:45am

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

ruzannas · November 30, 2021, 2:36pm

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

You can view the page at:
https://ruzannastubbs.github.io/Website-Design-system/index.html
and here is the link to the repo:

Feedback is appreciated especially design-wise.

Kind Regards!

chip4117001401 · December 1, 2021, 2:37am

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.

uri127 · December 1, 2021, 4:04am

Beautiful Site! and really informative!

ruzannas · December 1, 2021, 8:53am

Thank you so much!!!

ruzannas · December 1, 2021, 8:57am

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