Ahmad Alrai• 150
@AhmadHRai
Submitted
Ejiro Frances
@Ejiro-Frances
All comments
- Ejiro Frances• 100
@Ejiro-Frances
Posted
This looks very good and responsive across different screen sizes.
0 @romanhordiienko131
Submitted
Ejiro Frances• 100@Ejiro-Frances
Posted
The site is responsive across all devices. This is an excellent replica of the design. Well done.
0- Firdaus• 50
@firdaus3
Submitted
Ejiro Frances• 100@Ejiro-Frances
Posted
The page looks very good and is responsive across devices.
0 - AVARUSJOSE• 60
@AVARUSJOSE
Submitted
Ejiro Frances• 100@Ejiro-Frances
Posted
The design looks excellent. For the hover effect on the anchor tags, You could change the font colour to black as shown in the active state design.
Marked as helpful
0 - Manuel• 110
@Manuel7070
Submitted
What are you most proud of, and what would you do differently next time?
I’m most proud of completing this project and creating a clean, responsive blog preview card using HTML and CSS. The design closely follows the Frontend Mentor challenge specifications, and I implemented a well-structured layout with great attention to detail in terms of spacing, typography, and responsiveness across different devices. The component-based structure is easy to maintain and update.
Next time, I would focus more on optimizing the CSS by exploring CSS Grid more thoroughly to handle layout control better.
What challenges did you encounter, and how did you overcome them?
Challenges encountered:
One of the main challenges I encountered was ensuring the blog preview card remained fully responsive across different screen sizes. Balancing the layout and typography to look good on both small mobile screens and larger desktops required careful use of CSS Flexbox. Another challenge was working with the design's spacing and alignment to ensure it matched the Frontend Mentor specifications precisely, which sometimes meant fine-tuning padding and margin values.
How I overcame them:
To overcome the responsiveness issue, I leveraged CSS media queries and Flexbox properties to adjust the layout dynamically for different devices. Testing the design on various screen sizes helped refine the responsiveness. For alignment and spacing, I broke down the layout into smaller components and used browser developer tools to inspect and adjust the design iteratively. These tools allowed me to fine-tune elements until they aligned perfectly with the challenge's requirements.
What specific areas of your project would you like help with?
I would like help with further optimizing the layout, particularly in refining the CSS to ensure a smoother, more consistent design across all screen sizes. I’d also appreciate guidance on how to improve the project’s overall performance, such as using best practices for image optimization and lazy loading. Additionally, I’m interested in learning how to incorporate more advanced CSS techniques, such as animations or transitions, to enhance user interaction and engagement. Feedback on making the codebase more modular and maintainable would also be valuable.
Ejiro Frances• 100@Ejiro-Frances
Posted
The code is well structured, readable and reusable.
Marked as helpful
0 - Carla Sablic• 50
@CarlaSablic95
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of having completed the challenge, but I need to improve in knowing which units of measurement are appropriate for the widths and heights of elements.
What challenges did you encounter, and how did you overcome them?
I faced difficulties when working on the mobile version; I searched for information on the proper use of measurement units.
What specific areas of your project would you like help with?
I would like to get advice on how I can improve in layout (structuring) and styles (selection of measurement units).
Ejiro Frances• 100@Ejiro-Frances
Posted
- The layout looks good on different screen sizes.
- Read MDN documentaries for solutions on measurement units.
1
