Responsive Clipboard Landing page using Flex

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnuredini

  Posted over 1 year ago

  Congratulations on completing your project! Here are a few recommendations to enhance your code:

  1. Semantic HTML Elements:

     • Utilize semantic HTML elements to improve accessibility and SEO. For instance, in the <header> section, consider using <nav> for navigation links and <section> tags for distinct sections of your content. This makes your HTML more readable and accessible. Learn more about semantic HTML here.

  2. CSS Class Naming Conventions:

     • The class names like hero__text-wrapper, btn__ios, and btn__mac suggest a BEM (Block Element Modifier) naming convention but are not consistently applied. Consistency in naming conventions makes your code easier to read and maintain. You can read more about BEM here.

  3. Responsive Design Practices:

     • While you've included media queries for responsiveness, consider using a mobile-first approach. This approach starts with styling for smaller screens and then adding queries for larger screens. It often leads to cleaner and more maintainable CSS. Here's a guide on mobile-first design: Mobile First CSS.

  Keep up the fantastic work! Remember, coding is a journey of continuous learning and improvement. Your dedication to this project is commendable. I can't wait to see what you'll build next! 👏💻🌟

  00

  Marked as helpful
• 

  Theunis•210

  @theYuun

  Posted over 1 year ago

  Other than a few alignment issues with the reference image, the top image on the background stops short of the right edge of the page.

  00

  Marked as helpful