Skip to content
Submitted 1 day ago

blog-preveiw-card

tailwind-css
LVL 1
@RafiantoAS
A solution to the Blog preview card challenge

Solution retrospective


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

I’m most proud of being able to recreate the design accurately and make it responsive across different screen sizes. As a beginner, this project helped me improve my understanding of layout, spacing, and how to structure a simple UI using HTML and CSS.

Next time, I would focus on writing cleaner and more organized code, especially in structuring my CSS. I also want to improve my attention to detail and start learning better practices like using more semantic HTML and improving accessibility.

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

One of the main challenges I encountered was getting the image to display correctly due to incorrect file paths. At first, I used an absolute path with a forward slash at the beginning, which caused the image not to load.

I was able to solve this by understanding the difference between absolute and relative paths, and then correcting the file path based on the project folder structure. This helped me better understand how file linking works in HTML.

Another challenge was aligning the layout properly and making it look consistent with the design. I overcame this by using Flexbox and adjusting spacing until it matched the expected result.

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

I would like to get feedback on my CSS structure and whether I am using the most efficient approach for styling this layout. I’m still learning how to organize my code better and make it more scalable.

I would also appreciate suggestions on improving my responsive design and layout techniques, especially when using Flexbox.

Additionally, I’d like feedback on my HTML structure, particularly on how to make it more semantic and accessible.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Rafianto’s solution.

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