mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-01-09 06:04:17 -05:00
fix: update src and alt for TOP images (#53278)
This commit is contained in:
Sem Bauke
@@ -173,7 +173,7 @@ assert(allAnchorsHaveHrefHash && anchorTags.length > 0);
|
||||
</head>
|
||||
<body>
|
||||
<h1>Creamy Chocolate Fudge</h1>
|
||||
<img src="https://i.imgur.com/p0J5baJ.jpg" alt="A delicious chocolate fudge dessert">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/build-a-recipe-page/build-a-recipe-page-01.jpg" alt="A delicious chocolate fudge dessert">
|
||||
<h2>Description</h2>
|
||||
<p>This recipe is for a rich and creamy chocolate fudge that is sure to satisfy your sweet tooth. It's perfect for a special occasion or as a tasty treat for any time of the year.</p>
|
||||
<p>This recipe is easy to follow and only requires a few simple ingredients. With just a few steps, you'll be able to create a delicious dessert that everyone will love.</p>
|
||||
|
||||
@@ -10,7 +10,7 @@ As you’ve seen, flexbox is not just a single CSS property but a whole toolbox
|
||||
|
||||
A flex container is any element that has `display: flex` on it. A flex item is any element that lives directly inside of a flex container.
|
||||
|
||||
<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/8c0402439e1b0a9a156731bdab4ea64162688dab/foundations/html_css/flexbox/imgs/03.png" alt="">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-01.png" style="width: 95%; height: 95%;" alt="An outer rectangle representing a flex container encompassing three smaller inner rectangles lined up side by side, each representing a flex item.">
|
||||
|
||||
# --question--
|
||||
|
||||
|
||||
@@ -8,12 +8,13 @@ dashedName: introduction-flexbox-question-c
|
||||
|
||||
Somewhat confusingly, any element can be both a flex container and a flex item. Said another way, you can also put `display: flex` on a flex item and then use flexbox to arrange its children.
|
||||
|
||||
<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/495704c6eb6bf33bc927534f231533a82b27b2ac/html_css/v2/foundations/flexbox/imgs/04.png" alt=""/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-03.png" style="width: 95%; height: 95%;" alt="a flex container that has multiple flex items, within those flex items are nested flex items as well. Making the parent of those nested flex items also a flex container." />
|
||||
|
||||
Creating and nesting multiple flex containers and items is the primary way you will be building up complex layouts. The following image was achieved using only flexbox to arrange, size, and place the various elements. Flexbox is a very powerful tool.
|
||||
|
||||
<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/495704c6eb6bf33bc927534f231533a82b27b2ac/html_css/v2/foundations/flexbox/imgs/05.png" alt=""/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-02.png" alt="a complex layout of flex items and flex containers. There are multiple flex containers nested into each other, thus making them flex items as well"/>
|
||||
|
||||
Certainly, the image features a representation of a CSS Flexbox layout with nested flex containers. The outer container is denoted as "ALSO a flex container" highlighted in blue, and within it is another container marked as "with flex items" in red. Inside the red container, there are three items labeled as "flex items" in peach. This demonstrates that a flex container can be nested within another flex container and contain its own flex items, showcasing the recursive nature of Flexbox layout structures.
|
||||
|
||||
# --question--
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ The `flex` declaration is actually a shorthand for 3 properties that you can set
|
||||
|
||||
In this case, `flex` is actually a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`.
|
||||
|
||||
<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/0cc6b26bb0c4b94524369d327c97a8fb11e83b6b/foundations/html_css/flexbox/imgs/10.png" alt="flex shorthand">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-04.png" alt="CSS code setting the flex property to 1 for a div element.">
|
||||
|
||||
In the above screenshot, `flex: 1` equates to: `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0`.
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ Adding `flex: 1` to `.item` makes each of the items grow to fill the available s
|
||||
|
||||
Remove `flex: 1` from `.item` and add `justify-content: space-between` to `.container`. Doing so should give you something like this:
|
||||
|
||||
<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/495704c6eb6bf33bc927534f231533a82b27b2ac/html_css/v2/foundations/flexbox/imgs/07.png" alt="an image displaying three blue squares which are spread out over the entire width of it's container">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-05.png" alt="Three small boxes within a much larger rectangle. The boxes are arranged in a single row, one close to the left edge of the container, one close to the right edge of the container, and the last directly in the middle of the container, placing as much space as possible between each box.">
|
||||
|
||||
`justify-content` aligns items across the **main axis**. There are a few values that you can use here. You'll learn the rest of them in the reading assignments, but for now try changing it to center, which should center the boxes along the main axis.
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" w
|
||||
|
||||
To change the placement of items along the cross axis use `align-items`. Try getting the boxes to the center of the container by adding `align-items: center` to `.container`. The desired result looks like this:
|
||||
|
||||
<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/495704c6eb6bf33bc927534f231533a82b27b2ac/html_css/v2/foundations/flexbox/imgs/08.png" alt="an image displaying three blue squares which are centered in the middle of the flex container" style="margin: 15px 0">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-06.png" alt="three blue squares centered in the middle of the flex container" style="margin: 15px 0">
|
||||
|
||||
Because `justify-content` and `align-items` are based on the main and cross axis of your container, their behavior changes when you change the flex-direction of a flex-container. For example, when you change `flex-direction` to `column`, `justify-content` aligns vertically and `align-items` aligns horizontally. The most common behavior, however, is the default, i.e. `justify-content` aligns items horizontally (because the main axis defaults to horizontal), and `align-items` aligns them vertically. One of the biggest sticking points that beginners have with flexbox is confusion when this behavior changes.
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ Closing tags tell the browser where an element ends. They are almost the same as
|
||||
|
||||
A full paragraph element looks like this:
|
||||
|
||||
<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/90b1a362af0bb8635af9593cd8911c9aefb68569/foundations/html_css/html-foundations/imgs/00.png" alt="element diagram">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/html-foundations/html-foundations-01.png" alt='An opening p tag, followed by the content string "some text content", followed by a closing p tag.'>
|
||||
|
||||
# --assignment--
|
||||
|
||||
|
||||
@@ -8,11 +8,11 @@ dashedName: the-box-model-question-b
|
||||
|
||||
In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
|
||||
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles.">
|
||||
|
||||
When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on [the TOP homepage](https://www.theodinproject.com/), on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
|
||||
When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
|
||||
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden.">
|
||||
|
||||
# --question--
|
||||
|
||||
|
||||
@@ -8,11 +8,11 @@ dashedName: the-box-model-question-c
|
||||
|
||||
In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
|
||||
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles.">
|
||||
|
||||
When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
|
||||
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden.">
|
||||
|
||||
# --assignment--
|
||||
|
||||
|
||||
@@ -8,12 +8,11 @@ dashedName: the-box-model-question-d
|
||||
|
||||
In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
|
||||
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles.">
|
||||
|
||||
When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
|
||||
|
||||
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden.">
|
||||
# --assignment--
|
||||
|
||||
Play around with Chrome Dev Tools and see if you can answer the following question.
|
||||
|
||||
@@ -6,7 +6,7 @@ dashedName: the-box-model-question-g
|
||||
---
|
||||
# --description--
|
||||
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/box-model-lines.png" alt="an image showing the odin project website surrounded by red borders indicating that the site is build out of multiple components" style="width: 95%; height: 95%;">
|
||||
|
||||
OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.
|
||||
|
||||
@@ -18,7 +18,7 @@ The only real complication here is that there are many ways to manipulate the si
|
||||
|
||||
Be sure to study the diagrams carefully.
|
||||
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/the-box-model.png" alt="Visual representation of CSS box model with text, surrounded by 'padding' in pink, a purple 'border', and 'margin' indicated by blue arrows, explaining space between text, box edge, and window edge.">
|
||||
|
||||
# --assignment--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user