hack4impact-calpoly · tchandwani · Oct 16, 2025 · Oct 17, 2025 · Oct 17, 2025 · Oct 28, 2025
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/node_modules
diff --git a/backend-for-beginners.html b/backend-for-beginners.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Backend for Beginners - Trisha's Blog</title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body>
+        <nav class="navbar">
+            <h1 class="logo"><a href="index.html">personal website</a></h1>
+            <ul class="nav-list">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="blog.html">Blog</a></li>
+                <li><a href="portfolio.html">Portfolio</a></li>
+                <li><a href="resume.html">Resume</a></li>
+                <li><a href="contact.html">Contact</a></li>
+            </ul>
+        </nav>
+
+        <main>
+            <article class="blog-post">
+                <a href="blog.html" class="back-link">← Back to Blog</a>
+
+                <h1 class="blog-post-title">Backend for Beginners</h1>
+                <p class="blog-post-date">October 16, 2025</p>
+
+                <img src="backend.png" alt="Backend for Beginners" class="blog-post-image">
+
+                <div class="blog-post-content">
+                    <p>The backend is the engine of the website. It handles all the logic, data storage, and processing that users don't see. Think of it as the car's engine, fuel tank, and internal mechanics.</p>
+
+                    <p>If you're new to web development, understanding the backend is crucial. While the frontend is what users interact with, the backend is where the magic really happens. Let's dive into what backend development is all about!</p>
+
+                    <h2>What is the Backend?</h2>
+                    <p>The backend, also known as the server-side, is the part of a web application that runs on the server. It's responsible for managing the application's logic, database interactions, authentication, and server configuration.</p>
+
+                    <p>When you log into a website, submit a form, or retrieve data, the backend processes these requests and sends back the appropriate response to the frontend.</p>
+
+                    <h2>Key Components of Backend Development</h2>
+
+                    <h3>1. Server</h3>
+                    <p>The server is a computer or system that hosts your web application. It receives requests from clients (browsers) and sends back responses. Popular server technologies include Node.js, Apache, and Nginx.</p>
+
+                    <h3>2. Database</h3>
+                    <p>Databases store all the data for your application. This could be user information, blog posts, products, or any other data your application needs. Common databases include MySQL, PostgreSQL, MongoDB, and SQLite.</p>
+
+                    <h3>3. API (Application Programming Interface)</h3>
+                    <p>APIs allow the frontend and backend to communicate. They define endpoints that the frontend can call to retrieve or modify data. RESTful APIs and GraphQL are popular API architectures.</p>
+
+                    <h3>4. Server-Side Programming Languages</h3>
+                    <p>Backend developers use languages like JavaScript (Node.js), Python, Java, Ruby, PHP, or C# to write the server-side logic. Each language has its own strengths and use cases.</p>
+
+                    <h2>Backend vs Frontend</h2>
+                    <p>The frontend is what users see and interact with - the buttons, forms, colors, and layouts. The backend handles what happens when users click those buttons: processing data, storing information, and retrieving content from databases.</p>
+
+                    <p>For example, when you post a comment on a blog:</p>
+                    <ul>
+                        <li><strong>Frontend:</strong> Displays the comment form and shows your comment after you submit it</li>
+                        <li><strong>Backend:</strong> Validates your comment, saves it to the database, and retrieves it when other users visit the page</li>
+                    </ul>
+
+                    <h2>Getting Started with Backend Development</h2>
+                    <p>If you're interested in learning backend development, here are some steps to get started:</p>
+
+                    <ol>
+                        <li><strong>Learn a Programming Language:</strong> Start with JavaScript (Node.js) or Python - both are beginner-friendly and widely used.</li>
+                        <li><strong>Understand HTTP:</strong> Learn how web requests and responses work.</li>
+                        <li><strong>Study Databases:</strong> Start with SQL basics and try building simple database schemas.</li>
+                        <li><strong>Build Projects:</strong> Create a simple API or a basic CRUD (Create, Read, Update, Delete) application.</li>
+                        <li><strong>Learn About Security:</strong> Understand authentication, authorization, and common security practices.</li>
+                    </ol>
+
+                    <h2>Popular Backend Frameworks</h2>
+                    <p>Frameworks make backend development easier by providing pre-built tools and structure:</p>
+                    <ul>
+                        <li><strong>Express.js:</strong> A minimal Node.js framework</li>
+                        <li><strong>Django:</strong> A Python framework known for rapid development</li>
+                        <li><strong>Flask:</strong> A lightweight Python framework</li>
+                        <li><strong>Ruby on Rails:</strong> A full-featured Ruby framework</li>
+                        <li><strong>Spring Boot:</strong> A Java framework for enterprise applications</li>
+                    </ul>
+
+                    <h2>Conclusion</h2>
+                    <p>Backend development is an exciting field that powers everything we do online. While it may seem complex at first, breaking it down into smaller concepts makes it much more approachable. Start with the basics, build small projects, and gradually increase complexity as you learn.</p>
+
+                    <p>Remember, every expert backend developer started as a beginner. The key is consistent practice and curiosity. Happy coding!</p>
+                </div>
+            </article>
+        </main>
+
+        <div class="footer"> 
+            <footer>
+                <p>© 2025 Trisha Chandwani's website | All Rights Reserved</p>
+            </footer>
+        </div>
+    </body>
+</html>
diff --git a/backend.png b/backend.png
diff --git a/blog.html b/blog.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>
+            Blog 
+        </title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body>
+        <nav class="navbar">
+            <h1 class="logo"><a href="index.html">personal website</a></h1>
+            <ul class="nav-list">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="blog.html">Blog</a></li>
+                <li><a href="portfolio.html">Portfolio</a></li>
+                <li><a href="resume.html">Resume</a></li>
+                <li><a href="contact.html">Contact</a></li>
+            </ul>
+        </nav>
+
+        <main>
+            <h1 class="page-title">Blog</h1>
+            <h2 class="page-subtitle">Posts</h2>
+            <div id="blog-container"></div>
+        </main>
+
+        <div class="footer" > 
+        <footer>
+                <p>© 2025 Trisha Chandwani's website | All Rights Reserved </p>
+        </footer>
+        </div>
+    </body>
+
+    <script src="src/blog.js"></script>
+</html>
diff --git a/bootcamp-milestone-1/README.md b/bootcamp-milestone-1/README.md
@@ -0,0 +1,16 @@
+# Developer Bootcamp 2025
+This is the start of your 2025 bootcamp project!
+
+This repo will serve as a place to "turn in" your work. More info about bootcamp can be found on the [Developer Bootcamp 2025 Notion Page](https://www.notion.so/h4i/2025-Developer-Bootcamp-246197abf07b80d09944c01a3c4c9cd4?source=copy_link).
+
+As you work, be sure to make comments in your code both for your understanding and ours during review! Please do this reading on [code comments](https://stackoverflow.blog/2021/12/23/best-practices-for-writing-code-comments/)! When making commits, be sure to follow the requirements listed on this page regarding [Git Commits & Pull Requests](https://www.notion.so/h4i/Git-Commits-Pull-Requests-246197abf07b80edb9a0c7a45d01bbc8).
+
+To submit your work, create a pull request from your own fork (DO NOT MERGE if you are able to). Fill out the pull request template before you pull, or your submission will be automatically rejected! This allows us to review your work in a reasonably quick manner.
+
+## Creating a PR:
+1. Push all changes to your fork
+2. Go to the "Pull requests" tab in your GitHub repo
+3. Create a pull request with your changes. Double-check the 'base repository' is the main bootcamp repo 'hack4impact-calpoly/bootcamp-project-2025'!
+4. Fill out the PR template description!
+5. Assign the engineering team as 'Reviewers'
+6. Link the milestone issue to the PR
diff --git a/bootcamp-milestone-1/backend-for-beginners.html b/bootcamp-milestone-1/backend-for-beginners.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Backend for Beginners - Trisha's Blog</title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body>
+        <nav class="navbar">
+            <h1 class="logo"><a href="index.html">personal website</a></h1>
+            <ul class="nav-list">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="blog.html">Blog</a></li>
+                <li><a href="portfolio.html">Portfolio</a></li>
+                <li><a href="resume.html">Resume</a></li>
+                <li><a href="contact.html">Contact</a></li>
+            </ul>
+        </nav>
+
+        <main>
+            <article class="blog-post">
+                <a href="blog.html" class="back-link">← Back to Blog</a>
+
+                <h1 class="blog-post-title">Backend for Beginners</h1>
+                <p class="blog-post-date">October 16, 2025</p>
+
+                <img src="backend.png" alt="Backend for Beginners" class="blog-post-image">
+
+                <div class="blog-post-content">
+                    <p>The backend is the engine of the website. It handles all the logic, data storage, and processing that users don't see. Think of it as the car's engine, fuel tank, and internal mechanics.</p>
+
+                    <p>If you're new to web development, understanding the backend is crucial. While the frontend is what users interact with, the backend is where the magic really happens. Let's dive into what backend development is all about!</p>
+
+                    <h2>What is the Backend?</h2>
+                    <p>The backend, also known as the server-side, is the part of a web application that runs on the server. It's responsible for managing the application's logic, database interactions, authentication, and server configuration.</p>
+
+                    <p>When you log into a website, submit a form, or retrieve data, the backend processes these requests and sends back the appropriate response to the frontend.</p>
+
+                    <h2>Key Components of Backend Development</h2>
+
+                    <h3>1. Server</h3>
+                    <p>The server is a computer or system that hosts your web application. It receives requests from clients (browsers) and sends back responses. Popular server technologies include Node.js, Apache, and Nginx.</p>
+
+                    <h3>2. Database</h3>
+                    <p>Databases store all the data for your application. This could be user information, blog posts, products, or any other data your application needs. Common databases include MySQL, PostgreSQL, MongoDB, and SQLite.</p>
+
+                    <h3>3. API (Application Programming Interface)</h3>
+                    <p>APIs allow the frontend and backend to communicate. They define endpoints that the frontend can call to retrieve or modify data. RESTful APIs and GraphQL are popular API architectures.</p>
+
+                    <h3>4. Server-Side Programming Languages</h3>
+                    <p>Backend developers use languages like JavaScript (Node.js), Python, Java, Ruby, PHP, or C# to write the server-side logic. Each language has its own strengths and use cases.</p>
+
+                    <h2>Backend vs Frontend</h2>
+                    <p>The frontend is what users see and interact with - the buttons, forms, colors, and layouts. The backend handles what happens when users click those buttons: processing data, storing information, and retrieving content from databases.</p>
+
+                    <p>For example, when you post a comment on a blog:</p>
+                    <ul>
+                        <li><strong>Frontend:</strong> Displays the comment form and shows your comment after you submit it</li>
+                        <li><strong>Backend:</strong> Validates your comment, saves it to the database, and retrieves it when other users visit the page</li>
+                    </ul>
+
+                    <h2>Getting Started with Backend Development</h2>
+                    <p>If you're interested in learning backend development, here are some steps to get started:</p>
+
+                    <ol>
+                        <li><strong>Learn a Programming Language:</strong> Start with JavaScript (Node.js) or Python - both are beginner-friendly and widely used.</li>
+                        <li><strong>Understand HTTP:</strong> Learn how web requests and responses work.</li>
+                        <li><strong>Study Databases:</strong> Start with SQL basics and try building simple database schemas.</li>
+                        <li><strong>Build Projects:</strong> Create a simple API or a basic CRUD (Create, Read, Update, Delete) application.</li>
+                        <li><strong>Learn About Security:</strong> Understand authentication, authorization, and common security practices.</li>
+                    </ol>
+
+                    <h2>Popular Backend Frameworks</h2>
+                    <p>Frameworks make backend development easier by providing pre-built tools and structure:</p>
+                    <ul>
+                        <li><strong>Express.js:</strong> A minimal Node.js framework</li>
+                        <li><strong>Django:</strong> A Python framework known for rapid development</li>
+                        <li><strong>Flask:</strong> A lightweight Python framework</li>
+                        <li><strong>Ruby on Rails:</strong> A full-featured Ruby framework</li>
+                        <li><strong>Spring Boot:</strong> A Java framework for enterprise applications</li>
+                    </ul>
+
+                    <h2>Conclusion</h2>
+                    <p>Backend development is an exciting field that powers everything we do online. While it may seem complex at first, breaking it down into smaller concepts makes it much more approachable. Start with the basics, build small projects, and gradually increase complexity as you learn.</p>
+
+                    <p>Remember, every expert backend developer started as a beginner. The key is consistent practice and curiosity. Happy coding!</p>
+                </div>
+            </article>
+        </main>
+
+        <div class="footer"> 
+            <footer>
+                <p>© 2025 Trisha Chandwani's website | All Rights Reserved</p>
+            </footer>
+        </div>
+    </body>
+</html>
diff --git a/bootcamp-milestone-1/backend.png b/bootcamp-milestone-1/backend.png
diff --git a/bootcamp-milestone-1/blog.html b/bootcamp-milestone-1/blog.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>
+            Blog 
+        </title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body>
+        <nav class="navbar">
+            <h1 class="logo"><a href="index.html">personal website</a></h1>
+            <ul class="nav-list">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="blog.html">Blog</a></li>
+                <li><a href="portfolio.html">Portfolio</a></li>
+                <li><a href="resume.html">Resume</a></li>
+                <li><a href="contact.html">Contact</a></li>
+            </ul>
+        </nav>
+
+        <main>
+            <h1 class="page-title">Blog</h1>
+            <h2 class="page-subtitle">Posts</h2>
+            <div id="blog-container"></div>
+        </main>
+
+        <div class="footer" > 
+        <footer>
+                <p>© 2025 Trisha Chandwani's website | All Rights Reserved </p>
+        </footer>
+        </div>
+    </body>
+
+    <script src="src/blog.js"></script>
+</html>
diff --git a/bootcamp-milestone-1/contact.html b/bootcamp-milestone-1/contact.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>
+            Contact website
+        </title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body>
+        <nav class="navbar">
+            <h1 class="logo"><a href="index.html">personal website</a></h1>
+            <ul class="nav-list">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="blog.html">Blog</a></li>
+                <li><a href="portfolio.html">Portfolio</a></li>
+                <li><a href="resume.html">Resume</a></li>
+                <li><a href="contact.html">Contact</a></li>
+            </ul>
+        </nav>
+
+        <main>
+            <h1 class="page-title">Contact Page</h1>
+
+            <form>
+            <label for="name">Name</label>
+            <input type="text" id="name" name="name" placeholder="Name" required />
+
+            <label for="email">Email</label>
+            <input type="email" id="email" name="email" placeholder="Email" />
+
+            <textarea
+                id="comments"
+                name="comments"
+                placeholder="Message"
+                required
+            ></textarea>
+
+            <input type="submit" value="Submit" />
+        </main>
+
+        <div class="footer" > 
+        <footer>
+                <p>© 2025 Trisha Chandwani's website | All Rights Reserved </p>
+        </footer>
+        </div>
+    </body>
+</html>
diff --git a/bootcamp-milestone-1/form.html b/bootcamp-milestone-1/form.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+    <body>
+        <main>
+        <p>Form</p>
+        <form>
+        <!--This is a comment in HTML. It lets you write text that
+        won't be rendered in the webpage.-->
+        <label for="name">Name</label>
+        <input type="text" id="name" name="name" placeholder="Name" required />
+        <br><br>
+        <!--The "for" attribute references the "name" attribute in <input>.
+        The "name" attribute is necessary once we start tying in JavaScript-->
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" placeholder="Email" />
+        <br><br>
+        <label for="password">Password</label>
+        <input type="password" id="pass" name="pass" placeholder="Password" />
+        <br><br>
+        <label for="select">Position</label>
+        <select id="select" name="select">
+          <option value="software">Software Developer</option>
+          <option value="product">Product Manager</option>
+          <option value="design">Designer</option>
+        </select>
+        <br><br>
+        <label for="comments">Comments</label>
+        <textarea
+          id="comments"
+          name="comments"
+          placeholder="Comments"
+          required
+        ></textarea>
+        <br><br>
+        <input type="submit" value="Submit" />
+    </body>
+</html>
diff --git a/bootcamp-milestone-1/home.png b/bootcamp-milestone-1/home.png
diff --git a/bootcamp-milestone-1/home_page.png b/bootcamp-milestone-1/home_page.png