This task involves setting up the basic HTML structure for the “Rock, Paper, Scissors” game, including the creation of an index.html file with boilerplate HTML. It also includes integrating the Bootstrap framework for styling the application. This requires adding a link to Bootstrap’s CSS in the head of the HTML document, and a script tag to import Bootstrap’s JavaScript bundle, which is necessary for certain Bootstrap components to function.
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>Tip: Generate this boilerplate quickly in VSCode. Type ‘html’ in the index.html file and select the html:5 Emmet option. (Make sure to update the title meta tag.)
VSCode supports HTML programming. It includes features such as syntax highlighting, smart completions with IntelliSense, customizable formatting, Emmet abbreviations, and snippets. Learn more about it here.
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.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. The process is straightforward:
<link> tag in the <head> to get Bootstrap’s CSS:<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
><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.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
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, ensuring the browser fetches content that hasn’t been unknowingly manipulated, and controlling how a document loads resources from another origin, respectively.
integrity attribute contains cryptographic hashes that the browser uses to verify the fetched content.crossorigin attribute is used to request a resource with CORS (Cross-Origin Resource Sharing), often set to anonymous, which means the browser requests the resource with CORS but without including credentials.The URL https://cdn.jsdelivr.net links 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. It enhances website performance by enabling quick file serving, such as CSS and JavaScript, to users.