From 795a66f38ecfc6a8220eba54e35ee0d18c076c56 Mon Sep 17 00:00:00 2001 From: Heather Faerber Date: Wed, 17 Jul 2024 14:53:40 -0600 Subject: [PATCH 1/2] Pull in flexbox and flexbox prework lessons --- module2/lessons/css_flexbox.md | 209 +++++++++++++++++++++++++ module2/lessons/css_intro_to_layout.md | 112 +++++++++++++ module2/lessons/index.md | 6 + 3 files changed, 327 insertions(+) create mode 100644 module2/lessons/css_flexbox.md create mode 100644 module2/lessons/css_intro_to_layout.md diff --git a/module2/lessons/css_flexbox.md b/module2/lessons/css_flexbox.md new file mode 100644 index 00000000..ffeaa5d9 --- /dev/null +++ b/module2/lessons/css_flexbox.md @@ -0,0 +1,209 @@ +--- +title: "CSS Flexbox" +length: 90 +tags: css, flexbox, layout +--- + +## Learning Goals + +* Explain what flexbox is and why its an important tool for creating layouts +* Explain the difference between a parent and child element, be able to identify immediate children +* Apply Flexbox to containers in order to achieve a desired layout + +## Pre-Work +Read through [Intro to Layout Pre-Work lesson](./css_intro_to_layout) and all links provided and complete exercises provided in it. Be prepared to demonstrate your understanding of the concepts in that document when you come to this class. + +## Vocabulary + +- `flexbox` - a layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces +- `display` - a css property that sets whether an element is treated as a block or inline element and the layout used for its children, such as grid or flex +- `flex parent` or `flex container` - Any HTML element that has been given the `display: flex` declaration +- `flex child` or `flex item` - Any _immediate descendants_ of a flex parent +- `main axis` – the primary axis along which flex items are laid out. It can be horizontal or vertical, and is defined by the direction set by the `flex-direction` property. + +
+## Warm Up + +- With a partner, fork [this codepen](https://codepen.io/kaylaewood/pen/oNBdGEx) +- Explore the CSS that's already present. Without googling, what do you think `:nth-child` means? +- In your CSS, add the property of "display" with a value of "flex" to the `.wrapper` selector. What happened? Which elements visually changed? +
+ +## What is Flexbox? + +Flexbox is a part of CSS that provides an efficient way to lay out, align and distribute space among items in a container. Before flexbox became popular, it was a real challenge to center elements. We would use something called `float`, which could behave unpredictably at times. + +## Parents and Children + +As we start working with flexbox, a very important distinction should be pointed out. We need to be careful about the CSS rules we apply to a parent element vs. those to a child element. A **parent** element wraps other elements, a **child** is nested inside the parent. + +Let's look an some HTML to make sure we are all on the same page. Which element is the parent and which are its children? + +```html +
+

+
+
+
+
+``` +
+### The Answer +In the code above, the `section` is the parent element, the `

` and the 3 `article`s are all children elements because they are directly nested inside of that `section`. Proper indentation is really helpful here! +

+ +What about in this block of HTML? +```html +
+
+

Title of Article 1

+
+
+

Title of Article 2

+
+
+

Title of Article 3

+
+
+``` +
+### The Answer +In the code above, we now have these `h2` elements nested inside of each `article`. It's important to know that the `h2` is **not** an immediate child of the `section`. It is technically a grandchild, and a child of `article`. The idea of **immediate child** is really important to understand as we work with Flexbox. + +When we use Flexbox, we will make the parent elements `flex containers` and the children elements `flex items`. +
+ +graphic of parent/container +graphic of child/item +
+(Graphics from CSS Tricks) + +
+### Try It 1 + - Go back to your codepen from the warm up + - Experiment adding the `justify-content` property to your `.wrapper`. Add the following values (one at a time), and note what changes: + - `center` + - `space-around` + - `space-between` + - `space-evenly` + - `flex-end` +
+ +## Justify Content + +`justify-content` allows us to define the alignment of items (flex children) along the *main axis*, and is incredibly useful for centering elements. + +- `flex-start` (default): items are packed toward the start line +- `flex-end`: items are packed toward to end line +- `center`: items are centered along the line +- `space-between`: items are evenly distributed in the line; first item is on the start line, last item on the end line +- `space-around`: items are evenly distributed in the line with equal space around them +- `space-evenly`: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same + +Here is a great example of how you can use `justify-content` to move your items: +

+ See the Pen + Flexbox & justify-content by CSS-Tricks (@css-tricks) + on CodePen. +

+ + +_The above Codepen is an example from CSS Tricks_ + +
+### Note + +Most flexbox-related properties have _default_ values. We don't see them in our CSS, but can know that they are being applied! These properties can always be changed by us. You'll see some default values indicated below. +
+ +
+### Try It 2 + - Go back to your codepen from the warm up + - Now add `flex-direction: column;` to your `.wrapper` + - What happened? How does changing the values for the `justify-content` property affect the boxes? +
+ +## Flex Direction + +Another CSS property with flexbox is `flex-direction`. This property takes one of four values: + +- `row` (default): left-to-right +- `row-reverse`: opposite of row (right-to-left) +- `column`: same as `row` but top to bottom +- `column-reverse`: same as `column` but bottom to top + + +**The `flex-direction` property defines the main axis** + +flexbox parent axis + +
+### Try It 3 + - Go back to your codepen from the warm up + - Remove the `justify-content` and `flex-direction` properties. + - Now, add in an `align-items` property and experiment with the following values: + - `stretch` + - `center` + - `baseline` + - `flex-start` + - `flex-end` + - Then, add `flex-direction: column;` to your `.wrapper`. What changes? +
+ +## Align Items + +Just like we can control how our content sits on the main axis with `justify-content`, we have a tool to control how our content sits _on the cross-axis_. + +- `stretch` (default): stretch to fill the container (still respect min-width/max-width) +- `flex-start`: cross-start margin edge of the items is placed on the cross-start line +- `flex-end`: cross-end margin edge of the items is placed on the cross-end line +- `center`: items are centered in the cross-axis +- `baseline`: items are aligned such as their baselines align + +flex align values + +
+### Note + +These properties will get you far enough for now, but they're just scratching the surface at what flex can do! If you want more, check out this [extensive guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) from CSS tricks. +
+ +## Tips and Tricks (write these in your notes!) + +When you are about to use flexbox, ask yourself the following questions: +- *What elements do I want to move?* +- *What is the parent element of those elements?* (this is where the flex properties should live!) + +If flex isn't working the way you think it should, check the following things: +- *Did I remember to include `display: flex;`?* Without that line of code, the other flex properties won't work! +- *Am I sure I'm adding the flex properties to the correct element?* Check the parent-child relationship in the HTML file to be sure that you are adding those properties to the direct parent. +- *Is the parent element big enough?* Add a border to the parent element. If it is the same width and/or height as the children, you won't be able to move those children as expected. + +CSS tends to require a lot of trial and error when you're first learning it. Often, the CSS flow for newbies is something like: + - Developer edits their css file and reload their webpage to see if it's what they want. + - Developer realizes it's not quite right, so they edit their CSS file again, reload again, on and on and on. + +We encourage you to make your CSS changes in your dev tools which will instantly show you the result. You can keep editing the CSS right in your dev tools until it's right, then copy those rules over to your text editor and save yourself all the time on the back and forth. + +## Using Flexbox on Nested Elements + +
+### Try It 4 + - Fork [this NEW codepen](https://codepen.io/kaylaewood/pen/jOyxZWz) + - Complete the 3 challenges listed in the CSS file. +
+ +## Recreating a Comp + +We will now continue working on the comp from the CSS Fundamentals lesson. You will have one hour to work on `iteration 2` of [this activity](https://github.com/kaylagordon/css-intro-imperfectfoods). + +## Additional Resources + +- [Flex Cheatsheet](https://yoksel.github.io/flex-cheatsheet/) +- [MDN Documentation](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) +- [freeCodeCamp Blog Post](https://www.freecodecamp.org/news/learn-css-flexbox-in-5-minutes-b941f0affc34/) +- [Scrimba Video that accompanies blog post above](https://scrimba.com/g/gflexbox) +- [Flexbox Froggy Game - great practice!](https://flexboxfroggy.com/) +- [Flexbox Defense Game - more practice!](http://www.flexboxdefense.com/) +- [Flexbox Zombies Game - leveled up practice!](https://geddski.teachable.com/p/flexbox-zombies) +- [CSS Diner Game - learn more complex CSS selecting](https://flukeout.github.io/) \ No newline at end of file diff --git a/module2/lessons/css_intro_to_layout.md b/module2/lessons/css_intro_to_layout.md new file mode 100644 index 00000000..547d0e61 --- /dev/null +++ b/module2/lessons/css_intro_to_layout.md @@ -0,0 +1,112 @@ +--- +title: "Intro to Layout: Pre-Work" +length: 30 +tags: css, syntax, prework +--- + +## Learning Goals + +* Explain the difference between block, inline and inline-block elements +* Be able to change an element's display property with CSS + +## Vocabulary + +- `Block` A block-level element occupies the entire width of its parent element (container), thereby creating a "block." +- `Inline` An inline-level element only occupies the space bounded by the tags defining the element, instead of breaking the flow of the content. +- `Inline-block` An inline-block level element behaves the same as an inline element, but you can set a fixed width and/or height (note: no elements are inline-block by default) + +## Default Block and Inline Elements + +You might notice that some elements behave a little differently in a layout than others. Some elements make content stack, while others let content sit next to each other. What's that about? + +This is an important distinction: + +- **Block elements** stack on top of each other. Each one starts and ends on its own line. +- **Inline elements** and **inline-block elements** can be used to mark up a few words inside of a block element. + +Most elements are block elements by default. Some common **inline tags** you might see used: + +- `` is used to create links +- `` is used to denote that you'd like to emphasize some text. +- `` is used to denote that this text is important. + +We use `` and `` to denote the semantic meaning of the content. When looking at the markup, you also notice that it's common for inline elements to be written on the same line of code, nested inside of a parent element. + +

+ See the Pen + Inline v Block Elements by Turing School (@turing-school) + on CodePen. +

+ + + + +### `` and `
` + +Some think of `` and `
` as the flavorless Jello of HTML tags: + +- They don't have any meaning in and of themselves +- They typically don't come with any built-in styling from the browser. + +There is just one important difference between the two: + +- `
` is a block element. +- `` is an inline element. + +
+ **Quick tip:** If you want to center an element, you can give the `margin` property a value of `0 auto` to center a block-like element! +
+ +## CSS Display Property +The `display` property allows us to change the default value of block and inline level elements. Along with block and inline, we have a few other display values to choose from. Some common ones you will see are "none", "flex" and "grid." We'll learn about flex tomorrow! + +``` +display: inline-block; +display: inline; +display: block; +display: none; +``` + +
+### Practice + +Visit [this Codepen](https://codepen.io/turingschool/pen/mdzRVZq), which contains an HTML file and a CSS file. + +Read through the HTML and CSS. Observe what classes and CSS is being applied to the elements in the HTML. + +Work through the questions/challenges commented in the CSS file. +
+ +
+ +### BONUS - More on Hiding Elements with CSS +There are a number of different ways to hide an element with CSS, and they all behave slightly differently. Try creating some invisible elements and inspecting them to see if they take up space! + +``` +// Element no longer exists on the page and does not take up space +display: none; + +// Element exists on the page and takes up space but cannot be seen +visibility: hidden + +// Similar to visibility, but is read by screen readers. Also useful for animation! +opacity: 0 +``` +
+
+### Checks for Understanding + +- What is the difference between inline, block and inline-block? +- List out three elements that are block level by default. +- List out three elements that are inline level by default. +- Write down at least one question you have about the display property for class tomorrow. + +
+ +## Additional Resources + +* [Turing HTML Style Guide](https://github.com/turingschool-examples/html) +* [MDN CSS Display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) +* [MDN Inline Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements) +* [MDN Block Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements) +* [Hiding Elements with CSS](https://bitsofco.de/hiding-elements-with-css/) \ No newline at end of file diff --git a/module2/lessons/index.md b/module2/lessons/index.md index 5674cfb4..911e348c 100644 --- a/module2/lessons/index.md +++ b/module2/lessons/index.md @@ -26,6 +26,12 @@ title: Module 2 - Lessons ## HTML and CSS * [HTML: Fundamentals](./html_fundamentals) +* [CSS: Fundamentals](./css_fundamentals) +* [CSS: Flexbox](./css_flexbox) +* [CSS: Intro To Layout](./css_intro_to_layout) (prework for Flexbox lesson) + + + ## Active Record * [Class vs Instance Methods](./class_vs_instance_methods.md) From 537dc8b63a443078fd946294dc418422de65ba19 Mon Sep 17 00:00:00 2001 From: Heather Faerber Date: Wed, 17 Jul 2024 15:07:31 -0600 Subject: [PATCH 2/2] Add assets for flexbox lesson --- .../assets/images/flexbox/child-item.svg | 1 + .../assets/images/flexbox/flex-align.svg | 79 +++++++++++++++++++ .../assets/images/flexbox/flexbox-axis.svg | 1 + .../images/flexbox/parent-container.svg | 1 + module2/lessons/css_flexbox.md | 16 ++-- 5 files changed, 92 insertions(+), 6 deletions(-) create mode 100644 module2/lessons/assets/images/flexbox/child-item.svg create mode 100644 module2/lessons/assets/images/flexbox/flex-align.svg create mode 100644 module2/lessons/assets/images/flexbox/flexbox-axis.svg create mode 100644 module2/lessons/assets/images/flexbox/parent-container.svg diff --git a/module2/lessons/assets/images/flexbox/child-item.svg b/module2/lessons/assets/images/flexbox/child-item.svg new file mode 100644 index 00000000..89373923 --- /dev/null +++ b/module2/lessons/assets/images/flexbox/child-item.svg @@ -0,0 +1 @@ +02-items \ No newline at end of file diff --git a/module2/lessons/assets/images/flexbox/flex-align.svg b/module2/lessons/assets/images/flexbox/flex-align.svg new file mode 100644 index 00000000..1753e807 --- /dev/null +++ b/module2/lessons/assets/images/flexbox/flex-align.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + flex-start + + + + + + + + + flex-end + + + + + + + + + center + + + + + + + + + stretch + + + + + + foo foo foo + + + + foo foo foo + + + + foo foo foo foo foo + + + + foo foo foo + + + + baseline + + \ No newline at end of file diff --git a/module2/lessons/assets/images/flexbox/flexbox-axis.svg b/module2/lessons/assets/images/flexbox/flexbox-axis.svg new file mode 100644 index 00000000..3ac8d22e --- /dev/null +++ b/module2/lessons/assets/images/flexbox/flexbox-axis.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/module2/lessons/assets/images/flexbox/parent-container.svg b/module2/lessons/assets/images/flexbox/parent-container.svg new file mode 100644 index 00000000..dfc74319 --- /dev/null +++ b/module2/lessons/assets/images/flexbox/parent-container.svg @@ -0,0 +1 @@ +01-container \ No newline at end of file diff --git a/module2/lessons/css_flexbox.md b/module2/lessons/css_flexbox.md index ffeaa5d9..a15ad37f 100644 --- a/module2/lessons/css_flexbox.md +++ b/module2/lessons/css_flexbox.md @@ -172,18 +172,22 @@ These properties will get you far enough for now, but they're just scratching th When you are about to use flexbox, ask yourself the following questions: - *What elements do I want to move?* -- *What is the parent element of those elements?* (this is where the flex properties should live!) +- *What is the parent element of those elements?* (this is where the flex properties should live!) If flex isn't working the way you think it should, check the following things: -- *Did I remember to include `display: flex;`?* Without that line of code, the other flex properties won't work! -- *Am I sure I'm adding the flex properties to the correct element?* Check the parent-child relationship in the HTML file to be sure that you are adding those properties to the direct parent. -- *Is the parent element big enough?* Add a border to the parent element. If it is the same width and/or height as the children, you won't be able to move those children as expected. +- *Did I remember to include `display: flex;`?* + Without that line of code, the other flex properties won't work! +- *Am I sure I'm adding the flex properties to the correct element?* + Check the parent-child relationship in the HTML file to be sure that you are adding those properties to the direct parent. + You might have to create/add a direct parent in the HTML if there isn't already one - a great use case for
+- *Is the parent element big enough?* + Add a border to the parent element. If it is the same width and/or height as the children, you won't be able to move those children as expected. CSS tends to require a lot of trial and error when you're first learning it. Often, the CSS flow for newbies is something like: - - Developer edits their css file and reload their webpage to see if it's what they want. + - Developer edits their css file and reloads their webpage to see if it's what they want. - Developer realizes it's not quite right, so they edit their CSS file again, reload again, on and on and on. -We encourage you to make your CSS changes in your dev tools which will instantly show you the result. You can keep editing the CSS right in your dev tools until it's right, then copy those rules over to your text editor and save yourself all the time on the back and forth. +We encourage you to make your CSS changes in your dev tools which will instantly show you the result. You can keep editing the CSS right in your dev tools until it's right, then **copy those rules over to your text editor** and save yourself all the time on the back and forth. ## Using Flexbox on Nested Elements