Frontend Mentor - Entertainment web app solution
👋
Welcome! Thanks for visiting this project repository.This is a solution to the Entertainment web app challenge on Frontend Mentor.
Table of contents
Overview
The challenge
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Navigate between Home, Movies, TV Series, and Bookmarked Shows pages
- Add/Remove bookmarks from all movies and TV series
- Search for relevant shows on all pages
- Bonus: Build this project as a full-stack application
- Bonus: If you're building a full-stack app, we provide authentication screen (sign-up/login) designs if you'd like to create an auth flow
Expected Behaviour
- General
- The navigation menu should be fixed to the left for larger screens. Use the "Desktop - Home" page in the design as a visual reference.
- Home
- The trending section should scroll sideways to reveal other trending shows
- Any search input should search through all shows (i.e. all movies and TV series)
- Movies
- This page should only display shows with the "Movie" category
- Any search input should search through all movies
- TV Series
- This page should only display shows with the "TV Series" category
- Any search input should search through all TV series
- Bookmarked Shows
- This page should display all bookmarked shows from both categories
- Any search input should search through all bookmarked shows
Screenshot
May 29 : Completed Design System
Links
- Solution URL: Solution URL
- Live Site URL: Live Site URL
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- JSON
- Javascript DOM
What I learned
- Project Management
Continued development
Useful resources
Author
- Website - BlueDragn
- Frontend Mentor - @Anshuman
- Twitter - @Ans___human