Design comparison
Community feedback
- @StroudyPosted about 2 months ago
Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…
-
Your heading elements are (
<h1><h3><h2>), Heading elements should be in sequentially-descending order (e.g.,<h1>,<h2>,<h3>) to create a clear content structure, improving accessibility and SEO. Skipping levels or using them out of order can confuse screen readers, affect search engine rankings, and make your content harder to understand. -
Having a clear and descriptive
alttext for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines usealttext to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images, -
Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset
-
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. -
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="" /> -
Using a
<main>tag inside the<body>of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content. -
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,
Great job taking the time to learn! Your efforts are paying off, and I hope these insights guide you to even more success. Keep pushing forward, and remember, you’ve got this! Enjoy your coding adventures! 💪
Marked as helpful1 -
- @Jan-Dev0Posted about 2 months ago
This looks really good! I would just recommend considering using min-width in your media queries, as it generally works better with a mobile-first approach. Also, you might want to use slightly longer and more descriptive variable names to make the code easier to understand. Other than that, great work!
0@ArijTradPosted about 2 months agothank you so much @Jan-Dev0 for your comment, to precise while i was working i had a hard time switching from desktop to mobile layout
so basically we do the mobile first and then the desktop? searching through internet i found that we generally use media queries to add complexity
are those the rules i should follow? if you have any more advice on how to do it i would appreciate to hear more about ir.
0@Jan-Dev0Posted about 2 months agoYes, generally you start with mobile-first and then add styles for larger views in media queries. In those queries, you typically adjust things like padding, margins, font sizes, and maybe change the layout using Flexbox or Grid. It's a more streamlined approach since you're only adding complexity where it's needed for bigger screens.
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord