Design comparison
SolutionDesign
Community feedback
- @sirajsharmaPosted 2 months ago
-
Use the
<picture>
tag for responsive images:- It provides better control over image display compared to background images.
- Refer to this tutorial by Kevin Powell for a detailed explanation.
- Explore more of Kevin Powell’s tutorials for additional insights.
-
Incorporate semantic HTML and ARIA for better accessibility:
- Semantic HTML improves web accessibility and helps web crawlers understand content.
- Useful resources:
-
Use relative units for a fluid layout:
- Prefer units like
%
,em
, andrem
over absolute units likepx
,pc
, andpt
. - For a deeper understanding, watch Kevin Powell’s video on CSS em and rem.
- Prefer units like
-
Adopt a mobile-first approach in CSS:
- Structure your HTML for larger screens and write CSS with mobile-first in mind.
- Helpful resources:
-
Utilize BEM methodology with SCSS:
- Combining BEM with SCSS enhances organization and maintainability in your CSS.
-
Use the
<link>
tag to add fonts instead of@import
in CSS:- The
<link>
tag is generally preferred because it allows for better performance. - Using
<link>
can improve loading times and reduce render-blocking issues compared to@import
, which can delay the rendering of the page. - Example:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
- The
-
General note:
- These points aim to help you improve your skills and achieve better web design outcomes.
0 -
Please log in to post a comment
Log in with GitHubJoin 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