GreatFrontEnd Projects is now in BETA! For a limited time, get 30% off with the promo code BETA30. Check it out! 🚀

Blog Card

Build a simple blog card displaying details of a blog article
+100 rep
Loading...

Project brief

In this challenge, you will develop a blog card featuring editorial content, including an article cover image, a content category tag, a title, a brief description, and a call-to-action (CTA) link.

Implementation requirements

  • Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
  • Link interactivity: Implement and style links to reflect different states - normal, hover and focus.
  • Placeholders: You may leave the redirection links empty for any unspecified buttons or links.
  • Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox and Safari.
  • [Stretch goal] Performance optimization: Optimize image assets and code for quick load times, ensuring a smooth and responsive user experience.
  • [Stretch goal] Accessibility and semantics: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary, using proper alt tags for images and ensuring that buttons can be navigated to and selected using keyboard controls.

Resources provided

Design files for desktop, tablet and mobile
High resolution image assets
README file
Starter code with content copy
Style guide for typography, colors and spacing

Support you can expect

Official guides & resources
Development guides written & curated by Sr engineers at Big tech, such as:
Learn from good code
We recommend well-rated submissions using the same stack for your reference
Ask any questions in community
Have any doubts or need help? Ask in the community and discuss with others.

FAQ

General