{"id":28318559,"url":"https://github.com/atif-dev/fem_article-preview-component","last_synced_at":"2025-06-24T18:32:17.431Z","repository":{"id":295023829,"uuid":"988828208","full_name":"atif-dev/fem_article-preview-component","owner":"atif-dev","description":"A challenge of frontendmentor learning path","archived":false,"fork":false,"pushed_at":"2025-05-26T17:08:53.000Z","size":521,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-01T16:16:21.453Z","etag":null,"topics":["github","html-css-javascript"],"latest_commit_sha":null,"homepage":"https://atif-dev.github.io/FEM_article-preview-component/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atif-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2025-05-23T06:19:43.000Z","updated_at":"2025-06-01T12:39:38.000Z","dependencies_parsed_at":"2025-05-23T08:10:50.063Z","dependency_job_id":null,"html_url":"https://github.com/atif-dev/fem_article-preview-component","commit_stats":null,"previous_names":["atif-dev/fem_article-preview-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/atif-dev/fem_article-preview-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atif-dev%2Ffem_article-preview-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atif-dev%2Ffem_article-preview-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atif-dev%2Ffem_article-preview-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atif-dev%2Ffem_article-preview-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atif-dev","download_url":"https://codeload.github.com/atif-dev/fem_article-preview-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atif-dev%2Ffem_article-preview-component/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261733769,"owners_count":23201716,"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":["github","html-css-javascript"],"created_at":"2025-05-25T08:11:02.235Z","updated_at":"2025-06-24T18:32:17.422Z","avatar_url":"https://github.com/atif-dev.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Article Preview Component\n\n![Design preview for the Article Preview Component coding challenge](./design/desktop-preview.jpg)\n\n\n## Welcome! 👋\n\nThis is a solution to the [Article Preview Component on Frontend Mentor](https://www.frontendmentor.io/challenges/article-preview-component-dYBN_pYFT). Frontend Mentor challenges help you improve your coding skills by building realistic projects.\n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Screenshots](#screenshots)\n  - [Links](#links)\n  - [My process](#my-process)\n  - [Continued development](#continued-development)\n  - [Useful resources](#useful-resources)\n  - [Author](#author)\n  - [Acknowledgments](#acknowledgments)\n\n## Overview\n\n### The challenge\n\n- Build out article preview component and get it looking as close to the design as possible.\n- View the optimal layout for the component depending on their device's screen size.\n- Through JavaScript, initiate the share options when someone clicks the share icon.\n\n### Screenshots\n\n![PC View](https://github.com/atif-dev/FEM_article-preview-component/blob/main/screenshots/Desktop%201440%20x%20900.png?raw=true)\n![Mobile view](https://github.com/atif-dev/FEM_article-preview-component/blob/main/screenshots/iPhone%208(375px%20width).png?raw=true)\n\n### Links\n\n- Frontend Mentor solution url: https://www.frontendmentor.io/solutions/article-preview-component-TV6VVD5sUa  \n- Live Site URL: https://atif-dev.github.io/FEM_article-preview-component/\n\n## My process\n\n  - Built with HTML Semantic Elements.\n  - Checked and verify good looking behavior for multiple screens of LT Browser.\n  - Added two extra features:\n    - Nice dots under social links while clicking or navigating through keyboard.\n    - Except share icon and tooltip click anywhere on screen to hide tooltip.\n  - Used ChatGPT and GROK.\n    \n### Continued development\n\n  Recently, with the help of GROK AI I have found two screen readers(NVDA and VoiceOver). In future I will explore how to check/test accessibility. \n\n### Useful resources\n\n- [CSS flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - Nice visual representation to understand CSS flexbox. \n- [Conquering Responsive Layouts](https://courses.kevinpowell.co/conquering-responsive-layouts) - This is nice short free course for learning responsiveness.\n- https://youtu.be/pJ0GPI7BMIs?si=yDHIb3L1jQYq-JDg\n- [Nice Guide about alt attribute of html img tag](https://axesslab.com/alt-texts/) - Find this useful guide after watching [Kevin Powell's video about accessibility](https://youtu.be/pJ0GPI7BMIs?si=hjscnii9942umsjT)\n- [Learn CSS Grid the easy way](https://youtu.be/rg7Fvvl3taU?si=OeJGCoDQq0sy_FRK) - This is nice tutorial to understand css grid line numbers using inspection. \n- [Check responsiveness](https://www.lambdatest.com/mobile-view-website) - NICE website for checking responsiveness and taking good looking screen shots.\n- [CSS Tooltip](https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_bottom) - CSS tooltip from w3schools.\n- [ChatGPT](https://chat.openai.com/) - Nice to understand code and getting help related to code.\n\n\n## Author\n\n- [atif-dev @ Frontendmentor](https://www.frontendmentor.io/profile/atif-dev)\n\n## Acknowledgments\n\nI have used chatGPT to find out:\n - vw unit\n   - vw unit is used to increase the font size when we stretch the screen in inpection mode. Using vw unit is nice to display proper text in larger screens but on the other hand we should use it carefully by keeping in mind smaller screens. \n - Physical pixels and CSS pixels\n   - In LT browser let's say we see a device size as: iPhone 8 (750 x 1334 | 4.7 in). In previous sentence 750 are physical pixels and if we are seeeing 750 in responsive mode of chrome then these 750 are CSS pixels that we use in CSS. \n - window.innerWidth\n   - window.innerWidth is used in JS to find out screen width. \n - document.addEventListener('click', (event) =\u003e { //perform an action})\n   - Perform an action by clicking on DOM document.\n \n**This time I have also used GROK AI for code review. It's good to try different AI's to find out which is producing better code reviews for us.** \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatif-dev%2Ffem_article-preview-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatif-dev%2Ffem_article-preview-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatif-dev%2Ffem_article-preview-component/lists"}