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

Congratulations on completing your project!

Compare your project to our solution code and share your project below! Your solution might not look exactly like ours, and that’s okay! The most important thing right now is to get your code working as it should (you can always refactor more later). There are multiple ways to complete these projects and you should exercise your creative abilities in doing so.

This is a safe space for you to ask questions about any sample solution code and share your work with others! Simply reply to this thread to get the conversation started. Feedback is a vital component in getting better with coding and all ability levels are welcome here, so don’t be shy!

About community guidelines: This is a supportive and kind community of people learning and developing their skills. All comments here are expected to keep to our community guidelines


How do I share my own solutions?

  • If you completed the project off-platform, you can upload your project to your own GitHub and share the public link on the relevant project topic.
  • If you completed the project in the Codecademy learning environment, use the share code link at the bottom of your code editor to create a gist, and then share that link here.

Do I really need to get set up on GitHub?
Yes! Both of these sharing methods require you to get set up on GitHub, and trust us, it’s worth your time. Here’s why:

  1. Once you have your project in GitHub, you’ll be able to share proof of your work with potential employers, and link out to it on your CV.
  2. It’s a great opportunity to get your feet wet using a development tool that tech workers use on the job, every day.

Not sure how to get started? We’ve got you covered - read this article for the easiest way to get set up on GitHub.

Best practices for asking questions about the sample solution

  • Be specific! Reference exact line numbers and syntax so others are able to identify the area of the code you have questions about.
4 Likes

Solution with flexbox:

hello. I’ve got a problem with centering text vertically in grid.

The problem is in my .beige column. I wanted text in beige grid box be centered vertically.

Originally I barely succeeded to center text vertically in a column that spans 8 rows.

But later, When I added “height: 99%” to make background color fill the whole grid box with the color, the text in this box returned back to the top again (not centered vertically).

I’ve tried so many solutions from Internet, but a still cant center the text vertically when I have “height” added to its CSS rule.

Is there any solution to fix this?

These are my files for the Webdesign project. I’ve tried to remake the sample as much as possible.
A question I have with my design is I’ve used negative pointers for some of my margins, is that ok or bad practice?

https://github.com/parapaa/Projecthttps://github.com/parapaa/Projects-Codecademy/blob/master/resources/css/indexWebDesign.csss-Codecademy/blob/master/web%20design.html

Can someone explain how to arrange for several inline block elements to be equally spaced and distributed across the width of a parent element?

Give mine a look!
I got a little lazy at the end but I learned alot!

Hello!

I have just completed the project. I customized it a bit. Please let me know if you recommend any adjustments or have any tips.

Thanks!

My solution to the Website Style Guide project

I am not completly new to web design, I have learned it by doing.
I started this course to get the basics down and get overall better in web design.
This is my solution to the project, i have it on my website.

https://sultangabriel.de/codecademy/design-system/

Here’s my code, both HTML and CSS! I had some issues with the NavBar at the top. I couldn’t get the link styling to be right on it and such, but otherwise I’m happy with how this came out. Let me know your thoughts!

I tried to do a sort of “dark mode” website. It didn’t work as easily as I thought, but I’m still relatively pleased for an early project.


Take a look at mine too!

Hi! Take a look at my pink website for fun? :smiley: (because why not lol!)

====html=====

A Pink Website Design Guide

Designed by: Veronica Li

Color source: Nippon Colors


Color Palette

<table class="Color-Palette">
  
<tr class = "Color-Name">
  <th class="SUOH">SUOH</th>
  <th class="KOHBAI">KOHBAI</th>
  <th class="MOMO">MOMO</th>
  <th class="TAIKOH">TAIKOH</th>
  
</tr>

<tr class="HEX">
  <td class="SUOH">#8E354A</td>
  <td class="KOHBAI">#E16B8C</td>
  <td class="MOMO">#F596AA</td>
  <td class="TAIKOH">#F8C3CD</td>
  
</tr>

<tr class="RGB">
  <td class="SUOH">RGB: 142, 53, 74</td>
  <td class="KOHBAI">RGB: 225, 107, 140</td>
  <td class="MOMO">RGB: 245, 150, 170</td>
  <td class="TAIKOH">RGB: 248, 195, 205</td>
  
</tr>
</table>

<h4>Fonts</h4>

<table class="Fonts">

  <tr>
    <th class="Regular-Text">Regular Text</th>
    <th class="Regular-Text-Quote">Regular Text Quote</th>
    <th class="Emphasized-Text">Emphasized Text and titles</th>
    <th class="Subtitle">Subtitle</th>
  </tr>
    
  <tr>
    <td class="Regular-Text">Merriweather Light 300</td>
    <td class="Regular-Text-Quote">Merriweather Light 300 Italic</td>
    <td class="Emphasized-Text">Merriweather Bold 700</td>
    <td class="Subtitle">Merriweather Bold 700 Italic</td>    
  </tr>
  
</table>

Text Styles

  <tr>
    <th>Main Page Heading</th>
    <th>Sub Heading</th>
    <th>Paragraph</th>
  </tr>
  
  <tr>
    <td>H2</td>
    <td>H4</td>
    <td>p</td>       
  </tr>
  
  <tr>
    <td>Font: Merriweather Bold 700</td>
    <td>Font: Merriweather Bold 700 Italic</td>
    <td>Font: Merriweather Light 300 OR Italic</td> 
  </tr>
  
</table>

A Japanese Pink Theme Design Guide

Hope you find it helpful:)

=======css=====

body {
background-color: #FEDFE1;
font-family: Merriweather;
}

header {
font-weight: 700;
color: #8E354A;
padding: 10px;
text-align: center;

animation-duration: 3s;
animation-name: fadein;
}

@keyframes fadein {
from {
opacity: 0%;
}

to {
opacity: 100%;
}
}

.creator {
font-size: 12px;
font-weight: 300;
color: #E16B8C;
}

.Source {
font-size: 12px;
font-weight: 300;
}

a {
color: #F596AA;
}

a:hover {
color: #8E354A;
}

logo {
padding-left: 47%;

}
.circle1 {
height: 20px;
width: 20px;
background-color: #F8C3CD;
border-radius: 50%;
display: inline-block;

}

.circle2 {
height: 20px;
width: 20px;
background-color: #F596AA;
border-radius: 50%;
display: inline-block;

}

.circle3 {
height: 20px;
width: 20px;
background-color: #F8C3CD;
border-radius: 50%;
display: inline-block;

}

.circle4 {
height: 20px;
width: 20px;
background-color: #8E354A;
border-radius: 50%;
display: inline-block;

}

hr {
color: #8E354A;
border: dashed 1px;
}

h4 {
text-align: center;
color: #8E354A;
}

th, td {
padding: 10px;
border: 3px solid #FEDFE1;

}

table {
width: 100%;
}
.Color-Palette {
text-align: center;
margin: 20px auto;
animation-duration: 3s;
animation-name: fadein;

}

@keyframes fadein {
from {
opacity: 0%;
}

to {
opacity: 100%;
}
}

.Color-Name {
font-weight: 700;
}

.KOHBAI {
color: #FEDFE1;
background-color: #E16B8C;

}

.SUOH {
color: #FEDFE1;
background-color: #8E354A;
}

.TAIKOH {
color: #FEDFE1;
background-color: #F8C3CD;
}

.MOMO {
color: #FEDFE1;
background-color: #F596AA;
}
.HEX, .RBG {
font-weight: 300;
}

.Fonts {
color: #8E354A;
background-color: #F8C3CD;
text-align: center;
margin: 20px auto;
padding: 10px #FEDFE1;
border-collapse: collapse;

animation-duration: 4s;
animation-name: fadein;
}

@keyframes fadein {
from {
opacity: 0%;
}

to {
opacity: 100%;
}
}

.Fonts th, td {
border: 5px #FEDFE1 solid;
border-collapse: collapse;
}

.Regular-Text {
font-weight: 300;
}

.Regular-Text-Quote {
font-weight: 300;
font-style: italic;
}

.Emphasized-Text {
font-weight: 700;
}

.Subtitle {
font-weight: 700;
font-style: italic;
}

.Text-Styles {
background-color: #8E354A;
color: #F8C3CD;
border: 5px solid #FEDFE1;
border-collapse: collapse;
text-align: center;

animation-duration: 5s;
animation-name: fadein;
}

@keyframes fadein {
from {
opacity: 0%;
}

to {
opacity: 100%;
}
}

footer {
padding: 10px 0;
margin: 30px 0;
text-align: center;
color: #8E354A;
background-color: #F596AA;
}

1 Like

Hi, there. I have completed the project, but have one drawback.
You can see the project on my github, it’s published. - https://vdmklchv.github.io/webdesign_system/
Behavior in Chrome is good, but in Firefox the last paragraph is missing and it seems like footer overlaps it. Please don’t suggest flex or grid, I know about those solutions, but want to master box model.

If you have any ideas why different behavior happens, please let me know.

P.S. Nevermind, figured it out :grinning: Just watch my project if interested

1 Like

Hi all! Here is my guide.

Hello!

Just finished the project. I customized the look but stay true to the layout ‘generally’

Let me know if you think I should have done anything else.

Thanks!

Hi everyone,

This is my take on this project - please let me know what you think.

You can find mine on CodePen: https://codepen.io/Dyrits/pen/Vwvjqxv
I don’t really like the result. I am really bad when it comes to design.
I added a Random RGB Brick Generator that I’ve created with JavaScript.