Setup and Initial Configuration

In this task we set up the basic HTML structure for the “Rock, Paper, Scissors” game. We create an index.html file with boilerplate HTML, and then we bring in the Bootstrap framework to style the application. Bringing in Bootstrap means adding a link to Bootstrap’s CSS in the head of the HTML document, and a script tag for Bootstrap’s JavaScript bundle. Some Bootstrap components need that JavaScript in order to work.

Creating the HTML Structure

Start by creating an index.html file. Use the following boilerplate HTML document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors</title>
  </head>
  <body>

  </body>
</html>

VSCode has good support for writing HTML. It gives you syntax highlighting, smart completions with IntelliSense, customizable formatting, Emmet abbreviations, and snippets.

Recall these tags:

  • <!DOCTYPE html>: This declaration helps with browser compatibility.
  • <html>: This is the root element of an HTML page.
  • <head>: This contains meta-information about the HTML document.
  • <meta charset="UTF-8">: This specifies the character encoding for the HTML document.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: This sets the width of the viewport (the area of the window where the web content can be seen) to the width of the device, and the initial zoom level when the page is first loaded by the browser.
  • <title>: This specifies the title of the HTML document.
  • <body>: This contains the content of the HTML document.

Integrating the Bootstrap Framework

To style this application, we will use the Bootstrap toolkit, a popular CSS framework for developing responsive, mobile-first websites.

We will follow the official Getting started steps to set up Bootstrap in our project:

  1. Add a <link> tag in the <head> to get Bootstrap’s CSS:
<link 
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" 
  rel="stylesheet" 
  integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" 
  crossorigin="anonymous"
/>
  1. Add a <script> tag before the closing </body> to get their JavaScript bundle. Many of Bootstrap’s built-in components require JavaScript to function:
<script 
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" 
  integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" 
  crossorigin="anonymous"
></script>

Remember, the <link> tag links an external CSS file to the HTML document, allowing us to style the webpage. The <script> tag embeds or references external JavaScript code within the HTML document.

The integrity and crossorigin attributes implement Subresource Integrity. The integrity attribute is what tells the browser that the content it fetched was not manipulated along the way. The crossorigin attribute is what controls how the document loads a resource from another origin.

  • The integrity attribute contains cryptographic hashes that the browser uses to verify the fetched content.
  • The crossorigin attribute requests the resource with CORS (Cross-Origin Resource Sharing). It is often set to anonymous, which means the browser requests the resource with CORS but does not include credentials.

The URL https://cdn.jsdelivr.net points to the jsDelivr CDN service. jsDelivr is a free, public, open-source Content Delivery Network (CDN) that hosts files for web developers to use directly in their projects. Serving files such as CSS and JavaScript from a CDN makes them load faster for users.

Checkpoint: Commit your progress.

git add .
git commit -m "rps-01: Add HTML structure with Bootstrap"
git push