From 9eb0030aa2d5a44346f561dbfeaffd621898b446 Mon Sep 17 00:00:00 2001
From: Alina L <alodahl@pointloma.edu>
Date: Thu, 10 Jun 2021 06:37:40 -0700
Subject: [PATCH] feat(html,css,js-dom): curr updates: no bootstrap, more css &
html practice (#1565)
---
projects/recipe-page/phase-1-html-prompt.md | 44 +++--------
projects/recipe-page/phase-2-css-prompt.md | 27 +++----
web/css-part-2.md | 80 ++++++++++++++++++++
web/css.md | 82 ++++++++++++---------
web/html-forms.md | 14 +++-
web/html.md | 49 +++++++-----
web/js-dom-methods.md | 7 +-
web/media-queries.md | 15 ++--
8 files changed, 209 insertions(+), 109 deletions(-)
create mode 100644 web/css-part-2.md
diff --git a/projects/recipe-page/phase-1-html-prompt.md b/projects/recipe-page/phase-1-html-prompt.md
index 40234d9ac..bef44f13a 100644
--- a/projects/recipe-page/phase-1-html-prompt.md
+++ b/projects/recipe-page/phase-1-html-prompt.md
@@ -23,9 +23,7 @@ Phase 1 of the project involves coding the structure of your webpage using HTML.
Phase 2 of the project involves adding styling and pizazz using CSS. This includes changing the font style, font size, colors, and other qualities that interest you.
-Phase 3 of the project involves incorporating Bootstrap. You'll add a navigation bar and several other Bootstrap components of your choosing.
-
-Phase 4 of the project involves incorporating jQuery. You'll add at least one interactive element of your choosing.
+Phase 3 of the project involves incorporating JS DOM methods. You'll add at least one interactive element of your choosing.
### Context
@@ -48,39 +46,24 @@ Phase 4 of the project involves incorporating jQuery. You'll add at least one in
## Setup Instructions
-Use the Terminal for navigating around the file system and creating new folders and files. Refer to the lesson on [The Command Line Interface](../../dev-tools/command-line-interface.md) if you need guidance on using the Terminal.
-
-When you get to the steps below that ask you to initialize a git repo and track files using git, refer to the lesson on [Git and Version Control](../git/git-version-control.md) if you need guidance.
-
-If you do not yet have a directory called `techtonica-projects` on your Desktop, create one now using the Terminal.
-
-1. Navigate to the `techtonica-projects` directory.
-2. Create a new directory called `recipe-page` within the `techtonica-projects` directory.
-3. Navigate to the `recipe-page` directory.
-4. Initialize recipe-page as a git repo.
-
If you have questions, do not disturb your colleagues until you have spent at least 20 minutes troubleshooting on your own. Be sure to format your question using the template we practiced in the [Asking Good Questions](../../onboarding/asking-good-questions.md) lesson.
## Lab Exercise
-#### Part 1 - Create an HTML file & open it in VSCode
+#### Part 1 - Create a new HTML project in CodePen
-Using the Terminal, ensure you are in the `recipe-page` directory. Create a new file in this directory called `index.html`. Open this file in VSCode using the Terminal shortcut to do so.
+Create a new [CodePen](https://codepen.io/pen/) on your account. Name it "Recipe Page". Click save.
#### Part 2 - Code the basic HTML structure
Using the [HTML lesson slides](https://docs.google.com/presentation/d/1sqmplQtQw0KfC64VGL8Ur8NWOtyeUvSVYN407lJvjzY/edit?usp=sharing) or another online resource, code only the most essential elements for an HTML page (the basic structure). Create a reasonable title given the recipe you are going to showcase. Do not include any code within the `<body>` tags yet.
-Navigate to the `recipe-page` directory and run `git status`. You should see changes that need to be added and committed. Add and commit them, making sure to write a descriptive commit message in the present tense, such as "Code basic HTML structure."
-
#### Part 3 - Add the title of the recipe to the body
Using either the `<h1>` or `<h2>` heading tags, create a heading within the `<body>` tags that displays the title of your recipe.
Open `index.html` in Chrome to verify that this works.
-Once you can see that adding the title worked, run `git status`. You should see changes that need to be added and committed. Add and commit them, making sure to write a descriptive commit message in the present tense, such as "Add recipe title."
-
#### Part 4 - Add a brief background or blurb about the recipe
@@ -89,8 +72,6 @@ Using the `<p>` paragraph tags, write a little blurb or background story about t
Refresh `index.html` in Chrome by pressing `<COMMAND> + r`.
-Once you can see that adding the blurb worked, run `git status`. You should see changes that need to be added and committed. Add and commit them, making sure to write a descriptive commit message in the present tense, such as "Add recipe description."
-
#### Part 5 - Add an unordered list of ingredients
@@ -101,8 +82,6 @@ Refresh `index.html` in Chrome by pressing `<COMMAND> + r` to make sure the list
-Run `git status`. You should see changes that need to be added and committed. Add and commit them, making sure to write a descriptive commit message in the present tense, such as "Add list of ingredients."
-
#### Part 6 - Add an ordered list of the steps required to make the dish
Using the `<ol>` ordered list tags and the `<li>` list item tags, list the steps that are involved in creating the dish.
@@ -111,8 +90,6 @@ Using the `<ol>` ordered list tags and the `<li>` list item tags, list the steps
Refresh `index.html` in Chrome by pressing `<COMMAND> + r`.
-Once you can see that adding the list of steps worked, run `git status`. You should see changes that need to be added and committed. Add and commit them, making sure to write a descriptive commit message in the present tense, such as "Add recipe instructions."
-
#### Part 7 - Add at least one image
@@ -140,16 +117,12 @@ Underneath the image, include a photo credit that links to the source of the ima
-Run `git status`. You should see changes that need to be added and committed. Add and commit them, making sure to write a descriptive commit message in the present tense, such as "Add image and image credit."
-
#### Part 8 - Add links to similar recipes you found online
Place at least 2 links to similar recipes online underneath the recipe's instructions. Refresh the webpage to make sure it worked.
-Once you can see that adding the external links worked, run `git status`. You should see changes that need to be added and committed. Add and commit them, making sure to write a descriptive commit message in the present tense, such as "Add links to more recipes."
-
#### Part 9 - Add some `<div>`s for easy CSS integration later
Wrap each section (listed below) in its own pair of `<div>` tags:
@@ -200,12 +173,19 @@ You should see changes that need to be added and committed. Add and commit them,
### Questions to Consider
-- What, if anything, was challening about this phase of the project?
+- What, if anything, was challenging about this phase of the project?
- What did you enjoy the most while working on this phase of the project?
- What questions came to mind as you were working through the steps?
- If you were to explain to a bright child what you worked on during the phase, what would you tell them?
-### Extensions
+### Challenge
+See the HTML in your browser by following just the steps under the sections "Part 1: Saving an HTML File" and "Part 2: Running an HTML File" in https://www.wikihow.com/Run-a-HTML-File. You should name your file `recipe-page.html`. If you are on a Windows PC, use WordPad instead of TextEdit. (10 min)
+
+Copy everything from your HTML in CodePen, paste it into `recipe-page.html`, and save. Follow the directions in the link to view it in your browser.
+
+Did it work? If not, show it to a peer and figure out what you're missing.
+
+### Extensions (optional)
- Using w3Schools or another online resource, incorporate more features into your recipe page using HTML tags. Some ideas:
- `<table>`, `<th>`, `<tr>`, `<td>`
diff --git a/projects/recipe-page/phase-2-css-prompt.md b/projects/recipe-page/phase-2-css-prompt.md
index df4abe900..2f98a94ff 100644
--- a/projects/recipe-page/phase-2-css-prompt.md
+++ b/projects/recipe-page/phase-2-css-prompt.md
@@ -24,9 +24,9 @@ Phase 1 of the project involves coding the structure of your webpage using HTML.
Phase 2 of the project involves adding styling and pizazz using CSS. This includes changing the font style, font size, colors, and significantly altering the layout.
-Phase 3 of the project involves incorporating Bootstrap. You'll add a navigation bar and several other Bootstrap components of your choosing.
+Phase 3 of the project involves incorporating JS DOM methods. You'll add at least one interactive element of your choosing.
-Phase 4 of the project involves incorporating jQuery. You'll add at least one interactive element of your choosing.
+There used to be a "Bootstrap" part of this project, but it is no longer required.
### Context
@@ -45,34 +45,27 @@ Phase 4 of the project involves incorporating jQuery. You'll add at least one in
7. Make the image and ingredients appear on the left
8. Make the instructions appear on the right
-## Setup Instructions
-
-Use the Terminal for navigating around the file system and creating new folders and files. Refer to the lesson on [The Command Line Interface](../../dev-tools/command-line-interface.md) if you need guidance on using the Terminal.
-
-When you get to the steps below that ask you to initialize a git repo and track files using git, refer to the lesson on [Git and Version Control](../git/git-version-control.md) if you need guidance.
-
-1. Navigate to the `recipe-page` directory.
+## Lab Instructions
If you have questions, do not disturb your colleagues until you have spent at least 20 minutes troubleshooting on your own. Be sure to format your question using the template we practiced in the [Asking Good Questions](../../onboarding/asking-good-questions.md) lesson.
-## Lab Instructions
-
### Starter Code
You'll be building on the HTML code you completed in Phase 1 of this project.
+Try to build in your local desktop file this time, since CodePen won't help you understand how the HTML and CSS are connected. Remember that you'll need to save (`command + s` on mac) and refresh your browser page to see new css changes.
+
### Lab Exercise
#### Part 1 - Create a CSS file in the proper directory of your file tree
-1. Using the Terminal, ensure you are in the `recipe-page` directory. Create a file called `styles.css`. You can verify this worked by running the `ls` command.
-2. Use the Terminal shortcut `code .` to open the `recipe-page` directory in VSCode.
-3. Run `git status`. You should see that 'styles.css' is not being tracked yet.
-4. Add and commit, making sure to write a descriptive commit message in the present tense, such as "Create stylesheet."
+1. On your desktop, create a folder called `techtonica-projects`. Inside that, create a folder called `recipe-page`. Move your `recipe-page.html` file into `techtonica-projects/recipe-page`. If you no longer have `recipe-page.html`, make it again with the Challenge directions from [Phase 1](./phase-1-html-prompt.md).
+2. Use TextEdit or WordPad to make a new file called `styles.css`. Make sure it is in the `techtonica-projects/recipe-page` directory right next to `recipe-page.html`.
+3. Now that it's in `techtonica-projects/recipe-page`, it's obvious what your html file is for. Rename `recipe-page.html` to `index.html`.
#### Part 2 - Link to your CSS file from within your HTML `<head>` tags
-1. Find the `styles.css` file in VSCode that you just created. Add this small bit of CSS code to the file, then save the file.
+1. In `styles.css`, add this small bit of CSS code to the file, then save the file.
```css
p {
@@ -82,7 +75,7 @@ p {
We're doing this so we can easily see if we've successfully connected `styles.css` to `index.html`. We'll know it worked if all of our paragraph text appears blue instead of the default black when we load `index.html` at the end of this step.
-2. Now we need to link to `styles.css` from within `index.html`. Find the `index.html` file in VSCode. Read the following code snippet and make sure you understand what it does. Then, copy and paste it into the `<head>` area of `index.html`, just below the `<meta>` tag.
+2. Now we need to link to `styles.css` from within `index.html`. Open `index.html`. Read the following code snippet and make sure you understand what it does. Then, copy and paste it into the `<head>` area of `index.html`, just below the `<meta>` tag.
```html
<link rel="stylesheet" type="text/css" href="styles.css" />
diff --git a/web/css-part-2.md b/web/css-part-2.md
new file mode 100644
index 000000000..bc28dc46c
--- /dev/null
+++ b/web/css-part-2.md
@@ -0,0 +1,80 @@
+# CSS: Part 2
+
+### Projected Time
+
+About 5 hours
+
+- Guided Practice: 90 min
+- 3.5 hours for Independent Practice (Project)
+- Check For Understanding: 10 min
+
+### Prerequisites
+
+- [HTML lesson](/web/html.md)
+- [Intro to CSS](./css.md)
+
+### Motivation
+
+- Cascading style sheets(CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language like HTML. (referenced from [wikipedia](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) & [town open-data portal](https://manualzz.com/doc/6479032/town-open-data-portal---dip%C3%B2sit-digital-de-la-ub))
+
+
+### Objectives
+
+**Participants will be able to:**
+
+
+
+### Specific Things to ~Learn~ Practice
+
+- CSS selectors
+- Common CSS properties and their allowable values
+- How to incorporate CSS into web projects
+- Web project file tree
+- Specificity hierarchy
+- The Box Model
+
+### Materials
+[CSS Diner](https://flukeout.github.io/)
+[Flexbox Froggy](https://flexboxfroggy.com/)
+[Flexbox Cheatsheet](https://flexbox.malven.co/)
+[Add CSS to recipe-page project](../projects/recipe-page/phase-2-css-prompt.md)
+[Article: Inline CSS](https://www.codecademy.com/articles/html-inline-styles)
+
+## Lesson
+
+You are not expected to have this all memorized at the end of the lesson. Right now just get used to looking at CSS and try to see how the CSS relates to the HTML.
+
+### Guided Practice
+1. Spend 30 minutes playing [CSS Diner](https://flukeout.github.io/). You play by selecting certain HTML-like dishes and foods using CSS Selectors.
+1. Spend 30 minutes playing [Flexbox Froggy](https://flexboxfroggy.com/). This one is cute - you arrange frog on lily pads using flexbox.
+1. During Flexbox Froggy or after, take 5 minutes to look at this [Flexbox Cheatsheet](https://flexbox.malven.co/). There are more good ones out there if you care to search.
+1. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS) has great detailed documentation on single CSS concept. Spend 5 minutes scanning these examples:
+ - [MDN Color Picker Tool](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool)
+ - [The Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
+ - [Sizing](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+ - [drop-shadow()](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow)
+ - [:active pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)
+ - [::before pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::before)
+1. Although CSS issues tend to be relatively easy to Google, https://css-tricks.com/ has one of the best collections of **CSS Guides**. Take 15 minutes total to look at some of the most popular articles. You don't need to read them throughly, but instead get a feel for some of the common problems you'll be solving.
+ - Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+ - Centering: https://css-tricks.com/centering-css-complete-guide/
+ - Color: https://css-tricks.com/nerds-guide-color-web/
+ - Media Queries: https://css-tricks.com/a-complete-guide-to-css-media-queries/
+ - Links and Buttons: https://css-tricks.com/a-complete-guide-to-links-and-buttons/
+ - Position Property (video): https://css-tricks.com/video-screencasts/198-about-the-position-property/
+
+
+### Check for Understanding
+
+- Write down a few things that you feel confident about in CSS.
+- Write down a few things that were especially difficult to accomplish with CSS.
+- Share these with your managers and your mentor.
+
+### Supplemental Resources
+
+- [8 Games to learn CSS the fun way](https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f)
+- [Freecodecamp has detailed lessons](https://learn.freecodecamp.org/responsive-web-design/basic-css/)
+- [Rithm School has a lesson on specificity](https://www.rithmschool.com/courses/html-css-fundamentals/specificity)
+- [HTML Dog has some simple CSS tutorials](http://www.htmldog.com/guides/css/)
+- Expand on CSS with [Sass](../electives/sass.md)
+- [Learn to Code](https://learn.shayhowe.com/html-css/) has simple and comprehensive guide dedicated to helping beginners learn HTML and CSS.
diff --git a/web/css.md b/web/css.md
index ceb3cdafb..243bb0e90 100644
--- a/web/css.md
+++ b/web/css.md
@@ -1,32 +1,30 @@
-# CSS
+# Intro to CSS
### Projected Time
About 5 hours
-- 27 minutes for video walkthrough of CSS slides
-- 10 minutes for video walkthrough of CSS-Part 2 slides
-- 3.5 hours for Independent Practice (Project)
-- 20 minutes for Check for Understanding
+- Lesson: ~ 5 hours
+- Challenge: 10 min
+- 10 minutes for Check for Understanding
### Prerequisites
-[HTML lesson](/web/html.md)
+[HTML lesson](./html.md)
### Motivation
- Cascading style sheets(CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language like HTML. (reference from [wikipedia](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) & [town open-data portal](https://manualzz.com/doc/6479032/town-open-data-portal---dip%C3%B2sit-digital-de-la-ub))
-- CSS enables the separation of presentation and content and this separation can improve content accessibility, provide more flexibility, reduce complexity and repetition in the structural content.([reference from Alan Dotchin academy](http://alandotchinacademy.com/content/technologies/css/index.html))
-- It can completely control how your web pages look without changing your HTML. It's an important language for front-end and full-stack web developers to know because today it is used in all webpages.(reference from [skillcrush](https://skillcrush.com/2017/02/27/front-end-back-end-full-stack/) & [quora](https://www.quora.com/What-are-the-important-concepts-in-CSS))
+- CSS enables the separation of presentation and content and this separation can improve content accessibility, provide more flexibility, reduce complexity and repetition in the structural content.(referenced from [Alan Dotchin academy](http://alandotchinacademy.com/content/technologies/css/index.html))
+- It can completely control how your web pages look without changing your HTML. It's an important language for front-end and full-stack web developers to know because today it is used in all webpages.(referenced from [skillcrush](https://skillcrush.com/2017/02/27/front-end-back-end-full-stack/) & [quora](https://www.quora.com/What-are-the-important-concepts-in-CSS))
**Which companies use CSS?** Everyone. Some companies with very beautiful sites are [Uber](https://www.uber.com) and [Nokia](https://www.nokia.com/).
- **Looking at an example website**
+#### Looking at an example website
-- Have you ever noticed why some websites look so appealing?
-- Go to [wildrenfrew.com](https://wildrenfrew.com/) and see how unique this website is?
-- Some sections in this site are marvelous.
-- The website is a complete package of correct font, color, images, and video which all enhances its beauty.
+- Have you ever noticed that some websites are much more appealing than others?
+- Go to [wildrenfrew.com](https://wildrenfrew.com/) and see how unique this website is. Some sections in this site are marvelous.
+- The website is a complete package of correct font, color, images, and video that make it engaging.
### Objectives
@@ -53,16 +51,37 @@ About 5 hours
- Specificity hierarchy
- The Box Model
- How to style with the `display` property
+- Experimenting with styles in the inspector
-### Lesson
+### Materials
+- [Codecademy: Learn CSS](https://www.codecademy.com/courses/learn-css/)
+- [CSS Part 1 (slides)](https://docs.google.com/presentation/d/1p-IXWxo0NEbZbHQ_Mdoo-A9dlFXqfSPOfW6navfyeTI/edit?usp=sharing)
+- [CSS Part 1 (video walkthrough of slides)](https://drive.google.com/file/d/1IyAozbB3BAuFXdAZH1tu0kr-eL3El0Cn/view)
+- [CSS Part 2 (slides)](https://docs.google.com/presentation/d/1r0e--y5dWWvAY1TmBYMfln91g9_WTy4yoKBJCVx-M18/edit?usp=sharing)
+- [CSS Part 2 (video walkthrough of slides)](https://drive.google.com/file/d/1KTJgJEZfJnBPNALcSe7zQb8Q87f7lfB9/view)
-[CSS (video walkthrough of slides)](https://drive.google.com/file/d/1IyAozbB3BAuFXdAZH1tu0kr-eL3El0Cn/view)
-[CSS (slides)](https://docs.google.com/presentation/d/1p-IXWxo0NEbZbHQ_Mdoo-A9dlFXqfSPOfW6navfyeTI/edit?usp=sharing)
+## Lesson
-[CSS Part 2 (video walkthrough of slides)](https://drive.google.com/file/d/1KTJgJEZfJnBPNALcSe7zQb8Q87f7lfB9/view)
+1. Work through all the free lessons in order on the [Codecademy: Learn CSS](https://www.codecademy.com/courses/learn-css/) syllabus (~ 4 hours). If it says "this lesson only comes with a Pro paid plan", you do not need to do it. Taking breaks in between each is recommended! They should each take around 30 minutes. If you are stuck on a certain step, reach out to your peers. This shouldn't happen often, though - it's very straight-forward.
+ - [CSS Setup and Syntax](https://www.codecademy.com/courses/learn-css/lessons/learn-css-setup-and-syntax/)
+ - [CSS Selectors](https://www.codecademy.com/courses/learn-css/lessons/learn-css-selectors/)
+ - [Visual Rules](https://www.codecademy.com/courses/learn-css/lessons/css-visual-rules/)
+ - [The Box Model](https://www.codecademy.com/courses/learn-css/lessons/box-model-intro/)
+ - [Changing the Box Model](https://www.codecademy.com/courses/learn-css/lessons/box-model-new/)
+ - [Display and Positioning](https://www.codecademy.com/courses/learn-css/lessons/css-display-positioning/)
+ - [Color](https://www.codecademy.com/courses/learn-css/lessons/color/resume)
+ - [Typography](https://www.codecademy.com/courses/learn-css/lessons/css-typography/)
+
+1. This is a good time for a longer break. Take one!
+
+1. Read through Part 1 (30 min) and Part 2 (15 min) slides or watch the corresponding videos. They review what you covered in codecademy.
+
+ - [CSS Part 1 (slides)](https://docs.google.com/presentation/d/1p-IXWxo0NEbZbHQ_Mdoo-A9dlFXqfSPOfW6navfyeTI/edit?usp=sharing)
+ - [CSS Part 1 (video walkthrough of slides)](https://drive.google.com/file/d/1IyAozbB3BAuFXdAZH1tu0kr-eL3El0Cn/view)
+ - [CSS Part 2 (slides)](https://docs.google.com/presentation/d/1r0e--y5dWWvAY1TmBYMfln91g9_WTy4yoKBJCVx-M18/edit?usp=sharing)
+ - [CSS Part 2 (video walkthrough of slides)](https://drive.google.com/file/d/1KTJgJEZfJnBPNALcSe7zQb8Q87f7lfB9/view)
-[CSS Part 2 (slides)](https://docs.google.com/presentation/d/1r0e--y5dWWvAY1TmBYMfln91g9_WTy4yoKBJCVx-M18/edit?usp=sharing)
### Things to Remember
@@ -72,36 +91,33 @@ About 5 hours
- **There are specificity rules in CSS.** You need to understand these rules so you can work within them to produce the styling you want.
-### Independent Practice
-
-No pairs will be assigned for this project, but you should rely on your classmates for help once you've spent 20 minutes working independently through something you're stuck on.
+### Common Mistakes / Misconceptions
+- A very common mistake made by intermediate developers is, "If I can make things look how I want, then it doesn't matter if something is actually a header, button, or label. I can just make a bunch of divs that look like headers, buttons and labels." *Good semantic elements and sections have more built-in functionality than just changing visual styles.*
+ - A search engine uses the headers and sub-headers on a page for search terms and potential relevance. This is also known as SEO: Search Engine Optimization.
+ - Those who use a keyboard instead of a mouse, or who use screen readers to navigate a page, actually receive extra information for their situation.
+ - For example, a screenreader user can quickly jump from header to header to find what they need without having to listen to the entire page content, or be reminded that they are still inside the same choice set in a [select element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), how many choices there are, and which one is selected.
+ - (Note: no need to read any links in this section thoroughly, they're just for your reference.)
+ - Also note that there are [typical patterns](https://webaim.org/techniques/keyboard/#testing) many users are used to, and changing them will likely frustrate a user, causing them to give up on using your app.
+ - This is not what we are learning today, but keep this in mind as you continue to learn more HTML. Accessibility and SEO will be covered in future outlines.
-The activity for the HTML, CSS, Bootstrap and jQuery lessons is a project that allows you to combine your new skills in each of these areas.
-
-[Click here to access the instructions for the CSS portion of the recipe-page project](../projects/recipe-page/phase-2-css-prompt.md). Please don't move on to the prompts for the other topics yet.
-
-Check for [Inline CSS](https://www.codecademy.com/articles/html-inline-styles) contents while removing _style_ tag from the webpage.
-
-Tutorials for changing and removing style tags are provided in the [CSS slides](https://docs.google.com/presentation/d/1p-IXWxo0NEbZbHQ_Mdoo-A9dlFXqfSPOfW6navfyeTI/edit?usp=sharing)
-
-### Challenge
+### Independent Practice
-Change and remove style and link tags from [Google](https://www.google.com/),[Amazon](https://www.amazon.in/) and change the website design accordingly.
+Change and remove style and link tags from [Google](https://www.google.com/) and [Amazon](https://www.amazon.in/) and watch the website design change accordingly. Spend 5 minutes for each site.
### Check for Understanding
+If you can answer these questions, you can feel confident that you understand the lesson. If you are unsure about any of these, reach out to a peer.
- What is the benefit of using CSS in HTML?
- Explain the difference between class and id in CSS.
- Describe how borders can be styled using CSS.
- Describe the different parts of the "Box" model.
- Explain use of inline and block value in display property.
+- Name a common mistake developers often make when using CSS.
### Supplemental Resources
- [Freecodecamp has detailed lessons](https://learn.freecodecamp.org/responsive-web-design/basic-css/)
- [MDN provides great documentation](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [Rithm School has a lesson on specificity](https://www.rithmschool.com/courses/html-css-fundamentals/specificity)
-- [Codecademy](https://www.codecademy.com/courses/learn-css/lessons/css-setup-selectors/exercises/intro-to-css?action=resume_content_item)
- [HTML Dog has some simple CSS tutorials](http://www.htmldog.com/guides/css/)
-- Expand on CSS with [Sass](../electives/sass.md)
- [Learn to Code](https://learn.shayhowe.com/html-css/) has simple and comprehensive guide dedicated to helping beginners learn HTML and CSS.
diff --git a/web/html-forms.md b/web/html-forms.md
index fd7dc2835..309b57724 100644
--- a/web/html-forms.md
+++ b/web/html-forms.md
@@ -2,9 +2,9 @@
### Projected Time
-2 hours
+3 hours
-- Lesson: 30 min
+- Lesson: 90 min
- Guided Practice: 1 hour
- Independent Practice: 15 min
- Check for Understanding: 15 min
@@ -27,6 +27,16 @@
### Lesson
HTML Form is one of the most popular ways to gather user information and send it to an application. It is the most efficient way to let the user enter the data. For example, it can be used to collect things like a name and email in a sign-up form.
+
+**Start with some interactive practice**
+Spend ~60 minutes working through these 2 Codecademy lessons:
+- [HTML Forms](https://www.codecademy.com/courses/learn-html/lessons/html-forms)
+- [Form Validation](https://www.codecademy.com/courses/learn-html/lessons/html-form-validation)
+
+Take a short break, then move to the next section.
+
+#### Common HTML Examples
+
When the user/visitor enters the details in the form, it is posted to the backend server where the processing is done and then the necessary data is stored in the database.
There are various elements which can be used in the form which are as follows:
diff --git a/web/html.md b/web/html.md
index caae44802..e9aea75ea 100644
--- a/web/html.md
+++ b/web/html.md
@@ -2,15 +2,15 @@
### Projected Time
-About 5.5 hours
+About 2.5 hours
-- 20 minutes for video walkthrough of slides
-- 5 hours for Independent Practice (Project)
+- 2 hours for Guided Practice
+- 20 minutes for the slides
- 15 minutes for Check for Understanding
### Prerequisites
-- [Debugging lesson](../debugging/debugging.md)
+- Day one tasks
### Motivation
@@ -40,7 +40,31 @@ About 5.5 hours
- Proper HTML indentation
- Semantic elements
-### Lesson
+## Lesson
+
+### Guided Practice
+
+- First, read just the first 5 paragraphs in one of the best resources for HTML documentation, MDN (5 min): https://developer.mozilla.org/en-US/docs/Web/HTML
+
+ There's a "References" menu on the left side of the page if you are using a wide browser window. Find it, open its submenu items "HTML Elements", "Global Attributes", and "Input types". Spend just 5 minutes opening a bunch of the listed links and looking around. You will want to know about these later!
+
+- Next, work through these interactive Codecademy lessons. They take about 30 minutes each.
+ - [HTML course (Codecademy)](https://www.codecademy.com/courses/learn-html-elements/lessons/intro-to-html/exercises/intro?action=lesson_resume&course_redirect=learn-html)
+
+ - [HTML Document Standards](https://www.codecademy.com/courses/learn-html/lessons/html-document-standards/)
+
+ - [Semantic HTML](https://www.codecademy.com/courses/learn-html/lessons/semantic-html/resume)
+
+Spend 5 minutes scanning through this list:
+- [HTML (cheatsheet)](https://www.codecademy.com/learn/learn-html/modules/learn-html-elements/reference)
+
+HTML resources are pretty easy to search for online. Bookmark MDN and the cheatsheet for later, but feel free to use a search engine too when you're not sure about something.
+
+Take a short break, then move to the next section.
+
+### Slideshow
+
+Choose to watch the video about the slides, or read through the slides on your own. (20 min)
[HTML (video walkthrough of slides)](https://drive.google.com/open?id=1FO4AdWgYUTIuX03T0ZSmSXKTDadoZopT)
@@ -51,30 +75,21 @@ About 5.5 hours
- **Only front-end engineers need to know HTML.** Knowing a little bit of HTML, even if you want to be purely a backend web developer or work on non-Internet-based products, is really useful. It'll allow you to make static webpages to showcase your projects, and you could pitch in if one of your colleagues who usually takes care of HTML coding is out.
- **HTML isn't a "serious" language.** HTML is indeed a coding language, though it can't do the kinds of logic-based things or decision-making that languages like JavaScript or Python can do. Nonetheless, it's a language that fulfills its purpose very well!
-### Independent Practice
-
-No pairs will be assigned for this project, but you should rely on your classmates for help once you've spent 20 minutes working independently through something you're stuck on.
-
-The activity for the HTML, CSS, Bootstrap and jQuery lessons is a project that allows you to combine your new skills in each of these areas.
-
-[Click here to access the instructions for the HTML portion of the project](../projects/recipe-page/phase-1-html-prompt.md). Please don't move on to the prompts for the other topics yet.
-
### Check for Understanding
+If you don't know the answers to any of these, search for the answer in your resources or online for a few minutes. If you're still not sure, figure it out with a peer before moving on.
+
- What are semantic and non-semantic elements in HTML?
- How do you write comments in HTML?
- Why is indentation used in HTML?
- How can we insert an image in a HTML document?
- What does the line 'meta charset=“utf-8”' mean?
-### Supplemental Resources
+### Supplemental Resources (always optional)
-- [HTML course (Codecademy)](https://www.codecademy.com/courses/learn-html-elements/lessons/intro-to-html/exercises/intro?action=lesson_resume&course_redirect=learn-html)
-- [Lots of HTML resources (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML)
- [Intro to HTML/CSS (KhanAcademy)](https://www.khanacademy.org/computing/computer-programming/html-css)
- [Intermediate HTML (HTML Dog)](https://www.htmldog.com/guides/html/intermediate/)
- [Intermediate CSS (HTML Dog)](https://www.htmldog.com/guides/css/intermediate/)
- [Learn to Code Advanced HTML & CSS (from the Learn to Code HTML & CSS Book)](https://learn.shayhowe.com/advanced-html-css/)
- [Hostinger:how to add favicons to your site](https://www.hostinger.in/tutorials/how-to-add-favicon-to-website)
- [NPM favicon package](https://www.npmjs.com/package/favicons)
-- [HTML (cheatsheet)](https://www.codecademy.com/learn/learn-html/modules/learn-html-elements/reference)
diff --git a/web/js-dom-methods.md b/web/js-dom-methods.md
index cf859f388..126b83a3a 100644
--- a/web/js-dom-methods.md
+++ b/web/js-dom-methods.md
@@ -43,13 +43,14 @@ Prominent companies like Netflix, Walmart, Paypal built their entire application
### Lesson
- [JS HTML DOM (slides)](https://docs.google.com/presentation/d/1k6gvJ2bO88D8lE4zVyge_SQxO2FBLzJxZeM381OMXhU/edit?usp=sharing)
-- [JavaScript and DOM tutorial on Treehouse](https://teamtreehouse.com/library/javascript-and-the-dom-2)
+- [JavaScript and DOM tutorial on Treehouse](https://teamtreehouse.com/library/javascript-and-the-dom-2) or [Vanilla DOM Manipulation - App Academy](https://open.appacademy.io/learn/full-stack-online/javascript/vanilla-dom-manipulation) (see Guided Practice for how to choose)
### Things to Remember
- **Remember to use `.` to select classes and `#` to select ids.**
- **There are several JavaScript methods that achieve similar goals but through different means.** You should understand how they're different so you can use them appropriately.
- `.appendChild()` vs `.insertAdjacentText()`
+- "Vanilla JavaScript" is just a cute way of saying *plain JavaScript* without any extra libraries; an example of an add-on library is *jQuery*. Vanilla JavaScript is not it's own special form of JavaScript.
### DOM Event Basics
@@ -125,6 +126,10 @@ In the above diagram, if we are implementing a listener for 'click' event that r
Work through the [JavaScript and DOM tutorial on Treehouse](https://teamtreehouse.com/library/javascript-and-the-dom-2).
+If you aren't using Treehouse, follow this [Vanilla DOM Manipulation - App Academy](https://open.appacademy.io/learn/full-stack-online/javascript/vanilla-dom-manipulation) tutorial instead. Try the 5-question quiz that comes after as well. If you don't know an answer after a minute or two, just move on, and try it again at the end of this outline.
+
+Note: Our goal is to only provide free resources, so if you can't get Treehouse for free, don't use it. Most participants have been able to get Treehouse through the [SF Public Library](https://sfpl.org/articles-databases/new-treehouse-account), but you need a library card.
+
#### Activity 1 - Trying Out Some important JavaScript DOM methods
For each of the following links, read the code and play around with its functionality. You can refresh the webpage to reset it.
diff --git a/web/media-queries.md b/web/media-queries.md
index 9faa4bbe1..3203ac0cc 100644
--- a/web/media-queries.md
+++ b/web/media-queries.md
@@ -2,11 +2,12 @@
### Projected Time
-45-60 minutes
+Total: ~ 1.5 hours
-- 20-30 min interactive lesson
-- 10-15 min for independent practice
-- 20-30 min check for understanding
+- Lesson: 30 min
+- Independent Practice: 15 min
+- Challenge: 30 min
+- Check For Understanding: 15 min
### Prerequisites
@@ -55,7 +56,7 @@ Everyone. Some companies with very responsive sites are [Etsy](https://www.etsy.
#### Practice implementing a Media Query
-1. Create a very simple project, or follow along in an existing project.
+1. Create a very simple project in any folder on your computer, create a new [CodePen](https://codepen.io/pen/), or follow along in an existing project.
1. Create an HTML file with a linked css file, a title, 3 images, and a paragraph like this:
```
<!DOCTYPE html>
@@ -167,13 +168,13 @@ Everyone. Some companies with very responsive sites are [Etsy](https://www.etsy.
### Independent Practice
-- add 3 more experimental media queries, each with a different width and a different class or element being styled. Change your window width and see if they appear when expected.
+- For 15 minutes, add 3 more experimental media queries, each with a different width and a different class or element being styled. Change your window width and see if they appear when expected.
### Challenge
1. Pair up with a peer and discuss what changes you would like to make to your recipe page project using media queries.
Be specific about which widths you would like to use, which elements you'd change. Sketch your ideas to help you remember.
-1. Spend about 20 minutes applying your media queries to your recipe page!
+1. Spend about 20 minutes applying your media queries to your recipe page! If you run out of time, you should still stop, but note other changes you'd like to make later.
### Check for Understanding