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

Sounds good!
Do you use Discord? I’m on the CodeCademy Discord server.

1 Like

Yes I do, here is my user name Ali Sajad#3569

Hello All,

Here is my web design project.

https://sheriffhammed.github.io/ProjectWebsiteDesign/

The codes can be view at

Many thanks to Frankly ( @fjosue44 ) for your support on how to create folder on Git respiratory.

1 Like

I would suggest you improve the contrast on those background colors, since you already have a class for each div, just add color: white; to these classes.

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.

1 Like

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

1 Like