diff --git a/module2/index.md b/module2/index.md
index 4128b795..6d59443e 100644
--- a/module2/index.md
+++ b/module2/index.md
@@ -1,15 +1,29 @@
---
layout: page
title: Module 2
-subheading: Web Applications with Ruby
+subheading: Web Application Development
---
## Overview
+In Module 2, students will be introduced to HTML, CSS, and JavaScript while also continuing to expand upon fundamental Ruby skills by building database-backed full-featured web applications in Rails. Through group projects, we explore best practices in agile project management and collaboration. By the end of this module, students will be comfortable creating basic Rails web applications with dynamic front-end interfaces.
+
+## Instructors
+
+- Abdul Redd
+- Heather Faerber
+
## Curriculum
+
- [Intermission Pre-Work](./intermission_work)
- [Lessons](./lessons)
- [Projects](./projects)
+## Other Resources
+
+- Coming Soon!
+
+## Requirements
-## Other Resources
\ No newline at end of file
+- [Portfolio Guidelines](./requirements/portfolio_guidelines)
+- [Promotion Requirements](./requirements/promotion_requirements)
diff --git a/module2/intermission_work/dog_party.md b/module2/intermission_work/dog_party.md
index 987f2469..e053e892 100644
--- a/module2/intermission_work/dog_party.md
+++ b/module2/intermission_work/dog_party.md
@@ -1,6 +1,7 @@
---
title: Dog Party
---
+
## Overview
Welcome to the Dog Party project! As a software developer, you’ll often need to build user interfaces (UI) based on [comps](https://en.wikipedia.org/wiki/Comprehensive_layout) provided by a designer. In this project, you’ll create a one-page static site to practice writing well-structured, semantic HTML and clean, precise CSS.
@@ -17,55 +18,60 @@ We’ve provided a design comp and a set of technical specifications. Your chall
#### Hex Codes:
-* Light blue: #75e2e6
-* Dark blue: #048eaa
-* Background color: #ffffff
-* White text: #ffffff
-* Body text: #000000
+- Light blue: `#75e2e6`
+- Dark blue: `#048eaa`
+- Background color: `#ffffff`
+- White text: `#ffffff`
+- Body text: `#000000`
# 
-
## Steps to Set Up Your Project Files
+
- Create a new directory called `dog_Party`.
- In your dog_party directory create a new sub-directory called `assets`.
- You will also need to [download the image assets](https://drive.google.com/drive/folders/0B_lPnjyMN6-CamRRV0xPRmZNOFU?usp=sharing) and place them into your assets directory
-- In the `dog_party` directory, create the following files:
+- In the `dog_party` directory, create the following files:
- `index.html`
- `style.css`
- `main.js`
## Phase Zero: Understanding the Comp
+
To better understand the comp, let’s break it down into sections. Here’s how each section is separated:
## Phase One: Basic Requirements
+
Start by building the HTML and using semantic tags to create a clean structure for your page. Follow the [Turing HTML Style Guide](https://github.com/turingschool-examples/html) for best practices.
+
##### Step 1:
+
Here is a basic outline of the HTML you'll need to start with this project.
```html
-
-
-
+
+
+
Dog Party
-
-
-
-
+
+
+
```
-In here you are seeing the basic outline of the HTML you will need to start with this project.
+
+In here you are seeing the basic outline of the HTML you will need to start with this project.
+
- The `` declaration defines the document.
- The `` element is the root of an HTML.
-- The `` element is the container for meta tags.
-- The `` element sets the title of the application.
+- The `` element is the container for meta tags.
+- The `` element sets the title of the application.
- The `` This line links the HTML document to an external CSS file named "style.css". It allows the HTML to use the styles defined in "style.css" for layout and design.
-- The `` element is the container for all the content on the page.
-Wow that's a lot of code, but it's all very important.
-Let's move on to adding more content to our HTML file. But before we do that, let's talk about how to look at our page in the browser.
+- The `` element is the container for all the content on the page.
+ Wow that's a lot of code, but it's all very important.
+ Let's move on to adding more content to our HTML file. But before we do that, let's talk about how to look at our page in the browser.
### Viewing Your HTML File in the Browser
@@ -75,25 +81,27 @@ To see how your HTML file looks in a web browser:
1. **Save Your File**: Ensure that your `index.html` file is saved in your `dog_party` directory.
2. **Open the File**:
- - **Using the Terminal**:
- - `cd` into the repo then run `open index.html` in your terminal. Depending on the structure of your repo, the path to get to the index.html file might differ slightly in different repos. For example, `open /src/index.html`
- - We recommend getting familiar with this approach but you can see other options below.
- - **Using File Explorer/Finder**:
- - Navigate to the directory where your `index.html` file is located.
- - Double-click on the `index.html` file. This should open the file in your default web browser.
- - **Using a Web Browser**:
- - Open your preferred web browser.
- - Press `Cmd + O` (Mac) to open a file.
- - Navigate to your `index.html` file and select it to open.
- - **Using a Code Editor**:
- - If you are using a code editor like Visual Studio Code, you can right-click on the `index.html` file and select "Open with Live Server" (if you have the Live Server extension installed). This will open your file in the browser and automatically refresh it whenever you make changes.
-
+ - **Using the Terminal**:
+ - `cd` into the repo then run `open index.html` in your terminal. Depending on the structure of your repo, the path to get to the index.html file might differ slightly in different repos. For example, `open /src/index.html`
+ - We recommend getting familiar with this approach but you can see other options below.
+ - **Using File Explorer/Finder**:
+ - Navigate to the directory where your `index.html` file is located.
+ - Double-click on the `index.html` file. This should open the file in your default web browser.
+ - **Using a Web Browser**:
+ - Open your preferred web browser.
+ - Press `Cmd + O` (Mac) to open a file.
+ - Navigate to your `index.html` file and select it to open.
+ - **Using a Code Editor**:
+ - If you are using a code editor like Visual Studio Code, you can right-click on the `index.html` file and select "Open with Live Server" (if you have the Live Server extension installed). This will open your file in the browser and automatically refresh it whenever you make changes.
By following these steps, you can view your HTML file in the browser and see how your code renders on the web. This is crucial for testing and ensuring that your webpage looks and behaves as expected.
+
##### Step 2: Adding Basic Structure
-Time to add more content to our HTML file.
+
+Time to add more content to our HTML file.
+
- Let's add the header, main, and footer to this page to add more structure to it. In the body of your HTML file, add the following tags:
- ``
- ``
@@ -104,320 +112,357 @@ Now your HTML file should look like this:
```html
-
-
-
+
+
+
Dog Party
-
-
-
+
+
+
-
+
-
+
-
+
-
```
+
##### Step 3: Adding Header Content
-Alright, let's start by adding the logo to our header.We need to use a [image tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) to add the logo to our header.
+
+Alright, let's start by adding the logo to our header.We need to use a [image tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) to add the logo to our header.
```html
-
+
```
-Next, we need to add the navigation bar to our header, for that we are using the nav tag. with an unordered list to our code.
+
+Next, we need to add the navigation bar to our header, for that we are using the nav tag. with an unordered list to our code.
```html
```
+
##### Step 4:
-Don't worry if your code is not perfect, and the style doesn't look like the comp. We are going to work on that in the next phase.
-Now we need to add the hero section where we have a title, a paragraph, and a button.
-Let's add a section tag to our main section.
+
+Don't worry if your code is not perfect, and the style doesn't look like the comp. We are going to work on that in the next phase.
+Now we need to add the hero section where we have a title, a paragraph, and a button.
+Let's add a section tag to our main section.
```html
-
A Site About Some Dogs
-
-
+
A Site About Some Dogs
+
+
```
-There are few primary things we did in here.
-- Add a section tag with a class of hero.
-- Add a h1 tag with a strong tag inside of it.
+
+There are few primary things we did in here.
+
+- Add a section tag with a class of hero.
+- Add a h1 tag with a strong tag inside of it.
- Add an image tag with a class of hero-image.
- Add a form tag with a label tag, input tag, and button tag.
##### Step 5:
-Alright, now we are done with our hero section, let's add the rest of our content to our page. We'll need another section here to add our dogs in it. But this section is going to be a little more complex.
-It looks like we need to add 3 images for dogs, with a title and some description for each one. But they all look the same just the image is different but the style looks similar. Great I will show you how to make it happen for one and your job is to add the other 2 in it.
-To do this we are going to need to use a `section` tag.
-- Add a section tag with a class of "info".
-- Add 1 `div` tag with a class of "dog-info".
-- Within that `div` tag, add an image tag.
-- After the image tag, add a `h2` tag with the title of the dog.
-- Next, add a `p` tag with the description for the dog.
-- It looks like each dog has a button that says "name this dog" and when we click on it, probably it opens another page, but for now we are not going to worry about that.
-After making one dog div, it looks like we need to add the rest of our dogs, which they all kind of look similar, only the image and the description is different. I'll let you add those dog-info divs to your work.
+
+Alright, now we are done with our hero section, let's add the rest of our content to our page. We'll need another section here to add our dogs in it. But this section is going to be a little more complex.
+It looks like we need to add 3 images for dogs, with a title and some description for each one. But they all look the same just the image is different but the style looks similar. Great I will show you how to make it happen for one and your job is to add the other 2 in it.
+To do this we are going to need to use a `section` tag.
+
+- Add a section tag with a class of "info".
+- Add 1 `div` tag with a class of "dog-info".
+- Within that `div` tag, add an image tag.
+- After the image tag, add a `h2` tag with the title of the dog.
+- Next, add a `p` tag with the description for the dog.
+- It looks like each dog has a button that says "name this dog" and when we click on it, probably it opens another page, but for now we are not going to worry about that.
+After making one dog div, it looks like we need to add the rest of our dogs, which they all kind of look similar, only the image and the description is different. I'll let you add those dog-info divs to your work.
### Here is how your body section of your HTML should look like:
```html
-
-
-
-
-
-
-
-
-
-
A Site About Some Dogs
-
-
-
-
-
-
-
How To Dog
-
Context about this Dog
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
A Site About Some Dogs
+
+
+
+
+
+
+
How To Dog
+
Context about this Dog
+
+
+
+
+
+
```
+
-Well done, now we are almost done with our HTML file.We'll comeback to footer section after we are done with some styling.
+Well done, now we are almost done with our HTML file.We'll comeback to footer section after we are done with some styling.
-## Phase Two: Styling
+## Phase Two: Styling
#### Step 1: Global Styles
-Now we are going to start styling our page. Let's open up our style.css file and start styling our page.
-- First, we need to add some global styling to our page. We can start by adding a body selector to the css.
+
+Now we are going to start styling our page. Let's open up our style.css file and start styling our page.
+
+- First, we need to add some global styling to our page. We can start by adding a body selector to the css.
+
```css
-body {
- font-family : Arial, sans-serif;
- margin: 0;
- padding: 0;
- background-color: #ffffff;
- color: #000000;
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #ffffff;
+ color: #000000;
}
```
+
#### Step 2: Styling the Header
-Next step is to look into our banner section, it looks like the background color is #75e2e6, which is a hex color code for the light blue we have. Awesome, let's add that to our CSS. Header is where we want to have that blue color. Let's add that selector to our CSS.
+
+Next step is to look into our banner section, it looks like the background color is #75e2e6, which is a hex color code for the light blue we have. Awesome, let's add that to our CSS. Header is where we want to have that blue color. Let's add that selector to our CSS.
+
```css
header {
- background-color: #75e2e6;
- padding: 20px;
- display: flex;
- justify-content: space-between;
- align-items: center;
+ background-color: #75e2e6;
+ padding: 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
```
-We've added few other properties to the header, like padding, display, justify-content, and align-items. We'll discuss what each property means in M2. But for now if you want to know more you can look into the documentation here. [Flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) box and it's usage. Flex box is really helpful in creating layouts, and centering items. I would suggest you all to play around with flex box, and the padding size, change the padding to 40px, and see what changes, take notes and be ready to share this with you cohort.
-Let's add styling for our logo and nav-list. Since the image in our header has a class of logo, we can add a selector for that, by adding a .logo to our css.
+
+We've added few other properties to the header, like padding, display, justify-content, and align-items. We'll discuss what each property means in M2. But for now if you want to know more you can look into the documentation here. [Flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) box and it's usage. Flex box is really helpful in creating layouts, and centering items. I would suggest you all to play around with flex box, and the padding size, change the padding to 40px, and see what changes, take notes and be ready to share this with you cohort.
+Let's add styling for our logo and nav-list. Since the image in our header has a class of logo, we can add a selector for that, by adding a .logo to our css.
+
```css
.logo {
- height: 50px;
+ height: 50px;
}
```
+
Now let's add the rest, what is the class of nav-list?
```css
.nav-list {
- list-style-type: none;
- display: flex;
- gap : 20px;
+ list-style-type: none;
+ display: flex;
+ gap: 20px;
+}
+li a {
+ text-decoration: none;
+ color: #000000;
+ font-weight: bold;
}
- li a {
- text-decoration: none;
- color: #000000;
- font-weight: bold;
-}
```
+
The line `li a` is a CSS descendant selector. It targets `` elements that are descendants of `
+ 
+
-
+ 
-