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

blog card using HTML and CSS

@Tiwari0808

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@TarekGawish1

Posted

Hi Divyanshu Tiwari,

I've reviewed your Blog preview card, and it's a great start! The overall layout and color scheme are visually appealing. Here are a few suggestions to help you enhance your HTML and CSS skills further:

Semantic HTML:

Ensure that you're using the appropriate semantic tags to improve accessibility and SEO. For example, instead of using a div for the card, consider using an article or section tag. CSS Best Practices:

Try to use CSS Grid or Flexbox for layout management. They offer more flexibility and are easier to maintain than traditional float-based layouts. Use a CSS reset or normalize to ensure consistency across different browsers. Responsiveness:

Make sure your design is responsive and looks good on different screen sizes. You can use media queries to adjust styles for various devices. Consistent Spacing and Alignment:

Pay attention to the spacing and alignment of elements. Consistent padding and margins can make the design look more professional. Typography:

Consider using web-safe fonts and ensure the text is readable on different screen resolutions. You might also want to play around with font sizes, weights, and line heights to improve readability. Advanced CSS Features:

Explore using CSS variables for maintaining consistent color schemes and other repetitive values. Learn about CSS animations and transitions to add subtle effects that enhance the user experience. Code Organization:

Keep your CSS organized by using methodologies like BEM (Block Element Modifier) to make your code more maintainable. Separate your CSS into different files if it grows large, organizing it by component or functionality. Browser DevTools:

Utilize browser developer tools to debug and optimize your CSS and HTML. They are incredibly powerful for identifying and fixing issues. Great work on your current design, and I’m excited to see how you can take it to the next level with these tips. Keep up the good work!

0

@Tiwari0808

Posted

Hi @TarekGawish1,

Thank you for your detailed feedback and kind words about my Blog preview card!

I’ll work on implementing semantic HTML tags, using CSS Grid/Flexbox, and ensuring responsiveness with media queries. I’ll also focus on consistent spacing, web-safe fonts, and exploring CSS variables and animations. Additionally, I’ll organize my CSS better using BEM and utilize browser DevTools for debugging.

Your suggestions are incredibly helpful, and I’m excited to improve my design based on them. Thanks again for your support!

@TarekGawish1

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