{"id":30847559,"url":"https://github.com/yashi-singh-9/simple-article-listing","last_synced_at":"2025-10-04T07:06:27.330Z","repository":{"id":296184182,"uuid":"992536315","full_name":"Yashi-Singh-9/Simple-Article-Listing","owner":"Yashi-Singh-9","description":"A responsive article listing web page built with semantic HTML and CSS. The layout showcases articles with images, titles, and publication dates using Flexbox for a clean, adaptive design. It includes hover effects, animations, and optimized media for performance. The project emphasizes accessibility, responsiveness across devices, and SEO-friendly","archived":false,"fork":false,"pushed_at":"2025-05-29T10:19:49.000Z","size":2157,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-05-29T11:57:01.394Z","etag":null,"topics":["css","dev-challenges","html"],"latest_commit_sha":null,"homepage":"https://yashi-singh-9.github.io/Simple-Article-Listing/","language":"CSS","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/Yashi-Singh-9.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-29T10:09:09.000Z","updated_at":"2025-05-29T10:19:55.000Z","dependencies_parsed_at":"2025-05-29T12:07:29.201Z","dependency_job_id":null,"html_url":"https://github.com/Yashi-Singh-9/Simple-Article-Listing","commit_stats":null,"previous_names":["yashi-singh-9/simple-article-listing"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Yashi-Singh-9/Simple-Article-Listing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yashi-Singh-9%2FSimple-Article-Listing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yashi-Singh-9%2FSimple-Article-Listing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yashi-Singh-9%2FSimple-Article-Listing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yashi-Singh-9%2FSimple-Article-Listing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yashi-Singh-9","download_url":"https://codeload.github.com/Yashi-Singh-9/Simple-Article-Listing/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yashi-Singh-9%2FSimple-Article-Listing/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273986629,"owners_count":25202708,"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","status":"online","status_checked_at":"2025-09-07T02:00:09.463Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css","dev-challenges","html"],"created_at":"2025-09-07T02:16:18.700Z","updated_at":"2025-10-04T07:06:27.236Z","avatar_url":"https://github.com/Yashi-Singh-9.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eSimple Article Listing | devChallenges\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n   Solution for a challenge \u003ca href=\"https://devchallenges.io/challenge/simple-article-listing\" target=\"_blank\"\u003eSimple Article Listing\u003c/a\u003e from \u003ca href=\"http://devchallenges.io\" target=\"_blank\"\u003edevChallenges.io\u003c/a\u003e.\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\n    \u003ca href=\"https://yashi-singh-9.github.io/Simple-Article-Listing/\"\u003e\n      Demo\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://devchallenges.io/solution/51315\"\u003e\n      Solution\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://devchallenges.io/challenge/simple-article-listing\"\u003e\n      Challenge\n    \u003c/a\u003e\n  \u003c/h3\u003e\n\u003c/div\u003e\n\n---\n\n## 📌 Table of Contents\n\n- [Overview](#overview)\n  - [What I Learned](#what-i-learned)\n  - [Useful Resources](#useful-resources)\n  - [Screenshot](#screenshot)\n- [Project Structure](#project-structure)\n- [Built With](#built-with)\n- [Features](#features)\n- [Project Checklist](#project-checklist)\n- [Acknowledgements](#acknowledgements)\n- [Author](#author)\n\n---\n\n## 🚀 Overview\n\nThis project is a responsive, mobile-first article listing web page built with semantic HTML5 and CSS3. It displays a series of articles—each featuring an optimized image (via `\u003cpicture\u003e` and `srcset`), a title, and a publication date—arranged in a clean, flexible layout powered by Flexbox. Clean spacing, modern typography, hover animations, and fade-in effects enhance the user experience, while semantic structure and accessibility best practices ensure SEO-friendly, user-friendly performance across all devices.\n\n---\n\n## 📁 Project Structure\n\n```\n\nsimple-article-listing/\n│\n├── index.html               # Main HTML file\n├── style/\n│   └── style.css            # CSS styles\n├── resources/\n│   ├── photo\\_1.png\n│   ├── [photo\\_1@2x.png](mailto:photo_1@2x.png)\n│   ├── photo\\_2.png\n│   ├── [photo\\_2@2x.png](mailto:photo_2@2x.png)\n│   ├── photo\\_3.png\n│   ├── [photo\\_3@2x.png](mailto:photo_3@2x.png)\n│   ├── Seperator.svg\n│   └── favicon.ico          # Website favicon\n└── README.md                # Project README\n\n```\n\n---\n\n### ✅ What I Learned\n\n- Responsive image handling using the `\u003cpicture\u003e` element and `srcset`\n- Creating animation effects using `@keyframes`\n- How to enhance user experience with hover transitions and flexible layouts\n- Structuring content semantically for accessibility and SEO\n\n---\n\n### 📚 Useful Resources\n\n- [MDN Web Docs - Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)\n- [CSS Tricks - A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n- [Google Fonts - Poppins](https://fonts.google.com/specimen/Poppins)\n- [Bootstrap 5 Documentation](https://getbootstrap.com/docs/5.3/getting-started/introduction/)\n\n---\n\n### 📷 Screenshot\n\n**Desktop Design**  \n![Desktop Design](design/Desktop_1350px.png)\n\n**Tablet Design**  \n\u003cimg src=\"design/Tablet_1024px.png\" height=\"650px\"\u003e\n\n**Mobile Design**  \n\u003cimg src=\"design/Mobile_412px.png\" height=\"650px\"\u003e\n\n---\n\n## 🛠 Built With\n\n- Semantic HTML5\n- CSS3\n- Flexbox\n- CSS Animations\n- Mobile-first responsive design\n- [Bootstrap 5](https://getbootstrap.com/)\n\n---\n\n## ✨ Features\n\nThis site was created as a submission to a [DevChallenges](https://devchallenges.io/challenges-dashboard) challenge.\n\n- ✅ Fully responsive design\n- ✅ Clean and modern layout\n- ✅ Flexbox-based article listing\n- ✅ Hover and animation effects\n- ✅ Semantic and accessible HTML\n- ✅ Easy to navigate and visually consistent\n\n---\n\n## ✅ Project Checklist\n\n- ✅ Create a responsive web page that displays a list of articles using HTML and CSS\n- ✅ Each article includes a picture, title, and publication date\n- ✅ Implement flexbox to create a visually appealing and responsive layout\n- ✅ Apply clean spacing and typography to enhance design\n- ✅ Ensure the web page is accessible and user-friendly\n- ✅ Test the web page on different devices and screen sizes\n- ✅ Optimize the web page for performance and loading speed (e.g., use of `srcset` for images)\n- ✅ Use semantic HTML elements to improve SEO\n- ✅ Apply CSS styles to enhance visual presentation\n- ✅ Add hover effects or animations for interactivity\n- ✅ Validate HTML and CSS for best practices (passed based on structure)\n- ✅ Document the code and provide clear instructions on how to use\n- ✅ Deploy the website to make it accessible to everyone\n\n---\n\n## 🙌 Acknowledgements\n\n- [DevChallenges](https://devchallenges.io/) for the inspiration and design guidelines\n- MDN and CSS-Tricks for tutorials and reference materials\n- [Bootstrap](https://getbootstrap.com/) – for utility classes and layout assistance\n\n---\n\n## 👩‍💻 Author\n\n- LinkedIn: [Yashi Singh](https://www.linkedin.com/in/yashi-singh-b4143a246)\n\n---\n\n⭐ Feel free to fork this repository, give it a ⭐, or suggest improvements!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyashi-singh-9%2Fsimple-article-listing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyashi-singh-9%2Fsimple-article-listing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyashi-singh-9%2Fsimple-article-listing/lists"}