https://github.com/h-yoshikawa44/ch-simple-article-listing
devChallenges リポジトリ（出典：[devChallenge - Responsive Web Developer - Simple Article Listing](https://devchallenges.io/challenge/simple-article-listing)
https://github.com/h-yoshikawa44/ch-simple-article-listing
css devchallenges html vite
Last synced: about 2 months ago
JSON representation
devChallenges リポジトリ（出典：[devChallenge - Responsive Web Developer - Simple Article Listing](https://devchallenges.io/challenge/simple-article-listing)
- Host: GitHub
- URL: https://github.com/h-yoshikawa44/ch-simple-article-listing
- Owner: h-yoshikawa44
- Created: 2025-04-12T14:22:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-03-29T15:09:54.000Z (4 months ago)
- Last Synced: 2026-03-29T17:56:19.126Z (4 months ago)
- Topics: css, devchallenges, html, vite
- Language: CSS
- Homepage: https://h-yoshikawa44.github.io/ch-simple-article-listing/
- Size: 1.28 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Simple Article Listing | devChallenges
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Overview](#overview)
- [Desktop](#desktop)
- [Mobile](#mobile)
- [What I learned](#what-i-learned)
- [Built with](#built-with)
- [Features](#features)
- [How To Use](#how-to-use)
- [Acknowledgements](#acknowledgements)
- [Author](#author)
## Overview
### Desktop
### Mobile
### What I learned
- How to use the srcset attribute of the img element.
- How to do underline animation on link hover.
- How to deal with the problem that deploying with gh-pages package causes an error due to Windows directory character limit.
### Built with
Base
- [HTML](https://developer.mozilla.org/ja/docs/Web/HTML)
- [CSS](https://developer.mozilla.org/ja/docs/Web/CSS)
- [Node.js](https://nodejs.org/): 24.14.1
- [Vite](https://ja.vitejs.dev/)
Other major libraries
- [Lightning CSS](https://lightningcss.dev/)
## Features
This application/site was created as a submission to a [DevChallenges](https://devchallenges.io/challenges-dashboard) challenge.
- [x] Create a responsive web page that displays a list of articles using HTML and CSS.
- [x] Each article should include a picture, title, and publication date.
- [x] Implement flexbox to create a visually appealing and responsive layout for the article listing.
- [x] Apply clean spacing and typography to enhance the overall design.
- [x] Ensure the web page is accessible and user-friendly.
- [x] Test the web page on different devices and screen sizes to ensure responsiveness.
- [x] Optimize the web page for performance and loading speed.
- [x] Use semantic HTML elements to structure the content and improve SEO.
- [x] Apply CSS styles to enhance the visual presentation of the articles.
- [x] (Optional) Add hover effects or animations to make the article listing more interactive.
- [x] Validate the HTML and CSS code to ensure it follows best practices and standards.
- [x] Document the code and provide clear instructions on how to run and use the web page.
- [x] Deploy the website to make it accessible for everyone.
## How To Use
Install dependencies
```
npm i
```
Run the Vite
```
npm run dev
```
## Acknowledgements
- [MDN - レスポンシブ画像](https://developer.mozilla.org/ja/docs/Web/HTML/Guides/Responsive_images)
- [HTMLとCSSでつくる！リンクテキストのホバー時アニメーション11選](https://ics.media/entry/240801/)
## Author
- Website: [h-yoshikawa44.com](https://h-yoshikawa44.com)
- GitHub: [@h-yoshikawa44](https://github.com/h-yoshikawa44)
- X: [@yoshi44_lion](https://x.com/yoshi44_lion)