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

Here is my style guide

1 Like

Here is mine!

Hello everyone, here is my version of the project

Hey guys,
it took me a while struggling to understand posistionings and more, but at last I made it!

I’d really appreaciate your thoughts about both design and code structure.
Very greatfull to be learning here in Codecademy.
Hope you only the best!

Andrea

2 Likes

I’m still not sure if I am posting these correctly, but here is my solution! I had a lot of fun with it, and I feel like I did okay with it!

Hi!

You’re further along then I am in learning (for example, I have only created 1-pagers so far). Just a few rookie observations: you might want to add some side margins for your main body of text and keep the amount of fonts smaller and more consistent.

Here’s my take on the project.

Github repo: GitHub - Theografiska/styleguide

Live site: Style Guide For Photography Portfolio

A pro would probably shorten the CSS by 3x…But I’ll get there soon hopefully, too. :slight_smile:

Challenge Project: Build a Website Design System

Here is my project.
Please give feedback on my code.

(Codecademy export · GitHub)

Here’s my Design System! I would love your feedback!

Here’s my project, I used a table to display my colours instead of separate divs because I couldn’t get the divs to be perfectly centre but if anyone has managed it with divs then please let me know!

code: GitHub - thatredheadgirl/style-guide-project: Codecademy project as part of full-stack learning
live: https://thatredheadgirl.github.io/style-guide-project/#

1 Like

if you haven’t figured it out yet:

in settings within your repository click on the “pages” section on the left side.
Change “none” to “main” and click save.
go back to and you should see a green check mark
go back to settings/pages and at the top you should see the link to your website
it should look like "camibj05.github.io/mywebsitestyleguide

hope this helped! there’s also a ton of videos on youtube that can help :slight_smile:

i like how this looks a lot! very clean and easy to read :ok_hand:

1 Like

Hi all!

I just finished this challenge an here is the link the repo and live site. I kept with a theme I had going in the last challenge of designing for an Apothecary.

Github Repo
Live Site

1 Like

Hello all. I finished my web design project. I am yet to add more features to it with time as it is not yet completely done.

https://tkzee293.github.io/webdesignsystem/

2 Likes

Hello!

This is the first project I share! I think it makes sense for what I know as of today in the training course.

Hello!

Sharing my first HTMl & CSS project.

Code: GitHub - Rizal Suhaimi/codecademy-styleguide
Live: Rizal’s Website Design System

Hey, submitting my Style Guide.
It isn’t responsive, the sizing is definitely somewhat off on mobile, but it works with different screen widths (to some extent). Would love some feedback, thanks!

1 Like

good color choices !!
appreciate it.

Here is my solution, any advice or pointers would be appreciated it.
https://lgomez92.github.io/style-guide/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Style Guide</title>
  <link rel="stylesheet" href="./style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Poppins:ital,wght@0,400;0,700;1,400&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
</head>
<body>  
  <div class="main-container">
    <h1>My Website Style Guide</h1>
    <div class="color-container">
      <h2>Colors</h2>
      <div id="blue">
        <p>Cool Blue</p>
        <p>#2d5dcc</p>
      </div>
      <div id="pink">
        <p>Pink</p>
        <p>#d957d9</p>
      </div>
      <div id="mint">
        <p>Mint Green</p>
        <p>#4fe0b0</p>
      </div>
      <div id="beige">
        <p>Beige</p>
        <p>#efd9ca</p>
      </div>
    </div>
    <div class="fonts-container">
      <h2>Fonts</h2>
      <div id="source-code">
        <h2 class="font-style">Source Code Pro</h2>
        <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 id="nunito">
        <h2 class="font-style">Nunito Sans</h2>
        <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 id="poppins">
        <h2 class="font-style">Poppins</h2>
        <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 class="text-container">
      <h2>Text Styles</h2>
      <h1 id="h1">H1: Main page heading</h1>
      <ul>
        <li>Font-weight: 700 (bold)</li>
        <li>Font-size: 26px</li>
        <li>Font-Family: Nunito Sans</li>
      </ul>
      <h2 id="h2">H2: Subheading</h2>
      <ul>
        <li>Font-Weight: 500</li>
        <li>Font-size: 18px</li>
        <li>Font-family: Poppins</li>
      </ul>
      <h3 id="p">P: Paragraph text</h3>
      <ul>
        <li>Font-weight: 400 (regular)</li>
        <li>Font-size: 14px</li>
        <li>Font-family: Poppins</li>
      </ul>
    </div>
  </div>
</body>
</html>type or paste code here
.main-container {
  margin: 50px;
  text-align: left;
}

.color-container, .fonts-container, .text-container {
  border: 2px solid gray;
  margin-top: 15px;
}

h2, h3 {
  padding-left: 15px;
}

p {
  font-size: 20px;
}

#blue {
  background-color: #2d5dcc;
  margin-left: 15px;
  width: 30%;
  color: white;
  text-align: center;
  align-content: center;
  height: 125px;
  display: inline-block;
}

#pink {
  background-color: #d957d9;
  margin-left: 15px;
  height: 125px;
  width: 30%;
  text-align: center;
  align-content: center;
  display: inline-block;
}

#mint {
  background-color: #4fe0b0;
  margin-left: 15px;
  height: 125px;
  width: 30%;
  text-align: center;
  align-content: center;
  display: inline-block;
}

#beige {
  background-color: #efd9ca;
  margin: 30px 15px;
  height: 125px;
  width: 30%;
  text-align: center;
  align-content: center;
}

#source-code {
  margin-left: 15px;
  width: 45%;
  font-family: "Source Code Pro", monospace;
  display: inline-block;
}

.font-style {
  margin-left: -15px;
  font-weight: 100;
  letter-spacing: 2px;
  text-decoration: underline;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

#nunito {
  margin-left: 15px;
  width: 45%;
  font-family: "Nunito Sans", sans-serif;
  display: inline-block;
}

#poppins {
  margin-left: 15px;
  width: 45%;
  font-family: "Poppins", sans-serif;
}

#h1 {
  margin-left: 15px;
  font-weight: 700;
  font-size: 26px;
  font-family: "Nunito Sans", sans-serif;
}

li {
  font-size: 20px;
  margin-left: 20px;
}

#h2 {
  font-weight: 500;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
}

#p {
  font-weight: 400;
  font-size: 14px;
  font-family: "Poppins";
}

Hello there!

I’ve looked through your designs and I tried pushing what I know so far. This is mine:

.- Github repository.
.- Web Design System live version.

If you have any pointers or just want to say something about it just leave me a comment :smile:

Hope you liked it!
See ya!

1 Like