Basic HTML mark-ups, CSS flexbox and media-queries

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted 4 months ago

  Hi Ridwan10000

  Having gone through your project, here is my observation

  HTML

  • find out more about landmark elements, which are very important in the structural organisation of your site. For this challenge , I would include the main element as it identifies the primary content of the webpage.
  • the alt value of an image element should exclude some words such as image, picture, logo etc as these are automatically implied and will cause a repetition of words when using a screen reader

  CSS

  • you will need to reset your styles using a modern reset stylesheet
  • this challenge does not need a lot of media queries , infact you can do it without any media queries. Instead of the explicit width on the container width: 350px; , use max-width - it allows your component to scale . Also for sizes , use rems in most cases instead of px

  Marked as helpful

  1

  ---

  

  Ridwan Hasan•400

  @Ridwan10000Posted 4 months ago

  Thanks for the suggestions @ChamuMutezva

  0
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 4 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  Your project is looking fantastic!

  I'd like to suggest a way to make it even better:

  • Using margin and/or padding isn't always the most effective method for centering an element.

  Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

  📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

  body {
      min-height: 100vh;
      display: flex; 
      justify-content: center;
      align-items: center;
  }
  

  I hope you find this helpful!

  Keep up the excellent work!

  Marked as helpful

  1

  ---

  

  Ridwan Hasan•400

  @Ridwan10000Posted 4 months ago

  @danielmrz-dev Many many thanks

  1