Your page consists of a mix of Markdown and special tags, such as JSX (in case you are using MDX), or custom tags (in case you are using Markdoc). Markdown is typically used for simple, static content such as headings, text or links, as well as formatting, such as bold. JSX is used for more advanced components, such as interative forms, navigation bars and custom layouts. And it's great as well when you want to reuse content across your pages. More on that later.

On your current page, you have a mix of all of this. The heading and welcome text is in Markdown, and the <LearningResources /> component, which displays links to Motif resources, is in JSX. Additionally, the page has a top section called a frontmatter, which defines a few properties of your page which can be used in various ways. More on that later also!

You can go ahead and edit this page. As you can see, any change you make is immediately observed on the preview. This direct manipulation encourages creative explorations and learning.

Updating the cover image

Let's change the cover image. First, let's upload a new image. You can either drag and drop an image from your hard drive into the editor, or you can open the file picker by hitting and starting to compose the word image until you can select it from the dropdown menu. We call this action a slash command.

Once the image has been uploaded, grab the src link (the part that starts with https://res.cloudinary.com/), and replace the link in the frontmatter (after cover:) with it. You can now remove the newly inserted <img .../> tag, as we only needed the image link.

Feel free to edit the remaining of the page, and play around with the slash commands to insert new blocks of content.

Let's create a second page and link them together.