{"id":27864497,"url":"https://github.com/qms85/blogpreviewcard","last_synced_at":"2025-05-04T21:06:20.808Z","repository":{"id":286780682,"uuid":"962510848","full_name":"QMS85/BlogPreviewCard","owner":"QMS85","description":"Blog Preview Card","archived":false,"fork":false,"pushed_at":"2025-04-08T10:39:58.000Z","size":344,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-04T21:06:16.377Z","etag":null,"topics":["challenge","front-end-development","frontend-mentor","frontend-mentor-challenge","html-css"],"latest_commit_sha":null,"homepage":"https://qms85.github.io/BlogPreviewCard/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/QMS85.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-08T09:06:34.000Z","updated_at":"2025-05-03T08:03:10.000Z","dependencies_parsed_at":"2025-04-08T10:35:32.091Z","dependency_job_id":"96554ddc-9a16-41e8-9429-259ab5924b05","html_url":"https://github.com/QMS85/BlogPreviewCard","commit_stats":null,"previous_names":["qms85/blogpreviewcard"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QMS85%2FBlogPreviewCard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QMS85%2FBlogPreviewCard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QMS85%2FBlogPreviewCard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QMS85%2FBlogPreviewCard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QMS85","download_url":"https://codeload.github.com/QMS85/BlogPreviewCard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252399540,"owners_count":21741672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["challenge","front-end-development","frontend-mentor","frontend-mentor-challenge","html-css"],"created_at":"2025-05-04T21:06:20.221Z","updated_at":"2025-05-04T21:06:20.794Z","avatar_url":"https://github.com/QMS85.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Blog preview card solution\n\nThis 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.\n\nTab\n\n# Overview\n## The challenge: \n\nUsers should be able to:\nSee hover and focus states for all interactive elements on the page\n\n\nDesktop View:\n\u003ca href=\"#\"\u003e\n\u003cimg src=\"blog.png\" alt=\"Blog-Preview-Card-Desktop-View\"\u003e\n\u003c/a\u003e\n\n\nMobile View:\n\u003ca href=\"#\"\u003e\n\u003cimg src=\"blog2.png\" alt=\"Blog-Preview-Card-Mobile-View\"\u003e\n\u003c/a\u003e\n\n\n# Links\nSolution URL: https://github.com/QMS85/BlogPreviewCard.git\nLive Site URL: https://qms85.github.io/BlogPreviewCard/\n\nMy process\nBuilt with\nSemantic HTML5 markup\nCSS custom properties\nFlexbox\nCSS Grid\n\n\n# What I learned\nLooking at your blog preview card project, there are several impressive aspects worth highlighting:\n\n## 1. Clean and Semantic HTML Structure:\nThe HTML in index.html is well-organized using semantic elements like ```\u003cmain\u003e```, ```\u003carticle\u003e```, and appropriate content hierarchy.\nThis shows good attention to accessibility and SEO practices.\n\n## 2. Sophisticated CSS Hover Effects:\nThe card hover animation in style.css is particularly elegant:\n```\n.card:hover {\n  box-shadow: 12px 12px 0 var(--gray-950);\n  transform: translate(-4px, -4px);\n}\n```\nThis creates a smooth, engaging lift effect that enhances user interaction while maintaining simplicity.\n\n## 3. Responsive Design:\nThe mobile-first approach with a clean media query breakpoint at 375px shows good responsive design practices.\n\n## 4. CSS Custom Properties:\nThe use of CSS variables (custom properties) for colors makes the code more maintainable and consistent:\n```\n:root {\n  --yellow: hsl(47, 88%, 63%);\n  --white: hsl(0, 0%, 100%);\n  --gray-500: hsl(0, 0%, 42%);\n  --gray-950: hsl(0, 0%, 7%);\n}\n```\n\n## 5. Performance Optimization:\nUsing modern image formats (webp) for the avatar image and SVG for illustrations shows consideration for performance.\n\n\n## Challenges I Faced:\n\nLooking at the blog preview card project, some of the key challenges were:\n\n## 1. Responsive Design Implementation:\n\nThe challenge was creating a card that looks good on both mobile (375px) and desktop screens. \nThis was solved through:\n~ Using relative units and max-width constraints\n~ Implementing a clean mobile-first approach\n~ Creating appropriate breakpoints in the media queries\n~ Interactive States\n\nImplementing smooth hover animations was tricky but effectively achieved with:\n```\n.card:hover {\n  box-shadow: 12px 12px 0 var(--gray-950);\n  transform: translate(-4px, -4px);\n}\n```\nThis creates an elegant lift effect without disrupting the layout.\n\n## 2. Font Management\n\n~ Handling custom fonts required careful implementation:\n~ Using variable fonts for flexibility\n~ Ensuring proper font-weight distribution\n~ Managing font loading performance\n\n## 3. Accessibility Considerations\n\nThe project required attention to:\n~ Semantic HTML structure\n~ Proper color contrast ratios\n~ Interactive element states\n\n## 4. CSS Custom Properties\n\nSetting up a maintainable color system using CSS variables required planning but provided consistency:\n```\n:root {\n  --yellow: hsl(47, 88%, 63%);\n  --white: hsl(0, 0%, 100%);\n  --gray-500: hsl(0, 0%, 42%);\n  --gray-950: hsl(0, 0%, 7%);\n}\n```\n\n# Continued development:\n\nAdvanced CSS, Javascript integration, Web Accessibility, Performance optimisation \u0026 testing\n\nAuthor: Jonathan Peters\nWebsite: https://qms85.github.io/MyPortfolio/\nFrontend Mentor: https://www.frontendmentor.io/profile/QMS85\nTwitter - @yDJJOnnas85\nFacebook: https://www.facebook.com/2jonathanpeters \nLinkedin: https://www.linkedin/in/2jonathanpeters\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqms85%2Fblogpreviewcard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqms85%2Fblogpreviewcard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqms85%2Fblogpreviewcard/lists"}