Blog Preview Card

Community feedback

• 

  Riska997•110

  @Riska997Posted 5 months ago

  Make the card design responsive

  -Width is set to a fixed percentage (width: 15%;).

  -This means that the card will always occupy 15% of the viewport width, regardless of the screen size.

  -To make the card design responsive, use relative units like percentages or viewport width (vw) to ensure that the card adjusts its size based on the screen size.

   .Card {
    /* Instead of fixed percentage, use percentage or viewport width for responsiveness */
    width: 90%; /* Example: occupy 90% of the viewport width */
  }
  

  Make use of semantic HTML elements

  -Semantic HTML elements provide meaning to the content, making it easier for browsers, search engines, and screen readers to understand the structure of the document.

  -Instead of using generic <div> elements for structural purposes, use semantic elements to better convey the purpose of each section of the webpage.

  <header>
    <!-- Header content goes here -->
  </header>
  
  <article>
    <!-- Main content/article section goes here -->
  </article>
  
  <footer>
    <!-- Footer content goes here -->
  </footer>
  
  

  Marked as helpful

  0

  ---

  

  kiryu130•40

  @kiryu130Posted 5 months ago

  @Riska997 Hi, i am trying to use semantic tags, but i do not know most of the tags so i will try to implement it in more as i go. I do have a question with the responsive feedback, while i haven't checked and try to make sure it is responsive, i do try to make it responsive by using relative value not fixed value, reading your comment makes me wonder what's the difference between width:15% and width:90% as it is just a difference of how value percentage i gave and why is one called responsive and one not

  1

  

  Riska997•110

  @Riska997Posted 5 months ago

  @kiryu130 Hi.

  When you set an element's width using a percentage, it means the element's size is based on its parent element's width.

  width: 15%: This makes the element quite narrow. It will change size with the parent element, but on larger screens, it might be too small and hard to read.

  width: 90%: This makes the element much wider, taking up most of its parent element's width. This is usually better for making sure the content is easy to read on different screen sizes.

  • The key difference between width: 15% and width: 90% lies in how practical and user-friendly the design is across different screen sizes.
  • Both are technically responsive, but a wider percentage is often more practical for readability and accessibility.

  Marked as helpful

  0
• 

  Erik Norder•40

  @R3lssPosted 5 months ago

  Really good job man, but try to follow the figma file, there you can find all the colors, sizes, etc you need for the challenge

  0