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
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
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
<ul> are the ones generally used instead of
Other than that it’s looks good ! Congrats for finishing this project !
I hope this was helpful
PS: A nice resource on specificity in CSS
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!