Public directory for static assets in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to reference a static image from the public directory in Astro.

Astro

<img src="/[1]" alt="Logo">

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

Aassets/logo.png

Bsrc/logo.png

Cpublic/logo.png

Dlogo.png

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'src/' or 'public/' in the image path.

Using relative paths like './logo.png' instead of root-based paths.

Files in the public directory are served from the root URL. So you reference them directly by their filename.

2fill in blank

medium

Complete the code to link a CSS file stored in the public directory in Astro.

Astro

<link rel="stylesheet" href="/[1]">

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

Apublic/styles/main.css

Bsrc/styles/main.css

Cstyles/main.css

Dassets/styles/main.css

Attempts:

3 left

💡 Hint

Common Mistakes

Adding 'public/' prefix in the href attribute.

Using relative paths that don't start from root.

CSS files in the public folder are served from the root URL, so you use the path relative to public.

3fill in blank

hard

Fix the error in the code to correctly reference a PDF file from the public directory in Astro.

Astro

<a href="/[1]" download>Download PDF</a>

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

Adocs/manual.pdf

Bsrc/docs/manual.pdf

Cpublic/docs/manual.pdf

Dassets/docs/manual.pdf

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'public/' or 'src/' in the href path.

Using relative paths that don't start with a slash.

Files inside the public directory are served from the root URL, so the path should be relative to public without 'public/' prefix.

4fill in blank

hard

Fill both blanks to create an image tag referencing a file in the public directory with alt text.

Astro

<img src="/[1]" alt="[2]">

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

Aimages/photo.jpg

Bsrc/images/photo.jpg

CUser photo

DPhoto from user

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'src/' prefix in the image path.

Leaving alt attribute empty or irrelevant.

The src attribute should point to the file path relative to the public folder, and the alt attribute should describe the image for accessibility.

5fill in blank

hard

Fill all three blanks to create a link to a JavaScript file in the public directory with type and defer attributes.

Astro

<script src="/[1]" type="[2]" [3]></script>

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

Ascripts/app.js

Btext/javascript

Cdefer

Dsrc/scripts/app.js

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'src/' or 'public/' in the src path.

Omitting the defer attribute or using it incorrectly.

The src attribute points to the JS file relative to public. The type attribute specifies the script type, and defer makes the script load after HTML parsing.