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

• Overview
  • The challenge
  • 📸 Screenshot
  • 🔗 Links
• My process
  • ⚙️ Built with
  • 📚 What I learned
  • 🚀 Continued development
  • 🔍 Useful resources
• Author
• 🎉 Acknowledgments

Users should be able to:

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

• Live Site URL: Blog Preview card

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

Working on this project helped me reinforce my understanding of HTML and CSS fundamentals. Here are a few things I learned:

• Implementing responsive design using Flexbox.
• Adding box shadows and borders to elements to enhance their visual appeal.
• Using media queries to ensure the layout adapts to different screen sizes.

Here are some code snippets I'm proud of:

<div class="blog-card">
  <img src="./assets/images/blog-image.jpg" alt="Blog preview image" class="blog-image">
  <div class="blog-content">
    <div class="blog-meta">
      <p class="blog-category">Learning</p>
      <p class="blog-date">Published 21 Dec 2023</p>
    </div>
    <h1 class="blog-title">HTML & CSS foundations</h1>
    <p class="blog-description">These languages are the backbone of every website, defining structure, content, and presentation.</p>
    <div class="blog-author">
      <img src="./assets/images/image-avatar.webp" alt="Greg Hooper">
      <p>Greg Hooper</p>
    </div>
  </div>
</div>

.blog-card {
  background-color: hsl(0, 0%, 100%);
  border-radius: 20px;
  border: 2px solid hsl(0, 0%, 7%);
  box-shadow: 5px 5px 1px rgba(0, 0, 0, 1.25);
  max-width: 375px;
  overflow: hidden;
  margin-bottom: 2rem;
}

In future projects, I want to focus on improving my JavaScript skills and learning more about advanced CSS techniques such as CSS Grid and animations. Additionally, I plan to explore more about accessibility to ensure my projects are usable by everyone.

• CSS-Tricks - A great resource for learning various CSS techniques and best practices.
• MDN Web Docs - Comprehensive documentation and tutorials for HTML, CSS, and JavaScript.

• Frontend Mentor - Abdullah
• Instagram - Abdullah
• X - Abdullah
• Facebook - Abdullah
• LinkedIn - Abdullah

Thanks to the Frontend Mentor community for their support and feedback.