diff --git a/README.md b/README.md index 5508d33..ee34d5a 100644 --- a/README.md +++ b/README.md @@ -1,142 +1 @@ -
- Code with Carrie logo -

Web Development Basics

-

Beginner demos and exercises on building web apps with HTML, CSS, and 'vanilla' JavaScript

- badge linking to CodeWithCarrie's website - JavaScript - npm - npm - -
- ---- - -
- Setup • - -
- ---- - -### 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](). - -> [!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. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..1d9cbd5 --- /dev/null +++ b/index.html @@ -0,0 +1,91 @@ + + + + + + Adventurer's Guild + + +
+

🏰 Adventurer's Guild

+
+ +
+
+

⚔️ Hero Dashboard

+

Active Character: Idrian (Warrior Class)

+ + A warrior headed into battle in a raging thunderstorm + +

+ Welcome to the personalized dashboard for your character! Monitor your + equipment, current health metrics, and overall quest progress from this panel. + Keep your wits about you! +

+ +

Current Equipment:

+ + +

+ Need to review combat mechanics? Read the official + Guild Codebook. +

+
+ + +
+ + + + diff --git a/public/images/red-dragon.png b/public/images/red-dragon.png new file mode 100644 index 0000000..439601a Binary files /dev/null and b/public/images/red-dragon.png differ diff --git a/public/images/warrior.png b/public/images/warrior.png new file mode 100644 index 0000000..265159e Binary files /dev/null and b/public/images/warrior.png differ