Flexbox, Tea Cozy Project

Hello Codecademy community,
I recently finished the Tea Cozy Project from the course Making a Responsive Website. It took me longer than expected and I had some trouble with it, please let me know what you think and feedbacks on how I can improve my code.

Here is my project link: CodecademyProjects/TeaCozy/Resources at main · smei08/CodecademyProjects · GitHub

Hey @text3664969826,
So, from what I see the main thing to improve would be how you select your HTML element and the semantics of your HTML tag.
You added a .flex-container class to center your footer but then added an #footer ID so you could
work on that specific div but ID’s have a higher specificity than class and the browser, by default, apply the selector
with highest specificity, so in this case your footer is not in display: flex; but in display: block; anymore and it is centered on
the width: 1200px; space you added.
Putting a specific name to your class, using several classes (like this: <div class="flex-container locations"> , or in the case of the #footer just using the <footer> tag would prevent that overriding problem and make your CSS easier to edit.
I see that you used <span> the same way you used <div>, it is not wrong but better practice to use <div> in this case rather than <span> (Also for your <nav> the tag <li> or<ul> are the ones generally used instead of <span>).

Other than that it’s looks good ! Congrats for finishing this project !
I hope this was helpful :slight_smile:

PS: A nice resource on specificity in CSS

1 Like

Thank you so much for the feedbacks, I do get confused sometimes with assigning names and selecting HTML tags. Also thanks for the resource link!