Skip to content

Commit

Permalink
feat(html,css,js-dom): curr updates: no bootstrap, more css & html pr…
Browse files Browse the repository at this point in the history 
…actice (#1565)
  • Loading branch information
@alodahl
alodahl authored Jun 10, 2021
1 parent fc0f61d commit 9eb0030
Show file tree
Hide file tree
Showing 8 changed files with 209 additions and 109 deletions.
44 changes: 12 additions & 32 deletions projects/recipe-page/phase-1-html-prompt.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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."

![Image of webpage after creating title](./screenshots/step3-title.png)

#### Part 4 - Add a brief background or blurb about the recipe
Expand All @@ -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."

![Image of webpage after adding blurb](./screenshots/step4-blurb.png)

#### Part 5 - Add an unordered list of ingredients
Expand All @@ -101,8 +82,6 @@ Refresh `index.html` in Chrome by pressing `<COMMAND> + r` to make sure the list

![Image of webpage after adding ingredients](./screenshots/step5-ingredients.png)

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.
Expand All @@ -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."

![Image of webpage after adding instructions](./screenshots/step6-instructions.png)

#### Part 7 - Add at least one image
Expand Down Expand Up @@ -140,16 +117,12 @@ Underneath the image, include a photo credit that links to the source of the ima

![Image of webpage after adding image and photo credit](./screenshots/step7-image.png)

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.

![Image of webpage after adding links to similar recipes](./screenshots/step8-other-recipes.png)

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:
Expand Down Expand Up @@ -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>`
Expand Down
27 changes: 10 additions & 17 deletions projects/recipe-page/phase-2-css-prompt.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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 {
Expand All @@ -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" />
Expand Down
80 changes: 80 additions & 0 deletions web/css-part-2.md
View file
Original file line number Diff line number Diff line change
@@ -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.
Loading

0 comments on commit 9eb0030

Please sign in to comment.