All comments

• 

  Elijah Adelakun• 70

  @kennykage101

  Submitted 4 months ago

  What are you most proud of, and what would you do differently next time?

  I am proud of improving on my styling skills

  What challenges did you encounter, and how did you overcome them?

  I was trying to adjust the background image I placed on the first div in the card depending on the screen size. I wanted the image to be clipped by the sides just as it was shown in the Figma design file on the mobile design. I still haven't gotten it though

  What specific areas of your project would you like help with?

  The aspect I talked about in the previous question asked about my challenges

  

  Blog review card using SASS/SCSS

  1

  20

  

  Elizaveta N.• 60

  @kotangenss

  Posted 4 months ago

  ⚡ Your HTML solution is generally semantic. However, some tweaks could improve the semantics and accessibility: Using <article> instead of <div> for the blog card would improve the semantics, as the <article> element is intended for standalone components that can be independently distributed and reused.

  ✅ Your SASS code is well structured using nested styles and variables, making it readable and easy to maintain.

  ❗Use «box-sizing: border-box;» for the «class="blog"» element and the card component at 375px will be the same size as in the Figma layout.

  Good luck ☘️

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Douglas Miranda Macedo• 10

  @Douglas-M-Miranda

  Submitted 4 months ago

  What challenges did you encounter, and how did you overcome them?

  I had difficulty aligning the content using flexbox

  

  solution using CSS Flexbox

  1

  30

  

  Elizaveta N.• 60

  @kotangenss

  Posted 4 months ago

  Your solution includes basic semantic HTML, which is good practice. Using tags such as <main>, <h1>, and <p> improves structure and accessibility. However, you can improve your semantic markup by adding <section> or <article> tags to make your content structure clearer.

  The solution has basic accessibility through the use of alt attributes for images.

  The layout adapts well to different screen sizes. The code is well structured and readable.

  All the main styles and markup are in place, making the code easy to understand and modify. Avoid redundancy: for example, the text-align: center property can be defined once for the .text class.

  The solution basically corresponds to the project and the requirements of the assignment. The appearance, structure and functionality correspond to the expected results. However, attention to detail can always be improved to provide a more professional and polished look. For example, you need to reduce the font of both text elements and increase their padding.

  Your solution is a good basic implementation using semantic HTML, modern CSS techniques, and basic accessibility. Some of the div tags are unnecessary in my opinion, but overall great job!

  1