Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/virag-ky/blog-card
A Blog Card challenge built with React from the GreatFrontend.
https://github.com/virag-ky/blog-card
blog-card component css figma greatfrontend react react-component
Last synced: 23 days ago
JSON representation
A Blog Card challenge built with React from the GreatFrontend.
- Host: GitHub
- URL: https://github.com/virag-ky/blog-card
- Owner: virag-ky
- Created: 2024-10-24T09:03:05.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-10-24T13:00:15.000Z (3 months ago)
- Last Synced: 2024-10-25T14:31:18.651Z (3 months ago)
- Topics: blog-card, component, css, figma, greatfrontend, react, react-component
- Language: JavaScript
- Homepage: https://virag-ky.github.io/Blog-Card
- Size: 959 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blog Card - [GreatFrontend](https://www.greatfrontend.com/)
## Project brief
In this challenge, I developed 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.
### Live link: https://virag-ky.github.io/Blog-Card
