feat(html/css): added flex-box to lesson 4#484
feat(html/css): added flex-box to lesson 4#484alexanderkhivrych wants to merge 1 commit intocodebar:gh-pagesfrom
Conversation
alexanderkhivrych
force-pushed
the
gh-pages
branch
2 times, most recently
from
8d0f98f to
de97772
Compare
alexanderkhivrych
force-pushed
the
gh-pages
branch
from
de97772 to
86e76f9
Compare
|
Could you please review @ionab? |
richardwestenra
left a comment
richardwestenra
left a comment
There was a problem hiding this comment.
Hey, thanks for this PR! This is awesome and I really appreciate the effort that went into it. It's very high-quality work.
I am approving this PR in order to unblock you, but (seeing as I am no longer involved much in codebar), I think it might be worth having someone like @KimberleyCook / @thisisjofrank (or other current maintainers) weigh in, if they want to.
EDIT: I was going to approve this PR, then I noticed that the images appear to be copied from csstricks.com, which might open codebar to legal liability? Hence I am holding off on approving for now, sorry!
I'm interested in the motivation behind this PR. Is it to bring the tutorial closer to current best-practices, or is it an attempt to add wholly new flexbox content?
If the former, I'd suggest that it might be worth editing the explanation of flexbox to just a few short sentences giving a brief overview, and linking to other resources that give a more lengthy introduction and complete documentation. This set of tutorials mainly aims to get beginners up and running quickly, without overloading them with complete explanations about how everything works, in the expectation that curious learners can search other resources to find more information. Compare the other tutorials, where HTML elements and CSS rules are introduced without all of their options being documented at length.
If it's the latter, I wonder whether it might better serve learners as a standalone tutorial, without this content being shoehorned into the middle of a tutorial whose focus is less on documentation/explanation, and more about quickly diving into the shallow end of building layouts.
If you're desperate to get this merged then go ahead, but I'd encourage you to give it an edit first. Thanks! ⭐
| ### Goal | ||
|
|
||
| The page we will build will look similar to this [example page]( https://tutorials.codebar.io/html/lesson4/example.html "Grace Hopper") | ||
| The page we will build will look similar to this [example page](https://tutorials.codebar.io/html/lesson4/example.html "Grace Hopper") |
| #### `flex-direction` property | ||
|
|
||
| Flexbox is a system for laying out elements in one specific direction - either horizontally or vertically. The `flex-direction` property sets the direction of the main axis, defining the direction of the elements in the container. | ||
|
|
||
| ```css | ||
| flex-direction: row | row-reverse | column | column-reverse; | ||
| ``` | ||
|
|
||
| - `row` - the axis starts on the left and ends on the right. This is the default value. | ||
| - `row-reverse` - the axis starts on the right and ends on the left. | ||
| - `column` - the main axis becomes vertical, starting at the top and ending at the bottom. | ||
| - `column-reverse` - the main axis becomes vertical, starting at the bottom and ending at the top. | ||
|
|
||
|  | ||
|
|
||
| By default, `flex-direction` is set to `row`, so the top menu items start lining up from left to right. The bottom menu is set to `row-reverse`, the main axis is reversed 180 degrees, and the items line up from right to left. | ||
|
|
||
| #### `justify-content` property | ||
|
|
||
| Controls the positioning of elements on the main axis, from `main-start` to `main-end`. | ||
|
|
||
| ```css | ||
| justify-content: flex-start | flex-end | center | space-between | space-around | | ||
| space-evenly; | ||
| ``` | ||
|
|
||
| - `flex-start` - items are pressed to the start of the axis. This is the default value. | ||
| - `flex-end` - elements are pressed to the end of the axis. | ||
| - `center` - elements are centered on the axis. | ||
| - `space-between` - elements are evenly distributed on the main axis. The first element is set to the beginning of the axis, and the last element to the end. | ||
| - `space-around` - elements are distributed evenly, but the left and right elements lag behind the container borders by half the gap between the other elements. | ||
| - `space-evenly` - the elements are distributed so that the distance between the elements, and from the outermost elements to the borders of the container, is the same | ||
|
|
||
|  | ||
|
|
||
| The most commonly used values, including the default value, are shown in the example. These include shifting content to the right (`flex-end`), centering (`center`), and evenly distributing space between elements (`space-between`). | ||
|
|
||
| #### `align-items` property | ||
|
|
||
| Controls the arrangement of elements along the transverse axis. This is the equivalent of `justify-content` for the main axis. | ||
|
|
||
| ```css | ||
| align-items: stretch | flex-start | flex-end | center | baseline; | ||
| ``` | ||
|
|
||
| - `stretch` - elements are stretched to the full length of the axis. This is the default value. | ||
| - `flex-start` - elements are pressed to the start of the axis. | ||
| - `flex-end` - elements are pressed against the end of the axis. | ||
| - `center` - elements are centered on the axis. | ||
| - `baseline` - elements are aligned to the baseline of their text content. | ||
|
|
||
|  |
There was a problem hiding this comment.
I'd argue that these sections contain more information than is useful for this early in the tutorials, and that students would be better served with a link to external documentation. We need to be careful not to overwhelm beginners. That being said, I might be wrong and would welcome discussion on this point.
There was a problem hiding this comment.
Many students have asked me about flex-box, so it might be beneficial. I do not think it is difficult for beginners. For creating a layout, it is essential to know.
There was a problem hiding this comment.
I think all properties nice to know, however, I added flexboxfroggy game we they can practice as well
There was a problem hiding this comment.
But I agree that we can simplify it; it is a modern and helpful approach. I mentioned that many students find it challenging to build layout styles; with the flex box, it will be much easier.
There was a problem hiding this comment.
I agree that it's not too difficult for beginners, that's not what I'm saying. It's more that if we try to include a complete explanation of everything in the introductory tutorials then each tutorial will be hundreds of pages long. One doesn't learn a language by reading a dictionary cover-to-cover, you know? I'd argue it's better to give just the information that they absolutely need, and then encourage them to explore the documentation later if interested.
There was a problem hiding this comment.
Ok, let me try to simplify it and then just add the link "Do you want to learn more? checkout this link with documentation "
|  | ||
|
|
||
|  |
There was a problem hiding this comment.
Am I right in thinking that these images are copied from https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ? Do we have permission to use them? This might not be legal usage. Personally I'd suggest linking to that guide instead of copy-pasting it here.
There was a problem hiding this comment.
@richardwestenra, we can remove them and link the guide as a helpful link. I saw many other websites using those images as well.
I can probably draw it by myself in the separate PR.
2 participants
Added flexbox to tutorials