From 71b2efbbed709bef38b045fcd271d65a4feeb2fe Mon Sep 17 00:00:00 2001 From: Heather Faerber Date: Thu, 10 Oct 2024 15:13:48 -0600 Subject: [PATCH 1/3] Move hint higher in the iteration --- module2/lessons/css_fundamentals.md | 2 +- module2/projects/hang_in_there/index.md | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/module2/lessons/css_fundamentals.md b/module2/lessons/css_fundamentals.md index feaff8eb..73fb401d 100644 --- a/module2/lessons/css_fundamentals.md +++ b/module2/lessons/css_fundamentals.md @@ -97,7 +97,7 @@ For example: //individually apply styles that are not shared .nav-button { - background-color: black; + background-color: lightblue; } .submit-button { diff --git a/module2/projects/hang_in_there/index.md b/module2/projects/hang_in_there/index.md index e32da3db..5439de2a 100644 --- a/module2/projects/hang_in_there/index.md +++ b/module2/projects/hang_in_there/index.md @@ -130,14 +130,13 @@ Result after clicking Show My Poster button: ![result](../../../assets/images/projects/hang-in-there/form-result.png) - On the new poster form view, users should be able to fill out the three input fields and then hit the Show My Poster button + - _Hint: +Notice something weird happening when you click the button to submit the form? Try googling `event.preventDefault()`!_ - When the Show My Poster button is clicked, several things will happen: - First, use the values from the inputs to create a new, unique poster object and save it as the value of the `currentPoster` global variable (part of your data model) - Save the submitted data into the respective arrays (image URL into the images array, etc - all part of your data model) so that future random posters can use the user-created data - Change back to the main poster view (hiding the form view again) - Use the new, unique poster object (which should be saved in the `currentPoster` variable - part of your data model) to display the newly created poster image, title, and quote in the main view on the DOM - -_Hint: -Notice something weird happening when you click the button to submit the form? Try googling `event.preventDefault()`!_
From 3d3306787506878892bb26711b7bb57e1fad179e Mon Sep 17 00:00:00 2001 From: Heather Faerber Date: Thu, 10 Oct 2024 15:26:59 -0600 Subject: [PATCH 2/3] Add codepen --- module2/lessons/css_fundamentals.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/module2/lessons/css_fundamentals.md b/module2/lessons/css_fundamentals.md index 73fb401d..04fde153 100644 --- a/module2/lessons/css_fundamentals.md +++ b/module2/lessons/css_fundamentals.md @@ -69,7 +69,12 @@ h1 { ### Sharing styles across multiple elements Remember: an HTML element can have zero, one, or _multiple_ classes applied to it. Class attributes can help us write cleaner and more DRY (don’t repeat yourself) CSS **because we can apply the same class to multiple elements in our HTML that share certain styles**. Then, in our CSS, we simply apply all the shared styles to that shared class. We can also apply CSS declarations to multiple elements at once by stacking the selectors. -For example: +Open up this [CSS: Sharing Styles Across Multiple Elements Codepen](https://codepen.io/turingschool/pen/LYwbaZJ?editors=1100). Look at the HTML and CSS closely. Digest which styles are being applied to which elements and how. Ignore the commented out CSS styles at the bottom of the file for now. Together we will learn how to make this CSS more DRY. + +
+### DRY solution options + +We can keep things DRY in CSS by stacking selectors and/or applying shared styles to a single class then applying that class to multiple elements. ```html

Hello, World!

@@ -113,6 +118,8 @@ For example: font-style: italic; } ``` +
+
### Unique IDs From e6cda405b254ecf3eee5f1fe694b59219e97592b Mon Sep 17 00:00:00 2001 From: Heather Faerber Date: Thu, 10 Oct 2024 15:38:10 -0600 Subject: [PATCH 3/3] Update deployment notes --- module2/projects/hang_in_there/index.md | 34 +++++++++++++++---------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/module2/projects/hang_in_there/index.md b/module2/projects/hang_in_there/index.md index 5439de2a..e4b5051c 100644 --- a/module2/projects/hang_in_there/index.md +++ b/module2/projects/hang_in_there/index.md @@ -21,20 +21,6 @@ Sometimes you need a pick me up. Remember those motivational posters that were a
### Helpful Hints -
-### What's the deal with deploying? - -Deploying your repos allows you to have a live site for your application. You'll be able to share this link with friends and family to show off what you're learning! You will also include deploy links on your resume so potential employers can see what you've built! - -Deploying takes time, so it's not a good idea to use your deployed site as your point of reference while building your app. While you're coding, you'll want to run `open index.html` in your terminal to see the current local version of your app. You need to refresh the browser each time you make an update to your code. Once you've pushed up your code and merged into the main branch, the deployed site should update within an hour. - -Below are instructions for deploying to GH Pages: - - - Repo Settings » Pages » Select the main branch as your Source branch » Save. Then, wait up to an hour, hit refresh, and your deployed link should appear at the top of the screen. - - - If you don't want to wait, your GH pages URL will follow this format: "https://username.github.io/hang-in-there/". Replace "username" with the repo owner's GH username and "hang-in-there" with your repo's name (if different). The URL will not work right away - that's ok! Add it to the Project Submission form anyway. -
-
### Why are our PRs pushing to the Turing repo? @@ -50,6 +36,24 @@ If you want to change the default, follow the steps [here](https://stackoverflow If you console log something in your project, you’ll see it in the dev tools console when you open the page in your browser (`open index.html`). Nothing will appear in your terminal. Remember, you need to refresh the browser each time you make an update to your code.
+ + +
+### Deploying - Deployment is optional and not expected for this project + +Deploying your repos allows you to have a live site for your application. You'll be able to share this link with friends and family to show off what you're learning! You will also include deploy links on your resume so potential employers can see what you've built! + +Deploying takes time, so it's not a good idea to use your deployed site as your point of reference while building your app. While you're coding, you'll want to run `open index.html` in your terminal to see the current local version of your app. You need to refresh the browser each time you make an update to your code. Once you've pushed up your code and merged into the main branch, the deployed site should update within an hour. + +**Deployment is optional and not expected for this project.** If you do want to deploy, GH Pages is a good option for simple FE application like this one. + +Below are instructions for deploying to GH Pages: + + - Repo Settings » Pages » Select the main branch as your Source branch » Save. Then, wait up to an hour, hit refresh, and your deployed link should appear at the top of the screen. + + - If you don't want to wait, your GH pages URL will follow this format: "https://username.github.io/hang-in-there/". Replace "username" with the repo owner's GH username and "hang-in-there" with your repo's name (if different). The URL will not work right away - that's ok! Add it to the Project Submission form anyway. +
+
@@ -65,6 +69,8 @@ Here are some ideas of what to look for: - Is any of our JS code too repetitive? Could we make any reusable functions with parameters and arguments? Remember - shorter code isn't always better! + +Refactoring is valuable, but you shouldn't spend so much time trying to perfect your code that it prevents you from working through the iterations.
## Progression