Here is my style guide
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!
- Repository: GitHub - andrea-farioli/wdn: Website Design Notes
- Preview: Website Design Notes
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
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.
Challenge Project: Build a Website Design System
Here is my project.
Please give feedback on my code.
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/#
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 
i like how this looks a lot! very clean and easy to read
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.
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.
Hello!
This is the first project I share! I think it makes sense for what I know as of today in the training course.
- Code: GitHub - Mecenary/codecacademy-styleguide
- Live: Style Guide
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!
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
Hope you liked it!
See ya!