This repository contains source code for a web development workshop where we learn Git, HTML, CSS and Javascript while building a Hollywood-themed quiz game like this.

Before you begin, please sign up for a GitHub account and then fork this repository into your GitHub account by clicking the Fork button in GitHub (usually on the top right).

This web development workshop is broken down into 4 parts for Git, HTML, CSS and JavaScript. Each part of the workshop has a separate branch with some code and instructions in the README. You need to switch to the appropriate branch in GitHub and your code editor, and then follow the instructions in the README of that branch.

At any point of time if you want to return back to this document, switch to the "main" branch.

Below you will find an overview of the different parts of the workshop along with some useful resources at the end. You can start from the beginning of the workshop by switching to the branch workshop/part0-git and following the instructions in the README.

Learn the basics of Git and GitHub in this part. We will also setup a code editor and learn how to make some changes to our source code. Switch to the branch workshop/part0-git and follow the instructions in the README.

Learn the basics of HTML in this part. This is where you need to start once you have Gitpod setup. Switch to the branch workshop/part1-html and follow the instructions in the README.

Learn the basics of adding CSS styles to your HTML document in this part. Switch to the branch workshop/part2-css and follow the instructions in the README.

In this part, we will learn how to think about our game logic and implement it using JavaScript code. Switch to the branch workshop/part3-javascript and follow the instructions in the README.

The completed project is available under the branch workshop/completed.

Make sure you replace the TENOR_API_KEY in js/game.js with your own free API key from Tenor otherwise the gif images won't update.

To preview the web site in a browser using Gitpod, you need to run the following command in the Gitpod terminal,

npx browser-sync -w

Then click on Remote Explorer button, and click on the globe icon for port 3000 to open the website preview in a new browser window.

Here is a video on how to commit and push your changes:

There are many easy ways to deploy a simple static website like this that doesn't require you to host your own server. The easiest would be to use GitHub Pages.

To enable GitHub pages deployments for this repository,

• Click on the Settings button for this repository
• Click on the Pages tab on the left
• Select the branch you want to deploy and click Save
• Check the 'Enforce HTTPS' checkbox to prevent browsers from showing a security warning while visiting your site

Google Search for most questions which have already been answered. Prefer results from Stackoverflow.

MDN Docs for HTML, CSS & JS reference.

JS Fiddle to quickly play around with HTML, CSS & JS.

Google Fonts for fonts hosted on CDN.

Remixicon for icons hosted on CDN.

Pixabay for free photos, music & sound effects.

Unsplash, Pexels for free stock photos.

Namecheap to buy domains.

Flexbox Froggy to learn CSS flex in a fun way.

Stackoverflow to ask new questions.