my project: Website Design System Starting
1 Like
Hello Everyone!
This is my Website-Design-System. It took me longer than I thought.
As always, I really appreciated if anyone has some advice for the future!
Thank you in advance!
Code: GitHub - LetsCodeManh/Website-Design-System: To Learn HTML & CSS I build a Website Design System
Live: Website Design System
Have a nice day and happy coding!
3 Likes
Here’s mine: Carly's First Website stylesheet
I’d love some help on getting the boxes within my h2 boxes all line up nicely. They are kind of all over the place and I’m not sure how to ensure they are centered vertically within their box. Thanks in advance!
Here’s my attempt for this project! Feel free to give me feedback 
Live: Website Design System
2 Likes
I love the design. Did you use any templates or frameworks?
Here’s a link to my Website Design System - Website Design System. I’m open to suggestions and corrections. Thank you.
3 Likes
Thank you! I came up with the design on my own.
Amazingly impressive! and motivating, great work.
Here is mine, not much but a decent start.
Here;
Hi Katherine.
I as well like what you did with your project.
However, there are a few things I would change.
The first thing is that when I load your page, some of the h1 elements that are used as titles for headings section , font styles and typography, for some reason are not entirely present in my browser window (Mozilla Firefox). A good idea would be to modify the code so that these elements fit for the other browsers as well.
Another thing … some of the class and id names you have chosen could create confusion, and I think you might as well change them; and also change the selectors names that start with an uppercase to lowercase.
The rest, i think is OK.
I hope I was helpful.
Anyways … If you want we can team up on Discord to exchange knowledge and if possible, work on projects together.
I just finished learning about flexible boxes and I’m currently working on the Flexbox: To-Do App challange
Wow ! Nice layout man 
.
Congrats !
1 Like
Hey All! Finally finished getting my Style Guide project up to where I wanted it to be. Fairly simple but it was certainly good mental exercise to get everything aligned and formatted the way that I wanted it to. Happy to take any feedback anyone may have 
Hi. Here is my solution of a Website Style Guide.
Hello! I am happy and excited to have completed my first real project. I had a very hard time putting my knowledge to work. Making the website design proved a real challenge cause I really wanted to make something a bit more elaborate, but I could not. So, I decided to get into the front-end web design course, and ended up delving into the front end, a lot. I was finally able to put this website together.
I used flexbox to put this website together which is from the front -end course here in Codecademy, but I was unable to find a link to the forums to upload my site and request some feedback. I decided to upload the site here in hope of getting some feedback from the community. I believe there should be plenty of it. I found it very challenging but, I did it on my own.
May I please get some constructive criticism from some more experienced coders?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Tea Cozy</title>
</head>
<body>
<nav>
<input id="nav-toggle" type="checkbox">
<div class="logo"><img src="images/img-tea-cozy-logo.webp" alt=""></div>
<ul class="links">
<li><a href="#Mission">Mission</a></li>
<li><a href="#featuredTea">Featured Tea</a></li>
<li><a href="#Locations">Locations</a></li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<div class="container">
<div class="textbox">
<h2>Our Mission</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Aliquid quod quos, architecto inventore quidem nesciunt?</h4>
</div>
</div>
<div class="row">
<h2 class="row-items">Tea Of The Month</h2>
<p class="row-items">What's Stepping at The Tea Cozy?</p>
<div class="img-box">
<div class="img-item">
<img src="images/img-berryblitz.webp" alt="Spiced Tea at Tea Cozy">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="img-item">
<img src="images/img-spiced-rum.jpeg" alt="Spiced Tea at Tea Cozy">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="img-item">
<img src="images/img-donut.webp" alt="Powdered Donut at Tea Cozy">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="img-item">
<img src="images/img-bedford-bizarre.jpeg" alt="Spiced Tea at Tea Cozy">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="img-item">
<img src="images/img-berryblitz.webp" alt="Spiced Tea at Tea Cozy">
<h4>Fall Berry Blitz Tea</h4>
</div>
</div>
</div>
<div class="locations">
<h2>Locations</h2>
<div class="row-location">
<div class="flex-item">
<h4>Downtown</h4>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="flex-item">
<h4>East Bayside</h4>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="flex-item">
<h4>Oakdale</h4>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
</div>
<div class="footer">
<h2 class="footertag">The Tea Cozy</h2>
<h2 class="footertag">[email protected]</h2>
<h2 class="footertag">917-555-8904</h2>
<h5 class="footertag copyright">© The Tea Cozy 2017</h5>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
background-color: black;
font-family: "Helvetica";
color: seashell;
}
.container, .rows{
position: relative;
top: 70px;
height: 100vh;
}
.container{
display: block;
width: 90%;
margin: auto;
background-image: url("images/img-mission-background.webp");
background-position: center;
background-size: cover;
}
nav{
position: fixed;
z-index: 10;
left: 10px;
top: 0;
right: 0;
height: 70px;
background-color: black;
padding-top: 20px;
}
nav .logo{
float: left;
width: 30%;
height: 50px; ;
display: flex;
align-items: center;
justify-content: flex-start;
}
nav .links{
float: right;
padding: 0;
margin: 0;
width: 50%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
nav .links li{
list-style: none;
padding: 10px 0;
}
nav .links li a{
color: seashell;
font-size: 20px;
font-weight: bold;
}
#nav-toggle{
position: absolute;
top: -100px;
}
nav .icon-burger{
display: none;
position: absolute;
right: 5% ;
top: 50%;
transform: translateY(-50%)
}
nav .icon-burger .line{
width: 30px;
height: 5px;
background-color: seashell;
margin: 5px;
border-radius: 3px;
transition: all .5s ease-in-out;
}
@media screen and (max-width: 700px){
nav .logo{
float: none;
width: auto;
justify-content: center;
}
nav .links{
float: none;
position: fixed;
top: 70px;
left: 0;
right: 0;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-around;
background-color: rgba(0,0,0,.9);
overflow: hidden;
transition: all .5s ease-in-out;
}
nav .links li a{
color: seashell;
font-size: 20px;
text-decoration: none;
}
nav .icon-burger{
display: block;
}
nav :checked ~ .links{
bottom: 0;
}
}
@media screen and (max-width: 450px){
nav .logo{
float: none;
width: auto;
justify-content: flex-start;
}
nav .links{
float: none;
position: fixed;
top: 70px;
left: 0;
right: 0;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-around;
background-color: rgba(0,0,0,.9);
overflow: hidden;
transition: all .5s ease-in-out;
}
nav .links li a{
color: seashell;
font-size: 20px;
text-decoration: none;
}
nav .icon-burger{
display: block;
}
nav :checked ~ .links{
bottom: 0;
}
}
.textbox{
width: 100%;
z-index: 2;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0,0,0,.8);
padding: 25px 0;
}
.textbox h2{
font-size: 40px;
padding: 12px 0;
}
.textbox h4{
font-size: 25px;
font-weight: 400;
}
#tea{
width: 100%;
height: 500px;
position: relative;
}
.row{
width: 100%;
text-align: center;
margin: auto;
padding: 20px 5px;
}
.row,.row-items, .flex-item{
position: relative;
top: 50px;
}
.row h2{
padding-bottom: 12px;
}
.img-box{
display: flex;
flex-wrap: wrap;
direction: row;
justify-content: space-around;
padding-bottom: 20px;
width: 90%;
margin: auto;
position: relative;
top: 100px;
}
.img-item img {
width: 300px;
height: 200px;
margin: 5px;
}
.img-item h4{
padding: 5px;
}
.locations{
position: relative;
width: 90%;
margin: auto;
top: 150px;
}
.locations h2{
text-align: center;
position: relative; top: 50px;
}
.row-location{
width: 100%;
height: 500px;
margin: auto;
background-image: url("images/img-locations-background.webp");
background-position: center;
background-size: cover;
display: flex;
justify-content: space-around;
opacity: 0.9;
}
.flex-item{
flex-basis: 30%;
background-color: rgba(0,0,0,0.8);
width: 300px;
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
padding: 0;
}
@media screen and (max-width: 700px){
.row-location{
flex-direction: column;
align-items: center;
justify-content: center;
}
}
@media screen and (max-width: 450px){
.row-location{
height: 600px;
margin-bottom: 50px;
}
.flex-item{
flex-basis: 20%;
align-items: center;
}
}
.footer{
width: 100%;
height: 200px;
position: relative;
top: 160px;
text-align: center;
margin-bottom: 20px;
font-size: 14px;
}
.footertag{
padding: 12px;
}
.footertag.copyright{
text-align: left;
margin-left: 20px;
}
Thanks in advance!