edits to styling and components

8-react/2-components-props-state/README.md

@@ -411,7 +411,53 @@ portfolio
         └── Footer.js
 ```
 
-Referring back to your data file, customize and add to the data objects however you need, and start building out the components. Don't forget to import them into `App.js` and include your components in the template as well for them to render out into the single page application.
+Referring back to your data file, customize and add to the data objects however you need, and start building out the components. Don't forget to import them into `App.js` and include your components in the template as well for them to render out into the single page application. Ultimately, your `App.js` might look like this:
+
+```js
+import React, { useState, useEffect } from 'react';
+import {
+  heroData,
+  aboutData,
+  projectsData,
+  contactData,
+  footerData
+} from './mock/data';
+import Hero from './components/Hero';
+import About from './components/About';
+import Projects from './components/Projects';
+import Contact from './components/Contact';
+import Footer from './components/Footer';
+
+function App() {
+  const [hero, setHero] = useState({});
+  const [about, setAbout] = useState({});
+  const [projects, setProject] = useState([]);
+  const [contact, setContact] = useState({});
+  const [footer, setFooter] = useState({});
+
+  useEffect(() => {
+    setHero({ ...heroData });
+    setAbout({ ...aboutData });
+    setProject({ ...projectsData });
+    setContact({ ...contactData });
+    setFooter({ ...footerData });
+  }, []);
+
+  return (
+    <div>
+      <Hero hero={hero} />
+      <About about={about} />
+      <Projects projects={projects} />
+      <Contact contact={contact} />
+      <Footer footer={footer} />
+    </div>
+  );
+}
+
+export default App;
+```
+
+The projects list component might be a good contender to split out in a `ProjectCard.js` where you can map out in the `Projects.js` component.
 
 In the next section, we will touch on styling Tailwind.
 

8-react/3-styling-deployment/README.md

@@ -2,11 +2,46 @@
 
 ### Introduction
 
-In this section, we will finalize our portfolio project by going over to style in Tailwind, we will then wrap by going over a couple hosting provider deployment options for you to ship your portfolio live!
+In this section, we will finalize our portfolio project by first going over to how style in [Tailwind](https://tailwindcss.). The [Tailwind documentation](https://tailwindcss.com/docs) will be your best friend during this section, as it will give you all the style utilities to make your portfolio amazing! we will then wrap by going over a couple hosting provider deployment options for you to ship your portfolio live!
 
-## Tailwind styling files
+## Tailwind and BEM
 
-Before we get into creating our style files, lets retract and look at the `Hero` and `CtaButton` components we created. You may
+Before we get into creating our style files, lets retract and look at the `Hero` and `CtaButton` components we created. You may have noticed in the outer most parent div we give our class as specific name `className="hero"`, and our the nested divs as `hero__container` and `hero__title`. We are following by [BEM standards](http://getbem.com/introduction/) here. It is one of the most efficient and ledgeable ways to structure out your CSS and SASS. You can read more into details of the other benefits of BEM in the link shared above. We have decided to go with BEM in this project because extracting out styling to style files will help to keep your project organized and ultimately your code readable and ledgeable. Tailwind's does not recommended one over the other, using utility class names inline or extracting CSS or SASS to other files. In fact, Tailwind has documentation on [how to set your preprocessors](https://tailwindcss.com/docs/using-with-preprocessors) in your project.
+
+# Styling files
+
+Now, lets get started on creating some of our starting styles files. First create a `tailwind.scss` folder in `index.scss` in `src`. Open up `tailwind.js` and copy the below code in. 
+
+```css
+@import "tailwindcss/base";
+
+/* Custom base styles here */
+@import './base/base';
+
+/* Start purging... */
+@import "tailwindcss/components";
+/* Stop purging. */
+
+/* Start purging... */
+@import "tailwindcss/utilities";
+/* Stop purging. */
+
+/* Custom utilities */
+```
+
+Now let's create two folders named `base` and `components` inside of a `styles` folder which you will create as well. Inside of `base`, create `_base.scss` and inside of `components`, `_hero.scss`. Your styles directory structure should now look like this:
+
+```
+portfolio
+├── src
+├── ├── styles
+├──     │    └── base
+├──     │        └── _base.scss
+├──     ├── components
+├──     │   └── _hero.scss
+├──     │   index.scss
+└──     └── tailwind.scss
+```
 
 
 ## Credits