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 fork this repository into your GitHub account by clicking the Fork button in GitHub (usually on the top right).
You must then choose an editor for coding. There are many choices that will work, but if you're new I highly recommend using the cloud-based IDE Gitpod.
Gitpod is basically a web version of the popular Visual Studio Code with a generous free tier. The best part is that it already has a GitHub integration, a Linux terminal, node, python and numerous other development tools already installed so you don't need to waste any time with installation or configuration.
Once you signup for Gitpod with your GitHub credentials, make sure you have checked the permissions "user:email" and "public_repo" in https://gitpod.io/integrations -> Git Providers -> GitHub -> Edit Permissions.
Then you can open this workshop in a Gitpod workspace by clicking the New Workspace button. Delete the default '.gitpod.yml' file that gets created as it is not necessary.
The web development workshop is broken down into 3 parts with instructions and starter code contained in a git branch. For each part you need to switch to the branch in Gitpod and 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.
The below video shows you how to switch a branch and create a new branch from it using Gitpod. Selecting a branch with the prefix "origin/" will automatically select the local branch without "origin/" for you.
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.
Learn how to react to events and write custom logic using Javascript in this part. 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.
There are many easy ways to deploy a simple static website like this that doesn't require any 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 button
- 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.
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.