Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Frontend Mentor - Blog preview card solution

P

@cillianbc

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Proud at how quick I was able to figure out the html structure

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

Nothing major. Struggle to figure out padding etc in the figma file

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

Figma more than anything currently

Community feedback

@aftabhaider-44

Posted

  1. Yes, the solution includes the use of semantic HTML tags such as <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>, which enhance accessibility and provide clarity to the structure of the content.

  2. In terms of accessibility, the solution is well-structured and uses appropriate HTML landmarks, making it accessible to screen readers and other assistive technologies. However, improvements could be made by ensuring that all images have descriptive alt attributes, and by implementing keyboard navigation and focus management.

  3. The layout is responsive and adapts well to various screen sizes, thanks to the use of flexbox and responsive design techniques. Media queries are utilized to adjust the layout and styling based on the viewport width, ensuring a consistent and pleasing experience across devices.

  4. The code is well-structured, readable, and reusable. It follows best practices such as using meaningful class names, separating concerns by keeping HTML, CSS. This makes the code easy to understand, maintain, and extend.

  5. The solution closely resembles the design, adhering to the provided specifications and layout. Any differences are likely minor and may result from practical considerations or adaptations made during implementation to ensure functionality and responsiveness.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord