ashx3s · March 5, 2024 19:40 · Mar 5, 2024 · Mar 5, 2024 · Mar 5, 2024 · Mar 5, 2024
diff --git a/README.md b/README.md
@@ -47,5 +47,6 @@ These are intended to develop your skills and methodology at creating components
 
 ## Accordion Components
 - Make a set of components for mantainable accordion drop downs
+- Nest components using props and slots as makes sense to you
 - Add animation to it
 - Try implementing with 2 different arrays of data
diff --git a/README.md b/README.md
@@ -44,3 +44,8 @@ These are intended to develop your skills and methodology at creating components
 - Create a wrapper component that will handle layout
 - Verify that it works well.
 - Think of another use case for your layout component and standardize it so that it can be easily used in both use cases
+
+## Accordion Components
+- Make a set of components for mantainable accordion drop downs
+- Add animation to it
+- Try implementing with 2 different arrays of data
diff --git a/README.md b/README.md
@@ -37,3 +37,10 @@ These are intended to develop your skills and methodology at creating components
 - Create class props using [class and style binding](https://vuejs.org/guide/essentials/class-and-style)
 - Use this to generate primary/secondary buttons in a Page Header
 - EXTRA Challenge: create a PageHeader component that takes an image and headline as well as info for buttons to be passed down too
+
+## Cards
+- Create a generic and a specific card component
+- Use a mix of content and class props (depending on the design)
+- Create a wrapper component that will handle layout
+- Verify that it works well.
+- Think of another use case for your layout component and standardize it so that it can be easily used in both use cases
diff --git a/README.md b/README.md
@@ -35,3 +35,5 @@ These are intended to develop your skills and methodology at creating components
 - Create an AppButton component
 - Give it basic props and/or slots
 - Create class props using [class and style binding](https://vuejs.org/guide/essentials/class-and-style)
+- Use this to generate primary/secondary buttons in a Page Header
+- EXTRA Challenge: create a PageHeader component that takes an image and headline as well as info for buttons to be passed down too
diff --git a/README.md b/README.md
@@ -31,4 +31,7 @@ These are intended to develop your skills and methodology at creating components
 - it shouldn't take any props
 - Render it onto the `App.vue` page
 
-## 
+## Styled Buttons
+- Create an AppButton component
+- Give it basic props and/or slots
+- Create class props using [class and style binding](https://vuejs.org/guide/essentials/class-and-style)
diff --git a/README.md b/README.md
@@ -25,8 +25,10 @@ These are intended to develop your skills and methodology at creating components
 
 ---
 
-## Easy Activity: Create a navbar component
+## Navbar Component
 
 - Create a `TheNav` or similarly named component for the navbar
 - it shouldn't take any props
 - Render it onto the `App.vue` page
+
+## 
diff --git a/README.md b/README.md
@@ -29,4 +29,4 @@ These are intended to develop your skills and methodology at creating components
 
 - Create a `TheNav` or similarly named component for the navbar
 - it shouldn't take any props
-- Render it onto the page
+- Render it onto the `App.vue` page
diff --git a/README.md b/README.md
@@ -23,4 +23,10 @@ These are intended to develop your skills and methodology at creating components
 - Imports
   - make sure to import your components onto the page that they will be used (watch the relative path)
 
----
+---
+
+## Easy Activity: Create a navbar component
+
+- Create a `TheNav` or similarly named component for the navbar
+- it shouldn't take any props
+- Render it onto the page
diff --git a/README.md b/README.md
@@ -21,4 +21,6 @@ These are intended to develop your skills and methodology at creating components
   <AppButton>Some random text</AppButton>
   ```
 - Imports
-  - make sure to import your components onto the page that they will be used (watch the relative path)
+  - make sure to import your components onto the page that they will be used (watch the relative path)
+
+---
diff --git a/README.md b/README.md
@@ -21,5 +21,4 @@ These are intended to develop your skills and methodology at creating components
   <AppButton>Some random text</AppButton>
   ```
 - Imports
-  - make sure to import your components onto the page that they will be used (watch the relative path)
-- Looping
+  - make sure to import your components onto the page that they will be used (watch the relative path)
diff --git a/README.md b/README.md
@@ -21,4 +21,5 @@ These are intended to develop your skills and methodology at creating components
   <AppButton>Some random text</AppButton>
   ```
 - Imports
-  - make sure to import your components onto the page that they will be used
+  - make sure to import your components onto the page that they will be used (watch the relative path)
+- Looping
diff --git a/README.md b/README.md
@@ -19,4 +19,6 @@ These are intended to develop your skills and methodology at creating components
   - They can be used alongside or often in place of props
   ```
   <AppButton>Some random text</AppButton>
-  ```
+  ```
+- Imports
+  - make sure to import your components onto the page that they will be used
diff --git a/README.md b/README.md
@@ -16,6 +16,7 @@ These are intended to develop your skills and methodology at creating components
   - Render variables in the dom with double moustache syntax: `{{ variable Name }}`
 - Slots
   - use slots to make your component wrap around content like a regular html element
+  - They can be used alongside or often in place of props
   ```
   <AppButton>Some random text</AppButton>
   ```
diff --git a/README.md b/README.md
@@ -13,4 +13,9 @@ These are intended to develop your skills and methodology at creating components
 - Props
   - props are used to pass specific information into a component.
   - Bind props to attributes like this: `:href="link.href"`
-  - Render variables in the dom with double moustache syntax: `{{ variable Name }}`
+  - Render variables in the dom with double moustache syntax: `{{ variable Name }}`
+- Slots
+  - use slots to make your component wrap around content like a regular html element
+  ```
+  <AppButton>Some random text</AppButton>
+  ```
diff --git a/README.md b/README.md
@@ -1 +1,16 @@
-‎‎
+# Vue Component Lab Activties
+
+These are intended to develop your skills and methodology at creating components in a frontend framework.
+
+## Important Topics
+- Naming conventions
+  - prefixes:
+    - `The`: For components that are only used once on a given page
+    - `App` or `V`: For components that are generic and presentational
+  - Stringing words together
+    - ie: `TheHeader` `TheHeaderLogo` `TheHeaderNav`
+      - All of these would only be used once and together. They're named like that to group them easily and note parent/child relationships
+- Props
+  - props are used to pass specific information into a component.
+  - Bind props to attributes like this: `:href="link.href"`
+  - Render variables in the dom with double moustache syntax: `{{ variable Name }}`
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+‎‎
No results found