Responsive landing page with html & css

Community feedback

• 

  Siraj Sharma•150

  @sirajsharmaPosted 3 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:
      • Semantic HTML
      • Why, How, and When to Use Semantic HTML and ARIA

  • Use relative units for a fluid layout:

    • Prefer units like %, em, and rem over absolute units like px, pc, and pt.
    • For a deeper understanding, watch Kevin Powell’s video on CSS em and rem.

  • Adopt a mobile-first approach in CSS:

    • Structure your HTML for larger screens and write CSS with mobile-first in mind.
    • Helpful resources:
      • How To Write Mobile-first CSS
      • Are you writing responsive CSS the wrong way?

  • 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">

  • General note:

    • These points aim to help you improve your skills and achieve better web design outcomes.

  0