Frontend Mentor - Blog preview card solution

This is a solution to the Blog preview card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution
• Live Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

1. Semantic HTML and Structure

• Key Learning: Understanding the importance of semantic HTML elements (like <article>, <header>, and <footer>) helps improve accessibility and SEO.
• Example: Using <article> to wrap the blog preview card helps indicate that it contains a standalone piece of content.

<article class="card">
  <h1 class="title">HTML & CSS Foundations</h1>
  <p class="description">
    These languages are the backbone of every website...
  </p>
</article>

2. Troubleshooting Deployment Issues

• Key Learning: Understanding how to troubleshoot common issues, like 404 errors due to incorrect file paths, is crucial for successful deployment.
• Example: Realizing that leading slashes in file paths can cause the server to look for files in the wrong location.

Continued development

Accessibility (a11y)

• Focus Area: Learn best practices for making web applications more accessible to users with disabilities.
• Goal: Ensure that your projects are usable by everyone, regardless of their abilities.
• Action Item: Review existing projects for accessibility issues and apply tools like Lighthouse to audit your code.

Useful resources

• Git Flow — This article outlines the Git Flow branching model, which is perfect for managing releases and feature development. It provided clarity on how to structure my branches for better organization, and I intend to use this model in future projects to maintain cleaner repositories.

• WebAIM - This resource offered a solid introduction to web accessibility principles and practices. It helped me understand the importance of making websites usable for everyone, and I found the checklists particularly useful for auditing my projects.

Author

• Frontend Mentor - @lgwarda

Acknowledgments

This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.