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
  • Expected Behaviour
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

• Example resource 1
• Example resource 2

Author

• Website - BlueDragn
• Frontend Mentor - @Anshuman
• Twitter - @Ans___human

Acknowledgments