Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chanda-abdul/backstage-talks-nextjs

This is a solution to the Backstage Talks challenge on Frontend Practice using Next.js.
https://github.com/chanda-abdul/backstage-talks-nextjs

Last synced: about 1 month ago
JSON representation

This is a solution to the Backstage Talks challenge on Frontend Practice using Next.js.

Host: GitHub
URL: https://github.com/chanda-abdul/backstage-talks-nextjs
Owner: Chanda-Abdul
Created: 2023-02-08T21:56:51.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2023-04-25T23:54:09.000Z (almost 2 years ago)
Last Synced: 2024-11-14T02:22:59.866Z (3 months ago)
Language: TypeScript
Size: 1.53 MB
Stars: 0
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Backstage Talks (Magazine archive)

![Design preview for the Backstage Talks (Magazine archive) coding challenge](https://www.frontendpractice.com/_next/image?url=%2Ffullsize%2FC1-Backstage-Talks.png&w=1200&q=90)

This is a solution to the [Backstage Talks(Magazine archive) ](https://www.frontendpractice.com/projects/backstage-talks )challenge on [Frontend Practice](https://www.frontendpractice.com/).  

# Frontend Practice - Backstage Talks (Magazine archive) challenge

### The Challenge

Code a pixel perfect replication of the [Backstage Talks

(Magazine archive)](https://backstagetalks.com/)  site created by [studio Milk](https://www.milk.sk/)

![preview for the Backstage Talks

(Magazine archive) coding challenge](https://www.frontendpractice.com/_next/image?url=%2Ffullsize%2FC1-Backstage-Talks.png&w=1200&q=90)

### Users Should be able to: 

- [x] View the optimal layout for the interface depending on their device's screen size

  - [x] Mobile @ `375px`

    - [x] BONUS: implement Scroll Snapping to optimize mobile user experience

  - [x] Tablet/Desktop @ `900px`

    - [ ] HTML bookmark navigation links

- [ ] See animations for all animated elements on the page

  

#

Solution URL: [here](https://github.com/Chanda-Abdul/Backstage-Talks-NextJS) | Live Site URL: 

#

## Screenshots

 Mobile Screenshots @ 375px



## My process

### Built with

  

## What I learned

- Next.js

- Animations

## Continued development

## Useful resources

- [Basic API routes example](https://github.com/vercel/next.js/tree/canary/examples/api-routes)

- [Next.js Data Fetching, Dynamic Routes & Metadata | Nextjs 13](https://youtu.be/1n7slbDB1bQ) - Very helpful Youtube Video about Dynamic Routing and Data Fetching .

- 📜 [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

- 🔖[HTML Links - Create Bookmarks](https://www.w3schools.com/html/html_links_bookmarks.asp) - Bookmarks can be useful if a web page is very long. To create a bookmark - first create the bookmark, then add a link to it.  When the link is clicked, the page will scroll down or up to the location with the bookmark.

- [position: fixed](https://www.w3schools.com/css/css_positioning.asp#:~:text=An%20element%20with%20position%3A%20fixed,would%20normally%20have%20been%20located.) - An element with `position: fixed;` is positioned `relative` to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.  A fixed element does not leave a gap in the page where it would normally have been located.

- [Basic concepts of CSS Scroll Snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/) - The CSS Scroll Snap feature provides a way to snap the scrolling to certain points as the user scrolls through a document. This can be helpful in creating a more app-like experience on mobile or even on the desktop for some types of applications.

- [Practical CSS Scroll Snapping](https://css-tricks.com/practical-css-scroll-snapping/) - CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. 

- [How to fade in content as it scrolls into view](https://dev.to/selbekk/how-to-fade-in-content-as-it-scrolls-into-view-10j4) - make content fade in as you scroll into the view. 

- [Revisiting prefers-reduced-motion, the reduced motion media query](https://css-tricks.com/revisiting-prefers-reduced-motion/) -  The article provided some background about `prefers-reduced-motion`, a media query introduced to help people with vestibular and seizure disorders use the web to avoid creating disability-triggering visual effects.

## Author

- Website - [Chanda Abdul](https://www.Chandabdul.dev)

- Frontend Mentor - [@Chanda-Abdul](https://www.frontendmentor.io/profile/Chanda-Abdul)

- GitHub - [github.com/Chanda-Abdul](https://github.com/Chanda-Abdul)