Skip to content

Commit 6934238

Browse files
leestottleestott
authored
Merge pull request #1516 from TacticalReader/main
Upgraded typing game, chat backend, and main index files
2 parents e180e65 + f0243c7 commit 6934238

File tree

24 files changed

+3211
-1205
lines changed

24 files changed

+3211
-1205
lines changed

‎1-getting-started-lessons/1-intro-to-programming-languages/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,9 @@ Compare some programming languages. What are some of the unique traits of JavaSc
198198

199199
Study a bit on the different languages available to the programmer. Try to write a line in one language, and then rewrite it in two others. What did you learn?
200200

201+
201202
## Assignment
202203

203204
[Reading the Docs](assignment.md)
205+
206+
> Note: When selecting tools for your assignment, do not choose editors, browsers, or command line tools already listed above.

‎1-getting-started-lessons/1-intro-to-programming-languages/assignment.md‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1-
# Reading the Docs
2-
31
## Instructions
42

5-
There are many tools that a web developer may need that are on the [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Select 3 tools not covered in the lesson, explain why a web developer would use it, and search for a tool that falls under this category and share its documentation. Do not use the same tool example on MDN docs.
3+
There are many tools that a web developer may need that are listed on the [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Select **three tools** that are **not covered in this lesson** (excluding [list specific tools or refer to lesson content]), explain **why** a web developer would use each tool, and find a tool that fits each category. For each, share a link to its official documentation (not the example used on MDN).
4+
5+
**Format:**
6+
- Tool name
7+
- Why a web developer would use it (2-3 sentences)
8+
- Link to documentation
9+
10+
**Length:**
11+
- Each explanation should be 2-3 sentences.
612

713
## Rubric
814

915
Exemplary | Adequate | Needs Improvement
1016
--- | --- | -- |
11-
|Explained why web developer would use tool| Explained how, but not why developer would use tool| Did not mention how or why a developer would use tool |
17+
Explained why web developer would use tool | Explained how, but not why developer would use tool | Did not mention how or why a developer would use tool |

‎2-js-basics/1-data-types/assignment.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
## Instructions
44

5-
Imagine you are building a shopping cart. Write some documentation on the data types that you would need to complete your shopping experience. How did you arrive at your choices?
5+
Imagine you are building a shopping cart. Write documentation on the data types you would need to complete your shopping experience. For each data type, explain how and why you would use it, and provide an example. The six JavaScript data types are: String, Number, Boolean, Null, Undefined, and Object.
66

77
## Rubric
88

99
Criteria | Exemplary | Adequate | Needs Improvement
1010
--- | --- | --- | -- |
11-
||The six data types are listed and explored in detail, documenting their use|Four datatypes are explored|Two data types are explored|
11+
Data Types | All six data types are listed, explored in detail, and documented with examples | Four data types are explored with some explanation | Two data types are explored with minimal explanation |

‎3-terrarium/1-intro-to-html/assignment.md‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,39 @@
1-
# Practice your HTML: Build a blog mockup
1+
# HTML Practice Assignment: Build a Blog Mockup
2+
3+
## Objective
4+
5+
Design and hand-code the HTML structure for a personal blog homepage. This exercise will help you practice semantic HTML, layout planning, and code organization.
26

37
## Instructions
48

5-
Imagine you are designing, or redesigning, your personal web site. Create a graphical mockup of your site, and then write down the HTML markup you would use to build out the various elements of the site. You can do this on paper, and scan it, or use software of your choice, just make sure to hand-code the HTML markup.
9+
1. **Design Your Blog Mockup**
10+
- Sketch a visual mockup of your blog homepage. Include key sections such as header, navigation, main content, sidebar, and footer.
11+
- You may use paper and scan your sketch, or use digital tools (e.g., Figma, Adobe XD, Canva, or even PowerPoint).
12+
13+
2. **Identify HTML Elements**
14+
- List the HTML elements you plan to use for each section (e.g., `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>`, etc.).
15+
16+
3. **Write the HTML Markup**
17+
- Hand-code the HTML for your mockup. Focus on semantic structure and best practices.
18+
- Include at least 10 distinct HTML elements.
19+
- Add comments to explain your choices and structure.
20+
21+
4. **Submit Your Work**
22+
- Upload your sketch/mockup and your HTML file.
23+
- Optionally, provide a brief reflection (2–3 sentences) on your design decisions.
624

725
## Rubric
826

9-
| Criteria | Exemplary | Adequate | Needs Improvement |
10-
| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
11-
| | A blog layout is represented visually with at least 10 elements of markup displayed | A blog layout is represented visually with around 5 elements of markup displayed | A blog layout is represented visually with at most 3 elements of markup displayed |
27+
| Criteria | Exemplary | Adequate | Needs Improvement |
28+
|------------------|--------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
29+
| Visual Mockup | Clear, detailed mockup with labeled sections and thoughtful layout | Basic mockup with some labeled sections | Minimal or unclear mockup; lacks section labels |
30+
| HTML Elements | Uses 10+ semantic HTML elements; demonstrates understanding of structure and best practices | Uses 5–9 HTML elements; some semantic structure | Uses fewer than 5 elements; lacks semantic structure |
31+
| Code Quality | Well-organized, readable code with comments; follows HTML standards | Mostly organized code; few comments | Disorganized code; lacks comments |
32+
| Reflection | Insightful reflection on design choices and challenges | Basic reflection | No reflection or lacks relevance |
33+
34+
## Tips
35+
36+
- Use semantic HTML tags for better accessibility and SEO.
37+
- Organize your code with indentation and comments.
38+
- Refer to [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) for guidance.
39+
- Think about how your layout could be extended or styled in future assignments.

‎3-terrarium/2-intro-to-css/assignment.md‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,27 @@
1-
# CSS Refactoring
1+
# CSS Refactoring Assignment
2+
3+
## Objective
4+
5+
Refactor the terrarium project to use **Flexbox** or **CSS Grid** for layout. Update the HTML and CSS as needed to achieve a modern, responsive design. You do not need to implement draggable elements—focus on layout and styling only.
26

37
## Instructions
48

5-
Restyle the terrarium using either Flexbox or CSS Grid, and take screenshots to show that you have tested it on several browsers. You might need to change the markup so create a new version of the app with the art in place for your refactor. Don't worry about making the elements draggable; only refactor the HTML and CSS for now.
9+
1. **Create a new version** of the terrarium app. Update the markup and CSS to use Flexbox or CSS Grid for layout.
10+
2. **Ensure the art and elements are in place** as in the original version.
11+
3. **Test your design** in at least two different browsers (e.g., Chrome, Firefox, Edge).
12+
4. **Take screenshots** of your terrarium in each browser to demonstrate cross-browser compatibility.
13+
5. **Submit** your updated code and screenshots.
614

715
## Rubric
816

9-
| Criteria | Exemplary | Adequate | Needs Improvement |
10-
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
11-
| | Present a completely restyled terrarium using Flexbox or CSS Grid | Restyle a few of the elements | Fail to restyle the terrarium at all |
17+
| Criteria | Exemplary | Adequate | Needs Improvement |
18+
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
19+
| Layout | Fully refactored using Flexbox or CSS Grid; visually appealing and responsive | Some elements refactored; partial use of Flexbox or Grid | Little or no use of Flexbox or Grid; layout unchanged |
20+
| Cross-Browser | Screenshots provided for multiple browsers; consistent appearance | Screenshots for one browser; minor inconsistencies | No screenshots or major inconsistencies |
21+
| Code Quality | Clean, well-organized HTML/CSS; clear comments | Some organization; few comments | Disorganized code; lacks comments |
22+
23+
## Tips
24+
25+
- Review [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) guides.
26+
- Use browser developer tools to test responsiveness.
27+
- Comment your code for clarity.

‎3-terrarium/solution/index.html‎

Lines changed: 104 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,109 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<title>Welcome to my Virtual Terrarium</title>
5-
<meta charset="utf-8" />
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1" />
8-
<!-- import the webpage's stylesheet -->
9-
<link rel="stylesheet" href="./style.css" />
10-
<!-- import the webpage's JavaScript file -->
11-
<script src="./script.js" defer></script>
12-
</head>
3+
<head>
4+
<title>Welcome to my Virtual Terrarium</title>
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<!-- Font Awesome CDN for icons -->
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
10+
<!-- import the webpage's stylesheet -->
11+
<link rel="stylesheet" href="./style.css" />
12+
<!-- import the webpage's JavaScript file -->
13+
<script src="./script.js" defer></script>
14+
</head>
15+
<body>
16+
<div id="page">
17+
<!-- Navigation Bar -->
18+
<nav>
19+
<ul>
20+
<li><a href="#"><i class="fas fa-home"></i> Home</a></li>
21+
<li><a href="#"><i class="fas fa-leaf"></i> Plants</a></li>
22+
<li><a href="#"><i class="fas fa-seedling"></i> Care Tips</a></li>
23+
<li><a href="#"><i class="fas fa-info-circle"></i> About</a></li>
24+
<li><a href="#"><i class="fas fa-envelope"></i> Contact</a></li>
25+
</ul>
26+
</nav>
1327

14-
<body>
15-
<div id="page">
16-
<h1>My Terrarium</h1>
28+
<header>
29+
<h1><i class="fas fa-jar"></i> My Terrarium</h1>
30+
<p>Welcome to your virtual plant paradise! <i class="fas fa-smile-beam"></i></p>
31+
</header>
1732

18-
<div id="left-container" class="container">
19-
<div class="plant-holder">
20-
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
21-
</div>
22-
<div class="plant-holder">
23-
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
24-
</div>
25-
<div class="plant-holder">
26-
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
27-
</div>
28-
<div class="plant-holder">
29-
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
30-
</div>
31-
<div class="plant-holder">
32-
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
33-
</div>
34-
<div class="plant-holder">
35-
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
36-
</div>
37-
<div class="plant-holder">
38-
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
39-
</div>
40-
</div>
41-
<div id="right-container" class="container">
42-
<div class="plant-holder">
43-
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
44-
</div>
45-
<div class="plant-holder">
46-
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
47-
</div>
48-
<div class="plant-holder">
49-
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
50-
</div>
51-
<div class="plant-holder">
52-
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
53-
</div>
54-
<div class="plant-holder">
55-
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
56-
</div>
57-
<div class="plant-holder">
58-
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
59-
</div>
60-
<div class="plant-holder">
61-
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
62-
</div>
63-
</div>
33+
<main>
34+
<section id="plant-selection">
35+
<div id="left-container" class="container">
36+
<!-- Left-side plants -->
37+
<div class="plant-holder">
38+
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
39+
</div>
40+
<div class="plant-holder">
41+
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
42+
</div>
43+
<div class="plant-holder">
44+
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
45+
</div>
46+
<div class="plant-holder">
47+
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
48+
</div>
49+
<div class="plant-holder">
50+
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
51+
</div>
52+
<div class="plant-holder">
53+
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
54+
</div>
55+
<div class="plant-holder">
56+
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
57+
</div>
58+
</div>
59+
<div id="right-container" class="container">
60+
<!-- Right-side plants -->
61+
<div class="plant-holder">
62+
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
63+
</div>
64+
<div class="plant-holder">
65+
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
66+
</div>
67+
<div class="plant-holder">
68+
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
69+
</div>
70+
<div class="plant-holder">
71+
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
72+
</div>
73+
<div class="plant-holder">
74+
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
75+
</div>
76+
<div class="plant-holder">
77+
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
78+
</div>
79+
<div class="plant-holder">
80+
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
81+
</div>
82+
</div>
83+
</section>
6484

65-
<div id="terrarium">
66-
<div class="jar-top"></div>
67-
<div class="jar-walls">
68-
<div class="jar-glossy-long"></div>
69-
<div class="jar-glossy-short"></div>
70-
</div>
71-
<div class="dirt"></div>
72-
<div class="jar-bottom"></div>
73-
</div>
74-
</div>
75-
</body>
76-
</html>
85+
<section id="terrarium-section">
86+
<div id="terrarium">
87+
<div class="jar-top"></div>
88+
<div class="jar-walls">
89+
<div class="jar-glossy-long"></div>
90+
<div class="jar-glossy-short"></div>
91+
</div>
92+
<div class="dirt"></div>
93+
<div class="jar-bottom"></div>
94+
</div>
95+
</section>
96+
</main>
97+
98+
<footer>
99+
<p>
100+
<i class="fas fa-copyright"></i> 2025 My Terrarium. All rights reserved.
101+
&nbsp;|&nbsp;
102+
<a href="https://github.com/" target="_blank"><i class="fab fa-github"></i> GitHub</a>
103+
&nbsp;|&nbsp;
104+
<a href="mailto:[email protected]"><i class="fas fa-envelope"></i> Email</a>
105+
</p>
106+
</footer>
107+
</div>
108+
</body>
109+
</html>

0 commit comments

Comments
 (0)