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

Awww, thanks Kornelija! :innocent: I’ve been learning for about a year, I think. But I’ve only completed 16% of the course.

Do you have a link to your GitHub pages page?

Hey there!

I was just fiddling around a bit and these are my results:

Live and Code.

Feedback is highly appreciated! :slight_smile:

1 Like

My page is done and officially uploaded!! :hugs:

2 Likes

Hi all!

Here is my attempt.

Live: Website Design System

Repository: https://github.com/stuanders/website-design-system.git

2 Likes

This is my attempt
thanks for any helpful tips !

<!DOCTYPE html>
<html>
  <head>
    <title>Style Guide</title>
    <h1>My (Kirby) Website Style Guide</h1>
    <link rel="stylesheet" href='styles.css'/>
    <link href="https://fonts.googleapis.com/css2?family=Blaka+Hollow&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
  </head>

  <body>
    <div class="color-container">
    <h2>Colors</h2>
    <ul class="crim container">
      <li>Crimson</li>
      <li>#DC143C</li>
      <li>Banner</li>
    </ul>
    <ul class="gold container">
      <li>Dark Golden</li>
      <li>#B8860B</li>
      <li>body</li>
    </ul>
    <ul class="magenta container">
      <li>Dark Magenta</li>
      <li>#8B008B</li>
      <li>base color for clickable items </li>
    </ul>
    <ul class="chartreuse container">
      <li>Chartreuse</li>
      <li>#7FFF00</li>
      <li>mouse hover color</li>

    </ul>
    <ul class="green container">
      <li>Light Green</li>
      <li>#90EE90</li>
      <li>after click state</li>
    </ul>
    </div>

<div class="whole-font-container">
  <h2>Fonts</h2>
  <div class="font-container">
    <p class= "Blaka-Hollow title">Blaka Hollow</p>
    <p class="Blaka-Hollow regular">The Planes in Spain stay mainly in the plains</p>
    <p class="Blaka-Hollow bold">The Planes in Spain stay mainly in the plains</p>
    <p class="Blaka-Hollow italic">The Planes in Spain stay mainly in the plains</p>
  </div>
    
    <div class= "font-container">
      <p class= "Lobster title">Lobster</p>
      <p class="Lobster regular">The Planes in Spain stay mainly in the plains</p>
      <p class="Lobster bold">The Planes in Spain stay mainly in the plains</p>
      <p class="Lobster italic">The Planes in Spain stay mainly in the plains</p>
    </div>

    <div class="font-container">
      <p class= "Pacifico title">Pacifico</p>
      <p class="Pacifico regular">The Planes in Spain stay mainly in the plains</p>
      <p class="Pacifico bold">The Planes in Spain stay mainly in the plains</p>
      <p class="Pacifico italic">The Planes in Spain stay mainly in the plains</p>
    </div>
</div>
    <div>
      <div>
      <h3>Text Styles and Whatnots</h3>
      <h1>H1: Title</h1>
      <ul>
        <li>Font Family: Blaka Hollow</li>
        <li>Font weight: 700px</li>
        <li>Maaaybbee italic</li>
        <li>Font Size: 26x</li>
      </ul>
      </div>
      <div>
      <h2>H2: Sub Heading</h2>
      <ul>
        <li>Font Family: Pacifico</li>
        <li>font weight: 400px</li>
        <li>Font size: 18px</li>
        </ul>
      </div>
        <div>
        <h3>Paragraph</h3>
        <ul>
          <li>Font Family: Lobster</li>
          <li>Font weight: 400px</li>
          <li>Font size: 9px</li>
        </ul>
        </div>
    </div>
  </body>
<footer></footer>
</html>

// css code starts here//

.crim {
background-color: #DC143C;
color: white;
}

.gold{
background-color: #B8860B;
}

.magenta{
background-color: #8B008B;
color: white;
}

.chartreuse{
background-color: #7FFF00;
}

.green {
background-color: #90EE90;
}

.font-name {
font-style: underline;
}
.Lobster {
font-family: Lobster;
}

.Blaka-Hollow {
font-family: Blaka Hollow;
}

.Pacifico {
font-family: Pacifico;
}
.bold {
font-weight: bold;
}

.italic {
font-style: italic;
}

.container{
display: inline-block;
border: 2px solid LightGrey;
}

.font-container {
display: inline-block;
border: 2px solid LightGrey;
}

.whole-font-container {
border:2px solid black;
}
.color-container {
border: 2px solid grey;
}

.title {
font-size: 25px
}

After I had to make a (unintentionally) break in the middle of coding my WDS-challenge-project I unlasting finished my WDS-page. You can find the live-page here and the GitHub-page here. I would be grateful for your feedback.

Soo I can’t seem to figure out why all the content is all over the place, and not within the containers… Any tips?

https://github.com/solveigaarv/My-Website-Style-Guide/tree/main

Nailed it.

https://stephencirving.github.io/styeguide/

Hello,

This was the site I created.

https://cpark21.github.io/website_guide/

My css organization definitely needs improving…

Thanks for checking it out.

Hello Folks, please kindly check my recent project.
live : Design Style
code : GitHub - Biggboss7/Website-Design-System: A project from Codecademy to build our own Website Design System
Hope you enjoy it.
Would be glad if you can give me any constructive critic and comments.

Thankyou

2 Likes

Live: My Website Design Style
Repo: GitHub - gzebb/design-system: Code Academy: Build a Website Style Guide Challenge Project (HTML, CSS)

Would appreciate some feedback on what I can do better.

6 Likes

this is my work for this challenge

I finally finished it :grinning:

6 Likes

Hi Zarlana,

congratulations to your page. I really like it, it’s beautiful designed!! :slightly_smiling_face: It also includes many of the things that have been mediated in the CSS-lessons…

1 Like

Hi, a beautiful designed WDS-page!! Congratulations! My favorite one is the ancient-Egyptian lettering that is running in circles… :slightly_smiling_face:

Hey! Thanks for the review!
That was exactly my idea - to use much of the knowledge that we have gained so far :face_with_hand_over_mouth:

Clean!

Really like the style of your page, Keep working hard!

1 Like

My simple, but working website :smiley:

2 Likes

Hello
Wanted to be sure if I got the wrong message,thought we were supposed to clone the example
or I’m wrong?

1 Like