Added vocabulary

app-polishing/lesson-notes/readme.md

@@ -0,0 +1,29 @@
+# App Polishing
+
+## Learning Objectives
+
+- Know about some common resources for free web applications assets
+- Look up tools on your own
+- Apply those tools to improve look and feel of a web app
+
+## Class Activity
+
+Your instructor will make small groups where each group will research and create a small demonstration of how to use one of the following tools.
+
+- You will be assigned a group and a tool
+- You and your group will have 30-60 minutes to
+
+  - Research your tool
+  - Write up a summary describing what your tool is and how to use it
+  - Create a React app that demonstrates the usage of this tool
+  - Present your tool summary and demo to other groups (approximately 3-5 minutes per group)
+  - Share your summary and demo by putting your project on GitHub and sharing the links with your classmates.
+
+- [Google Fonts](https://fonts.google.com)
+- [Coolors](https://coolors.co)
+- [Unsplash](https://unsplash.com)
+- [SVG Backgrounds](https://bgjar.com)
+- [Subtle Patterns](https://www.toptal.com/designers/subtlepatterns/)
+- [Bootstrap Icons](https://icons.getbootstrap.com)
+- [Favicon from emoji generator](https://favicon.io/emoji-favicons/)
+- [CSS Animation Generator](https://animista.net)

app-polishing/readme.md

@@ -0,0 +1,36 @@
+# App Polishing
+
+## Introduction
+
+Thus far in this course, the priority has been building apps with functionality. However, as you get closer to the end of the course, you will be building applications that could be shown to a potential employer.
+
+An app that is well-designed and has been polished will stand out much more than an app that only has the core functionality with little to no thought about how the user(s) experience the app.
+
+Each app will have its own unique challenges and incorporating the tools and assets you need will require some research on your part. Being able to teach yourself new things is an integral skill as a developer.
+
+How do you find free tools like photos, fonts, icons and more?
+
+Why do people create free tools (like sharable icons and images)? Are there any downsides?
+
+## Learning Objectives
+
+- Know about some common resources for free web applications assets
+- Look up tools on your own
+- Apply those tools to improve look and feel of a web app
+
+In this lesson you will get an overview of some well-known resources for:
+
+- Fonts
+- Color pickers
+- Icons
+- Images
+- CSS Animations
+
+## Take inventory
+
+Take a moment to think about how you
+
+- Choose fonts for your applications
+- Choose color themes for your applications
+- Choose images for your applications
+- What other resources have you used to help make your application stand out?

intro-to-bootstrap-w-react/lesson-notes/readme.md

@@ -0,0 +1,226 @@
+# Intro to Bootstrap CSS with React
+
+## Learning Objectives
+
+- Adding Bootstrap CSS to a project
+- Adding classes to HTML elements to style with Bootstrap CSS
+
+## Getting started
+
+<hr>
+We'll be building Rosier. The HTML is complete. All we have to do is add the bootstrap code library and apply the appropriate classes.
+
+![rosier complete](../assets/rosier-complete.png)
+
+**Important**: Bootstrap is responsive, so the way things appear will vary based on the browser window's width. If things don't look right, try changing the width. If your CSS does not look perfect, that's ok. This is a practice lesson for you to learn. **Close enough is good enough.**
+
+<hr>
+
+Starting appearance
+
+![](../assets/rosier-starter.png)
+
+<hr>
+
+## Getting started
+
+- Clone the starter code linked in Canvas
+- `cd` into the project and run `npm i` and then `npm start`
+
+**Note:** some classes for images are already set so that they are not too large to work with as we build. The remaining images are also set to `width:100px` in the `index.css` until we can size them correctly. Once they are sized with Bootstrap, we can remove this code from the `index.css`.
+
+There are a few ways to get Bootstrap into your project. We'll start with just adding a `link` tag. This tag works just like any CSS you'd write yourself. It is hosted elsewhere on the internet but will bring in all the code.
+[Get the link](https://getbootstrap.com/docs/5.0/getting-started/introduction/)
+
+It looks like this:
+
+`<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">`
+
+Paste it inside the `head` tag of the `index.html`, which is inside the `public` folder of your React app.
+
+There are more ways to customize Bootstrap, but we won't cover them today.
+
+The most notable thing will be that the font has changed.
+
+![](../assets/bootstrap-linked.png)
+
+## Hero
+
+First, go to the `index.css` and comment-in the `nav` `display: none` rule. We won't work on the nav during this lesson.
+
+Go to the `Hero` component.
+
+Let's style the main image. It is sometimes referred to as a `hero`, `jumbo`, or `jumbotron` image.
+
+Inside the component `Hero` is a `div` with an `id` of `hero`. Let's add the appropriate class: `container-fluid` - this will make the image stretch 100% of the page, regardless of width.
+
+```html
+<div class="container-fluid" id="hero"></div>
+```
+
+> **Note** - in `index.css`, all images are set to `width:100px` - to help us see the starting page. We can remove or comment out that code now.
+
+Next, in the `img` tag inside of that div, add the class `img-fluid` - this will keep the image at 100% width.
+
+```jsx
+<img src="{heroRoses}" className="img-fluid" alt="many roses" />
+```
+
+## Restocked
+
+Go to the `Restocked` component.
+
+Add the class `container` to the top level `div` that contains the `h3` that reads `Just Restocked`. When the width is below a certain amount of pixels, the display will be a wider percentage. When the browser is wider, there will be more space around the sides of the container.
+
+Let's add a class to the `h3` to style it more as a display. Generally, text on a web page serves two purposes - as a title/display eye-catching part of the page or as text meant for easy reading. Adding the class `display-4` will increase the font size of the `h3`.
+
+## A Row of Cards
+
+Go to the `Restocked` component.
+
+If we return to our starter image, we have a row of 3 cards. Let's set up the div that contains these cards as a row inside of the `Restocked` component:
+
+```html
+<div className="row">
+  <Card details="{detailsCard1}" image="{yellowRose}" />
+  <Card details="{detailsCard2}" image="{lavenderRose}" />
+  <Card details="{detailsCard3}" image="{apricotRose}" />
+</div>
+```
+
+<details><summary>
+ Other approaches to consistent design
+ </summary>
+
+ Bootstrap can solve a lot of things, but it can't solve all the things. Here are some things that are better solved differently:
+
+One image does not have the same aspect ratio as the other two. When working with images, editing them with a photo/image editor is the best solution.
+
+Many images from places like Unsplash are large because they can be used for printing. Web browser images are typically not as big nor have as high resolution. Therefore reducing the image sizes to an appropriate web browsing size will help decrease load times without losing image quality.
+
+Additionally, an image editor can help set the correct aspect ratio/sizes so that your images have consistent sizing, making your CSS work much more manageable.
+
+Another thing we notice is that the text for the Yellow rose, in most views, wraps to another line, also causing our card to lack consistent design. One way we can overcome this is to customize the appearance ourselves.
+
+We can use the Bootstrap class and add or override the properties there.
+
+**index.css**
+
+```
+.card-text {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+```
+
+</details>
+
+## Cards
+
+Go to the `Card` component.
+
+Follow the commented-out prompts to style the cards.
+
+## Best Sellers Table
+
+Go to the `BestSellers` component.
+
+Add a value of `display-5` for the h3 in the Best Sellers section.
+
+```html
+<!-- ************************** -->
+<!-- Best Sellers table -->
+<!-- Set class display-5 on h3 class -->
+<!-- ************************** -->
+```
+
+For certain elements, like `tables`, despite already being a `table` element, you still have to use a class to opt-in to Bootstrap's table styling. You will find this true for `button`s and other elements.
+
+Let's add another class, `table-striped`, to allow for better division between rows.
+
+```html
+<table class="table table-striped"></table>
+```
+
+If we want to center the text elements in our table, we could write our CSS in the `index.css` file. But it is better to use Bootstrap whenever possible. Bootstrap has a class called `text-center` that will center our text. This will allow for more consistent styling and less unexpected behaviors with our styles.
+
+```html
+<table class="table table-striped text-center"></table>
+```
+
+Finally, we can imagine that each row would be a link to an individual view of each tree with more information and the ability to purchase it. We can add a hover effect to assist our users in recognizing that the table would be interactive.
+
+```html
+<table class="table table-striped text-center table-hover"></table>
+```
+
+## Newsletter Form
+
+Go to the `NewsletterForm` component.
+
+Add a `class` of `container` to the top level `div`.
+
+In the first two `div`s inside the `form`, add the class `mb-3`- this will add some bottom margins.
+
+`mb` is short for `margin-bottom`. There are others like `mt` for `margin-top`, `ml` - left, `mr` -right, `mx` - left and right (x-axis), `my` - top and bottom (y-axis).
+
+In `mb-3`, The value is a multiplier. So if the default margin is 1em, this will multiply the spacer value by 1.
+
+[Learn about the full breakdown here](https://getbootstrap.com/docs/4.0/utilities/spacing/)
+
+### Text Inputs
+
+Add the class `form-label` to the two labels inside the form.
+
+For the two text inputs, add the class `form-control`. This should update our form to look like this:
+
+![](../assets/form-text-input-styled.png)
+
+### Form Checkbox
+
+Add the classes `mb-3 form-check` to style the div that contains the input with the type checkbox.
+
+Add a class `form-check-input` with the type `checkbox` for the input.
+
+For the label, add the class `form-label`.
+
+### Form Select/Options
+
+In the `select` element, add the class `form-select`.
+
+### Checkbox 2 - Style as a Switch
+
+Add the classes `form-check form-switch` to the div that contains an input with the type `checkbox`.
+
+Add the classes' form-check-input' for the final input with the type `checkbox`.
+
+Finally, let's style the submit button by adding the classes `btn btn-primary`.
+
+## Nav (Bonus)
+
+The Nav is a bonus section for you to work on after you have completed the rest of the build. Go to `src/index.css` and comment out the rule for the `nav` to have a display of `none` for now.
+
+## Bonus - Finished early?
+
+Try adding different fonts, font colors, and background-color to add your style in the `index.css` file.
+
+You'll see in the `index.css` file that the `nav` `display` is set to `none`. Remove that code and go back to the mockup image. Use the Bootstrap documentation to get it styled like the mockup.
+
+This navigation bar is responsive, so adding suitable classes should automatically change the appearance based on the browser window's width.
+
+![nav bar short width](../assets/nav-bar-long.png)
+
+![nav bar larger width](../assets/nav-bar-short.png)
+
+## Bonus Bonus
+
+Bootstrap has also been built to integrate with React with custom components. The npm package is called [react-bootstrap ](https://react-bootstrap.github.io/getting-started/introduction).
+
+Rebuild Rosier using react-bootstrap. Be sure to use all the components available (see the left menu under `components`. For example, be sure to check out the following:
+
+- cards
+- table
+- buttons
+- forms
+- nav

intro-to-bootstrap-w-react/readme.md

@@ -0,0 +1,58 @@
+# Intro to Bootstrap CSS with React
+
+## Introduction
+
+Often, developers find that they have the same problems in many projects.
+
+When it comes to CSS, several problems happen over and over again. For example:
+
+- Consistency across browsers
+- Making reliable responsive/mobile and desktop versions
+- Styling forms to look more modern and user friendly
+
+Rather than each developer coding their solution and using it repeatedly, developers get together and make a code library or framework.
+
+One popular CSS framework is called Bootstrap. It was initially developed at Twitter and was made open source in 2011. As an open-source project, anyone can use these code solutions for free, and they can also contribute to improving the project.
+
+## Learning Objectives
+
+- Adding Bootstrap CSS to a project
+- Adding classes to HTML elements to style with Bootstrap CSS
+
+## How to get Bootstrap
+
+When using Create React App, all you need to do is grab the CDN (Content Delivery Network) link.
+
+Search for `bootstrap css cdn`. A top link should be the [Quick start page of Bootstrap's official](https://getbootstrap.com/docs/4.3/getting-started/introduction/) documentation.
+
+> **Note**: You will be using Bootstrap version 5.x for this lesson.
+
+> **Note**: You will only be using the CSS link for this lesson (not installing with npm or any other means to add Bootstrap).
+
+In your Create React App, go to `public/index.html` and inside the `head` tag, add the link tag that you copied from the Bootstrap documentation.
+
+## How to use Bootstrap
+
+On the [main docs page](https://getbootstrap.com/docs/5.3/examples/) of Bootstrap's documentation, you'll notice a lot of different options. The focus of today's lesson will be styling only.
+
+Return to [the docs tab](https://getbootstrap.com/docs/5.3/getting-started/introduction/), along the left side is a menu broken up into a few sections. Scroll down to `Content` and select `Tables`.
+
+> **Note**: Check the url to be sure you are looking at the correct version of the documentation for the version of Bootstrap you are working with. The CDN link that you copied was for version `5.3.0` - so check the URL to be sure you are looking at the correct documentation. It should be: https://getbootstrap.com/docs/5.3/getting-started/introduction/ . You can always change the version by going to the top of the nav bar and selecting a version with the pull-down menu.
+
+The general style of the documentation is to show a demonstration of the styling and then have the example code below.
+
+Here is the page for [Tables](https://getbootstrap.com/docs/5.3/content/tables/). You can use Create React App to create a new app, add the CDN to the `public/index.html` and copy paste the demo code into `src/App.js` to see Bootstrap CSS in action.
+
+Some good first ones to check out are:
+
+- Layout/Overview
+- Content/Typography
+- Content/Images
+- Content/Tables
+- Components/Buttons
+- Components/Card
+- Component/Forms
+
+**Note**: Many components have functionality that require JavaScript. For example Components/Carousel. While these are great features to have on a website, they are beyond the scope of today's lesson and incorporating this functionality into a React app would be done a bit differently.
+
+**Note**: There are also many customization options using Sass (Semantically Awesome Style Sheets). Learning to use Sass is beyond the scope of today's lesson as well.