HTML & CSS, Responsive Layout, BEM CSS class naming convention
What specific areas of your project would you like help with?Feedbacks and advices are always welcomed 😊
Hi Ali Reza,
I really like how the design turned out!!
Semantic HTML: Rocking the semantics! Try using <article> for .card since it's a standalone piece, and replace <div class="card__title"> with <header> to better frame the content.
Accessibility: Enhance accessibility by adding specific alt text to images, so users know exactly what’s displayed. Ensure focus outlines are clear on the share button and icons, and add aria-labels (e.g., "Share on Facebook") for smoother screen reader navigation.
Responsive Design: Layouts look great on most screens—just test on narrower ones to make sure text stays readable!
Code Structure: Love the clean CSS and variable use! Adding a few comments in the JavaScript can make it even easier to follow as the codebase grows.
Consistency & Reusability: Check padding/margins on .card__body and font sizes to fully match the design. Plus, you could generalize some hover effects to make styles even more reusable.
Hi daurygg,
Great job!! I really like how the design came out and how it is almost as identical to the original design. Keep pushing for greatness!
The only thing I would say is that the main title is a little bit bolder and bigger than in the original design. Was this deliberate?
Other than that great job.
Hi daurygg, I hope all is well.
I really liked how the website turned out. Just one question. When the screen size is reduced, was the overflow on the x axis intentional? I was thinking maybe the elements could be reduced in size just a little more to make it fit between the chosen screen size for the mobile media query.
Well done!!
Next time I would like to try to something similar but using a library like Bootstrap or Tailwind.
What challenges did you encounter, and how did you overcome them?I had trouble changing the image source depending on the screen size. At first I tried using the srcset and size attribute of the element but I couldn't get it to work. Eventually with some Google searching I read about the element and how it is used and managed to solve the problem.
Any feedback on the semantic HTML, like improvements in accessibility, or the use of media queries in my CSS would be appreciated, as well as any mistake I might have overlooked.
As a fellow beginner myself, I really like how the design turned out. I'm unable to help with the code review as I need help myself, but I just want to encourage you to keep pushing!! You are doing great!!
Hi Stefan2102, great job on the project!!!
I noticed that #2 and #4 for the text under the Instructions heading are wrapped to the next line. Whereas in the design they were not. Was this intentional?
Other than that, the design is excellent.
Hi cesmsdev, from a design perspective, to me it looks great!!
You seem to have the bold a little too thick on the top. But good job overall.
