{"id":27864496,"url":"https://github.com/qms85/qrcode","last_synced_at":"2025-05-04T21:06:19.516Z","repository":{"id":286675196,"uuid":"962153348","full_name":"QMS85/QRCode","owner":"QMS85","description":"QR Code","archived":false,"fork":false,"pushed_at":"2025-04-08T08:21:30.000Z","size":295,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-04T21:06:16.391Z","etag":null,"topics":["challenge","front-end-development","frontend-mentor","frontend-mentor-challenge","web-development"],"latest_commit_sha":null,"homepage":"https://qms85.github.io/QRCode/","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-07T18:21:04.000Z","updated_at":"2025-05-03T08:05:05.000Z","dependencies_parsed_at":"2025-04-07T20:36:20.731Z","dependency_job_id":null,"html_url":"https://github.com/QMS85/QRCode","commit_stats":null,"previous_names":["qms85/qrcode"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QMS85%2FQRCode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QMS85%2FQRCode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QMS85%2FQRCode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QMS85%2FQRCode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QMS85","download_url":"https://codeload.github.com/QMS85/QRCode/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","web-development"],"created_at":"2025-05-04T21:06:19.065Z","updated_at":"2025-05-04T21:06:19.509Z","avatar_url":"https://github.com/QMS85.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - QR code component solution\nThis is a solution to the QR code component challenge on Frontend Mentor. \nFrontend Mentor challenges help you improve your coding skills by building realistic projects.\n\n# 1. QR Code (Desktop View)                                                                               \n\n\u003ca href=\"https://qms85.github.io/QRCode/\"\u003e                                                                                                        \n\u003cimg src=\"qrcode.png\" alt=\"QR-Code-Desktop\" width=\"200\"/\u003e                                            \n\u003c/a\u003e\n\n\n# 2. QR Code (Mobile View)\n\n\u003ca href=\"https://qms85.github.io/QRCode/\"\u003e\n\u003cimg src=\"qrcode2.png\" alt=\"QR-Code-Mobile\" width=\"200\"/\u003e\n\n\n# Links:\nSolution URL: https://github.com/QMS85/QRCode.git\nLive Site URL: https://qms85.github.io/QRCode/\n\n# My process\nBuilt with\nSemantic HTML5 markup\nCSS custom properties\nFlexbox\nCSS Grid\n\nHere's a step-by-step breakdown of how this QR code component project was completed:\n\n# 1. Project Setup:\n~ Created basic HTML file structure with proper meta tags and character encoding\n~ Added viewport meta tag for responsive design\n~ Linked necessary external resources:\n~ Outfit font from Google Fonts\n~ Custom CSS file\n~ Favicon\n\n# 2. The provided HTML has the following structure:\n~ Built semantic HTML markup using:\n~ ```\u003cmain\u003e``` for primary content\n~ ```\u003cdiv\u003e``` for QR card container\n~ ```\u003cimg\u003e``` for QR code image\n~ ```\u003ch1\u003e``` for main heading\n~ ```\u003cp\u003e``` for descriptive text\n~ ```\u003cfooter\u003e``` for attribution\n\n# 3. CSS Base Styling:\n```\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n```\n~ Reset default margins and padding\n~ Set box-sizing to border-box for consistent layouts\n\n# 4. Body Layout:\n```\nbody {\n    font-family: 'Outfit', sans-serif;\n    background-color: hsl(212, 45%, 89%);\n    min-height: 100vh;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n}\n```\n~ Used flexbox for centering content vertically and horizontally\n~ Set minimum viewport height\n~ Applied background color and font family\n\n# 5. Card Component Styling:\n```\n.qr-card {\n    background-color: hsl(0, 0%, 100%);\n    padding: 1rem;\n    border-radius: 1.25rem;\n    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);\n    max-width: 320px;\n    text-align: center;\n}\n```\n~ Created white card container\n~ Added padding, border radius, and subtle shadow\n~ Set maximum width for consistent sizing\n\n# 6. Responsive Design\n~ Added media query for screens 375px and larger\n~ Adjusted card margins for better mobile display\n```\n@media (min-width: 375px) {\n    .qr-card {\n        margin: 0 auto;\n    }\n}\n```\n# 7. Typography and Colors\n~ Used specific HSL colors for text and backgrounds\n~ Set appropriate font sizes and weights\n~ Added proper spacing between elements\n\n# 8. Final Testing\n~ Verified layout on different screen sizes\n~ Checked accessibility features (alt text, semantic HTML)\n~ Validated HTML and CSS\n\nThis project demonstrates responsive design principles, proper HTML semantics, and CSS best practices for creating a simple yet effective component.\n\n# The Challenges i faced with this project:\n\nHere are the main challenges faced in this QR code component project:\n\n# 1.Centering the Card Component\n~ Challenge: Achieving perfect vertical and horizontal centering\n~ Solution: Used flexbox on the body element:\n```\n// filepath: /workspaces/QRCode/styles.css\nbody {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n}\n```\n\n# 2. Image Responsiveness\n~ Challenge: Making the QR code image scale properly within its container\n~ Solution: Added responsive image properties:\n```\n// filepath: /workspaces/QRCode/styles.css\n.qr-image {\n  width: 100%;\n  border-radius: 0.625rem;\n}\n```\n\n# 3. Typography Balance\n~ Challenge: Maintaining readable text sizes across devices\n~ Solution: Used relative units and specific font weights:\n```\n// filepath: /workspaces/QRCode/styles.css\nh1 {\n  font-size: 1.375rem;\n  font-weight: 700;\n  margin: 1.25rem 0;\n}\n\np {\n  font-size: 0.9375rem;\n  font-weight: 400;\n  color: hsl(220, 15%, 55%);\n}\n```\n\n# 4. Card Shadow Effects\n~ Challenge: Creating subtle, realistic shadow effects\n~ Solution: Used carefully tuned box-shadow values:\n```\n// filepath: /workspaces/QRCode/styles.css\n.qr-card {\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);\n}\n```\n\n# 5. Mobile Responsiveness\n~ Challenge: Ensuring the component looks good on all screen sizes\n~ Solution: Used a mobile-first approach with appropriate max-width constraints:\n```\n// filepath: /workspaces/QRCode/styles.css\n.qr-card {\n  max-width: 320px;\n  margin: 1.25rem;\n}\n```\n\nThese challenges were overcome through careful planning, testing across different screen sizes, and implementing responsive design best practices.\n\nWhat I have learned\n\nHere are the key learnings from this QR code component project:\n\n# 1. Semantic HTML Structure\n~ Learned the importance of using semantic elements like ```\u003cmain\u003e``` and ```\u003cfooter\u003e```\n~ Proper use of heading hierarchy with ```\u003ch1\u003e```\n~ Adding meaningful alt attributes for accessibility\n\n# 2. CSS Best Practices\n~ Using CSS custom properties for better maintainability:\n```\n:root {\n  --white: hsl(0, 0%, 100%);\n  --light-gray: hsl(212, 45%, 89%);\n  --grayish-blue: hsl(220, 15%, 55%);\n  --dark-blue: hsl(218, 44%, 22%);\n}\n```\n\n# 3. Flexbox Layout\n~ Understanding flexbox for centering content both vertically and horizontally\n~ Using flex properties effectively:\n```\n.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n}\n```\n\n# 4. Responsive Design\n~ Mobile-first approach importance\n~ Using relative units (rem) instead of fixed pixels\n~ Implementing proper viewport meta tags\n\n# 5. Project Organization\n~ Keeping code clean and well-structured\n~ Separating concerns (HTML structure, CSS styling)\n~ Proper file organization (images in separate folder)\n\n# 6. Version Control\n~ Using Git/Github for tracking changes\n~ Creating meaningful commit messages\n~ Managing project files effectively\n\n# 7. Performance Considerations\n~ Optimizing images\n~ Using appropriate font loading strategies\n~ Minimizing CSS complexity\n~ These learnings contribute to better frontend development practices and more maintainable code.\n\nAfter completing this QR code project, here are some areas for continued developement or further study:\n\n# 1. Advanced CSS Features\n~ Study CSS Grid for more complex layouts\n~ Learn CSS animations and transitions\n~ Explore CSS custom properties (variables) in depth\n\n# 2. JavaScript Integration\n~ Add interactive features:\n~ Loading states\n~ Dynamic QR code generation\n~ Form validation\n\n# 3. Accessibility Improvements\n~ Learn ARIA attributes\n~ Implement keyboard navigation\n~ Study color contrast requirements\n\n# 4. Build Tools \u0026 Optimization\n~ Learn package managers (npm/yarn)\n~ Study build tools like Webpack or Vite\n~ Implement CSS preprocessing with Sass/Less\n\n# 5. Testing\n~ Unit testing with Jest\n~ E2E testing with Cypress\n~ Accessibility testing tools\n\n# 6. Version Control\n~ Advanced Git features\n~ Branching strategies\n~ Pull request workflows\n\n# 7. Performance Optimization\n~ Image optimization\n~ Lazy loading\n~ Critical CSS implementation\n  \n# 8. Responsive Design\n~ Mobile-first approach\n~ CSS media queries\n~ Fluid typography\n\n\nAuthor: Jonathan Peters\nWebsite - https://qms85.github.io/MyPortfolio/\nFrontend Mentor: https://www.frontendmentor.io/profile/QMS85\nTwitter - @DJJonnas85\nFacebook: https://www.facebook.com/2jonathanpeters\nLinkedin: https://www.linkedin/in/2jonathanpeters\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqms85%2Fqrcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqms85%2Fqrcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqms85%2Fqrcode/lists"}