diff --git a/curriculum/challenges/english/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md b/curriculum/challenges/english/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md index 314e99bd61a..7e8617cf871 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md +++ b/curriculum/challenges/english/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md @@ -173,7 +173,7 @@ assert(allAnchorsHaveHrefHash && anchorTags.length > 0);

Creamy Chocolate Fudge

- A delicious chocolate fudge dessert + A delicious chocolate fudge dessert

Description

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.

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.

diff --git a/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-b.md b/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-b.md index 230dd2cf857..682cb7bea10 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-b.md +++ b/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-b.md @@ -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. - +An outer rectangle representing a flex container encompassing three smaller inner rectangles lined up side by side, each representing a flex item. # --question-- diff --git a/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-c.md b/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-c.md index 196daf52983..c854c88b764 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-c.md +++ b/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-c.md @@ -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. - +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. - +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-- diff --git a/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-e.md b/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-e.md index 91ba06f868f..d05f7e83233 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-e.md +++ b/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-e.md @@ -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`. -flex shorthand +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`. diff --git a/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-j.md b/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-j.md index bbdf499748f..336a59ed5e5 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-j.md +++ b/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-j.md @@ -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: -an image displaying three blue squares which are spread out over the entire width of it's container +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. diff --git a/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-k.md b/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-k.md index 2436aac925c..ce07030d486 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-k.md +++ b/curriculum/challenges/english/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-question-k.md @@ -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: -an image displaying three blue squares which are centered in the middle of the flex container +three blue squares centered in the middle of the flex container 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. diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md index 2b1e693b7c1..df88a26851d 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md +++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-foundations-question-a.md @@ -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: -element diagram +An opening p tag, followed by the content string "some text content", followed by a closing p tag. # --assignment-- diff --git a/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-b.md b/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-b.md index b9e3ad47b74..2cf02276318 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-b.md +++ b/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-b.md @@ -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. -![Inspector Icon](https://cdn.statically.io/gh/TheOdinProject/curriculum/594984d7c9f9e744577f19ea475b3864e8cc7c91/html_css/v2/foundations/inspecting-html-and-css/imgs/01.png) +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 the The Odin Project homepage, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below: -![Overwritten style](https://cdn.statically.io/gh/TheOdinProject/curriculum/f8fd38fc62578d8e8368f5303126215a492847f0/foundations/html_css/inspecting-html-and-css/imgs/03.png) +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-- diff --git a/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-c.md b/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-c.md index f220a141c2f..1163fd4bda1 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-c.md +++ b/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-c.md @@ -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. -![Inspector Icon](https://cdn.statically.io/gh/TheOdinProject/curriculum/594984d7c9f9e744577f19ea475b3864e8cc7c91/html_css/v2/foundations/inspecting-html-and-css/imgs/01.png) +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 The Odin Project homepage, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below: -![Overwritten style](https://cdn.statically.io/gh/TheOdinProject/curriculum/f8fd38fc62578d8e8368f5303126215a492847f0/foundations/html_css/inspecting-html-and-css/imgs/03.png) +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-- diff --git a/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-d.md b/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-d.md index ac7cb451091..6faffa5d157 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-d.md +++ b/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-d.md @@ -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. -![Inspector Icon](https://cdn.statically.io/gh/TheOdinProject/curriculum/594984d7c9f9e744577f19ea475b3864e8cc7c91/html_css/v2/foundations/inspecting-html-and-css/imgs/01.png) +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 The Odin Project homepage, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below: -![Overwritten style](https://cdn.statically.io/gh/TheOdinProject/curriculum/f8fd38fc62578d8e8368f5303126215a492847f0/foundations/html_css/inspecting-html-and-css/imgs/03.png) - +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. diff --git a/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-g.md b/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-g.md index fdd4840cfa0..5a9453abcdc 100644 --- a/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-g.md +++ b/curriculum/challenges/english/16-the-odin-project/top-the-box-model/the-box-model-question-g.md @@ -6,7 +6,7 @@ dashedName: the-box-model-question-g --- # --description-- -![lines](https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/css-foundations/the-box-model/imgs/odin-lined.png) +an image showing the odin project website surrounded by red borders indicating that the site is build out of multiple components 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. -![the box model](https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/css-foundations/the-box-model/imgs/box-model.png) +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--