Express Frontend Web Development: Build a Search Game

Create the search_game.html file and initialize the HTML structure with a doctype and basic HTML tags, then open it in your browser to begin building the search game.

Add the search game header and meta information, link to the jQuery CDN, and prepare boilerplate by setting up missing files like jquery.js and the game css to follow along.

Create a masthead header with bootstrap grid, including container, row, and column. Present a 'guess the word' heading and play instructions in a two-column layout with an image and hover-to-zoom.

Apply css styling to the masthead by setting a body background color and white text, and ensure h1, the masthead class, and the p tag are white and centered.

Create a messages container in HTML with two divs for guesses and photos loaded, labeled with IDs, and update them dynamically via JavaScript to display progress and feedback.

Create a form block with an input field and several buttons, wired to JavaScript functions like check, play, and give up, using Bootstrap classes for styling.

Implement pictures and a load more photos button, and set up search game.js and word list.js with functions like show more, give up, play, and check.

Link html and js files with script tags for word list dot js and search game dot js in the correct order to enable the game to use word list.

Initialize global variables for guesses, photos to load, and the query term, then bind the guess field to a keydown listener that triggers on enter.

Create or log in to an Unsplash account, then set up a new application in the developer API. Copy the access key to use with the Unsplash API.

Create your own API key for your project by signing up on Unsplash and confirming your email; avoid reusing the provided key and respect the 50 requests per hour limit.

Learn to perform an ajax http request to the Unsplash api using an api key, building get pics and play functions to fetch and display images.

Diagnose and fix a typo causing 'cannot set properties of undefined' by removing a stray comma in the input, then refresh and press play to validate the bug fix.

Create dynamic image cards from data.results, rendering image links into the pics div using card divs and image elements, with show more not yet implemented and future css styling.

Add a CSS zoom to the image, then enable horizontal image scrolling with a flex card layout and hover effects that translate cards for interactive movement.

Learn to apply a zoom effect to every photo by indexing all pictures from 0 to 20, copy-pasting the solution, and verifying zoomable images across the gallery.

Implement the play function to generate a random number between 1 and 100 for the 100-word list, align the UI by centering content, and clear the guess placeholder and value.

Implement the show more function to load more pictures via get pics. Apply a load more limit, update the loaded count, and use flex-start to keep from the first image.

Learn how the check function validates user guesses in a search game, prompts to press play, handles empty guesses, updates score with a (101−guesses)×loaded formula, and refreshes the UI.

Debug the search game by resetting guesses to zero and load more to one between plays, and clearing the messages container inner HTML after each guess.

Implement the give up function to reset guesses, clear loaded images, reset load counters, display the 'don't give up' message with the revealed answer, and update the UI after reveal.

Learn how to style most elements to create uniform, centered images, center the search form, and conditionally reveal the show more and give up actions while applying responsive message styling.

Fix the WebKit scrollbar by correcting a hyphen and capitalization in the CSS. Deliver the finished app with a downloadable zip of all resources provided in the video resources section.

Rename search_game.html to index.html in your root directory to prepare your site for deployment on the internet.

Log in to GitHub, create a new public repository named search game tutorial, then upload files by dragging or choosing them to add to the repo.

Deploy your search game by connecting a GitHub repository to Netlify, importing the existing repo with index.html, and deploying a site that auto redeploys on changes.