format errors, add survey back

Author: ibirnam

P01-Build-A-Header-Component/content.md

@@ -284,7 +284,7 @@ function Title() {
     </div>
   )
 }
-
+>
 export default Title
 ```
 

P07-Style-the-List/content.md

@@ -5,27 +5,27 @@ slug: styling-the-list
 
 ## The list could use some styles
 
-The POPOSList component displays a list of POPOSSpace components. The list is only responsible for arranging the spaces. To get things to look great you'll need to style both and get those styles to work together. 
+The POPOSList component displays a list of POPOSSpace components. The list is only responsible for arranging the spaces. To get things to look great you'll need to style both and get those styles to work together.
 
-This step will only cover styling the list. There may be a few issues with the way the spaces display which will be covered in another section. 
+This step will only cover styling the list. There may be a few issues with the way the spaces display which will be covered in another section.
 
-Create a CSS file. 
+Create a CSS file.
 
-> [info] 
-> 
-> If you haven't already create a new file: `POPOSList.css` it should be in the same folder as the `POPOSList.js` file. 
-> 
+> [action]
+>
+> If you haven't already create a new file: `POPOSList.css` it should be in the same folder as the `POPOSList.js` file.
+>
 
-Now import the CSS. 
+Now import the CSS.
 
-> [info]
-> 
+> [action]
+>
 > Next import the the new CSS file into the `POPOSList.js` add the following at the top.
-> 
+>
 > `import './POPOSList.css'`
 >
-> Now, in the `POPOSList` component add a class name: 
-> 
+> Now, in the `POPOSList` component add a class name:
+>
 ```JS
 function POPOSList() {
   ...
@@ -38,12 +38,12 @@ function POPOSList() {
 ```
 >
 
-Arranging the elements in a grid would be a good idea. Luckily CSS provides a `display: grid` property. This is similar to `display: flex`. Where flex is a one dimmensional arrangement grid is two dimmendsional. With flex everything would be arranged in a row or a column, with grid things are arranged in both rows and columns. 
+Arranging the elements in a grid would be a good idea. Luckily CSS provides a `display: grid` property. This is similar to `display: flex`. Where flex is a one dimmensional arrangement grid is two dimmendsional. With flex everything would be arranged in a row or a column, with grid things are arranged in both rows and columns.
 
-> [info]
+> [action]
 >
 > Add the following to `POPOSList.css`
-> 
+>
 ```CSS
 .POPOSList {
 	display: grid;
@@ -52,18 +52,18 @@ Arranging the elements in a grid would be a good idea. Luckily CSS provides a `d
 ```
 >
 
-The code above declare the parent element as display grid and defines three equal sized columns. The `1fr` is 1 fraction. the `fr` unit that is a fraction of the availble space. So `1fr 1fr 1fr` could considered the same as `33.333% 33.333% 33.333%` but it reads better and is more accurate. 
+The code above declare the parent element as display grid and defines three equal sized columns. The `1fr` is 1 fraction. the `fr` unit that is a fraction of the availble space. So `1fr 1fr 1fr` could considered the same as `33.333% 33.333% 33.333%` but it reads better and is more accurate.
 
-Test this out and resize the page. There are a couple things missing. 
+Test this out and resize the page. There are a couple things missing.
 
 - The grid columns and rows need some space between them
 - When the page is really wide the columns are too far apart
 - When the page is too narrow the columns are too close together
 
-> [info]
-> 
+> [action]
+>
 > Add the following to the `.POPSList` rule in `POPOSList.css`
-> 
+>
 ```CSS
 .POPOSList {
 	display: grid;
@@ -72,22 +72,22 @@ Test this out and resize the page. There are a couple things missing.
 	max-width: 1200px;
 	margin: auto;
 	padding: 2em;
-} 
-> 
+}
+```
 
 - `grid-gap: 2em` adds a 2em space between rows and columns in the grid
 - `max-width: 1200px` sets a maximum width for the element
-- `margin: auto` makes the margins equal on the left and right this has the effect of centering the grid container on the page. 
-- `padding: 2em` adds some space on the left and right so the pictures don't hit the edges of the page when the window is narrow. 
+- `margin: auto` makes the margins equal on the left and right this has the effect of centering the grid container on the page.
+- `padding: 2em` adds some space on the left and right so the pictures don't hit the edges of the page when the window is narrow.
 
-This looks better but there are some problems when the page is narrow. Add some media queries to take care of these. 
+This looks better but there are some problems when the page is narrow. Add some media queries to take care of these.
 
-A media query is a rule that is only applied some times or under certain circumstances. You'll use media queries here to make adjustments for smaller screens, like tablets, and mobile devices. 
+A media query is a rule that is only applied some times or under certain circumstances. You'll use media queries here to make adjustments for smaller screens, like tablets, and mobile devices.
 
-> [info]
-> 
+> [action]
+>
 > Add the following to `POPOSList.css`
-> 
+>
 ```CSS
 /* Smaller screens and tablets */
 @media only screen and (max-width: 960px) {
@@ -98,32 +98,30 @@ A media query is a rule that is only applied some times or under certain circums
 ```
 >
 
-Here the number of columns is changed to two equal columns when the screen is 960px or smaller. 
+Here the number of columns is changed to two equal columns when the screen is 960px or smaller.
 
-Test your work. resizing the page should change the display to two columns when the screen gets down to 960px and show 3 columns when the screen is wider. 
+Test your work. resizing the page should change the display to two columns when the screen gets down to 960px and show 3 columns when the screen is wider.
 
-Let's do that again. 
+Let's do that again.
 
-> [info]
-> 
+> [action]
+>
 > Add the following to `POPOSList.css`
-> 
+>
 ```CSS
 /* Small screens mobile */
 @media only screen and (max-width: 700px) {
 	.POPOSList {
 		grid-template-columns: 1fr;
 	}
-} 
+}
 ```
 >
 
-Here the the layout switched to a single column when the screen is smaller than 700px. 
-
-test your work. The screen shoould switch between 3, 2, and 1 column as the screen narrows. 
-
-Think of other things you might want to change as the screen changes size? 
+Here the the layout switched to a single column when the screen is smaller than 700px.
 
-Important! In the POPOSList stylesheet you're only concerned with the list of spaces. If the changes you want to make concern the Spaces (thats' the image and text) it should be applied to the POPOSSpace.css. See the section on styling these! 
+test your work. The screen should switch between 3, 2, and 1 column as the screen narrows.
 
+Think of other things you might want to change as the screen changes size?
 
+Important! In the POPOSList stylesheet you're only concerned with the list of spaces. If the changes you want to make concern the Spaces (thats' the image and text) it should be applied to the POPOSSpace.css. See the section on styling these!

P08-Styling-Spaces/content.md

@@ -5,13 +5,13 @@ slug: styling-spaces
 
 ## Styling Spaces
 
-The POPOSSpace component displays a a single Public space in the list of public spaces on the home page. Each of these displays an image, the name of the space, it's address, and hours. 
+The POPOSSpace component displays a a single Public space in the list of public spaces on the home page. Each of these displays an image, the name of the space, it's address, and hours.
 
 ## Using ancestor selector
 
-Styles have been divided between several style sheets. To keep these styles from conflicting you'll use the strategy of assigning the root element in a component class name that matches the component name. The Component names should be unique like class names. You should also use this class name as the ancestor for other styles applied within the component. For example: 
+Styles have been divided between several style sheets. To keep these styles from conflicting you'll use the strategy of assigning the root element in a component class name that matches the component name. The Component names should be unique like class names. You should also use this class name as the ancestor for other styles applied within the component. For example:
 
-```CSS 
+```CSS
 .POPOSSpace {
 	/* Styles for the root element */
 }
@@ -21,29 +21,29 @@ Styles have been divided between several style sheets. To keep these styles from
 }
 ```
 
-The second style above styles img tags but only if they are descendants of an element with the class name: POPOSSpace. This way the styles here don't affect img tags elsewhere on the page. 
+The second style above styles img tags but only if they are descendants of an element with the class name: POPOSSpace. This way the styles here don't affect img tags elsewhere on the page.
 
 ## Styling POPOSSpace
 
-Create a new stylesheet if you having. This should be a in the same folder as the `POPOSSpace.js` file. 
+Create a new stylesheet if you having. This should be a in the same folder as the `POPOSSpace.js` file.
 
-> [info]
-> 
-> Create a new file named: `POPOSSpace.css`. This should be in the same folder as the `POPOSSPace.js` file. 
-> 
+> [action]
+>
+> Create a new file named: `POPOSSpace.css`. This should be in the same folder as the `POPOSSPace.js` file.
+>
 
-Import the CSS and add the class name: 
+Import the CSS and add the class name:
 
-> [info]
-> 
+> [action]
+>
 > Add the following at the top of `POPOSSpace.js`:
-> 
+>
 ```JS
 import './POPOSSpace.css'
 ```
-> 
-> Now add the class to the root element: 
-> 
+>
+> Now add the class to the root element:
+>
 ```JS
 function POPOSSpace(props) {
   ...
@@ -54,33 +54,31 @@ function POPOSSpace(props) {
   )
 }
 ```
->
 
-Now you'll add some styles to style the elements here. 
+Now you'll add some styles to style the elements here.
 
-It would be nice if the images were flexible. The columns of the grid change size as the page changes sizes. 
+It would be nice if the images were flexible. The columns of the grid change size as the page changes sizes.
 
-> [info]
-> 
+> [action]
+>
 > Add the following to: `POPOSSpace.css`:
-> 
+>
 ```CSS
 .POPOSSpace img {
 	width: 100%;
 	height: auto;
 }
 ```
->
 
-You might have to refresh to make sure the changes to CSS show up when testing. 
+You might have to refresh to make sure the changes to CSS show up when testing.
 
-With this change the images in POPOSSpace should have a width of 100% of the available space. 
+With this change the images in POPOSSpace should have a width of 100% of the available space.
 
 ## Have some fun with the title
 
-Let's move the title to the upper left corner of the picture. To do this you'll use relative and absolute position. 
+Let's move the title to the upper left corner of the picture. To do this you'll use relative and absolute position.
 
-The structure of the POPOSpace is: 
+The structure of the POPOSpace is:
 
 - div.POPOSSpace
 	- Link
@@ -90,33 +88,32 @@ The structure of the POPOSpace is:
 	- div (address)
 	- div (hours)
 
-By making the parent component `div.POPOSSpace` position relative it will become the positioning context for any children that use absolute position. When an element uses absolute position you can position it by it's left and top edges. To figure where the top and left are the element looks up the DOM tree for an element that has `position: relative`. 
+By making the parent component `div.POPOSSpace` position relative it will become the positioning context for any children that use absolute position. When an element uses absolute position you can position it by it's left and top edges. To figure where the top and left are the element looks up the DOM tree for an element that has `position: relative`.
 
-Give it a try! 
+Give it a try!
 
-> [info]
-> 
+> [action]
+>
 > Edit `POPOSSpace.css `, set the position property of the parent element to relative.
-> 
+>
 ```CSS
 .POPOSSpace {
 	position: relative;
 }
 ```
-> 
 
-Now add a new classname to the title element. This is in a Link component, you'll need to assign this a className. 
+Now add a new classname to the title element. This is in a Link component, you'll need to assign this a className.
 
-> [info]
+> [action]
+>
+> In `POPOSSpace.js` find the name in it's Link tag and add a new class name.
 >
-> In `POPOSSpace.js` find the name in it's Link tag and add a new class name. 
-> 
 ```JS
 function POPOSSpace(props) {
   ...
   return (
     ...
-			<Link 
+			<Link
 				className="POPOSSpace-title" // add a class name!
 				to={`/details/${id}`}>
 				<h1>{name}</h1>
@@ -125,14 +122,13 @@ function POPOSSpace(props) {
   )
 }
 ```
-> 
 
-Next style the new class. 
+Next style the new class.
 
-> [info] 
-> 
-> In `POPOSSpace.css` add some new style rules: 
-> 
+> [action]
+>
+> In `POPOSSpace.css` add some new style rules:
+>
 ```CSS
 .POPOSSpace .POPOSSpace-title {
 	display: block;
@@ -150,14 +146,14 @@ Next style the new class.
 }
 ```
 
-This should move the title to the upper left corner and give it some font styles. 
+This should move the title to the upper left corner and give it some font styles.
 
-Now move the address and hours to the lower right corner. It will ne easier if these elements share a common parent. 
+Now move the address and hours to the lower right corner. It will ne easier if these elements share a common parent.
 
-> [info]
-> 
-> Edit `POPOSSpace.js`: 
-> 
+> [action]
+>
+> Edit `POPOSSpace.js`:
+>
 ```JS
 ...
 function POPOSSpace(props) {
@@ -173,31 +169,30 @@ function POPOSSpace(props) {
   )
 }
 ```
->
 
-Now with a a parent element and a class name we can apply styles to the parent and it's children. 
 
-> [info] 
-> 
-> Edit `POPOSSpace.css` and add thw following. 
-> 
+Now with a a parent element and a class name we can apply styles to the parent and it's children.
+
+> [action]
+>
+> Edit `POPOSSpace.css` and add thw following.
+>
 ```CSS
 .POPOSSpace .POPOSSpace-info {
 	position: absolute;
 	right: 0;
 	bottom: 0;
 	text-align: right;
-} 
+}
 >
 .POPOSSpace .POPOSSpace-info div {
 	display: inline-block;
 	padding: 0.25em 0.5em;
 	background-color: rgba(255, 255, 255, 0.9);
 }
 ```
->
 
-Here the container `.POPOSSpace-info` is declared position absolute This way we can place it where we want. In this case I put it at right 0 and bottom 0 which make it hug the lower right corner. I also aligned the text to the right. 
 
-The `.POPOSSpace .POPOSSpace-info div` selector applies to the two child divs. Here I added some padding and a background color.
+Here the container `.POPOSSpace-info` is declared position absolute This way we can place it where we want. In this case I put it at right 0 and bottom 0 which make it hug the lower right corner. I also aligned the text to the right.
 
+The `.POPOSSpace .POPOSSpace-info div` selector applies to the two child divs. Here I added some padding and a background color.