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

Hi everybody,
This is my solution, it’s not finished yet but I want to complete all the css lessons and come back to this project to improve my design.

Live:
https://verylowprofile.github.io/DesignStudio-Portfolio-Project-/

Hi everyone,

Just finished my Design System project. The process took some time, even started twice from the beginning.
Also, I’m curious: am I the only one who has sooooo many questions? :grimacing: It is still hard even to google something because you don’t have the necessary vocabulary, so you spend hours finding it) It’s okay, I understand that everything will come with experience, but you always want to get there as fast as possible)

Anyway,
Web Design System
GitHub Repo

Thanks!

This is my website design builder

Feedback appreciated! :slight_smile: CodeAcademy "Build a Website Style Guide Challenge" Project · GitHub

This looks really good! great work

It took me 30 mins just to debug why my CSS wasn’t linking :sweat_smile: Just remember we’re still very new to this and even top programmers still always rely on Google. I was very frustrated in the beginning of this project and ended it very satisfied when I assured myself I’m still new to this and expertise will come with experience, and projects like these.

Your page looks great btw! Love the rounded borders that give a 3D effect, and the fonts & colors you chose go very well together

1 Like

Thanks! It took me ages to get the colour swatches to align next to each other and to have the banner paragraphs sit alongside the h1 at the top. However, I found that is you set both to inline-block, set a width for the container and make these child elements have a width that total to equal or less than the container width, they’ll sit side by side.

Your website looks brilliant as well! I like the ridge borders, but, like you said, you like the rounded edges with border-radius. What if you could get a ridge pattern, with rounded edges and a thinner border? Then if you lighten the background colour inside the boxes, it could look like a modern picture frame. The picture frame idea could fit well with the fact that website’s are “works of art” and this design system is you have is one too. You could also add a medium box shadow as well to make it look like it’s hanging off of the wall. This could help you build a truly skeuomorphic design.

2 Likes

Here is design system. I simply uploaded all working codes, download and view and enjoy.

Howdy! I am sharing my version of a simple website style guide, how does it look?

Thank you for any input

My quick style guide is attached - any feedback is welcome!

Hello hello!! As a branding designer, this project was super fun and right up my alley! I’ve already been making some projects with the same styles and color palette, so it was nice to make a singular place where that info can all go :smiley:

My project can be found here, if you want to take a look: https://silkieweb.github.io/silkie-styles/

3 Likes

Here is what i created in this section:
website: Website Design System
github: GitHub - amanc1248/websiteDesignSystem

Here’s what I came up with. It’s fairly simple but I think it’s alright. It’s is also somewhat responsive. Please let me know what you think!

Website (Live)
GitHub

I came up with this, the tedious part was setting everything for multiple screen sizes

Github Page

Github Branch

1 Like

https://orochiduw.github.io/codecademycp2/

General feedback from a professional would be much appreciated, thank you in advance.

1 Like

Hi everyone. This is my version of project. It was based on Kevin Powell’s Scrimba tutorial posted on freeCodeCamp YouTube’s channel. I used picture from the project notes and copied it with plan HTML and CSS.

https://mehcanic.github.io/Website_Design_System/

I will appreciate any kind of input and advise. Thanks everyone.

3 Likes

My take on the Challenge project: Build a website Design System.

Hey guys! I just finished this project please take a look and leave a Code Review if you’d like to. I tried to recreate Codecademy’s sample project.

Codecademy’s sample project

Mine project

Github

Here’s the code:

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">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet"> 
    <link rel="stylesheet" href="resources/css/index.css">
    <title>My Website Style Guide</title>
</head>

<body>
    <h1>My Website Style Guide</h1>

    <!-- COLORS -->

  <section class="box">
    <h2>Colors</h2>
    <div class="green swatch">
      <p>Dark Green</p>
      <p>#0d1b1e</p>
    </div>
    <div class="pink swatch">
      <p>Pink</p>
      <p>#f2cee6</p>
    </div>
    <div class="blue swatch">
      <p>Blue</p>
      <p>#8cbaba</p>
    </div>
    <div class="purple swatch">
      <p>Purple</p>
      <p>#7c6c77</p>
    </div>
    <div class="yellow swatch">
      <p>Yellow</p>
      <p>#ffd670</p>
    </div>
  </section>  

   <!-- FONTS -->

  <section class="box fonts">
    <h2>Fonts</h2>
    <div class="opensans text">
      <h3>Open 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="poppins text">
      <h3>Poppins</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="sourcesanspro text">
      <h3>Source Sans Pro</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>
  </section>

  <!-- TEXT STYLES -->

  <section class="box">
    <h2>Text Styles</h2>
    <div class="styles">
      <h1>H1: Main page heading</h1>
      <ul>
        <li>Font-weight: 700 (bold)</li>
        <li>Font-size: 26px</li>
        <li>Font-family: Poppins</li>
      </ul>
      <h2>H2: Subheading</h2>
      <ul>
        <li>Font-weight: 500</li>
        <li>Font-size: 18px</li>
        <li>Font-family: Open Sans</li>
      </ul>
      <p>P: Paragraph text</p>
      <ul>
        <li>Font-weight: 400 (regular)</li>
        <li>Font-size: 14px</li>
        <li>Font-family: Source Sans Pro</li>
      </ul>
    </div>
  </section>
</body>
</html>

CSS

/* FONTS 

font-family: 'Open Sans', Helvetica, sans-serif;
font-family: 'Poppins', Tahoma, sans-serif;
font-family: 'Source Sans Pro', 'Trebuchet MS', sans-serif;

*/

html {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    
}

body {
    margin: 0px 10%;
}

.box {
    
    border: 2px solid rgba(84, 63, 141, 0.404);
    padding: 10px;
    margin: 10px auto;
}

.green {
    background-color: #0d1b1e;
    color: white;
}

.pink {
    background-color: #f2cee6;
}

.blue {
    background-color: #8cbaba;
}

.purple {
    background-color: #7c6c77;
    color: white;
}

.yellow {
    background-color: #ffd670;
}

.swatch {
    display: inline-block;
    width: 32%;
    min-height: 100px;
    margin: 20px auto;
    text-align: center;
}

.fonts h3 {
    text-decoration: underline;
    font-weight: normal;
}

.opensans {
    font-family: 'Open Sans', Helvetica, sans-serif; 
}

.poppins {
    font-family: 'Poppins', Tahoma, sans-serif;
}

.sourcesanspro {
    font-family: 'Source Sans Pro', 'Trebuchet MS', sans-serif;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.text {
    display: inline-block;
    width: 45%;
}

.styles h1 {
    font-weight: 700;
    font-size: 26px;
    font-family: 'Poppins', Tahoma, sans-serif;
}

.styles h2 {
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-weight: 500;
    font-size: 18px;
}

.styles p {
    font-family: 'Source Sans Pro', 'Trebuchet MS', sans-serif;
    font-weight: 400;
    font-size: 14px;
}

If you’d like to know what new I’ve learned (or if you don’t that will be a log for myself :slight_smile: )

  1. You can’t change font-weight of the h1 in your body{} ruleset you should target it directly with h1{} ruleset (spent almost 3 hours trying to find out what’s wrong with my font since I was linking font that I’ve downloaded to my local directory (and I thought that I just did it wrong) but then I found out that connecting to Google Font DNS is much more better than uploading fonts locally but the problem with font-weight still was there).

  2. Setting width with % will make element adjustable to your screen size.

  3. This service for comparing fonts and
    this one for fonts matching (helps to find better fallback font)

  4. You can download Google Fonts .ttf (which I guess is not recommended) and upload them to Font Squirrel Generator and download all the .woff .woff2 .svg and more with already created stylesheet.css where you just copy the @font-family rulesets to your own css without need to type or copy each style manually (which is kinda pain since font can have 12-18 styles)

and last one

  1. I already knew that before this project but since I’m dropping links here THIS service to generate matchable color palletes.

Thank you for your attention and have a nice path :slight_smile:

1 Like

I like your designs :slight_smile:

Hi guys!

I just created a website design system :smiley:

https://dokoe92.github.io/website_design_system/