<commit_before># ![Learn the Web, Part 2](title-card.png)

#### This 15 week course covers responsive and modular web design, accessibility, tables, forms & performance.

---

[**<NAME>**](http://thomasjbradley.ca) — office: **J104** — [<EMAIL>](mailto:<EMAIL>)

---
---

## Week-by-week

Below is the complete breakdown of everything that will be covered over the next fifteen weeks.

---

### **1. Intros & reviews**

**Review topics**

- [Everything from **Set up**](http://learn-the-web.algonquindesign.ca/topics/#set-up)
- [Everything from **Web Dev 1**](http://learn-the-web.algonquindesign.ca/topics/#web-dev-1)

**In class**

- Course introduction, Q&A, system of the term
- Lecture:
  - Quick review of the Open Web
  - Why we code
  - Order of learning code
  - Our goals this term
  - [Naming conventions](http://learn-the-web.algonquindesign.ca/topics/naming-paths-cheat-sheet/)
- [*Exercise: Organization, naming & setup*](https://github.com/acgd-webdev-2/exercise-reviews#1-organization-naming--setup)
- [*Exercise: HTML semantics review*](https://github.com/acgd-webdev-2/exercise-reviews#2-html-semantics-review)
- [*Exercise: CSS properties review*](https://github.com/acgd-webdev-2/exercise-reviews#3-css-properties-review)

**Homework**

- [**Assignment 1: Semantics & styling—3 hours**](https://github.com/acgd-webdev-2/assignment-1)

---

### **2. Devices & media queries**

**Topics**

- [All devices setup](http://learn-the-web.algonquindesign.ca/topics/all-devices-setup/)
- [Media queries](http://learn-the-web.algonquindesign.ca/topics/media-queries/)
- [Screen sizes cheat sheet](http://learn-the-web.algonquindesign.ca/topics/screen-sizes-cheat-sheet/)

**In class**

- *Exercise: device sizes*
- Demos:
  - Setup
  - Media queries, calculating ems
  - Inheriting and the cascade
  - Layout changes

**Homework**

- [**Assignment 2: Medium screens—3 hours**](https://github.com/acgd-webdev-2/assignment-2)

---

### **3. Media queries for large screens**

**Topics**

- [Media queries layout](http://learn-the-web.algonquindesign.ca/topics/media-queries-layout/)

**In class**

- Demos: 
  - Media queries for larger screens
  - Bigger fonts on bigger screens
  - Maximum widths with wrappers
  - Print styles

**Homework**

- [**Assignment 3: Large screens—2 hours, in class**](https://github.com/acgd-webdev-2/assignment-3)
- [**Project 1: Business card website—8 hours**](https://github.com/acgd-webdev-2/project-1)

---

### **4. Project 1 work period**

**In class**

- [*Activity: Em Enforcer*](http://activities.learn-the-web.algonquindesign.ca/em-enforcer/)
- Work time, Q&A time, one-on-one feedback

**Homework**

- Continue working on Project 1
- **Download—and install—all these for next week:**
  - [VirtualBox](https://www.virtualbox.org/)
  - [IE10 on Win7 for VirtualBox](https://dev.modern.ie/tools/vms/mac/)
  - [IE11 on Win8.1 for VirtualBox](https://dev.modern.ie/tools/vms/mac/)
  - [Microsoft Edge on Win10 for VirtualBox](https://dev.modern.ie/tools/vms/mac/)
- Make sure the following browsers on your computer are up-to-date: Chrome, Safari, Firefox, Opera.
- If you have any other web connected devices (tablets, handheld gaming devices, etc.) bring those next week.

---

### **5. Project 1 testing**

**Topics**

- [Browser testing checklist](http://learn-the-web.algonquindesign.ca/topics/browser-testing-checklist/)
- [Performance checklist](http://learn-the-web.algonquindesign.ca/topics/performance-checklist/)

**In class**

- [*Peer testing sprint*](https://github.com/acgd-learn-the-web/peer-testing-sprint)

---

### **6. Modular & responsive grids**

**Topics**

- [Grids](http://learn-the-web.algonquindesign.ca/topics/grids/)
- [**Gridifier »**](http://gridifier.web-dev.tools/)
- [Gridifier cheat sheet](http://learn-the-web.algonquindesign.ca/topics/gridifier-cheat-sheet/)

**In class**

- [*Exercise: finding grids in web layouts*](https://github.com/acgd-webdev-2/exercise-finding-grids)
- Demos:
  - Making flexible grids
  - Making elements with & without gutters
  - Making responsive grids
- *Exercise: using grids in web layouts* — complete the grids drawn on the board
- Demos:
  - Grid systems & [Gridifier »](http://gridifier.web-dev.tools/)

**Homework**

- [**Assignment 4: Grids—3 hours**](https://github.com/acgd-webdev-2/assignment-4)

---

### **7. Modular typography & spacing**

**Topics**

- [Modular typography](http://learn-the-web.algonquindesign.ca/topics/modular-typography/)
- [**Typografier »**](http://typografier.web-dev.tools/)
- [Typografier cheat sheet](http://learn-the-web.algonquindesign.ca/topics/typografier-cheat-sheet/)

**In class**

- Demos: 
  - Generating a type system
  - Using sizes
  - Utility classes

**Homework**

- [**Assignment 5: Modular typography—2 hours**](https://github.com/acgd-webdev-2/assignment-5)

---

### **8. Modular CSS**

**Topics**

- [Modules](http://learn-the-web.algonquindesign.ca/topics/modules/)
- [**Modulifier »**](http://modulifier.web-dev.tools/)
- [Modulifier cheat sheet](http://learn-the-web.algonquindesign.ca/topics/modulifier-cheat-sheet/)

**In class**

<!-- - *Exercise: finding common patterns* -->
- Demos:
  - List group
  - Embed containers
  - Buttons

**Homework**

- [**Assignment 6: Modules—2 hours, in class**](https://github.com/acgd-webdev-2/assignment-6)
- [**Project 2: SAAS website layouts—8 hours**](https://github.com/acgd-webdev-2/project-2)

---

### **9. Project 2 work period**

**Topics**

- [Interactive wireframes](http://learn-the-web.algonquindesign.ca/topics/interactive-wireframes/)
- [Modular website](http://learn-the-web.algonquindesign.ca/topics/modular-layout/)

**In class**

- [*Activity: Keyboard Commander*](http://activities.learn-the-web.algonquindesign.ca/keyboard-commander/)
- Work time, Q&A time, one-on-one feedback

**Homework**

- Continue working on Project 2
- If you have any other web connected devices (tablets, handheld gaming devices, etc.) bring those next week.

---

### **10. Project 2 testing**<commit_msg>Update in class demos<commit_after># ![Learn the Web, Part 2](title-card.png)

#### This 15 week course covers responsive and modular web design, accessibility, tables, forms & performance.

---

[**<NAME>**](http://thomasjbradley.ca) — office: **J104** — [<EMAIL>](mailto:<EMAIL>)

---
---

## Week-by-week

Below is the complete breakdown of everything that will be covered over the next fifteen weeks.

---

### **1. Intros & reviews**

**Review topics**

- [Everything from **Set up**](http://learn-the-web.algonquindesign.ca/topics/#set-up)
- [Everything from **Web Dev 1**](http://learn-the-web.algonquindesign.ca/topics/#web-dev-1)

**In class**

- Course introduction, Q&A, system of the term
- Lecture:
  - Quick review of the Open Web
  - Why we code
  - Order of learning code
  - Our goals this term
  - [Naming conventions](http://learn-the-web.algonquindesign.ca/topics/naming-paths-cheat-sheet/)
- [*Exercise: Organization, naming & setup*](https://github.com/acgd-webdev-2/exercise-reviews#1-organization-naming--setup)
- [*Exercise: HTML semantics review*](https://github.com/acgd-webdev-2/exercise-reviews#2-html-semantics-review)
- [*Exercise: CSS properties review*](https://github.com/acgd-webdev-2/exercise-reviews#3-css-properties-review)

**Homework**

- [**Assignment 1: Semantics & styling—3 hours**](https://github.com/acgd-webdev-2/assignment-1)

---

### **2. Devices & media queries**

**Topics**

- [All devices setup](http://learn-the-web.algonquindesign.ca/topics/all-devices-setup/)
- [Media queries](http://learn-the-web.algonquindesign.ca/topics/media-queries/)
- [Screen sizes cheat sheet](http://learn-the-web.algonquindesign.ca/topics/screen-sizes-cheat-sheet/)

**In class**

- *Exercise: device sizes*
- Demos:
  - Setup
  - Media queries, calculating ems
  - Inheriting and the cascade
  - Layout changes

**Homework**

- [**Assignment 2: Medium screens—3 hours**](https://github.com/acgd-webdev-2/assignment-2)

---

### **3. Media queries for large screens**

**Topics**

- [Media queries layout](http://learn-the-web.algonquindesign.ca/topics/media-queries-layout/)

**In class**

- Demos: 
  - Media queries for larger screens
  - Bigger fonts on bigger screens
  - Maximum widths with wrappers
  - Print styles

**Homework**

- [**Assignment 3: Large screens—2 hours, in class**](https://github.com/acgd-webdev-2/assignment-3)
- [**Project 1: Business card website—8 hours**](https://github.com/acgd-webdev-2/project-1)

---

### **4. Project 1 work period**

**In class**

- [*Activity: Em Enforcer*](http://activities.learn-the-web.algonquindesign.ca/em-enforcer/)
- Work time, Q&A time, one-on-one feedback

**Homework**

- Continue working on Project 1
- **Download—and install—all these for next week:**
  - [VirtualBox](https://www.virtualbox.org/)
  - [IE10 on Win7 for VirtualBox](https://dev.modern.ie/tools/vms/mac/)
  - [IE11 on Win8.1 for VirtualBox](https://dev.modern.ie/tools/vms/mac/)
  - [Microsoft Edge on Win10 for VirtualBox](https://dev.modern.ie/tools/vms/mac/)
- Make sure the following browsers on your computer are up-to-date: Chrome, Safari, Firefox, Opera.
- If you have any other web connected devices (tablets, handheld gaming devices, etc.) bring those next week.

---

### **5. Project 1 testing**

**Topics**

- [Browser testing checklist](http://learn-the-web.algonquindesign.ca/topics/browser-testing-checklist/)
- [Performance checklist](http://learn-the-web.algonquindesign.ca/topics/performance-checklist/)

**In class**

- [*Peer testing sprint*](https://github.com/acgd-learn-the-web/peer-testing-sprint)

---

### **6. Modular & responsive grids**

**Topics**

- [Grids](http://learn-the-web.algonquindesign.ca/topics/grids/)
- [**Gridifier »**](http://gridifier.web-dev.tools/)
- [Gridifier cheat sheet](http://learn-the-web.algonquindesign.ca/topics/gridifier-cheat-sheet/)

**In class**

- [*Exercise: finding grids in web layouts*](https://github.com/acgd-webdev-2/exercise-finding-grids)
- Demos:
  - Making flexible grids
  - Making elements with & without gutters
  - Making responsive grids
- *Exercise: using grids in web layouts* — complete the grids drawn on the board
- Demos:
  - Grid systems & [Gridifier »](http://gridifier.web-dev.tools/)

**Homework**

- [**Assignment 4: Grids—3 hours**](https://github.com/acgd-webdev-2/assignment-4)

---

### **7. Modular typography & spacing**

**Topics**

- [Modular typography](http://learn-the-web.algonquindesign.ca/topics/modular-typography/)
- [**Typografier »**](http://typografier.web-dev.tools/)
- [Typografier cheat sheet](http://learn-the-web.algonquindesign.ca/topics/typografier-cheat-sheet/)

**In class**

- Demos: 
  - Generating a type system
  - Using sizes
  - Utility classes

**Homework**

- [**Assignment 5: Modular typography—2 hours**](https://github.com/acgd-webdev-2/assignment-5)

---

### **8. Modular CSS**

**Topics**

- [Modules](http://learn-the-web.algonquindesign.ca/topics/modules/)
- [**Modulifier »**](http://modulifier.web-dev.tools/)
- [Modulifier cheat sheet](http://learn-the-web.algonquindesign.ca/topics/modulifier-cheat-sheet/)

**In class**

<!-- - *Exercise: finding common patterns* -->
- Demos:
  - List group
  - Embed containers
  - Media objects
  - Buttons

**Homework**

- [**Assignment 6: Modules—2 hours, in class**](https://github.com/acgd-webdev-2/assignment-6)
- [**Project 2: SAAS website layouts—8 hours**](https://github.com/acgd-webdev-2/project-2)

---

### **9. Project 2 work period**

**Topics**

- [Interactive wireframes](http://learn-the-web.algonquindesign.ca/topics/interactive-wireframes/)
- [Modular website](http://learn-the-web.algonquindesign.ca/topics/modular-layout/)

**In class**

- [*Activity: Keyboard Commander*](http://activities.learn-the-web.algonquindesign.ca/keyboard-commander/)
- Work time, Q&A time, one-on-one feedback

**Homework**

- Continue working on Project 2
- If you have any other web connected devices (tablets, handheld gaming devices, etc.) bring those next week.

---

### **10. Project 2 testing**
{'fraction_non_alphanumeric': 0.18161472148541113, 'fraction_numerical': 0.01210212201591512, 'mean_word_length': 3.9650205761316872, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 34, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5148956', 'n_tokens_mistral': 4400, 'n_tokens_neox': 4185, 'n_words': 896}