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

devsurfer66886 · March 9, 2021, 12:48am

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

seanpausm · March 9, 2021, 11:24pm

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

seanpausm · March 9, 2021, 11:25pm

Wow you really went all out! looks great.

alejandrod07 · March 11, 2021, 12:52am

Thanks a lot! I appreciate your kind words.

sfin12 · March 11, 2021, 8:17pm

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/

ghost_in_the_shell · March 16, 2021, 3:20pm

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.

code6408213367 · March 19, 2021, 1:05am

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

https://gist.github.com/ca107f2f8be707ad986466932d0bcf7a

mihaimurtaza · March 21, 2021, 11:41am

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

nikolayrademacher837 · March 21, 2021, 12:40pm

My solution

rishabhjain548191377 · March 23, 2021, 12:25pm

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

gist.github.com

https://gist.github.com/codecademydev/8e012a075917ee7fdcb30dee1e757214

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website Style Guide</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" rel="stylesheet">

This file has been truncated. show original

styles.css

body {
    margin-left: 10%;
    font-family: "nunito sans";
}

h1 {
    font-weight: 700;
    font-size: 26px;
}

This file has been truncated. show original

rssatnam · March 25, 2021, 10:18pm

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

digital7266886878 · March 28, 2021, 3:24am

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

peterkibuchi · March 31, 2021, 10:00am

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.

stvoconnor83 · April 4, 2021, 3:11pm

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.

joichitamura · April 7, 2021, 6:26am

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

Live page: JT Website Style Guide

html

github.com

joichitamura/cheatsheet/blob/main/index.html

<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8'>
    <title>Cheet Sheet - HTML Table Reference</title>
    <link rel="stylesheet" href="./style.css">

  </head>

<body>
    <h1>HTML Table Reference</h1>
    <h2>Table Tags</h2>
      <table>
          <thead>
            <tr>
                <th>Tag</th>
                <th>Name</th>
                <th>Description</th>
            </tr>

This file has been truncated. show original

css

github.com

joichitamura/CC-Basic-Design/blob/main/styles.css

html{
    font-family: 'Raleway', sans-serif;
}

.container{
    border: 2px solid #808080;
    padding: 10px;
    margin: 10px auto;
}



/* colour box section */

.color-panel{
    display: inline-block;
    min-width: 200px;
    min-height: 100px;
    text-align: center;
    margin: 20px auto;

This file has been truncated. show original

ashkyt · April 7, 2021, 8:58pm

Here is my project, thanks for looking!

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

A

board8205064389 · April 9, 2021, 2:58pm

Hi,
This is my web design system.