Building Your First Astro Page

1. The Anatomy of an Astro Page

First, let's understand the structure of an .astro file. Open your project in your code editor and navigate to src/pages/index.astro.

An Astro file is composed of two main parts:

1. The Component Script (Code Fence): This is the section at the top of the file enclosed by --- code fences. You'll write your JavaScript or TypeScript here. This code runs on the server during the build process to fetch data, define variables, and handle any logic needed to render your page. It is never sent to the client's browser.
2. The Template: This is the section below the code fence. It looks like standard HTML, but with some extra capabilities. This is where you define the structure and content of your page. You can use JavaScript expressions from the component script directly in your template.

This structure allows you to keep your server-side logic and your presentation markup in the same file, a pattern that makes components easy to reason about.

For a concise overview of how Astro handles pages, take a moment to review the official documentation.

2. Creating Your First Page with HTML and JavaScript

Let's modify the index.astro file to create a simple homepage. The following video gives a great practical demonstration of clearing out the default file and adding new content.

Now, let's apply this to our project.

1. Open src/pages/index.astro.
2. Delete all the existing content in the file.
3. Add the following code:

---
// Server-side JavaScript/TypeScript goes here.
// This code runs at build time, not in the browser.
const pageTitle = "Apex Financials";
const tagline = "Your trusted partner in financial clarity and growth.";
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{pageTitle}</title>
  </head>
  <body>
    <h1>{pageTitle}</h1>
    <p>{tagline}</p>
  </body>
</html>

Save the file. If your development server is still running (npm run dev), your browser should automatically refresh to show a simple page with a heading and a paragraph.

Notice how we defined pageTitle and tagline in the component script and then used them in the template with {}. This syntax should feel familiar from your experience with JSX in React.

3. Styling with Scoped CSS

One of Astro's most powerful features is how it handles CSS. When you add a <style> tag to an .astro file, the styles you write are scoped by default. This means they will only apply to the elements within that specific file and won't "leak" out to affect other pages or components. This is a huge advantage for creating a maintainable and scalable website, a key part of your project goal.

Let's read the official documentation to understand this concept thoroughly.

To see this in action, watch this short clip.

Now, let's add some scoped styles to our index.astro page. Add the following <style> tag at the bottom of your file, below the closing </body> tag.

<style>
  /* These styles ONLY apply to this page (index.astro) */
  body {
    font-family: system-ui, sans-serif;
    background-color: #f4f6f8;
    color: #1a2b48;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
  }

  h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
  }

  p {
    font-size: 1.25rem;
    color: #5c677d;
  }
</style>

Save the file. Your homepage should now have a clean, centered layout with professional-looking fonts and colors.

---
const pageTitle = "About Apex Financials";
---
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{pageTitle}</title>
</head>
<body>
    <h2>Our Mission</h2>
    <p>We are dedicated to empowering businesses with financial insight.</p>
</body>
</html>

<style>
    h2 {
        color: green;
        text-align: center;
    }
</style>

4. A Note on Global Styles

While scoped styles are perfect for individual pages and components, you'll also need some styles to be global—like CSS resets, font definitions, and base styles for the body.

The recommended way to handle this in Astro is to create a central CSS file and import it. Let's set that up.

1. Inside the src/ folder, create a new folder named styles.
2. Inside src/styles/, create a new file named global.css.
3. Add some basic global styles to global.css:

/* src/styles/global.css */

/* A simple CSS Reset */
html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

/* More global styles can be added here later */

To apply these styles, you must import the stylesheet into your page. Open src/pages/index.astro and add the import statement at the very top of your component script (the code fence).

---
import '../styles/global.css'; // <-- Add this line

const pageTitle = "Apex Financials";
const tagline = "Your trusted partner in financial clarity and growth.";
---
<!-- Rest of the file remains the same -->

Although you won't see a dramatic visual change, these global styles are now being applied before your scoped styles, creating a consistent base for your entire site. We'll soon move this import into a shared layout component so we don't have to repeat it on every page.

Conclusion

Excellent work! You've taken a major step from project setup to actual page creation. You now have the fundamental skill needed to build any page in Astro.

Here are the key takeaways from this lesson:

• An .astro file consists of a component script (---) for server-side logic and a template for HTML-like markup.
• You can embed JavaScript expressions from the script into your template using {}.
• The <style> tag provides CSS scoped by default, which prevents style conflicts and improves maintainability.
• Global styles can be managed in a separate .css file and imported into your pages.

Up Next: In the next lesson, we will focus on building reusable UI elements using Astro's component syntax. You'll learn how to break down your pages into smaller, manageable components like headers, buttons, and cards. This is the key to creating a clean, scalable, and maintainable architecture for your accounting website.