Skip to main content

Theme Overview & Prep

I am going to include an initial theme (flix-app-theme) that includes the HTML, CSS and any assets that the website uses. This will allow you to get started quickly and focus on the JavaScript.

The theme includes the following:

  • HTML: All of the html pages including index.html, shows.html, movie-details.html, show-details.html and search.html.
  • CSS: The main stylesheet (style.css) and the spinner.css stylesheet
  • Images: There is a no-image.jpg that we will use for when there is no image available for a movie or TV show. There is also a showcase/slider background image
  • Libraries: There is a lib folder which includes the CSS/JS files for the Swiper Slider that we will use. There is also a font-awesome CSS file as well as a webfonts folder that contains the font files for font-awesome.

Getting Started​

Simply rename the flix-app-theme folder to flix-app and open it in your code editor. Then open the index.html file in VS Code and run it with Live Server. Don't just open the index.html on your filesystem because the CSS and JS files may not load. You should have some kind of server running that will serve the files.

You may want to initialize your git repo at this point and commit the files. You can then create a new repo on GitHub and push the files to it.