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

thanks for your observation… done

1 Like

Hi everyone,

I’m 15% along on my Front-End Engineer Path. This project was a bit more difficult for me for some reason. Any feedback is appreciated!

Source Code
Project Website

Hello All,
I used flex to position the content of the page.


<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" ><link>

    <meta charset="UTF-8" />
    <title>Style Guide</title>
  </head>
  <body>
    <!-- header-->
    <h1 class="header">Style Guide</h1>

    <!-- color box-->
    <div class="color">
      <h2>Color Palette</h2>
      <div class="color-container">
        <div class="color-scheme color1">
          <h5>Crispy Apple Red</h5>
          <h6>rgb(165, 4, 4)</h6>
        </div>
        <div class="color-scheme color2">
          <h5>Raspberry Sorbet</h5>
          <h6>rgb(195, 91, 91)</h6>
        </div>
        <div class="color-scheme color3">
          <h5>Blossom Pink</h5>
          <h6>rgb(235, 175, 175)</h6>
        </div>
        <div class="color-scheme color4">
          <h5>Aqua marine Blue</h5>
          <h6>rgb(82, 140, 167)</h6>
        </div>
        <div class="color-scheme color5">
          <h5>Purple Rain</h5>
          <h6>rgb(179, 68, 184)</h6>
        </div>
        <div class="color-scheme color6">
          <h5>Gold Rush</h5>
          <h6>rgb(238, 184, 36)</h6>
        </div>
      </div>
    </div>
    <!-- end color box ------>

    <!--//> Fonts----->
    <div class="fonts">
        <h2>Fonts</h2>
        <div class="fonts-container">
            <div class="font-family1">
                <h3  class="font-family font1">Raleway</h3>
                <p>The quick brown fox jumps over the lazy dog.</p>
                <p class="bold">The quick brown fox jumps over the lazy dog.</p>
                <p class="italic">The quick brown fox jumps over the lazy dog.</p>
            </div>
            <div class="font-family2">
                <h3 class="font-family font2">Noto Sans</h3>
                <p>The quick brown fox jumps over the lazy dog.</p>
                <p class="bold">The quick brown fox jumps over the lazy dog.</p>
                <p class="italic">The quick brown fox jumps over the lazy dog.</p>
            </div>
            <div class="font-family3">
                <h3 class="font-family font3">Quicksand</h3>
                <p>The quick brown fox jumps over the lazy dog.</p>
                <p class="bold">The quick brown fox jumps over the lazy dog.</p>
                <p class="italic">The quick brown fox jumps over the lazy dog.</p>
            </div>
        </div>
        </div>

    <!--//> end fonts-->

    <!--Text Style----->
    <div class="text">
        <h2>Text Styles</h2>
        <div class="text-container">
            <div class="font-family1">
                <h1> H1: Main page heading</h1>
                <ul class="font-weight-700">
                    <li>Font-weight 700 (bold)</li>
                    <li>Font-size: 26px</li>
                    <li>Font-family: Raleway</li>
                </ul>
            </div>
            <div class="font-family2">
                <h2> H2: Subheading</h2>
                <ul class="font-weight-500">
                    <li>Font-weight 500</li>
                    <li>Font-size: 18px</li>
                    <li>Font-family: Noto Sans</li>
                </ul>
            </div>
            <div class="font-family3">
                <p> P: Paragraph text</p>
                <ul class="font-weight-400">
                    <li>Font-weight 400 (regular)</li>
                    <li>Font-size: 14px</li>
                    <li>Font-family: Quicksand</li>
                </ul>
            </div>
        </div>
    
    </div>
    <!-------end text -->

</html>

// css
My demo of this project. I used flex to position the page

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,700;1,400&display=swap');

.color, .fonts, .text{
    border: 3px solid #ccc;
}
.color-container, .fonts-container, .text-container{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.color-scheme{
    
    
    width: 200px;
    text-align: center;
    padding: 10px;
    margin: 20px;
    font-size: 20px;
}
.color1{
    background: rgb(165, 4, 4);
}
.color2{
    background: rgb(195, 91, 91);
}
.color3{
    background: rgb(235, 175, 175);
}
.color4{
    background: rgb(82, 140, 167);
}
.color5{
    background: rgb(179, 68, 184);
}
.color6{
    background: rgb(238, 184, 36);
}

.header, .color, .fonts, .text{
    margin: 15px;
    padding:20px;
}
.font-family{
    text-decoration:underline;
}

.bold{
    font-weight: bold;
}
.italic{
    font-style: italic;
}

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

.font-weight-500{
    font-size: 18px;
    font-weight: 500;
}

.font-weight-400{
    font-size: 14px;
    font-weight: 400;
}

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

.font-family2{
    font-family: 'Noto Sans', sans-serif;
}

.font-family3{
    font-family: 'Quicksand', sans-serif;
}

Azure Style Guide

This is the 2nd iteration of this project. I thought I needed to review the basics of design before proceeding to the more advanced stuff.

Anyway, this style guide was made in a bit of a rush. I just wanted to squeeze this project in my schedule.

Live Site: Azure Style Guide
Repository: GitHub - daniellabrador/codecademy-fs-design_system_2

Live site intentionally not made responsive.

3 Likes

Hi all!
Here is my version: Design System
it was highly entertaining :smile:

3 Likes

My favorite font! Looks awesome nice job. Some of the text is not legible though

My website design project:

https://shandanasyed.github.io/webiste-design-guide/

Hi everyone!

My Website Style Guide Project:
Website: My Website Style Guide
Source Code: GitHub - Merthynz/My-Website-Style-Guide

Hi Everybody,

My website style guide project and source code.

Nice and clean especially the big hero image. LOL I think you meant Poppins not Poopins.

1 Like

Thank you so much, I’ll correct that

Style Guide

My style guide.

Here’s mine.

https://rsturrock.github.io/codecademy-project-stylesguide/

This was a good learning experience. I look forward to receiving feedback. Thanks for looking.
Here is the link to my style guide:
https://mrjreal.github.io/style-guide

I like this one, your colours look like swatches you get from a paint store!

1 Like

Hi! Here is my solution Live preview and Github repository

5 Likes

Hii, I approached this project with a simple aesthetic that’s easy on the eyes in mind
Check it out here: Qis’ Website Style Guide
Feedback is much appreciated!

2 Likes

Hello all,
I kind of just worked off the visualization and layout of the example page and figured out how to make it my own. Check it out if you’d like: Lovejoy’s Website Style Guide

2 Likes

Hi, please have a look at my style guide via my GitHub :grinning:

1 Like

Hello!

I finished my Design System.

Here’s the code also, in case you want to check it out!

5 Likes