https://github.com/ayokanmi-adejola/simple-article-listing

A responsive article listing page built for the devChallenges.io Simple Article Listing challenge. Crafted with semantic HTML5 and modern CSS3, featuring a custom SVG separator and accessibility best practices. Perfect for showcasing clean UI implementation and responsive design skills.
https://github.com/ayokanmi-adejola/simple-article-listing

css3 flexbox-layout html5 mobile-first-workflow vanilla-js

Last synced: 8 months ago
JSON representation

A responsive article listing page built for the devChallenges.io Simple Article Listing challenge. Crafted with semantic HTML5 and modern CSS3, featuring a custom SVG separator and accessibility best practices. Perfect for showcasing clean UI implementation and responsive design skills.

• Host: GitHub
• URL: https://github.com/ayokanmi-adejola/simple-article-listing
• Owner: Ayokanmi-Adejola
• Created: 2025-06-28T08:41:31.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-09-09T11:04:43.000Z (9 months ago)
• Last Synced: 2025-09-30T00:00:40.631Z (9 months ago)
• Topics: css3, flexbox-layout, html5, mobile-first-workflow, vanilla-js
• Language: HTML
• Homepage: https://simple-article-listing-seven.vercel.app
• Size: 1.23 MB
• Stars: 7
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Simple Article Listing | devChallenges.io



  



## 📋 Overview

This project is a pixel-perfect solution to the [Simple Article Listing](https://devchallenges.io/challenge/simple-article-listing) challenge from [devChallenges.io](https://devchallenges.io/). The goal was to create a fully responsive, accessible, and visually accurate article listing page using only HTML and CSS, closely matching the provided design for all screen sizes.

| Desktop | Tablet | Mobile |

| ------- | ------ | ------ |

| ![Desktop](./design/Desktop_1350px.jpg) | ![Tablet](./design/Tablet_1024px.jpg) | ![Mobile](./design/Mobile_412px.jpg) |

## 🚀 Features

- Fully responsive layout for desktop, tablet, and mobile

- Custom SVG separator under the main heading, as in the design

- Clean, semantic, and accessible HTML structure

- Modern, scalable CSS with mobile-first breakpoints

- Optimized local assets for fast loading

- No frameworks or build tools required

## 🛠️ Built With

- HTML5

- CSS3 (no frameworks)

## 📦 Getting Started

1. Clone or download this repository.

2. Open `index.html` in your browser.

3. All assets are local; no build step is required.

## 🧠 What I Learned

- How to translate a Figma/JPG design into pixel-perfect HTML and CSS

- Using SVGs for decorative, scalable separators

- Advanced responsive layout techniques with flexbox and media queries

- Accessibility best practices for semantic markup

## 🙏 Acknowledgements

- [devChallenges.io](https://devchallenges.io/) for the challenge and assets

- [Unsplash](https://unsplash.com/) for the sample images