diff --git a/assets/badge.png b/assets/badge.png new file mode 100644 index 0000000..b7eb476 Binary files /dev/null and b/assets/badge.png differ diff --git a/js/ui.js b/js/ui.js index ab9c008..c8605f6 100644 --- a/js/ui.js +++ b/js/ui.js @@ -115,6 +115,7 @@ const labs = [ "Margins, Padding, and Borders", "Shorthand Properties", "Display", + "Completing the Starter Pack", ]; function generateNav() { diff --git a/lab_037.html b/lab_037.html index 614c640..581c637 100644 --- a/lab_037.html +++ b/lab_037.html @@ -52,7 +52,8 @@

Display Types

Most browsers have a default representation of each HTML element that consists of default font styles, margins, padding, and display types. However, just like you can change font styles, margins, and padding - you can change the display type to get the behavior and layout you want.

-

There are three display types we'll focus on: inline, block, and flex. +

There are three display types we'll focus on: inline, block, and + flex.

Note: You can also do display: none which hides the element.

@@ -91,11 +92,12 @@

Flex

For more information, this article can explain flexbox better than we ever could: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

-

Apply Displays

-

Take a look at the full style sheet to try and understand how the displays are being used. We make liberal +

Applying Displays

+

Take a look at the full style sheet to try and understand how the displays are being used. We make + liberal use of display: flex in our styling. Afterwards, apply display types to your - website to give it the layout that you want!

- + website to give it the layout that you want! +

diff --git a/lab_038.html b/lab_038.html new file mode 100644 index 0000000..68c1a4c --- /dev/null +++ b/lab_038.html @@ -0,0 +1,76 @@ + + + + + + Lab 38 - Completing the Starter Pack + + + + + + + + + + + + + + + Skip to content + +
+ +
+

+ Lab 38 + Completing the Starter Pack +

+ +

Goals

+ +

Submitting Your Website

+

You did it! You've finished all the labs in the Hack4Impact Starter Pack. + We hope that you've learned a lot and got a lot out of it. You should be very proud of all the work + you did!

+

You can keep working on your website until you are satisfied with the way it looks and you + can continue to get help all the way until your due date. When you are satisfied with your website, go to GitHub Discussions Submissions and make a new discussion post with a + link to your website and a link to your GitHub repository. +

+

Once you've done that, you're all done! Congratulations, have a + badge!

+

Decisions will be out once applications close and all the submissions are reviewed.

+

Thank You

+

Thank you again for completing the Hack4Impact Starter Pack. We put a lot of time and care into making this for + you, so we hope you found it helpful. Please let us know what you think and how we can do better! We hope to see + you as a part of Hack4Impact.

+ +
+
+ + + + + +