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

Hello! You can set width in %. For example:
.color-box {
display: inline-block;
width: 25%;
}

Looks great! Code was easily readable and the site looked good.

1 Like

Wow you really went all out! looks great.

1 Like

Thanks a lot! I appreciate your kind words.

1 Like

Here’s my style guide website. I didn’t realize how challenging it would be to do simple things like moving a text to the bottom right of a box.

https://sfin12.github.io/website-design-system/

I finished the project by creating a style guide for the website that I own and use right now - www.darkfolklore.com

I dunno if I should have used GitHub Pages to host the final project, but here it is.

If someone gets interested to look at my repo., I would encourage you to look at the website and compare it with the style guide. You can see how the style guide gets used in an actual website.

That being said, If anyone thinks that there is a way for me to improve upon my style guide and thus upgrade the website www.darkfolklore.com then I would love to get a reply from you. :slight_smile:

Hello! I’ve finished the challenge. Here’s my solution

https://gist.github.com/ca107f2f8be707ad986466932d0bcf7a

I’ve finished the challenge. I tried a different aproach .Check out my solution to see what is it all about .

My solution

1 Like

It took me one complete day to actually figure things out! Worth it! Do check my code and give your feedback!

Here’s my solution live on GitHub pages, if anyone wants to see :slight_smile:

2 Likes

I learned a lot about CSS completing this project. Here is my solution: GitHub - ccmoore214/Website-Style-Guide: This is a general website style guide

Here’s my attempt at the Build a Website Style Guide Challenge Project:
https://peterkibuchi.github.io/website-style-guide/

and here’s the code:

I encountered a bit of a challenge in aligning the font cards due to difference in font sizes despite similar font weights (the size of the card depends on the size of the text within). Also, the webpage isn’t fully responsive at the moment.

Currently, I do not know how to solve the problems without breaking the visual appearance. If anyone could offer some insight it would be much appreciated.

Happy coding.

1 Like

This is my attempt at creating a Website Style Guide (live)
The code for this website can be found here.

There is a lot I can definitely improve in this project and will be updating it as I progress through the Front End Engineer skill path. Any comments and feedback on my project would be most welcome.

3 Likes

Hello all. Nothing special. Still getting used to Github…

Live page: JT Website Style Guide

html

css

1 Like

Here is my project, thanks for looking!

https://ashkyt.github.io/designsystem/

A

1 Like

Hi,
This is my web design system.