Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,12 @@ You should see that the items have rearranged themselves such that there's one i

{{EmbedLiveSample('simple-grid_2', '100%', "130") }}

## Interactive grid lesson

The following embedded content from Scrimba <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> provides an interactive lesson summarizing the basics of CSS Grid, which also allows you to play with a live grid example and familiarize yourself with how the code works.

<mdn-scrim-inline url="https://scrimba.com/learn-css-grid-c02k/~01" scrimtitle="Your first grid"></scrim-inline>

### Flexible grids with the fr unit

In addition to creating grids using lengths and percentages, we can use [`fr`](/en-US/docs/Web/CSS/Reference/Values/flex_value). The `fr` unit represents one fraction of the available space in the grid container to flexibly size grid rows and columns.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ Now you've learned something about the theory of JavaScript and what you can do
</tbody>
</table>

> [!NOTE]
> Starting from [Write your first JavaScript variable](https://scrimba.com/learn-javascript-c0v/~04?via=mdn), Scrimba<sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> provides some useful interactive lessons that take you through the real basics of JavaScript.

We want to set really clear expectations here: You won't be expected to learn JavaScript by the end of this article, or even understand all the code we are asking you to write. Instead, we want to give you an idea of how JavaScript's features work together, and what writing JavaScript feels like. In subsequent articles you'll revisit all the features shown here in a lot more detail, so don't worry if you don't understand it all immediately!

> [!NOTE]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,9 @@ Here we have:

3. Some curly braces that contain a block of code — this code will be run each time the loop iterates.

> [!NOTE]
> [Aside: Loops](https://scrimba.com/learn-javascript-c0v/~02a?via=mdn) from Scrimba<sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> provides a useful interactive breakdown of the `for` loop syntax.

### Calculating squares

Let's look at a real example so we can visualize what these do more clearly.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -255,8 +255,10 @@ There are other button behaviors that can be specified via the `<button>` elemen
- `<button type="reset">` creates a _reset button_ — this immediately deletes all data out of the form, resetting it to its initial state. **Don't use reset buttons** — they used to be popular in the early days of the web, but they are usually more annoying than they are helpful. Most people have experienced filling out a long form only to click the reset button by accident instead of the submit button, meaning they have to start again.
- `<button type="button">` creates a button with the same behavior as buttons specified outside of `<form>` elements. As we saw earlier, they do absolutely nothing by default, and JavaScript is needed to give them functionality.

Be aware that it is possible to create the above button types using an `<input>` element with the same `type` values specified — [`<input type="submit">`](/en-US/docs/Web/HTML/Reference/Elements/input/submit), [`<input type="reset">`](/en-US/docs/Web/HTML/Reference/Elements/input/reset), and [`<input type="button">`](/en-US/docs/Web/HTML/Reference/Elements/input/button). However, these have many disadvantages compared to their `<button>` counterparts. You should use `<button>` instead.

> [!NOTE]
> You can also create the above button types using an `<input>` element with the same `type` values specified — [`<input type="submit">`](/en-US/docs/Web/HTML/Reference/Elements/input/submit), [`<input type="reset">`](/en-US/docs/Web/HTML/Reference/Elements/input/reset), and [`<input type="button">`](/en-US/docs/Web/HTML/Reference/Elements/input/button). However, these have many disadvantages compared to their `<button>` counterparts. You should use `<button>` instead.
> Scrimba<sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> has a free lesson — [The very basics of forms](https://scrimba.com/learn-responsive-web-design-c029/~031?via=mdn) — which provides a useful interactive recap of the form basics we covered previously in this article.

## An aside on accessibility

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -679,6 +679,12 @@ Notice how the different columns receive the styles specified in the classes.
> [!NOTE]
> Even though `<colgroup>` and `<col>` mainly facilitate styling, they are an HTML feature, therefore we've covered them here rather than in our CSS modules. Is it also fair to say that they are a _limited_ feature — as shown on the [`<colgroup>` reference page](/en-US/docs/Web/HTML/Reference/Elements/colgroup#usage_notes), only a limited subset of styles can be applied to a `<col>` element, and most of the other settings that were historically available have been deprecated (removed, or flagged for removal).

## Interactive table basics summary

The following embedded content from Scrimba <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> provides an interactive lesson summarizing most of the techniques taught in this article. Check it out for a recap of the most important points and some extra practice.

<mdn-scrim-inline url="https://scrimba.com/frontend-path-c0j/~03s" scrimtitle="HTML tables"></scrim-inline>

## Summary

That wraps up the basics of HTML tables. In the next article, we'll look at some further features that can be used to make HTML tables more accessible to visually impaired people.
Expand Down