CodeWithCarrie · Lakshmipriya-m10 · Jun 9, 2026 · Jun 9, 2026 · Jun 9, 2026 · Jun 9, 2026
diff --git a/README.md b/README.md
@@ -1,142 +1 @@
-<div align="center">
-    <img src="public/images/cwc-logo-4-colors.svg" alt="Code with Carrie logo" width="50%" />
-    <h1>Web Development Basics</h1>
-    <p><em>Beginner demos and exercises on building web apps with HTML, CSS, and 'vanilla' JavaScript</em></p>
-    <a href="http://www.codewithcarrie.com"><img src="https://img.shields.io/badge/by-CodeWithCarrie.com-b03454?style=for-the-badge" alt="badge linking to CodeWithCarrie's website" /></a>
-    <img src="https://img.shields.io/badge/JavaScript-F0DB4F?style=for-the-badge&logo=javascript&logoColor=333333" alt="JavaScript" />
-    <img src="https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=ffffff" alt="npm" />
-    <img src="https://img.shields.io/badge/jest-C21325?style=for-the-badge&logo=npm&logoColor=ffffff" alt="npm" />
-    <!-- TODO: Add badges for other tech -->
-</div>
-
----
-
-<div align="center">
-    <a href="https://github.com/CodeWithCarrie/modular-javascript/blob/main/README.md#setup">Setup</a> &bull;
-    <!-- TODO: Add links to sections below -->
-</div>
-
----
-
-### Welcome!
-
-In a field increasingly dominated by AI code generation, it is essential to have a firm grasp on the fundamentals in order to plan ahead, compose crystal-clear prompts, and recognize errors and poorly-formed code. The only way to build muscle is to exercise it, and learning programming is no different!
-
-> [!IMPORTANT]
-> You need to deepen your problem-solving skills and core understanding of syntax and code composition independently _before_ you can integrate AI tools in your workflow and become a more efficient developer. My learning resources are designed to do just that!
-
----
-
-### HOW TO FORK AND CLONE
-
-#### CREATE YOUR OWN COPY
-
-1. FORK it to your own GitHub account
-1. COPY the link from your new repo on GitHub
-1. CLONE it to your local machine. Example:
-
-`git clone https://github.com/YourUsername/web-development-basics`
-
-#### PRACTICE IN YOUR OWN BRANCHES
-
-If you want to update your forked repository from my parent repository when I add or change things to mine in the future, there are instructions below this section.
-It will go much easier if you don't ever change the code in `main`. Instead, do the following:
-
-1. From `main`, use the command `git checkout -b new-branch-name` to create your own branch for practicing (example: `html-practice`).
-1. Practice as much as you'd like in your new branch, making commits as you add code.
-1. When you are ready to work on something different in another new branch, use the command `git checkout main` to return to `main` and then you can repeat the two steps above.
-
-### HOW TO UPDATE YOUR REPO AFTER I'VE UPDATED MINE
-
-> [!WARNING]
-> I am still adding new content regularly, so you will likely have to sync your forked repo with mine in order to pull that content into your own.
-
-**Set the upstream link:**
-
-1. On your local machine, make sure you are in the correct directory in the terminal.
-1. Use the command `git remote add upstream https://github.com/CodeWithCarrie/web-development-basics`
-
-You now have a direct link to my original repo!
-
-Use the command `git remote -v` to verify that you have linked to both `origin` (your forked repo) and `upstream` (my original repo)
-
-**Update your repo anytime I make changes in the future:**
-
-1. On your local machine, make sure you are in the correct directory in the terminal.
-1. If you have any uncommitted changes, **stage** and **commit** them.
-1. Make sure you are in the branch you wish to update (e.g. `main`)
-1. Use the command `git fetch upstream` so your local repo has knowledge of changes I made in my repo
-1. Use the command `git rebase upstream/main` to sync your repo
-
-**Check to see which branches you already have:**
-
-1. You can use the command `git branch` anytime to see what local branches you have
-1. The command `git branch -r` will show you branches that exist on GitHub (after you've fetched that knowledge)
-
----
-
-## DEMOS & PRACTICE EXERCISES
-
-If you are unfamiliar with the basics of JavaScript, I recommend starting with my [JavaScript Fundamentals Series](https://github.com/CodeWithCarrie/javascript-fundamentals) and [Modular JavaScript Series](https://github.com/CodeWithCarrie/modular-javascript) before continuing with any tutorials below that involve JavaScript.
-
-Each topic will have a corresponding video on the [@CodeWithCarrie](https://youtube.com/@CodeWithCarrie) YouTube channel, with some code left for the learner to complete in-between videos. Use the links in the sections below for quick peeks at the starter code or solution in different branches. You can fork your own copy of this repository for practice on your local machine. While individual links are available below for each video, you can also start with the [full playlist](). <!-- FIXME -->
-
-> [!TIP]
-> I recommend working through the demos and exercises in the sequence shown below.
-
-Go forth and learn!
-
----
-
-### SETUP
-
-This collection of coding exercises focuses on JavaScript, Node and NPM modules, and Jest. While my JavaScript Fundamentals demos included Git commits, this collection and future collections will typically not cover that under the assumption that learners have developed the habit already.
-
-> [!NOTE]
-> Make sure you have npm and Node.js [installed](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) before continuing with any of the exercises below.
-
----
-
-### 1 - HTML Basics
-
-_Coming soon!_ 
-
----
-
-### 2 - HTML Forms
-
-_Coming soon!_ 
-
----
-
-### 3 - CSS
-
-_Coming soon!_ 
-
----
-
-### 4 - The DOM
-
-_Coming soon!_ 
-
----
-
-### 5 - JSON
-
-_Coming soon!_ 
-
----
-
-### 6 - HTTP Requests & Responses
-
-_Coming soon!_ 
-
----
-
-## ABOUT THE AUTHOR
-
-### Caroline "Carrie" Jones
-
-Front End Engineer and Lead Instructor at [LaunchCode](https://www.launchcode.org)
-
-[@Carolista](https://github.com/Carolista) - [CodeWithCarrie.com](http://codewithcarrie.com) - [LinkedIn](https://www.linkedin.com/in/carolinerjones)
+Please see the [README](https://github.com/CodeWithCarrie/web-development-basics/blob/main/README.md) on GitHub on the main branch.
diff --git a/index.html b/index.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Adventurer's Guild</title>
+	</head>
+	<body>
+		<header>
+			<h1>🏰 Adventurer's Guild</h1>
+		</header>
+
+		<main>
+			<section id="hero-dashboard">
+				<h2>⚔️ Hero Dashboard</h2>
+				<h3>Active Character: Idrian (Warrior Class)</h3>
+
+				<img
+					src="public/images/warrior.png"
+					width="500px"
+					alt="A warrior headed into battle in a raging thunderstorm"
+				/>
+
+				<p>
+					Welcome to the personalized dashboard for your character! Monitor your
+					equipment, current health metrics, and overall quest progress from this panel.
+					<em>Keep your wits about you!</em>
+				</p>
+
+				<h4>Current Equipment:</h4>
+				<ul>
+					<li>Iron Broadsword</li>
+					<li>Steel Shield</li>
+					<li>Health Potion</li>
+				</ul>
+
+				<p>
+					Need to review combat mechanics? Read the official
+					<a href="https://www.guildcodex.ca/game/" target="_blank">Guild Codebook</a>.
+				</p>
+			</section>
+
+			<aside id="bounty-board">
+				<!-- 
+                    TODO A: Add a level 2 heading displaying "Local Bounties" 
+                    Then add a short paragraph explaining the purpose of the section (reviewing monster 
+                    sightings and open bounties for gold coins and guild reputation).
+                    Finally, add a level 3 heading that announces the danger level as high.
+                 -->
+				<h2>🔥🐉 Local Bounties</h2>
+				<p>Reviewing monster sightings and open bounties for gold coins and guild reputation
+				Recent sightings include wolves near the forest and a dragon spotted in the mountains.
+				<em>Rewards range from 50 to 500 gold coins depending on difficulty.</em></p>
+
+				<h3>The danger level : <em>High</em></h3>	
+				<!-- 
+                    TODO C1: Add an image using the red dragon PNG in public/images. Make sure
+                    the width is set to 500px and you include an alt description for accessibility.
+                 -->
+					<img src="./public/images/red-dragon.png" 
+					width="500px"
+					alt="Red dragon flying with flames"
+					/>
+
+				<!-- 
+                    TODO B: Add a level 4 heading for Bounty Requirements in the Sawtooth Mountains.
+                    Add an unordered list with the following requirements: the character must be 
+                    level 4 or above, they must have a health potion, and they must have a cloak
+                    of invisibility.
+                 -->
+					<h4>Bounty Requirements in the Sawtooth Mountains.</h4>
+					<ol>
+						<li>Your in level 4 or above</li>
+						<li>You must have a health potion</li>
+						<li>You must have a cloak  of invisibility.</li>
+					</ol>
+				<!-- 
+                    TODO C2: Add a paragraph that links to the World Cartography Map in case the
+                    player is unfamiliar with the territory. (Find any map online for a fantasy game.)
+                    Make sure when the link is clicked that it will open in a new tab.
+                 -->
+					<p>Are you unfamiliar with the territory?.Click the link here for more information</p>
+					<a href="https://azgaar.github.io/Fantasy-Map-Generator/">fantasy map generator</a>
+			</aside>
+		</main>
+
+		<footer>
+			<p>&copy; 2026 Adventurer's Guild Network</p>
+		</footer>
+	</body>
+</html>
diff --git a/public/images/red-dragon.png b/public/images/red-dragon.png
diff --git a/public/images/warrior.png b/public/images/warrior.png