AWS Cloud Foundations Explorer
Build a cloud foundations site with GitHub-to-AWS continuous deployment.
Introduction
30 Second Summary
Recruiters often see a project link before they meet the person behind it. A clear demonstration turns course knowledge into evidence they can inspect.
In this project, you will build a recruiter-friendly AWS Cloud Foundations Explorer that explains six foundational services through practical scenarios. You will publish it from GitHub to AWS Amplify Hosting through continuous deployment.
What You'll Build
When you finish, a recruiter can open your live HTTPS site to compare six service choices before testing each decision in the interactive quiz.
By the end of this project, you'll have:
- A live HTTPS explorer that rebuilds from your documented public GitHub repository after each Git push.
- A six-service guide that helps visitors choose the right AWS service for a practical need.
- An interactive service quiz that gives immediate feedback across six practical scenarios.
- Secret Mission: Add score tracking so the quiz reports progress across all six scenarios.
Are there any prerequisites?
This project assumes you have completed your two planned AWS Educate foundation courses. Step 1 covers AWS account setup if needed before confirming access to AWS Amplify Hosting.
Before We Start
A clear goal keeps this project focused on showing your cloud knowledge instead of growing into an oversized application. Before the hands-on work begins, commit to what you are building and why it matters.
Set Up Your Cloud Portfolio Workspace
A public portfolio needs a reliable path from source files to a live cloud URL. Confirming access first protects the project's $0 scope.
In this step, you will confirm access to AWS Amplify Hosting. You will create a clean GitHub repository.
Your local Git workspace will stay open in Visual Studio Code. This gives every future file a clear home.
In this step, get ready to:
- Confirm that AWS Amplify Hosting is available through your AWS account.
- Create an empty public GitHub repository for the explorer.
- Build the local folder structure before linking it to GitHub.
Confirm AWS Amplify access
The AWS Management Console is where you manage AWS services. This checkpoint confirms that your account can reach the hosting workflow before you build around it.
Account setup can feel high stakes. The AWS Free plan does not charge unless you convert to Paid or activate paid-only services.
The Free plan lasts up to six months. It can close sooner if its credits run out.
Why AWS Amplify Hosting?
Amplify provides Git-based continuous deployment to an AWS content delivery network. It also publishes the site through HTTPS.
Direct Amazon S3 website hosting requires public access. Its website endpoint supports HTTP only.
- Create an AWS Free plan account from the official AWS Free Tier page if you do not have a personal AWS account.
- Sign in to the AWS Management Console.
- Use the console's service search to open AWS Amplify.
✔️ I See the All Apps Page
- Select New app.
- Select Host web app.
- Confirm that GitHub appears as a Git provider.
Seeing GitHub in the provider list confirms that you can begin an Amplify Hosting deployment. Stop here without authorizing a repository.
ⓧ I See a First-App Page
- Select Deploy an app.
- Confirm that GitHub appears as a Git provider.
The provider list confirms that your account can begin a Hosting deployment. Stop here without connecting a repository.
ⓧ Amplify Is Unavailable
Some AWS Educate sandboxes do not expose Amplify or persistent resources. Your GitHub portfolio can continue without an AWS deployment claim.
- Continue with the GitHub repository and local workspace.
- Record the Amplify limitation in the checkpoint below.
Can't Reach the Hosting Workflow?
- Confirm that you are signed in to the intended AWS account.
- Search for AWS Amplify again from the AWS Management Console.
- Treat a missing service in an AWS Educate sandbox as a deployment limitation.
Help me check why AWS Amplify Hosting is unavailable in my account.
Create the public GitHub repository
The remote repository becomes the public source of truth for your portfolio. Keeping it empty prevents GitHub-generated files from conflicting with the local project.
- Sign in to GitHub.
- Choose New repository.
- Enter aws-cloud-foundations-explorer as the repository name.
- Select Public as the visibility.
- Leave the README initialization option disabled.
- Leave the license initialization option disabled.
- Leave the .gitignore initialization option disabled.
- Choose Create repository.
GitHub now shows the repository's Quick Setup page. The empty page confirms that no starter files were generated.
- Copy the repository URL from the Quick Setup page.
- Paste the copied repository URL here: REMOTE-URL.
Your public source-control home is ready. The local workspace can now connect to it without a merge conflict.
Build and connect the local workspace
A predictable folder tree keeps code files separate from documentation and evidence. Small placeholders also make the files visible to Git before the real content is added.
- Press the Super key to open Linux application search.
- Type Visual Studio Code into the search bar.
- Press Enter to launch Visual Studio Code.
- Select File from the menu bar.
- Select Open Folder....
- Choose your Desktop folder.
- Select New Folder.
- Enter aws-cloud-foundations-explorer as the folder name.
- Select Select Folder to open the new folder.
- Select Yes, I trust the authors if the Workspace Trust dialog appears.
- Select View from the menu bar.
- Select Terminal to open the integrated terminal.
The terminal starts inside the open aws-cloud-foundations-explorer folder. Commands run here create files in the same workspace shown by the Explorer.
- Create the folder tree and placeholder files by running these commands:
mkdir css
mkdir js
mkdir assets
mkdir docs
mkdir docs/screenshots
echo "Created as the project README placeholder, ready for the documented portfolio content." > README.md
echo "Created as the explorer page placeholder." > index.html
echo "Created as the stylesheet placeholder." > css/styles.css
echo "Created as the quiz script placeholder." > js/app.js
echo "Created as the architecture diagram placeholder." > assets/architecture.svg
echo "Created as the architecture documentation placeholder." > docs/architecture.md
echo "Created as the cloud concepts documentation placeholder." > docs/cloud-concepts.mdWhat Do These Commands Create?
- The css/ folder holds the stylesheet placeholder.
- The js/ folder holds the quiz script placeholder.
- The assets/ folder holds the architecture diagram placeholder.
- The docs/ folder holds written documentation and future screenshots.
- Check the Explorer sidebar for the new files and folders.
You should see eight placeholder files across the workspace. The docs/screenshots/ folder should be empty.
Missing a Placeholder File?
- Confirm that the terminal prompt points to the aws-cloud-foundations-explorer folder.
- Expand the css/ folder in the Explorer.
- Expand the js/ folder in the Explorer.
- Expand the assets/ folder in the Explorer.
- Expand the docs/ folder in the Explorer.
Help me find a missing project placeholder in Visual Studio Code.
✔️ Awesome, I've Got Everything
Great. Your workspace contains the exact placeholders needed for the next build step.
ⓧ I'd Like to Double Check the Full Code
- Compare each placeholder file with the exact contents below:
Created as the project README placeholder, ready for the documented portfolio content.README Placeholder
This placeholder reserves README.md for the documented portfolio content.
Created as the explorer page placeholder.Explorer Page Placeholder
This placeholder reserves index.html for the first visible explorer page.
Created as the stylesheet placeholder.Stylesheet Placeholder
This placeholder reserves css/styles.css for the responsive design.
Created as the quiz script placeholder.Quiz Script Placeholder
This placeholder reserves js/app.js for the interactive quiz.
Created as the architecture diagram placeholder.Architecture Diagram Placeholder
This placeholder reserves assets/architecture.svg for the deployment diagram.
Created as the architecture documentation placeholder.Architecture Notes Placeholder
This placeholder reserves docs/architecture.md for the architecture explanation.
Created as the cloud concepts documentation placeholder.Cloud Notes Placeholder
This placeholder reserves docs/cloud-concepts.md for the cloud foundations notes.
Screenshot Evidence Folder
The docs/screenshots/ folder stays empty for now. It is ready for live-site.png evidence.
The same folder will also hold amplify-deployment.png evidence.
- Check your installed Git version by running this command:
git --versionWhat Does This Command Do?
The command prints the installed Git version. That result determines which verified initialization command fits your installation.
✔️ I See a Recent Git Version
Git 2.28.0 or later supports choosing the initial branch during repository creation.
- Initialize the repository on branch main by running this command:
git init -b mainWhy This Initialization Works
The -b main option creates the repository with main as its initial branch.
You should see confirmation that Git initialized an empty repository in the open project folder.
ⓧ I See an Older Git Version
Git 2.27.1 or earlier needs a fallback that sets the branch reference after initialization.
- Initialize the repository on branch main by running this command:
git init && git symbolic-ref HEAD refs/heads/mainHow the Fallback Works
The first command initializes the repository. The second command points its branch reference at main.
You should see confirmation that Git initialized an empty repository in the open project folder.
Git Initialization Failed?
- Confirm that the terminal is inside the aws-cloud-foundations-explorer folder.
- Choose the initialization command that matches the version printed above.
- Check the command for missing spaces before running it again.
Help me initialize this project on the main branch.
- Add your copied GitHub repository URL as origin by running this command:
git remote add origin [[REMOTE_URL="REMOTE-URL"]]What Is Origin?
The name origin identifies the GitHub repository connected to this local workspace. Future pushes can use that short remote name.
Before you run the final check, which branch do you expect Git to report? Which remote name should point to GitHub?
- Verify the local repository and remote connection by running these commands:
git status
git remote -vWhat Should You See?
- The status reports branch main.
- The project files appear as untracked.
- The remote list shows origin beside your GitHub repository URL.
- The empty docs/screenshots/ folder does not appear because Git tracks files.
Final Git Check Looks Different?
- Run the matching initialization command again if the branch is missing.
- Confirm that your repository URL replaced REMOTE-URL in the remote command.
- Check that the terminal prompt still points to aws-cloud-foundations-explorer.
Help me fix my final Git status or origin check.
That foundation is locked in. Next, you will turn index.html into the first visible version of your cloud foundations explorer.
Build the First Explorer Page
Your repository now has a clean source-control foundation. The placeholder files are ready to become a project that someone can see in a browser.
In this step, HTML turns index.html into the first visible version of your explorer. You will keep the page plain so its structure stays clear before styling or cloud hosting enters the project.
In this step, get ready to:
- Create a valid HTML document with metadata and a page title.
- Build the header with navigation links and a hero introduction.
- Add four placeholder sections and verify the page in your browser.
Create the HTML document shell
An HTML document shell gives the browser the metadata and structure it needs to interpret a page. It also connects index.html to the stylesheet you will build in the next step.
- Select index.html from the file list in Visual Studio Code.
- Replace the placeholder sentence with this document shell:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta
name="description"
content="An interactive beginner guide to AWS cloud foundations and service selection."
>
<title>AWS Cloud Foundations Explorer</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
</body>
</html>What does this document shell do?
- The document type tells the browser to interpret the file as modern HTML.
- The metadata gives the page a character set and a responsive viewport.
- The description summarizes the page for tools that inspect its metadata.
- The stylesheet link points to css/styles.css so visual rules can be added later.
- Save index.html.
- Right-click index.html in the Visual Studio Code file list.
- Use the context menu option that reveals the file in your Linux file manager.
- Double-click index.html in the file manager.
The browser tab shows AWS Cloud Foundations Explorer. That foundation is in place: your browser can read the document title and metadata.
Browser tab missing the title?
- Confirm that you opened index.html from the aws-cloud-foundations-explorer folder.
- Check that the page title remains inside the opening and closing title tags.
- Confirm that the file name ends with .html.
Help me fix the missing browser tab title.
Add the page header and navigation
The header gives visitors an immediate description of the project. Its navigation links point to section identifiers that you will add below the hero.
- Return to index.html in Visual Studio Code.
- Place your cursor between the opening and closing body tags.
- Add this header structure:
<header class="site-header">
<nav class="nav-container" aria-label="Primary navigation">
<a class="brand" href="#top">Cloud Foundations</a>
<div class="nav-links">
<a href="#concepts">Concepts</a>
<a href="#services">Services</a>
<a href="#quiz">Quiz</a>
</div>
</nav>
<div class="hero" id="top">
<h1>AWS Cloud Foundations Explorer</h1>
<p class="hero-copy">
Explore cloud concepts, compare foundational AWS services, and test
which service fits a practical scenario.
</p>
</div>
</header>What does this header do?
- The navigation gives visitors links to the Concepts, Services, and Quiz sections.
- Each link uses a page fragment that matches a section identifier later in the document.
- The hero heading names the project.
- The introduction explains what visitors can explore and test.
- Save index.html.
- Return to the browser tab containing your local page.
- Refresh the page.
You have your first visible win. The browser now shows the AWS Cloud Foundations Explorer heading, its introduction, and three navigation links.
Header missing after refresh?
- Check that the header sits between the opening and closing body tags.
- Confirm that every opening header, navigation, division, and paragraph tag has a matching closing tag.
- Make sure the browser opened the same index.html file that you edited.
Help me find why my HTML header is missing.
Add the placeholder sections and verify the page
Page sections create destinations for the navigation links. These first sections contain headings and short placeholder copy that later steps expand into cards, architecture evidence, and a quiz.
- Place your cursor below the closing header tag in index.html.
- Add the Concepts and Services sections:
<main id="main-content">
<section class="section" id="concepts">
<div class="section-heading">
<p class="eyebrow">Cloud basics</p>
<h2>Four ideas behind cloud computing</h2>
</div>
</section>
<section class="section section-alt" id="services">
<div class="section-heading">
<p class="eyebrow">Service selection</p>
<h2>Six foundational AWS services</h2>
<p>Start with the problem, then choose the service category that solves it.</p>
</div>
</section>
</main>How do these sections connect?
- The main element groups the page content that follows the header.
- The concepts identifier gives the Concepts navigation link a destination.
- The services identifier gives the Services navigation link a destination.
- The headings preview the cloud topics that the next step develops.
- Save index.html.
- Refresh your local page.
- Click the Concepts navigation link.
- Click the Services navigation link.
The page now has real navigation destinations. Each link moves the browser to its matching plain section heading.
Navigation links staying at the top?
- Check that the Concepts link points to #concepts.
- Check that the Services link points to #services.
- Confirm that each section uses the matching identifier without the hash symbol.
Help me repair my section navigation links.
Two more destinations complete the page outline. Architecture explains the deployment flow later, while Quiz becomes the interactive knowledge check.
- Place your cursor before the closing main tag in index.html.
- Add the Architecture and Quiz sections:
<section class="section architecture-section" id="architecture">
<div class="section-heading">
<p class="eyebrow">Project architecture</p>
<h2>From a Git push to a public site</h2>
</div>
</section>
<section class="section section-alt" id="quiz">
<div class="quiz-panel">
<div class="section-heading">
<p class="eyebrow">Knowledge check</p>
<h2>Choose the right AWS service</h2>
</div>
</div>
</section>What do these placeholders establish?
- The Architecture section reserves a place for the GitHub-to-hosting deployment flow.
- The Quiz section reserves a place for the service-selection interaction.
- The quiz identifier completes the destination used by the Quiz navigation link.
- Save index.html.
Before you refresh, which four section headings do you expect to see below the hero?
- Return to your local browser tab.
- Refresh the page.
You should see the AWS Cloud Foundations Explorer heading, its introduction, and links for Concepts, Services, and Quiz. Below the hero, you should see plain headings for cloud ideas, AWS services, the deployment architecture, and the knowledge check.
Missing one of the four sections?
- Confirm that both new sections sit before the closing main tag.
- Check that the Architecture and Quiz section tags both have matching closing tags.
- Compare the order of your sections with the full file below.
Help me find the missing section in my HTML page.
✔️ Awesome, I've got everything!
Your first explorer page is saved and visible in the browser.
ⓧ I'd like to double check the full code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta
name="description"
content="An interactive beginner guide to AWS cloud foundations and service selection."
>
<title>AWS Cloud Foundations Explorer</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="site-header">
<nav class="nav-container" aria-label="Primary navigation">
<a class="brand" href="#top">Cloud Foundations</a>
<div class="nav-links">
<a href="#concepts">Concepts</a>
<a href="#services">Services</a>
<a href="#quiz">Quiz</a>
</div>
</nav>
<div class="hero" id="top">
<h1>AWS Cloud Foundations Explorer</h1>
<p class="hero-copy">
Explore cloud concepts, compare foundational AWS services, and test
which service fits a practical scenario.
</p>
</div>
</header>
<main id="main-content">
<section class="section" id="concepts">
<div class="section-heading">
<p class="eyebrow">Cloud basics</p>
<h2>Four ideas behind cloud computing</h2>
</div>
</section>
<section class="section section-alt" id="services">
<div class="section-heading">
<p class="eyebrow">Service selection</p>
<h2>Six foundational AWS services</h2>
<p>Start with the problem, then choose the service category that solves it.</p>
</div>
</section>
<section class="section architecture-section" id="architecture">
<div class="section-heading">
<p class="eyebrow">Project architecture</p>
<h2>From a Git push to a public site</h2>
</div>
</section>
<section class="section section-alt" id="quiz">
<div class="quiz-panel">
<div class="section-heading">
<p class="eyebrow">Knowledge check</p>
<h2>Choose the right AWS service</h2>
</div>
</div>
</section>
</main>
</body>
</html>Your first explorer page now works locally. Next, you will turn this plain structure into a responsive cloud foundations guide with service cards and deployment architecture.
Create the Cloud Foundations Guide
Your first page proves that the browser can render your HTML. It also gives visitors a clear route through the explorer.
The plain placeholders do not yet demonstrate your understanding of cloud computing. In this step, you will turn verified concepts and service choices into a responsive guide that a recruiter can scan quickly.
In this step, get ready to:
- Explain four cloud foundations through concise concept cards.
- Compare six AWS services through practical use cases.
- Document the deployment architecture and project boundaries.
Add the cloud guide content
Cards divide the guide into small explanations that visitors can scan. The first group covers the ideas that shape every service choice.
- In index.html, locate the placeholder section for concepts.
- Replace the complete Concepts placeholder section with this section:
<section class="section" id="concepts">
<div class="section-heading">
<p class="eyebrow">Cloud basics</p>
<h2>Four ideas behind cloud computing</h2>
</div>
<div class="card-grid concept-grid">
<article class="card">
<h3>On-demand resources</h3>
<p>Provision compute, storage, databases, and other resources when they are needed.</p>
</article>
<article class="card">
<h3>Pay as you go</h3>
<p>Use individual services for as long as they are needed and pay for the resources consumed.</p>
</article>
<article class="card">
<h3>Regions and Availability Zones</h3>
<p>A Region is a separate geographic area. Availability Zones are isolated locations inside a Region.</p>
</article>
<article class="card">
<h3>Shared responsibility</h3>
<p>AWS secures the cloud infrastructure. Customers secure their data, access, and service configuration.</p>
</article>
</div>
</section>What does this section explain?
- The card about on-demand resources explains why cloud capacity can follow a changing need.
- The pay-as-you-go card connects resource consumption to pricing awareness.
- The infrastructure card distinguishes geographic Regions from isolated Availability Zones.
- The shared responsibility card identifies the customer's responsibility for data access and configuration.
- Save index.html.
- Refresh the local browser page. You should see four plain concept cards under the Cloud basics label.
Concept cards missing?
- Check that the section still uses id="concepts".
- Confirm that every opening article element has a matching closing tag.
Ask for help checking the section structure: Why are my concept cards missing from index.html?
The service guide connects each scenario to a specific AWS product. Each card names the category before explaining when that service fits.
- Locate the placeholder section for services in index.html.
- Replace the complete Services placeholder section with this section:
<section class="section section-alt" id="services">
<div class="section-heading">
<p class="eyebrow">Service selection</p>
<h2>Six foundational AWS services</h2>
<p>Start with the problem, then choose the service category that solves it.</p>
</div>
<div class="card-grid service-grid">
<article class="card service-card">
<span class="service-category">Compute</span>
<h3>Amazon EC2</h3>
<p>Provides on-demand, scalable computing capacity as virtual servers.</p>
<p class="use-case">Use it when you need control over a virtual server.</p>
</article>
<article class="card service-card">
<span class="service-category">Storage</span>
<h3>Amazon S3</h3>
<p>Stores data as objects inside buckets with scalable storage and access controls.</p>
<p class="use-case">Use it for files, backups, static assets, and data storage.</p>
</article>
<article class="card service-card">
<span class="service-category">Networking</span>
<h3>Amazon VPC</h3>
<p>Provides a logically isolated virtual network for AWS resources.</p>
<p class="use-case">Use it to define network boundaries, subnets, routes, and connectivity.</p>
</article>
<article class="card service-card">
<span class="service-category">Relational database</span>
<h3>Amazon RDS</h3>
<p>Makes it easier to set up, operate, and scale a relational database.</p>
<p class="use-case">Use it when an application needs tables, relationships, and SQL.</p>
</article>
<article class="card service-card">
<span class="service-category">NoSQL database</span>
<h3>Amazon DynamoDB</h3>
<p>Provides a serverless, fully managed, distributed NoSQL database.</p>
<p class="use-case">Use it for key-value or document workloads that need consistent scaling.</p>
</article>
<article class="card service-card">
<span class="service-category">Identity and access</span>
<h3>AWS Identity and Access Management</h3>
<p>Controls who is authenticated and authorized to access AWS resources.</p>
<p class="use-case">Use it to manage identities, roles, and permissions.</p>
</article>
</div>
</section>How do the services differ?
- Amazon EC2 provides virtual servers. Amazon S3 stores objects in buckets.
- Amazon VPC defines an isolated virtual network. Amazon RDS manages relational databases.
- Amazon DynamoDB provides a managed NoSQL database. AWS Identity and Access Management controls authentication and authorization.
- Save index.html.
- Refresh the local browser page. You should see six service descriptions under the Service selection label.
Service cards out of place?
- Confirm that all six service articles sit inside the element with class="card-grid service-grid".
- Check that the Services section closes before the Architecture section begins.
Ask for help checking the card hierarchy: Why are my AWS service cards appearing outside the Services section?
Style the guide and draw the deployment flow
A responsive layout keeps the guide readable across wide and narrow screens. The stylesheet also adds visible keyboard focus so visitors can identify the active link or button.
- Replace the placeholder contents of css/styles.css with this stylesheet:
:root {
color-scheme: light;
--navy: #17243f;
--navy-light: #243859;
--orange: #ff9900;
--orange-dark: #c77700;
--ink: #1f2937;
--muted: #596579;
--surface: #ffffff;
--surface-alt: #f2f5f9;
--border: #d8dee9;
--success: #116b45;
--shadow: 0 14px 35px rgba(23, 36, 63, 0.12);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
color: var(--ink);
background: var(--surface);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
a {
color: inherit;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible {
outline: 3px solid var(--orange);
outline-offset: 3px;
}
.skip-link {
position: absolute;
top: -60px;
left: 1rem;
z-index: 10;
padding: 0.75rem 1rem;
color: var(--navy);
background: var(--surface);
border-radius: 0.5rem;
}
.skip-link:focus {
top: 1rem;
}
.site-header {
color: #ffffff;
background: linear-gradient(135deg, var(--navy), var(--navy-light));
}
.nav-container,
.hero,
.section,
.site-footer {
width: min(1120px, calc(100% - 2rem));
margin-inline: auto;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: 1.25rem;
}
.brand {
font-weight: 800;
text-decoration: none;
}
.nav-links {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.nav-links a {
color: #dfe8f5;
text-decoration: none;
}
.nav-links a:hover {
color: #ffffff;
}
.hero {
padding-block: 5rem 6rem;
text-align: center;
}
.deployment-badge,
.service-category {
display: inline-block;
margin: 0;
color: var(--navy);
background: var(--orange);
border-radius: 999px;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.04em;
padding: 0.35rem 0.75rem;
text-transform: uppercase;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1 {
max-width: 820px;
margin: 1.25rem auto 1rem;
font-size: clamp(2.4rem, 7vw, 4.8rem);
line-height: 1.05;
}
h2 {
color: var(--navy);
font-size: clamp(1.8rem, 4vw, 2.7rem);
line-height: 1.15;
}
h3 {
color: var(--navy);
}
.hero-copy {
max-width: 700px;
margin: 0 auto 2rem;
color: #dfe8f5;
font-size: 1.1rem;
}
.primary-button,
.secondary-button {
display: inline-block;
border: 0;
border-radius: 0.65rem;
cursor: pointer;
font: inherit;
font-weight: 800;
padding: 0.8rem 1.1rem;
text-decoration: none;
}
.primary-button {
color: var(--navy);
background: var(--orange);
}
.primary-button:hover {
background: #ffad2f;
}
.section {
padding-block: 4.5rem;
}
.section-alt {
width: 100%;
max-width: none;
padding-inline: max(1rem, calc((100% - 1120px) / 2));
background: var(--surface-alt);
}
.section-heading {
max-width: 720px;
margin-bottom: 2rem;
}
.eyebrow {
margin-bottom: 0.45rem;
color: var(--orange-dark);
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.card-grid {
display: grid;
gap: 1rem;
}
.concept-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.service-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card {
padding: 1.4rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
box-shadow: var(--shadow);
}
.service-card {
border-top: 5px solid var(--orange);
}
.service-category {
margin-bottom: 1rem;
color: #6f4300;
background: #fff0d1;
}
.use-case {
margin-bottom: 0;
color: var(--muted);
font-weight: 700;
}
.architecture-section {
text-align: center;
}
.architecture-section .section-heading {
margin-inline: auto;
}
.architecture-image {
display: block;
width: min(100%, 1000px);
height: auto;
margin: 0 auto 1.5rem;
border: 1px solid var(--border);
border-radius: 1rem;
box-shadow: var(--shadow);
}
.architecture-copy {
max-width: 760px;
margin-inline: auto;
color: var(--muted);
}
.quiz-panel {
max-width: 820px;
margin-inline: auto;
padding: clamp(1.25rem, 5vw, 2.5rem);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
box-shadow: var(--shadow);
}
.scenario {
color: var(--navy);
font-size: 1.2rem;
font-weight: 800;
}
.answer-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.answer-button {
min-height: 3.25rem;
padding: 0.75rem;
color: var(--navy);
background: var(--surface);
border: 2px solid var(--border);
border-radius: 0.65rem;
cursor: pointer;
font: inherit;
font-weight: 800;
}
.answer-button:hover:not(:disabled) {
border-color: var(--orange);
}
.answer-button:disabled {
cursor: not-allowed;
opacity: 0.7;
}
.quiz-result {
min-height: 3rem;
margin-block: 1.25rem;
color: var(--success);
font-weight: 800;
}
.secondary-button {
color: #ffffff;
background: var(--navy);
}
.site-footer {
display: flex;
justify-content: space-between;
gap: 1rem;
padding-block: 2rem;
color: var(--muted);
font-size: 0.9rem;
}
.site-footer p {
margin: 0;
}
@media (max-width: 850px) {
.concept-grid,
.service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.nav-container,
.site-footer {
align-items: flex-start;
flex-direction: column;
}
.hero {
padding-block: 3.5rem 4rem;
text-align: left;
}
.hero-copy {
margin-inline: 0;
}
.concept-grid,
.service-grid,
.answer-grid {
grid-template-columns: 1fr;
}
}What does this stylesheet do?
The variables keep the color palette consistent across the header, cards, controls, and feedback. Shared layout rules keep the content centered without fixing it to one screen size.
The grid rules show more columns when space is available. The media queries reduce those grids to one column on narrow screens.
- Save css/styles.css.
- Refresh the local browser page. You should see a navy header plus white cards with borders and shadows.
Page still looks plain?
- Confirm that index.html still links to css/styles.css.
- Check that the stylesheet begins with the :root selector.
- Reload the browser after saving the stylesheet.
Ask for help tracing the stylesheet: Why is css/styles.css not changing my local page?
The architecture section turns your deployment workflow into a diagram. Visitors can follow the source from your editor to the public site without reading the full documentation first.
- In index.html, locate the Architecture placeholder section.
- Replace the complete Architecture placeholder section with this section:
<section class="section architecture-section" id="architecture">
<div class="section-heading">
<p class="eyebrow">Project architecture</p>
<h2>From a Git push to a public site</h2>
</div>
<img
class="architecture-image"
src="assets/architecture.svg"
alt="Developer pushes to GitHub, AWS Amplify Hosting deploys the site, and visitors open the HTTPS URL."
>
<p class="architecture-copy">
GitHub stores the source and change history. AWS Amplify Hosting reads
the connected branch, deploys the static files, and publishes an HTTPS URL.
</p>
</section>Why include alternative text?
The alt text describes the same deployment flow shown in the diagram. Visitors using assistive technology receive the architecture information without depending on the image.
- Replace the placeholder contents of assets/architecture.svg with this diagram:
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="420" viewBox="0 0 1200 420" role="img" aria-labelledby="title description">
<title id="title">AWS Cloud Foundations Explorer deployment architecture</title>
<description id="description">A developer pushes source code to GitHub. AWS Amplify Hosting deploys the connected branch. A visitor opens the public HTTPS site.</description>
<defs>
<linearGradient id="background" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#17243f"/>
<stop offset="1" stop-color="#243859"/>
</linearGradient>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#ff9900"/>
</marker>
</defs>
<rect width="1200" height="420" rx="28" fill="url(#background)"/>
<text x="600" y="62" fill="#ffffff" font-family="system-ui, sans-serif" font-size="30" font-weight="700" text-anchor="middle">Continuous deployment flow</text>
<g font-family="system-ui, sans-serif" text-anchor="middle">
<rect x="60" y="135" width="250" height="150" rx="20" fill="#ffffff"/>
<text x="185" y="195" fill="#17243f" font-size="25" font-weight="700">Developer</text>
<text x="185" y="232" fill="#596579" font-size="18">Visual Studio Code and Git</text>
<rect x="475" y="135" width="250" height="150" rx="20" fill="#ffffff"/>
<text x="600" y="195" fill="#17243f" font-size="25" font-weight="700">GitHub</text>
<text x="600" y="232" fill="#596579" font-size="18">Public source repository</text>
<rect x="890" y="135" width="250" height="150" rx="20" fill="#ffffff"/>
<text x="1015" y="185" fill="#17243f" font-size="25" font-weight="700">AWS Amplify Hosting</text>
<text x="1015" y="224" fill="#596579" font-size="18">Build, deploy, and HTTPS site</text>
</g>
<line x1="315" y1="210" x2="460" y2="210" stroke="#ff9900" stroke-width="8" marker-end="url(#arrow)"/>
<line x1="730" y1="210" x2="875" y2="210" stroke="#ff9900" stroke-width="8" marker-end="url(#arrow)"/>
<text x="387" y="185" fill="#ffffff" font-family="system-ui, sans-serif" font-size="18" text-anchor="middle">git push</text>
<text x="802" y="185" fill="#ffffff" font-family="system-ui, sans-serif" font-size="18" text-anchor="middle">connected branch</text>
<text x="600" y="355" fill="#dfe8f5" font-family="system-ui, sans-serif" font-size="20" text-anchor="middle">Visitors open the AWS-provided public HTTPS URL</text>
</svg>How does the flow work?
You edit the source in Visual Studio Code. Git records the changes before GitHub stores the public source.
AWS Amplify Hosting reads the connected branch and publishes the static files through an HTTPS site. The arrows make that continuous deployment path visible.
- Save index.html.
- Save assets/architecture.svg.
- Refresh the local browser page. You should see the deployment diagram below the Project architecture heading.
Architecture image missing?
- Confirm that the image source is assets/architecture.svg.
- Check that architecture.svg is inside the existing assets folder.
- Confirm that the final line of the diagram contains the closing svg tag.
Ask for help checking the image path: Why is assets/architecture.svg broken in my local index.html page?
Document the architecture and verify the guide
The visual guide shows what the project teaches. The documentation records why each service fits and where the project's security boundary sits.
- Replace the placeholder contents of docs/cloud-concepts.md with these concept sections:
# Cloud Concepts and Service Choices
## Cloud computing
Cloud computing provides on-demand access to compute, storage, databases, applications, and other IT resources over the internet with pay-as-you-go pricing.
## Pay as you go
AWS pricing generally lets customers use individual services for as long as needed and pay for the resources consumed. Cost awareness still matters because paid services or usage beyond an allowance can create charges on a paid account.
## Regions and Availability Zones
An AWS Region is a separate geographic area. Each Region has multiple isolated locations called Availability Zones. Many AWS resources belong to the selected Region, so builders must pay attention to their current Region in the AWS Management Console.
## Shared responsibility
AWS is responsible for security of the cloud infrastructure. Customers are responsible for security in the cloud, including their data, access permissions, and service configuration. The exact split changes with the service being used.Why record these concepts?
The notes connect cloud definitions to decisions a builder makes. They also show that cost awareness and security responsibility continue after a resource is created.
- Append these service choices to docs/cloud-concepts.md below the shared responsibility section:
## Service guide
| Need | AWS service | Reason |
| --- | --- | --- |
| On-demand virtual server | Amazon EC2 | Provides scalable computing capacity as virtual servers |
| Object storage | Amazon S3 | Stores data as objects in buckets |
| Isolated virtual network | Amazon VPC | Defines virtual networks, subnets, routing, and connectivity |
| Managed relational database | Amazon RDS | Manages common relational database administration tasks |
| Managed NoSQL database | Amazon DynamoDB | Provides a serverless, fully managed, distributed NoSQL database |
| Authentication and authorization | AWS Identity and Access Management | Controls access to AWS resources |
## Project connection
The website source lives in GitHub. AWS Amplify Hosting connects to the repository and deploys the static site. This demonstrates managed cloud hosting and continuous deployment without creating a server to patch or administer.What does the table prove?
Each row starts with a practical need before naming a service. This makes the documentation evidence of service selection instead of a list of product names.
- Save docs/cloud-concepts.md.
- Read the saved file in the editor. You should see four concept sections plus a six-row service table.
Markdown table not aligned?
- Confirm that every table row begins with a vertical bar.
- Check that the separator row remains directly below the header row.
Ask for help checking the table syntax: Why is my service guide table not rendering correctly in Markdown?
- Replace the placeholder contents of docs/architecture.md with this architecture record:
# Architecture
## Flow
1. The developer edits HTML, CSS, JavaScript, and documentation in Visual Studio Code.
2. Git records the local changes.
3. GitHub stores the public repository and its commit history.
4. The Amplify GitHub App receives read-only access to the selected repository.
5. AWS Amplify Hosting deploys the connected `main` branch.
6. Visitors open the AWS-provided HTTPS URL.
## Why this architecture
AWS Amplify Hosting provides a managed Git-based deployment workflow. It keeps this beginner project focused on source control, deployment, and cloud concepts instead of server administration.
## Security boundary
This is a static website with no backend and no user-data collection. The repository must not contain passwords, AWS access keys, GitHub tokens, account IDs, or other secrets. The Amplify GitHub App should be authorized only for this repository.
## Cost boundary
The project uses the AWS-provided default domain. It does not enable a custom domain, AWS WAF, a database, or server-side compute. Delete the Amplify app when the live site is no longer needed.What do the boundaries capture?
The security section records what must stay outside the public repository. The cost section records which optional services remain outside this project's scope.
- Save docs/architecture.md.
- Read the saved file in the editor. You should see Flow, Why this architecture, Security boundary, and Cost boundary sections.
Before the final check, predict how the card grids will change when the browser becomes narrow. Which parts should move into a single column?
- Refresh the local browser page.
- Reduce the browser width until the page resembles a narrow mobile screen.
You should see four styled concept cards, six styled service cards, and the architecture image. At a narrow width, the cards should form one column without horizontal overflow.
- Restore the browser to its normal width.
- Select the Concepts navigation link. The browser should move to the four cloud concept cards.
- Select the Services navigation link. The browser should move to the six AWS service cards.
Seeing horizontal overflow?
- Confirm that the universal selector sets box-sizing: border-box.
- Check that the mobile media query changes the card grids to 1fr.
- Confirm that the architecture image uses a maximum width of 100%.
Ask for help identifying the wide element: What is causing horizontal overflow in my responsive explorer?
Strong work. Your explorer now turns cloud foundations into a responsive visual guide with supporting architecture notes. Next, you will add the six-scenario quiz and experience why a polished local project still needs cloud hosting before anyone else can open it.
Add the Interactive Quiz
Your responsive explorer already turns cloud concepts into a guide that someone can scan. The next goal is to let visitors test those concepts through practical service choices.
A static guide cannot reveal whether someone can apply what they read. In this step, JavaScript turns the quiz section into a six-scenario knowledge check with immediate feedback.
In this step, get ready to:
- Build the quiz controls for six AWS service choices.
- Render each scenario with JavaScript.
- Test correct answers, incorrect answers, keyboard focus, mobile layout, and local availability.
Build the quiz interface
The quiz needs a prompt, six answer controls, a feedback region, and a way to advance. The HTML supplies these elements before the script connects them.
- In the open index.html file, find the placeholder quiz section.
- Replace the placeholder quiz section with this quiz interface:
<section class="section section-alt" id="quiz">
<div class="quiz-panel">
<div class="section-heading">
<p class="eyebrow">Knowledge check</p>
<h2>Choose the right AWS service</h2>
</div>
<p class="scenario" id="scenario-text"></p>
<div class="answer-grid" id="answer-grid" role="group" aria-label="AWS service choices">
<button class="answer-button" type="button" data-service="ec2">Amazon EC2</button>
<button class="answer-button" type="button" data-service="s3">Amazon S3</button>
<button class="answer-button" type="button" data-service="vpc">Amazon VPC</button>
<button class="answer-button" type="button" data-service="rds">Amazon RDS</button>
<button class="answer-button" type="button" data-service="dynamodb">Amazon DynamoDB</button>
<button class="answer-button" type="button" data-service="iam">AWS IAM</button>
</div>
<p class="quiz-result" id="quiz-result" aria-live="polite">Choose one service.</p>
<button class="secondary-button" id="next-scenario" type="button" hidden>
Next scenario
</button>
</div>
</section>What does this HTML do?
- The scenario-text element gives JavaScript a place to display each question.
- Each answer-button stores a service value that the script can compare with the correct answer.
- The aria-live region announces updated feedback to assistive technology.
- The hidden next-scenario control appears after the visitor chooses an answer.
- Find the closing </main> line near the bottom of index.html.
- Replace the page footer and closing lines with this completed ending:
</main>
<footer class="site-footer">
<p>Built to demonstrate AWS cloud foundations and continuous deployment.</p>
<p>Portfolio project <span id="current-year"></span></p>
</footer>
<script src="js/app.js"></script>
</body>
</html>Why add the script here?
The script loads after the page elements have been created. This lets js/app.js connect directly to the quiz controls.
The current-year element also gives the script a place to keep the footer year current.
- Save index.html.
- Return to the local browser from the previous step.
- Refresh the page.
You should see the knowledge check with six service buttons and the message Choose one service. The next-scenario control remains hidden until JavaScript receives an answer.
Quiz controls missing?
- Confirm the quiz section sits inside the page's main element.
- Check that every opening HTML tag has a matching closing tag.
- Confirm the browser is displaying the saved index.html file from your repository.
Ask for help checking the quiz markup if the controls still do not appear: Why is my quiz section missing from the local page?
Load the six scenarios
Each scenario pairs a practical need with one service value and one explanation. The script keeps all six scenarios in an array so the same interface can display them one at a time.
- Switch back to the open js/app.js file.
- Replace the quiz script placeholder with the first half of the scenario array:
const scenarios = [
{
prompt: "A team needs a virtual server with control over its operating system. Which service fits?",
answer: "ec2",
explanation: "Amazon EC2 provides on-demand, scalable virtual servers."
},
{
prompt: "A team needs object storage for files, backups, and static assets. Which service fits?",
answer: "s3",
explanation: "Amazon S3 stores data as objects inside buckets."
},
{
prompt: "A team needs an isolated virtual network with subnets and routing. Which service fits?",
answer: "vpc",
explanation: "Amazon VPC provides a logically isolated virtual network."
},How is each scenario structured?
- The prompt describes the service-selection problem.
- The answer stores the value that matches one answer button.
- The explanation gives immediate learning feedback after the choice.
This first chunk intentionally leaves the array open. The next chunk supplies the remaining scenarios and its closing bracket.
- Paste the remaining scenarios directly below the final comma:
{
prompt: "An application needs a managed relational database for structured data and SQL. Which service fits?",
answer: "rds",
explanation: "Amazon RDS manages common relational database administration tasks."
},
{
prompt: "An application needs a serverless, fully managed NoSQL database. Which service fits?",
answer: "dynamodb",
explanation: "Amazon DynamoDB is a serverless, fully managed, distributed NoSQL database."
},
{
prompt: "An administrator needs to control authentication and permissions for AWS resources. Which service fits?",
answer: "iam",
explanation: "AWS IAM controls authentication and authorization for AWS resources."
}
];What does the completed array cover?
The six objects cover compute, storage, networking, relational databases, NoSQL databases, and identity management. Their answer values match the six data-service values in index.html.
- Save js/app.js.
- Refresh the local browser.
- Use your browser's developer tools to reach its console.
- Inspect the scenario data by entering this expression:
scenariosWhat does this check prove?
The console should show an array containing six scenario objects. This proves the browser loaded js/app.js and parsed the complete array without a syntax error.
- Return to js/app.js.
- Add the page references and scenario-rendering function below the array:
const scenarioText = document.querySelector("#scenario-text");
const answerGrid = document.querySelector("#answer-grid");
const answerButtons = document.querySelectorAll(".answer-button");
const quizResult = document.querySelector("#quiz-result");
const nextButton = document.querySelector("#next-scenario");
const currentYear = document.querySelector("#current-year");
let currentScenarioIndex = 0;
function showScenario() {
const scenario = scenarios[currentScenarioIndex];
scenarioText.textContent = scenario.prompt;
quizResult.textContent = "Choose one service.";
nextButton.hidden = true;
answerButtons.forEach((button) => {
button.disabled = false;
});
}What does the renderer do?
- The page references connect JavaScript to the quiz elements by their existing selectors.
- The currentScenarioIndex value tracks which scenario appears.
- The showScenario() function displays the current prompt and resets the controls for a fresh answer.
- Add the initial page setup at the bottom of js/app.js.
currentYear.textContent = new Date().getFullYear();
showScenario();What starts the quiz?
The first line fills the footer with the current year. The showScenario() call renders the first question as soon as the page loads.
- Save js/app.js.
- Refresh the local browser.
You should now see the virtual-server scenario above the six service buttons. The footer should display the current year.
First scenario not appearing?
- Check that the scenario array ends with ]; before the page references begin.
- Confirm scenario-text has the same spelling in index.html and js/app.js.
- Look for the first reported syntax or selector problem in the browser console.
Use this prompt if the first question remains blank: Why is showScenario() not displaying my first quiz question?
Handle answers and test the limit
Rendering a prompt creates the question. The answer handler now compares the selected button with the stored answer and locks the current question after one choice.
- In js/app.js, find the closing brace of showScenario().
- Insert the answer handler above the two setup lines at the bottom of the file:
function checkAnswer(event) {
const selectedButton = event.target.closest(".answer-button");
if (!selectedButton) {
return;
}
const scenario = scenarios[currentScenarioIndex];
const isCorrect = selectedButton.dataset.service === scenario.answer;
const prefix = isCorrect ? "Correct." : "Not quite.";
quizResult.textContent = `${prefix} ${scenario.explanation}`;
nextButton.hidden = false;
answerButtons.forEach((button) => {
button.disabled = true;
});
}
answerGrid.addEventListener("click", checkAnswer);How does answer checking work?
- The click listener sends each answer-grid click to checkAnswer().
- The closest() check identifies the answer button that received the click.
- The handler compares the button's service value with the current scenario answer.
- After feedback appears, every answer button becomes disabled and the next control becomes visible.
- Save js/app.js.
- Refresh the local browser.
- Select an incorrect service for the first scenario.
You should see feedback beginning with Not quite. The six answers should become disabled, and the Next scenario control should appear.
- Refresh the page to reset the first scenario.
- Select Amazon EC2.
You should see feedback beginning with Correct. This proves the button value matches the stored answer.
- Insert the next-scenario listener above the currentYear setup line:
nextButton.addEventListener("click", () => {
currentScenarioIndex = (currentScenarioIndex + 1) % scenarios.length;
showScenario();
});How does the quiz advance?
The listener increases currentScenarioIndex after each click. The remainder calculation returns the quiz to the first scenario after the sixth question.
Calling showScenario() displays the new prompt and enables every answer again.
- Save js/app.js.
✔️ Awesome, I've got everything!
Great. Double-check that js/app.js is saved before testing all six scenarios.
ⓧ I'd like to double check the full code
const scenarios = [
{
prompt: "A team needs a virtual server with control over its operating system. Which service fits?",
answer: "ec2",
explanation: "Amazon EC2 provides on-demand, scalable virtual servers."
},
{
prompt: "A team needs object storage for files, backups, and static assets. Which service fits?",
answer: "s3",
explanation: "Amazon S3 stores data as objects inside buckets."
},
{
prompt: "A team needs an isolated virtual network with subnets and routing. Which service fits?",
answer: "vpc",
explanation: "Amazon VPC provides a logically isolated virtual network."
},
{
prompt: "An application needs a managed relational database for structured data and SQL. Which service fits?",
answer: "rds",
explanation: "Amazon RDS manages common relational database administration tasks."
},
{
prompt: "An application needs a serverless, fully managed NoSQL database. Which service fits?",
answer: "dynamodb",
explanation: "Amazon DynamoDB is a serverless, fully managed, distributed NoSQL database."
},
{
prompt: "An administrator needs to control authentication and permissions for AWS resources. Which service fits?",
answer: "iam",
explanation: "AWS IAM controls authentication and authorization for AWS resources."
}
];
const scenarioText = document.querySelector("#scenario-text");
const answerGrid = document.querySelector("#answer-grid");
const answerButtons = document.querySelectorAll(".answer-button");
const quizResult = document.querySelector("#quiz-result");
const nextButton = document.querySelector("#next-scenario");
const currentYear = document.querySelector("#current-year");
let currentScenarioIndex = 0;
function showScenario() {
const scenario = scenarios[currentScenarioIndex];
scenarioText.textContent = scenario.prompt;
quizResult.textContent = "Choose one service.";
nextButton.hidden = true;
answerButtons.forEach((button) => {
button.disabled = false;
});
}
function checkAnswer(event) {
const selectedButton = event.target.closest(".answer-button");
if (!selectedButton) {
return;
}
const scenario = scenarios[currentScenarioIndex];
const isCorrect = selectedButton.dataset.service === scenario.answer;
const prefix = isCorrect ? "Correct." : "Not quite.";
quizResult.textContent = `${prefix} ${scenario.explanation}`;
nextButton.hidden = false;
answerButtons.forEach((button) => {
button.disabled = true;
});
}
answerGrid.addEventListener("click", checkAnswer);
nextButton.addEventListener("click", () => {
currentScenarioIndex = (currentScenarioIndex + 1) % scenarios.length;
showScenario();
});
currentYear.textContent = new Date().getFullYear();
showScenario();Before you run the final check, what should happen after each answer and after the sixth scenario?
- Refresh the local browser to restart the quiz.
- Choose one incorrect answer during the six-scenario cycle.
- Choose one correct answer during the six-scenario cycle.
- Use Next scenario to advance through all six questions.
- Press Tab to move keyboard focus across the answer controls.
- Narrow the browser window to check the mobile layout.
- Return to the browser console to check for errors.
You should receive immediate correct or incorrect feedback after every choice. The current answers should become disabled, the next control should advance the quiz, the focus outline should remain visible, and the narrow layout should stay within the screen.
That is the interaction working from end to end. Your explorer now tests all six service choices without console errors.
Quiz stops advancing?
- Confirm the nextButton listener appears above the final showScenario() call.
- Check that every answer button has one of the six expected data-service values.
- Use the first console error to identify a misspelled selector or missing bracket.
Ask for a focused review if the quiz gets stuck: Why does my AWS service quiz show feedback but fail to advance?
Before you inspect the browser address, do you think someone on another device could use it to open this quiz?
- Inspect the local browser address to determine whether it identifies a public website.
The address identifies a file on your computer. There is no public HTTPS URL to share, so the quiz remains local-only.
Your six-scenario quiz works locally, and you have now reached the project's sharing limit. Next, you will publish the repository through AWS Amplify Hosting so every push to GitHub can update a public site.
Deploy With AWS Amplify
Your explorer already works in the local browser. The finished source is ready in Visual Studio Code, but recruiters cannot open a page that lives only on your computer.
AWS Amplify Hosting turns the connected GitHub branch into a public HTTPS site. Each later push starts a continuous deployment, so the live site follows the source.
In this step, get ready to:
- Publish the complete repository with recruiter-facing documentation.
- Deploy branch main through AWS Amplify Hosting.
- Prove automatic deployment with a visible badge update.
Document and push the project
A public repository needs enough context for someone to understand the project without opening every file. The README connects your cloud knowledge to the finished deployment.
Git records the complete project as one first commit. GitHub then becomes the source that Amplify deploys.
- Select README.md from Visual Studio Code's file tree.
- Select the existing placeholder sentence.
- Replace the placeholder with this opening section:
# AWS Cloud Foundations Explorer
A beginner-friendly, interactive guide to cloud concepts and foundational AWS services. This project was built as portfolio evidence after introductory AWS learning.
## Live demo
Add the AWS Amplify Hosting URL to the repository About panel after deployment.
## Features
- Four concise cloud concept cards
- Six foundational AWS service cards
- An interactive service-selection quiz
- Responsive HTML and CSS with no framework dependencies
- Continuous deployment from GitHub to AWS Amplify Hosting
- Architecture and cloud-concept documentation
## Architecture
The source is edited in Visual Studio Code, versioned with Git, stored on GitHub, and deployed by AWS Amplify Hosting. A push to the connected `main` branch starts a new deployment.
Read the detailed explanation in [docs/architecture.md](docs/architecture.md).What does this section document?
- The opening describes the explorer as evidence of your AWS learning.
- The feature list gives visitors a quick view of what they can test.
- The architecture section connects local edits to the public deployment.
- Save README.md.
- Use Visual Studio Code's Markdown preview to render the saved content.
You should see the project title followed by the live demo, features, and architecture sections.
Does the preview look incomplete?
- Check that each heading starts on its own line.
- Confirm the architecture image path matches assets/architecture.svg.
Ask for help checking the first README section.
The next section shows the repository layout before explaining how to run the site. This lets a reviewer connect each file to its purpose.
- Append the repository structure and local instructions below the architecture link by pasting this content:
## Repository structure
```text
aws-cloud-foundations-explorer/
├── README.md
├── index.html
├── css/
│ └── styles.css
├── js/
│ └── app.js
├── assets/
│ └── architecture.svg
└── docs/
├── architecture.md
├── cloud-concepts.md
└── screenshots/
├── amplify-deployment.png
└── live-site.png
```
## Run locally
Open `index.html` in a web browser. No package installation or build command is required.Why show the repository structure?
The file tree shows that the site separates structure, design, behavior, documentation, and evidence. The local instructions also make the project easy to review without installing dependencies.
- Save README.md.
- Refresh the Markdown preview.
You should see a formatted project tree followed by a short local run section.
Is the project tree losing its shape?
- Confirm the tree starts after the opening Markdown fence.
- Confirm the tree ends before the closing Markdown fence.
Ask for help repairing the repository tree.
The final README sections explain the deployment workflow and the project's security boundary. They also link the evidence that supports your portfolio claims.
- Append the deployment, security, evidence, and reference sections by pasting this content below the local run instructions:
## Deployment
1. Push the repository to GitHub.
2. Connect the `main` branch to AWS Amplify Hosting.
3. Open the generated default domain after the deployment completes.
4. Push another visible update and confirm that Amplify deploys it automatically.
## Security and cost decisions
- No credentials, access keys, tokens, account IDs, or personal data belong in this repository.
- The project has no backend and collects no user data.
- The project uses the AWS-provided default domain instead of a paid custom domain.
- The Amplify GitHub App is limited to this repository.
- The AWS Amplify app can be deleted while the GitHub source remains available.
## Evidence
- [Live-site screenshot](docs/screenshots/live-site.png)
- [Amplify deployment screenshot](docs/screenshots/amplify-deployment.png)
- [Cloud concepts](docs/cloud-concepts.md)
- [Architecture explanation](docs/architecture.md)
## Official references
- [AWS Cloud Essentials](https://aws.amazon.com/getting-started/cloud-essentials/)
- [AWS Amplify Hosting documentation](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)
- [Amplify access to GitHub repositories](https://docs.aws.amazon.com/amplify/latest/userguide/setting-up-GitHub-access.html)What do these sections prove?
- The deployment list describes the path from the connected branch to the public site.
- The security section records the boundaries that keep credentials out of the repository.
- The evidence links give reviewers direct access to the architecture notes and screenshots.
- Save README.md.
- Refresh the Markdown preview.
You should now see a complete README ending with three official AWS references.
Are any evidence links broken?
- Confirm each documentation path begins with docs/.
- Keep both screenshot links even though the image files are added after deployment.
Ask for help checking the README paths.
✔️ Awesome, I've got everything!
- Save README.md before preparing the first commit.
ⓧ I'd like to double check the full code
# AWS Cloud Foundations Explorer
A beginner-friendly, interactive guide to cloud concepts and foundational AWS services. This project was built as portfolio evidence after introductory AWS learning.
## Live demo
Add the AWS Amplify Hosting URL to the repository About panel after deployment.
## Features
- Four concise cloud concept cards
- Six foundational AWS service cards
- An interactive service-selection quiz
- Responsive HTML and CSS with no framework dependencies
- Continuous deployment from GitHub to AWS Amplify Hosting
- Architecture and cloud-concept documentation
## Architecture
The source is edited in Visual Studio Code, versioned with Git, stored on GitHub, and deployed by AWS Amplify Hosting. A push to the connected `main` branch starts a new deployment.
Read the detailed explanation in [docs/architecture.md](docs/architecture.md).
## Repository structure
```text
aws-cloud-foundations-explorer/
├── README.md
├── index.html
├── css/
│ └── styles.css
├── js/
│ └── app.js
├── assets/
│ └── architecture.svg
└── docs/
├── architecture.md
├── cloud-concepts.md
└── screenshots/
├── amplify-deployment.png
└── live-site.png
```
## Run locally
Open `index.html` in a web browser. No package installation or build command is required.
## Deployment
1. Push the repository to GitHub.
2. Connect the `main` branch to AWS Amplify Hosting.
3. Open the generated default domain after the deployment completes.
4. Push another visible update and confirm that Amplify deploys it automatically.
## Security and cost decisions
- No credentials, access keys, tokens, account IDs, or personal data belong in this repository.
- The project has no backend and collects no user data.
- The project uses the AWS-provided default domain instead of a paid custom domain.
- The Amplify GitHub App is limited to this repository.
- The AWS Amplify app can be deleted while the GitHub source remains available.
## Evidence
- [Live-site screenshot](docs/screenshots/live-site.png)
- [Amplify deployment screenshot](docs/screenshots/amplify-deployment.png)
- [Cloud concepts](docs/cloud-concepts.md)
- [Architecture explanation](docs/architecture.md)
## Official references
- [AWS Cloud Essentials](https://aws.amazon.com/getting-started/cloud-essentials/)
- [AWS Amplify Hosting documentation](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)
- [Amplify access to GitHub repositories](https://docs.aws.amazon.com/amplify/latest/userguide/setting-up-GitHub-access.html)A public repository exposes every committed file to visitors. This security review keeps credentials and personal account details out of the first push.
- Review the repository for passwords, access keys, tokens, account IDs, and personal data.
- Confirm docs/screenshots/ does not contain any accidental captures.
- Stage the complete project and display its Git state by running these commands:
git add .
git statusWhat do these commands do?
- The first command stages the current project files for the commit.
- The second command displays the working tree state so you can review what is included.
Git should report that the complete source, documentation, and architecture files are ready for the first commit.
Are files missing from the staged list?
- Confirm the Visual Studio Code terminal is inside the aws-cloud-foundations-explorer folder.
- Save any files that still show unsaved changes in the editor.
Ask for help checking the staged files.
- Create the first repository commit by running:
git commit -m "First commit"What does this commit capture?
The commit creates one recorded version containing the working explorer and its supporting documentation. Amplify can deploy this version after GitHub receives it.
The terminal should print a commit summary containing the project files.
Did the commit stop?
- Read the terminal message to identify whether Git needs author details.
- Confirm the files were staged before retrying the commit.
Ask for help completing the first commit.
Your Git setup may request authentication during the first push. Complete the browser sign-in flow if it appears.
- Publish branch main to the configured remote by running:
git push -u origin mainWhat does the first push establish?
The push uploads the first commit to origin and establishes main as its upstream branch. The repository is now ready for Amplify to connect.
- Return to the signed-in GitHub repository page from earlier.
- Refresh the repository page.
You should see the complete source files and the rendered AWS Cloud Foundations Explorer README. That is the source Amplify deploys.
Did the first push fail?
- Confirm origin points to the public aws-cloud-foundations-explorer repository.
- Complete any GitHub authentication flow requested by Git.
- Confirm the local branch is named main.
Ask for help publishing the first commit.
Deploy with AWS Amplify Hosting
The repository is public, but it still needs a hosting service to deliver the files through a browser. Amplify connects directly to main and publishes an AWS-provided default domain.
Keep the deployment at $0
Publishing can feel like a billing step. The AWS Free plan does not charge unless you convert to Paid or activate paid-only services.
Use the AWS-provided default domain. Leave custom domains and AWS WAF out of this project.
- Switch back to the AWS Management Console from earlier.
- Return to AWS Amplify.
- Choose the tab that matches the page shown in your account.
All apps is visible
- Choose New app.
- Choose Host web app.
Deploy an app is visible
- Choose Deploy an app.
- Choose GitHub as the Git provider.
- Choose Continue.
- Choose Authorize if GitHub requests permission.
- Choose Only select repositories.
- Select aws-cloud-foundations-explorer.
- Choose Install & Authorize.
Why limit repository access?
The Amplify GitHub App receives read-only access to the selected repository. Limiting authorization to this project keeps unrelated repositories outside the connection.
- Select the aws-cloud-foundations-explorer repository.
- Select main as the branch.
- Choose Next.
- Review the settings to confirm the selected repository and branch.
- Choose Next.
- Choose Save and deploy.
The first deployment can remain on progress screens for a few minutes. That pause means Amplify is publishing the static files.
- Keep the deployment page open until every stage completes.
The deployment page should show a completed deployment for branch main and provide an AWS default domain.
- Copy the generated HTTPS domain into your Amplify HTTPS URL.
- Open your Amplify HTTPS URL in a new browser tab.
You should see the responsive AWS Cloud Foundations Explorer at a public address. The concept cards, service cards, architecture diagram, and quiz should match the local site.
- Select one service answer in the public quiz.
You should see immediate feedback. The answer buttons should become disabled while the Next scenario control becomes available.
What just went live?
Amplify delivers the static files through an AWS CDN and gives the project a public HTTPS address. The connected branch now acts as the deployment source.
Every later Git push to main starts another deployment. The next substep proves that connection with a visible change.
Does the public site fail to load?
- Confirm the Amplify deployment completed for branch main.
- Confirm the connected repository is aws-cloud-foundations-explorer.
- Open the AWS-provided default domain shown by the completed deployment.
Ask for help diagnosing the deployment.
Prove continuous deployment
A live URL proves that hosting works. A second visible update proves that GitHub and Amplify now form an automatic deployment workflow.
- Switch back to index.html in Visual Studio Code.
- Find the deployment badge containing Ready for cloud deployment.
- Replace that paragraph with this final version:
<p class="deployment-badge">Live on AWS Amplify Hosting</p>Why use a visible badge?
The badge creates an obvious difference between the first and second deployments. Refreshing the public URL after the push gives you direct evidence that Amplify deployed the new commit.
- Save index.html.
- Refresh the local browser tab.
You should see Live on AWS Amplify Hosting above the page heading.
Is the local badge unchanged?
- Confirm the edited badge remains inside the hero section.
- Confirm index.html is saved.
- Reload the same local file you tested earlier.
Ask for help finding the badge issue.
✔️ Awesome, I've got everything!
- Keep index.html saved with the live deployment badge.
ⓧ I'd like to double check the full code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta
name="description"
content="An interactive beginner guide to AWS cloud foundations and service selection."
>
<title>AWS Cloud Foundations Explorer</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<a class="skip-link" href="#main-content">Skip to content</a>
<header class="site-header">
<nav class="nav-container" aria-label="Primary navigation">
<a class="brand" href="#top">Cloud Foundations</a>
<div class="nav-links">
<a href="#concepts">Concepts</a>
<a href="#services">Services</a>
<a href="#quiz">Quiz</a>
</div>
</nav>
<div class="hero" id="top">
<p class="deployment-badge">Live on AWS Amplify Hosting</p>
<h1>AWS Cloud Foundations Explorer</h1>
<p class="hero-copy">
Explore cloud concepts, compare foundational AWS services, and test
which service fits a practical scenario.
</p>
<a class="primary-button" href="#services">Explore the services</a>
</div>
</header>
<main id="main-content">
<section class="section" id="concepts">
<div class="section-heading">
<p class="eyebrow">Cloud basics</p>
<h2>Four ideas behind cloud computing</h2>
</div>
<div class="card-grid concept-grid">
<article class="card">
<h3>On-demand resources</h3>
<p>Provision compute, storage, databases, and other resources when they are needed.</p>
</article>
<article class="card">
<h3>Pay as you go</h3>
<p>Use individual services for as long as they are needed and pay for the resources consumed.</p>
</article>
<article class="card">
<h3>Regions and Availability Zones</h3>
<p>A Region is a separate geographic area. Availability Zones are isolated locations inside a Region.</p>
</article>
<article class="card">
<h3>Shared responsibility</h3>
<p>AWS secures the cloud infrastructure. Customers secure their data, access, and service configuration.</p>
</article>
</div>
</section>
<section class="section section-alt" id="services">
<div class="section-heading">
<p class="eyebrow">Service selection</p>
<h2>Six foundational AWS services</h2>
<p>Start with the problem, then choose the service category that solves it.</p>
</div>
<div class="card-grid service-grid">
<article class="card service-card">
<span class="service-category">Compute</span>
<h3>Amazon EC2</h3>
<p>Provides on-demand, scalable computing capacity as virtual servers.</p>
<p class="use-case">Use it when you need control over a virtual server.</p>
</article>
<article class="card service-card">
<span class="service-category">Storage</span>
<h3>Amazon S3</h3>
<p>Stores data as objects inside buckets with scalable storage and access controls.</p>
<p class="use-case">Use it for files, backups, static assets, and data storage.</p>
</article>
<article class="card service-card">
<span class="service-category">Networking</span>
<h3>Amazon VPC</h3>
<p>Provides a logically isolated virtual network for AWS resources.</p>
<p class="use-case">Use it to define network boundaries, subnets, routes, and connectivity.</p>
</article>
<article class="card service-card">
<span class="service-category">Relational database</span>
<h3>Amazon RDS</h3>
<p>Makes it easier to set up, operate, and scale a relational database.</p>
<p class="use-case">Use it when an application needs tables, relationships, and SQL.</p>
</article>
<article class="card service-card">
<span class="service-category">NoSQL database</span>
<h3>Amazon DynamoDB</h3>
<p>Provides a serverless, fully managed, distributed NoSQL database.</p>
<p class="use-case">Use it for key-value or document workloads that need consistent scaling.</p>
</article>
<article class="card service-card">
<span class="service-category">Identity and access</span>
<h3>AWS Identity and Access Management</h3>
<p>Controls who is authenticated and authorized to access AWS resources.</p>
<p class="use-case">Use it to manage identities, roles, and permissions.</p>
</article>
</div>
</section>
<section class="section architecture-section" id="architecture">
<div class="section-heading">
<p class="eyebrow">Project architecture</p>
<h2>From a Git push to a public site</h2>
</div>
<img
class="architecture-image"
src="assets/architecture.svg"
alt="Developer pushes to GitHub, AWS Amplify Hosting deploys the site, and visitors open the HTTPS URL."
>
<p class="architecture-copy">
GitHub stores the source and change history. AWS Amplify Hosting reads
the connected branch, deploys the static files, and publishes an HTTPS URL.
</p>
</section>
<section class="section section-alt" id="quiz">
<div class="quiz-panel">
<div class="section-heading">
<p class="eyebrow">Knowledge check</p>
<h2>Choose the right AWS service</h2>
</div>
<p class="scenario" id="scenario-text"></p>
<div class="answer-grid" id="answer-grid" role="group" aria-label="AWS service choices">
<button class="answer-button" type="button" data-service="ec2">Amazon EC2</button>
<button class="answer-button" type="button" data-service="s3">Amazon S3</button>
<button class="answer-button" type="button" data-service="vpc">Amazon VPC</button>
<button class="answer-button" type="button" data-service="rds">Amazon RDS</button>
<button class="answer-button" type="button" data-service="dynamodb">Amazon DynamoDB</button>
<button class="answer-button" type="button" data-service="iam">AWS IAM</button>
</div>
<p class="quiz-result" id="quiz-result" aria-live="polite">Choose one service.</p>
<button class="secondary-button" id="next-scenario" type="button" hidden>
Next scenario
</button>
</div>
</section>
</main>
<footer class="site-footer">
<p>Built to demonstrate AWS cloud foundations and continuous deployment.</p>
<p>Portfolio project <span id="current-year"></span></p>
</footer>
<script src="js/app.js"></script>
</body>
</html>Screenshots strengthen the repository evidence, but personal account details are easy to capture by accident. Frame each image so it shows the deployment result without exposing email addresses, account IDs, or credentials.
- Switch to the public site tab.
- Frame the public page so the HTTPS address and explorer are visible.
- Capture the page with your Linux screenshot tool.
- Save the image as docs/screenshots/live-site.png.
- Switch to the completed Amplify deployment page.
- Crop any personal details or account identifiers from the view.
- Capture the completed deployment with your Linux screenshot tool.
- Save the image as docs/screenshots/amplify-deployment.png.
Visual Studio Code's file tree should now show both image files inside docs/screenshots/.
Are the screenshots missing?
- Confirm both files use the .png extension.
- Confirm both files are saved inside docs/screenshots/.
- Check each image before committing it to the public repository.
Ask for help checking the evidence files.
- Select the Source Control view in Visual Studio Code.
- Review the changes to index.html and the two screenshot files.
- Enter Add deployment evidence in the commit message field.
- Create the commit from the Source Control view.
The three files should no longer appear as uncommitted changes. Your local main branch now contains the visible deployment update.
Before you push, which change do you expect to appear at the public URL after Amplify finishes?
- Publish the deployment evidence commit by running:
git push origin mainWhat does this push prove?
The command sends the new main commit to GitHub. The connected Amplify app detects that push and starts another deployment automatically.
- Return to the Amplify app from earlier.
- Select the latest deployment for branch main.
- Keep the deployment page open until the update completes.
Amplify should show a new completed deployment created from the second push. That is the continuous deployment workflow working from Git to the public site.
- Refresh your Amplify HTTPS URL.
You should now see Live on AWS Amplify Hosting above the page heading. Your public site is running the second commit.
- Return to the GitHub repository page.
- Use the editing control in the About panel.
- Enter your Amplify HTTPS URL in the website field.
- Submit the About panel change.
The repository About panel should now display the public AWS Amplify HTTPS URL. Anyone viewing the repository can move directly from the source to the working explorer.
Did the second deployment fail to update?
- Confirm the Source Control commit includes index.html.
- Confirm the push targeted branch main.
- Confirm the Amplify app remains connected to the same repository and branch.
Ask for help tracing the deployment.
Secret mission
Add Quiz Score Tracking
Your quiz gives feedback for each scenario. This extension adds a running score, question progress, and a restart control before publishing the upgrade through your existing AWS Amplify Hosting workflow.
Clean Up Your Resources
Clean Up Your Resources
Choose whether to keep your live portfolio running, pause its hosting, or delete its resources entirely. The project stays at $0 on the AWS Free plan and GitHub Free while it remains within their listed allowances.
Cost warning
The AWS Free plan does not charge unless you convert to the Paid plan or activate paid-only services. The Free plan closes after six months or when its credits run out.
Your AWS Amplify Hosting app stays inside the listed free allowances for this small static website. The project does not use a custom domain or AWS WAF.
Resources you used:
- One AWS Amplify Hosting app connected to the main branch of aws-cloud-foundations-explorer.
- One public GitHub repository named aws-cloud-foundations-explorer.
- One local aws-cloud-foundations-explorer project copy containing the complete source and documentation.
- Two redacted evidence screenshots at docs/screenshots/live-site.png and docs/screenshots/amplify-deployment.png.
- One public HTTPS default domain provided by AWS Amplify Hosting.
Keep everything running
You can leave everything as it is if you want the portfolio URL to remain public. Future pushes to main continue to trigger automatic deployments.
- Leave the AWS Amplify Hosting app connected to main.
- Keep the aws-cloud-foundations-explorer repository public.
- Check the AWS account's remaining Free plan time and allowances periodically.
- Keep both screenshots redacted if you replace them with newer evidence.
Your live URL remains available as portfolio evidence. The score-tracking quiz continues to update whenever Amplify deploys a new push.
Pause - I'll come back to this later
Pause public hosting by deleting the Amplify app while preserving the GitHub repository and local files. You can connect the same repository to a new Amplify app later.
- Return to AWS Amplify Hosting in the AWS Management Console from earlier.
- Select the app connected to aws-cloud-foundations-explorer.
- Choose App settings.
- Choose General settings.
- Choose Delete app.
- Enter delete in the confirmation field.
- Choose Delete app to confirm the deletion.
Your portfolio source remains safe in GitHub and on your computer. The AWS-provided default domain stops serving the site.
Delete - I don't want to use this again
This option permanently removes the live site and its portfolio evidence. Deleting these resources is meant to be final.
- Back up any project evidence you want to keep.
- Return to AWS Amplify Hosting in the AWS Management Console from earlier.
- Select the app connected to aws-cloud-foundations-explorer.
- Choose App settings.
- Choose General settings.
- Choose Delete app.
- Enter delete in the confirmation field.
- Choose Delete app to confirm the deletion.
The cloud cleanup is complete. The default domain no longer serves your explorer.
- Switch back to the aws-cloud-foundations-explorer repository in GitHub.
- Open its repository settings area.
- Use the repository deletion control to remove aws-cloud-foundations-explorer.
- Complete GitHub's identity confirmation.
- Confirm that the old repository URL no longer loads.
- Use your Linux file manager to return to the location that contains the existing aws-cloud-foundations-explorer folder.
- Delete the aws-cloud-foundations-explorer folder.
- Confirm that the folder no longer appears in that location.
The local folder deletion removes both screenshot files from your computer. The repository deletion removes their public copies.
Nice Work!
Nice Work!
Mission complete! Your responsive AWS Cloud Foundations Explorer is live on AWS Amplify Hosting with progress tracking across all six quiz scenarios.
You've learned how to:
- Explain cloud computing, pay-as-you-go pricing, AWS Regions and Availability Zones, and shared responsibility through a responsive guide.
- Organize a recruiter-friendly GitHub repository with readable source files, architecture notes, cloud documentation, deployment screenshots, and a live website link.
- Publish the site through AWS Amplify Hosting and prove continuous deployment by pushing an update to main with Git.
- Secret Mission: Extend the six-scenario quiz with score tracking, progress updates, and a restart control that resets the full quiz cycle.
Ready to quiz yourself?