@Stroudy
Posted
Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…
- These
<div>should really have semantic tags like headings (<h1> to <h6>) and paragraphs (<p>) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content.
<div class = "tag">Learning</div>
<div class = "date">Published 21 Dec 2023</div>
-
Using
font-display: swapin your@font-facerule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear. -
I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,
-
This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation),
<meta>description tag missing that helps search engine determine what the page is about, Something like this<meta name="description" content="description goes here" />
You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟
Marked as helpful
@Lonlysoft
Posted
@Stroudy thanks for your tips!
I didn't knew about the font-display. It seems pretty useful. I'm sure going to use it next time when I use a local font.
About the <div>s I actually didn't think in using an heading or a <p> there because at first I didn't interpreted that as a necessity. But it's sure important to use semantic tags in text as you said.
About BEM, didn't know about it, but I think I've used something like that before in some personal project that I'm still developing. (I used more to reduce my code lines because there were elements that were always using the same 6 properties so I created a class just for that) But since here there weren't elements that got styles in common I just didn't use it.
About the meta tag, I just forgot to write it there because I thought it wasn't important to do it there.
But again. Thanks a lot for your feedback!
@Stroudy
Posted
Hey @Lonlysoft, Look at this BEM Cheat sheet It will explain it better, Its not about similar styles, Its a naming convention. You got this bro! 💪
