@Jomagene
Posted
Great job on the project! I really appreciate the effort you've put into it. Your use of semantic HTML elements like table
, tbody
, tr
, and th
is excellent, and I love how you're utilizing CSS variables—very clean and maintainable.
I noticed that you're importing the Outfit and Young Sefir font families using the Google Fonts API, which is a solid approach. However, since it've been provided these fonts in the assets/fonts
directory, it might be more efficient to use @font-face
for local font integration.
One suggestion for improving the HTML structure is to consider replacing the bodyContainer
with a <main>
tag, and you could swap out the <div class="headingPic">
for a <figure>
tag, which would enhance the semantics of your layout.
Additionally, it would be beneficial to implement a CSS reset in your project. Different browsers apply their own default stylings, which can lead to inconsistencies. A CSS reset ensures a consistent look and feel across all browsers. You can refer to this CSS reset article for more details.
Keep up the great work, and let me know if these suggestions help!
Marked as helpful
@tylerhyndman484
Posted
Thanks so much for all the helpful tips! I am thankful to report that with this being my first project I completed, I failed to do a lot of the things you mentioned, and now do all those things! Haha I appreciate the feedback and agree I need to use font face more as that’s one I am not as comfortable with. Great idea and will implement that in the future when I am giving fonts to locally host! @Jomagene