https://github.com/robhhr/instanews-app
NYT's Top Stories fetcher - Instanews App
https://github.com/robhhr/instanews-app
api css fetch-api javascript jquery news newsapi responsive sass
Last synced: about 2 months ago
JSON representation
NYT's Top Stories fetcher - Instanews App
- Host: GitHub
- URL: https://github.com/robhhr/instanews-app
- Owner: robhhr
- Created: 2019-05-30T06:54:28.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T12:40:00.000Z (over 2 years ago)
- Last Synced: 2025-04-13T22:15:40.288Z (about 2 months ago)
- Topics: api, css, fetch-api, javascript, jquery, news, newsapi, responsive, sass
- Language: HTML
- Homepage:
- Size: 11.4 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Instanews App
The main purpose of the project was to create a news fetching website that gets data from NY Time's API Top Stories.
The method used for fetching NYT's API is a jQuery implementation of an Ajax request when an event listener triggers.
There are 3 main breakpoints:
- Mobile (< 600px)
- Tablet (> 600px)
- Desktop (> 1240px)
The article section changes layout after every breakpoint making it suitable for easy reading and navigation.
### Project screenshot
Desktop Version
Tablet Version
Mobile Version
### Technologies used
The text processor used was:
- Microsoft Visual Studio Code
The languages used were:
- HTML
- CSS
- SASS
- JavaScript
- jQuery
### Personal Learnings
The usage and implementation of jQuery, Ajax requests and API management.
The effectiveness in management and design when styling the website with JS and jQuery.
Also, I found out the usability of CSS Grid when styling complete websites was fast and powerful.
### Installation Instructions
1. Clone or download repository
2. Run `npm install`
2. Run `gulp` to see the project live
3. Feel free to visualize the coding behind the website by opening the HTML, CSS and JS files
4. The website has 3 main size breakpoints:
- Mobile
- Tablet
- Desktop
To navigate to each breakpoint you need to resize your website accordingly.