Code Review: Off-Platform Practice Project: Tea Cozy

I am looking for a code review.

I ran into some issues where my navigation was display off the screen on the right, and I was not able to verticle align center the location section. These are the 2 areas specifically I would look some feedback on. Other than that the coding in general I will always accept feedback on.

Thank you.

<!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"> <title>Tea Cozy</title> <link rel="stylesheet" href="./resources/css/style.css"> </head> <body> <nav> <div class="nav-logo"> <img src="./resources/images/img-tea-cozy-logo.png" alt="Tea Cozy"> </div> <div class="nav-links"> <ul> <li><a href="#mission">Mission</a></li> <li><a href="#featured">Featured Teas</a></li> <li><a href="#locations">Locations</a></li> </ul> </div> </nav> <main> <section id="mission"> <div class="mission-content"> <h2>Our Mission</h2> <h4>Hanpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4> </div> </section> <section id="featured"> <div class="featured-heading"> <h2>Tea of the Month</h2> <h3>What's Steeping at The Tea Cozy?</h3> </div> <div class="featured-content"> <div class="featured-content-block"> <img src="./resources/images/img-berryblitz.jpg" alt="Berry Blitz"> <h3>Fall Berry Blitz Tea</h3> </div> <div class="featured-content-block"> <img src="./resources/images/img-spiced-rum.jpg" alt="Spice Rum"> <h3>Spiced Rum Tea</h3> </div> <div class="featured-content-block"> <img src="./resources/images/img-donut.jpg" alt="Donuts"> <h3>Seasonal Donuts</h3> </div> <div class="featured-content-block"> <img src="./resources/images/img-myrtle-ave.jpg" alt="Myrtle Ave Tea"> <h3>Myrtle Ave Tea</h3> </div> <div class="featured-content-block"> <img src="./resources/images/img-bedford-bizarre.jpg" alt="Bedford Bizarre"> <h3>Bedford Bizarre Tea</h3> </div> </div> </section> <section id="locations"> <div class="locations-heading"> <h2 class="locations-heading">Locations</h2> </div> <div class="locations-content"> <div class="locations-content-block"> <h3>Downtown</h3> <p>384 West 4th Street</p> <p>Suite 108</p> <p>Portland, Maine</p> </div> <div class="locations-content-block"> <h3>East Bayside</h3> <p>3433 Phisherman's Avenue</p> <p>(Northwest Corner)</p> <p>Portland, Maine</p> </div> <div class="locations-content-block"> <h3>Oakdale</h3> <p>515 Crescent Avenue</p> <p>Second Floor</p> <p>Portland, Maine</p> </div> </div> </section> <footer id="footer"> <div class="footer-content"> <h2>The Tea Cozy</h2> <h5><a href="#">contact@theteacozy.com</a></5> <p>917-555-8904</p> </div> <div class="footer-copyright"> <p>copyright The Tea Cozy 2017</p> </div> </footer> </main> </body> </html>
/* Global Styles */ html { font-family: Arial, Helvetica, sans-serif; font-size: 22px; color: seashell; background-color: black; /* opacity: 0.9; */ } /* Section 1: Navigation Styles */ nav { width: 100%; height: 50px; position: fixed; top: 0; padding: 10px; display: flex; justify-content: space-between; align-items: center; background-color: black; border-bottom: 1px solid seashell; } .nav-links li { display: inline-block; padding-left: 20px; } .nav-links a, .nav-links a:visited { color: seashell; } .nav-links a:hover, .nav-links a:visited:hover { color: grey; } nav img { height: 50px; } /* Main Styles */ main { width: 1200px; margin: 70px auto; } /* Section 2: Mission/Hero Styles */ #mission { height: 700px; background-image: url('../images/img-mission-background.jpg'); display: flex; align-items: center; } .mission-content { width: 100%; background-color: black; text-align: center; } /* Section 3: Featured/Body Styles */ #featured { width: 1000px; margin: 100px auto; text-align: center; } .featured-content { display: flex; justify-content: space-around; flex-wrap: wrap; } .featured-content-block { margin-bottom: 30px; } .featured-content-block img { width: 300px; height: 200px; } .featured-content-block h3 { margin: 10px 0; } /* Section 4: Locations Styles */ #locations { height: 500px; background-image: url('../images/img-locations-background.jpg'); text-align: center; } .locations-content { display: flex; justify-content: center; margin: 15px 0; } .locations-content-block { width: 300px; background-color: black; margin: 0 40px; } /* Section 5: Footer Styles */ .footer-content { text-align: center; } .footer-content a, .footer-content a:visited { color: seashell; text-decoration: none; } .footer-content a:hover, .footer-content a:visited:hover { color: grey; }

Hi there!
Reviewing your coding I would suggest some things:

  1. It is interesting to redefine the default values for margin and padding once they’re usually more than 0. So you should start by doing this:
* { margin: 0; padding: 0; box-sizing: border-box; }
  1. The problem with nav is that you setted a value for all directions and this is pushing your divs (inside nav) to the right. Therefore, you have to change that, and I suggest you to set only a padding-right in .nav-links and -left in nav-logo:
.nav-links { padding-right: 0.5em; } .nav-logo { padding-left: 0.5em; }
  1. The last problem I resolved putting the locations-content inside another div and seting it to flex and removing the margins declarations (not sure if there’s another better way to do it):
.test { width: 100%; height: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }

You have done an excellent job!
Keep the hard work!

Thank you so much, I truly appreciate the review.

1 Like