https://github.com/nbaldzhiev/ap-layout

Web project mimicking the layout of the Associated Press
https://github.com/nbaldzhiev/ap-layout

css javascript react

Last synced: about 1 month ago
JSON representation

Web project mimicking the layout of the Associated Press

• Host: GitHub
• URL: https://github.com/nbaldzhiev/ap-layout
• Owner: nbaldzhiev
• Created: 2022-04-06T20:59:42.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-30T21:07:28.000Z (over 2 years ago)
• Last Synced: 2023-05-01T10:09:51.196Z (over 1 year ago)
• Topics: css, javascript, react
• Language: JavaScript
• Homepage:
• Size: 266 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Associated Press Website Layout React App

A React app, hosted on [Netlify](https://nbaldzhiev-ap-layout.netlify.app/), to practice React, HTML, and CSS The website's sole purpose is to practice FE development. It tries to replicate the layout of the [Associated Press homepage](https://apnews.com/) (as of June 2022) as a way to practice React, React Router and layout construction with CSS Grid and Flexbox. The React app is bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Description

This project is used to practice React, React Router and CSS Grid + Flexbox. The app replicates the layout of the Associated Press homepage, which is a news site. Since news APIs tend to be paid, I decided to use the [Pexesl API](https://www.pexels.com/api/) to get different thumbnail photos. The titles of the "news" stories are taken from the photographs' descriptions.

The website is somewhat responsive with a single breakpoint at max-width 768px to allow for better rendering on smartphones.

> **_NOTE:_**  This project is not free of bugs and this is normal for this type of a project used for learning purposes. Fixing these bugs is part of my path towards learning news things.