Project structure overview in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a component from the correct folder in an Astro project.

Astro

import Header from '../src/components/[1].astro';

Drag options to blanks, or click blank then click option'

Aheader

BHeader

CHeaders

DheaderComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or plural names that don't match the file name.

Adding extra words like 'Component' that don't exist in the file name.

The components folder usually contains components with PascalCase names matching the file names. So 'Header' matches 'Header.astro'.

2fill in blank

medium

Complete the code to define the main content area in an Astro page using the correct HTML semantic tag.

Astro

<[1]>
  <h1>Welcome to Astro</h1>
</[1]>

Drag options to blanks, or click blank then click option'

Amain

Bsection

Cdiv

Darticle

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic

instead of semantic tags.

Using

or

which are for subsections, not main content.

The

tag is used to wrap the main content of a page, improving accessibility and SEO.

3fill in blank

hard

Fix the error in the Astro page frontmatter by completing the export statement correctly.

Astro

---
export const [1] = 'My Astro Site';
---

Drag options to blanks, or click blank then click option'

AsiteTitle

BTitle

CpageTitle

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Capitalizing the export name which Astro does not recognize.

Using custom names that don't match expected metadata keys.

The frontmatter export should use 'title' in lowercase to match Astro conventions for page metadata.

4fill in blank

hard

Fill both blanks to create a dictionary comprehension that maps page names to their paths in Astro.

Astro

const pages = { [1]: `/pages/$[2].astro` };

Drag options to blanks, or click blank then click option'

Ahome

Bindex

CpageName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed strings instead of variables.

Mixing up key and variable names.

We use 'pageName' as the key and 'name' as the variable in the path string to dynamically build paths.

5fill in blank

hard

Fill all three blanks to create a reactive signal and update it on button click in Astro with client:load.

Astro

---
import { signal } from '@astrojs/signals';
const count = signal([1]);
---
<button client:load onClick={() => count.value [2] [3]>Click me</button>
<p>Count: {count.value}</p>

Drag options to blanks, or click blank then click option'

A0

B+=

C1

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Starting count at 1 instead of 0.

Using '-' instead of '+=' to update the count.

Using '=' instead of '+=' causing no increment.

We start the signal at 0, then increment it by 1 on each click using '+=' operator.

Practice

1. In an Astro project, which folder is primarily used to store your source code like components and pages?

easy

A. src/

B. public/

C. assets/

D. dist/

Solution

1. Step 1: Understand folder roles in Astro

   The src/ folder is where you put your source code like components, pages, and styles.

2. Step 2: Identify the correct folder for code

   The public/ folder is for static files like images, not code.

3. Final Answer:

   src/ -> Option A

4. Quick Check:

   Source code folder = src/ [OK]

Hint: Code lives in src/, static files in public/ [OK]

Common Mistakes:

• Confusing public/ with src/
• Thinking assets/ is default code folder
• Assuming dist/ holds source code

2. Which of the following is the correct way to reference a static image stored in the public/ folder inside an Astro component?

easy

A. <img src="../src/images/photo.jpg" />

B. <img src="src/images/photo.jpg" />

C. <img src="/images/photo.jpg" />

D. <img src="./public/images/photo.jpg" />

Solution

1. Step 1: Understand how public/ files are served

   Files in public/ are served from the root URL, so you reference them with a leading slash.

2. Step 2: Choose the correct path format

   Using /images/photo.jpg correctly points to public/images/photo.jpg.

3. Final Answer:

   <img src="/images/photo.jpg" /> -> Option C

4. Quick Check:

   Static files use root-relative paths [OK]

Hint: Static files use root-relative paths starting with '/' [OK]

Common Mistakes:

• Using relative paths like 'src/images' for public files
• Including 'public/' in the path
• Using relative paths that don't work in deployed site

3. Given this Astro project structure:

project/
├─ public/
│  └─ logo.png
├─ src/
│  └─ components/
│     └─ Header.astro
└─ src/pages/index.astro

What will be the correct way to display logo.png inside Header.astro?

medium

A. <img src="src/public/logo.png" alt="Logo" />

B. <img src="../public/logo.png" alt="Logo" />

C. <img src="./logo.png" alt="Logo" />

D. <img src="/logo.png" alt="Logo" />

Solution

1. Step 1: Recall how public/ files are served

   Files in public/ are served from the root URL, so you use a root-relative path starting with '/'.

2. Step 2: Apply correct path in component

   Using /logo.png correctly points to the image regardless of component location.

3. Final Answer:

   <img src="/logo.png" alt="Logo" /> -> Option D

4. Quick Check:

   Public files use root-relative paths [OK]

Hint: Always use root-relative paths for public folder files [OK]

Common Mistakes:

• Trying to use relative paths to public/ folder
• Including 'public' in the path
• Using relative paths that break on deployment

4. You see this error when running your Astro project:
Cannot find module './public/image.png'
What is the likely cause based on Astro's project structure?

medium

A. The src/ folder is missing

B. Trying to import a static file from public/ using a relative import

C. The public/ folder is inside src/

D. The image file is corrupted

Solution

1. Step 1: Understand how static files are accessed

   Static files in public/ are not imported via relative paths in code; they are referenced by URL paths.

2. Step 2: Identify the error cause

   Trying to import a file from public/ using a relative import causes this error.

3. Final Answer:

   Trying to import a static file from public/ using a relative import -> Option B

4. Quick Check:

   Static files are referenced by URL, not imported [OK]

Hint: Never import files from public/; use URL paths [OK]

Common Mistakes:

• Importing images or static files as modules
• Placing public/ inside src/
• Assuming public/ files are bundled like code

5. You want to add a new page to your Astro site at URL /about. Where should you place the new file in the project structure?

hard

A. src/pages/about.astro

B. public/about/index.html

C. src/components/about.astro

D. src/about.astro

Solution

1. Step 1: Understand Astro's page routing

   Files inside src/pages/ map directly to site URLs.

2. Step 2: Choose correct location for new page

   Placing about.astro inside src/pages/ creates the /about route.

3. Final Answer:

   src/pages/about.astro -> Option A

4. Quick Check:

   Pages go in src/pages/ folder [OK]

Hint: Put new pages in src/pages/ for routing [OK]

Common Mistakes:

• Placing pages in src/components/
• Adding pages directly in src/ without pages folder
• Putting pages in public/ folder