Skip to content
Merged
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 recap of grid concepts

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 on the basics of CSS grid. It also includes a live grid example that you can play with to see 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 Expand Up @@ -867,8 +873,8 @@ In the next article, we'll give you some tests that you can use to check how wel

## See also

- [CSS Grid layout](/en-US/docs/Web/CSS/Guides/Grid_layout#guides)
- : Main CSS Grid Layout module page, containing lots of further resources
- [CSS grid layout](/en-US/docs/Web/CSS/Guides/Grid_layout)
- : The main CSS grid layout module page, containing lots of further resources.
- [A complete guide to CSS grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- : A visual guide on CSS-Tricks (2023).
- [Grid Garden](https://cssgridgarden.com/)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ sidebar: learnsidebar

{{PreviousMenuNext("Learn_web_development/Core/Scripting/What_is_JavaScript", "Learn_web_development/Core/Scripting/What_went_wrong", "Learn_web_development/Core/Scripting")}}

Now you've learned something about the theory of JavaScript and what you can do with it, we are going to give you an idea of what the process of creating a simple JavaScript program is like, by guiding you through a practical tutorial. Here you'll build up a simple "Guess the number" game, step by step.
Now that you've learned some theory about JavaScript and what you can do with it, we'll walk you through a practical tutorial so you can see how to create a simple JavaScript program. Here you'll build a simple "Guess the number" game, step by step.

<table>
<tbody>
Expand All @@ -28,6 +28,9 @@ Now you've learned something about the theory of JavaScript and what you can do
</tbody>
</table>

> [!NOTE]
> Starting with [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 useful interactive lessons that take you through the 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 @@ -178,6 +178,9 @@ and saving and reloading, you'll see that the message box appears without the bu

If you tried the last experiment, make sure to undo the last change before carrying on.

> [!NOTE]
> For more practice with functions, check out the Scrimba<sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> challenge [Write your first function](https://scrimba.com/fullstack-path-c0fullstack/~04h?via=mdn).

## Improving the function with parameters

As it stands, the function is still not very useful — we don't want to just show the same default message every time. Let's improve our function by adding some parameters, allowing us to call it with some different options.
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.

Although you can create these button types by using an `<input>` element with the same `type` values – such as [`<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) – they have many disadvantages compared to their `<button>` counterparts. So 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 recap of table concepts

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 covered in this article. Check it out for a recap of the key 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
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,10 @@ Computers connected to the internet are called **clients** and **servers**. A si
- Clients are the typical web user's internet-connected devices (for example, your computer connected to your Wi-Fi, or your phone connected to your mobile network) and web-accessing software available on those devices (usually a web browser like Firefox or Chrome).
- Servers are computers that store webpages, sites, or apps. When a client wants to access a webpage, a copy of the webpage code is downloaded from the server onto the client machine to be rendered by the browser and displayed to the user.

The following embedded content from Scrimba<sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> provides further information on clients and servers, including a quiz and discussion.

<mdn-scrim-inline url="https://scrimba.com/frontend-path-c0j/~0lq" scrimtitle="Clients and servers"></scrim-inline>

## The other parts of the toolbox

The client and server we've described above don't tell the whole story. There are many other parts involved, and we'll describe them below.
Expand Down