jforbe / teacozy Goto Github PK

Grade: Meets Expectations

Nice work implementing a web page that meets the project specifications. All the elements are in place and positioned correctly, relative to one another. The fixed header works nicely, with the navigation links repositioning the page appropriately (albeit with overlap by the header).

You have shown a clear understanding of the difference between CSS classes and IDs, and you made good use of semantic elements <header>, <nav>, etc.

The readability of the code would be improved with the introduction of more whitespace (blank lines) between recurring structures, and using comments to break up and label the different sections of the page.

Also, be careful not to surround everything by a <div>, with individual CSS classes for each. Just use <div>s to wrap the top level structures, and use chained selectors in the CSS to target the elements within those structures.

Further Reading:

• https://learn.shayhowe.com/html-css/writing-your-best-code/

Keep up the good work.

https://github.com/jforbe/teacozy/blob/master/index.html#L55-L77

Strive to keep your HTML as concise as possible. You have used more <div> elements than necessary, particularly in the section referenced above. This could be simplified to look more like this:

     <div id="locations">
       <h2>Locations</h2>

       <div class="location">
         <h3>Downtown</h3>
         <p>384 West 5th St</p>
         <p>Suite 108</p>
         <p>Portland, Maine</p>
       </div>

       <div class=location>
         <h3>East Bayside</h3>
         <p>3433 Phisherman's Avenue</p>
         <p>(Northwest Corner)</p>
         <p>Portland, Maine</p>
       </div>

       <div class=location>
         <h3>Oakdale</h3>
         <p>515 Crecent Avenue</p>
         <p>Second Floor</p>
         <p>Portland, Maine</p>
       </div>
     </div>

Remember you can target different elements within a structure using chained selectors:

#locations {
   ...
}

#locations h2 {
   ...
}

.location {
   ...
}

.location h3 {
   ...
}

.location p {
   ...
}

Your HTML source code is neat and correctly indented (with indentation levels reflecting the parent/child relationships between elements.

Good to see your use of semantic elements (<header>, <nav>, <footer>) to give the document more formal structure.

Also, good use of CSS classes to apply common styles to multiple instances of the same structure.

Don't be afraid to use whitespace and comments to visually break up the code from being a single solid block. For example:
https://github.com/jforbe/teacozy/blob/master/index.html#L27-L54

     <!-- Featured Teas Section -->

     <div id="featured-teas">
       <h2>Tea of the Month</h2>
       <h4>What's Steeping at The Tea Cozy?</h4>

       <div class="image-content">
         <div class="image-item">
            <img class='small-img' src="resources/images/img-berryblitz.jpg" />
            <div>Fall Berry Blitz Tea</div>
         </div>

         <div class="image-item">
            <img class='small-img' src="resources/images/img-spiced-rum.jpg" />
            <div>Spiced Rum Tea</div>
         </div>

         <div class="image-item">
            <img class='small-img' src="resources/images/img-donut.jpg" />
            <div>Seasonal Donuts</div>
         </div>
       </div>

       <div class="image-content two-items">
         <div class="image-item left">
            <img class='small-img' src="resources/images/img-myrtle-ave.jpg" />
            <div>Myrtle Ave Tea</div>
         </div>

         <div class="image-item right">
            <img class='small-img' src="resources/images/img-bedford-bizarre.jpg" />
            <div>Bedford Bizaere Tea</div>
         </div>
       </div>

     </div>

     <!-- Locations Section -->

     ...

Nice work creating a web page that matches the project specification.

The fixed header works well, with the main content scrolling underneath.

The navigation repositions the content for the appropriate sections, though there is one minor issue with that:

• The top of each section div aligns with the top of the viewport when navigated to, resulting in the header overlapping the first 70 pixels.

In the following image, I made the header dark red and slightly transparent, so that you could see where the page moves to when the "Featured Teas" link is clicked...

The fix should be easy, by applying padding-top to the .container class.