Responsive Layout using HTML and CSS

Community feedback

• 

  Prashant Uniyal•90

  @mod-prashantPosted 3 months ago

  Here are some suggestions to improve your code :

  1. Semantic Elements

  • Instead of using generic <div> tags for every section, try to use more semantic HTML elements like <article>, <section>, and <header>. This makes the code more readable and improves SEO. 2. Accessibility Improvements
  • Add 'alt' attributes to the '<img>' tags to describe the images for screen readers. 3. Use Variables for Consistency Define common colors, font sizes, and spacings as CSS variables in :root. This ensures consistency and makes future adjustments easier.

  /* STYLE.CSS */
  
  :root {
      --font-base: 1rem; 
      --font-small: 0.75rem;
      --font-large: 1.3rem;
      --line-space: 1rem;
      --image-side: 5rem;
      --image-radius: 2.5rem;
      --btn-padding: 0.7rem 5rem;
      --btn-radius: 0.5rem;
      --btn-spacing: 0.8rem;
      --btn-weight: 600;
      --Green: hsl(75, 94%, 57%);
      --White: hsl(0, 0%, 100%);
      --Grey700: hsl(0, 0%, 20%);
      --Grey800: hsl(0, 0%, 12%);
      --Grey900: hsl(0, 0%, 8%);
  }
  

  0