Messenger-kode

Frustration #4

Hvad kigger jeg på?

Frustration #18

Hvor er nu sektionen?

Frustration #16

<!doctype html>
<html lang="da">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Forside</title>
  </head>
  <body>
    <!-- <SiteHeader /> -->
    <header>
      <a href="/">Dreamers</a>
      <nav>
        <a href="/">Home</a>
        <a href="/properties">Properties</a>
        <a href="/about">About</a>
        <a href="#testimonials">Testimonials</a>
        <a href="/blog">Blog</a>
      </nav>
      <a href="/contact">Contact us</a>
    </header>

    <main>
      <!-- <Hero /> -->
      <section>
        <h1>Find your best home to living dream</h1>
        <p>Unlock a seamless home-buying or investment experience.</p>
        <p>
          <a href="/contact">Contact us</a>
          <a href="/properties">Explore properties</a>
        </p>
        <img src="hero-house.jpg" alt="Modern house" />
      </section>

      <!-- <MissionBand /> -->
      <section>
        <p>Our Mission</p>
        <h2>Green Foundations A New Era for Community Real Estate</h2>
        <p>We go beyond transactions…</p>
      </section>

      <!-- <StatsRow /> -->
      <section>
        <ul>
          <li>
            <strong>1,200+</strong>
            <p>Properties Sold</p>
          </li>
          <li>
            <strong>95%</strong>
            <p>Customer Satisfaction</p>
          </li>
          <li>
            <strong>$500M+</strong>
            <p>In Transactions</p>
          </li>
        </ul>
      </section>

      <!-- <ListingsSection /> -->
      <section>
        <h2>Unlock Your Ideal Living Space</h2>

        <nav>
          <button type="button">All Properties</button>
          <button type="button">Family House</button>
          <button type="button">Villa</button>
          <button type="button">Apartment</button>
          <button type="button">Mansion</button>
          <button type="button">Green House</button>
        </nav>

        <ul>
          <li>
            <img src="p1.jpg" alt="Silver Birch Villa" />
            <h3>Silver Birch Villa</h3>
            <p>Birmingham, UK</p>
            <p>$850,000</p>
          </li>
          <li>
            <img src="p2.jpg" alt="Maple Grove Cottage" />
            <h3>Maple Grove Cottage</h3>
            <p>Liverpool, UK</p>
            <p>$500,000</p>
          </li>
          <li>
            <img src="p3.jpg" alt="Cedar Hill Estate" />
            <h3>Cedar Hill Estate</h3>
            <p>Edinburgh, UK</p>
            <p>$1,200,000</p>
          </li>
        </ul>
      </section>

      <!-- <ValuePropsSection /> -->
      <section>
        <h2>Seamless for Simplicity Built Trusted Results</h2>

        <ul>
          <li>
            <strong>35K</strong>
            <p>Happy clients</p>
          </li>
          <li>
            <strong>120+</strong>
            <p>Partners</p>
          </li>
          <li>
            <strong>97%</strong>
            <p>Satisfaction</p>
          </li>
        </ul>

        <img src="v1.jpg" alt="Building detail" />
        <img src="v2.jpg" alt="Architecture" />
      </section>

      <!-- <TrendingSection /> -->
      <section>
        <h2>Top Trending Dreams</h2>
        <ul>
          <li>
            <img src="t1.jpg" alt="Pine Valley Retreat" />
            <p>Pine Valley Retreat</p>
          </li>
          <li>
            <img src="t2.jpg" alt="Elm Street Apartment" />
            <p>Elm Street Apartment</p>
          </li>
          <li>
            <img src="t3.jpg" alt="Willow Creek Lodge" />
            <p>Willow Creek Lodge</p>
          </li>
          <li>
            <img src="t4.jpg" alt="Hillside Escape" />
            <p>Hillside Escape</p>
          </li>
        </ul>
      </section>

      <!-- <TestimonialsSection /> -->
      <section id="testimonials">
        <h2>Real Stories, Real Success with Fintech.</h2>
        <ul>
          <li>
            <p>They stay in place and deliver amazing value.</p>
            <p>Martin John — Homeowner</p>
          </li>
          <li>
            <p>The process was smooth and transparent.</p>
            <p>Malika James — Contractor</p>
          </li>
          <li>
            <p>Reliable results and good guidance.</p>
            <p>Theseer Omas — Investor</p>
          </li>
        </ul>
      </section>

      <!-- <ContactCTA /> -->
      <section>
        <h2>Get In Touch</h2>
        <a href="/contact">Get Started for Free</a>
      </section>
    </main>

    <!-- <SiteFooter /> -->
    <footer>
      <p>Dreamers</p>

      <h3>Our Links</h3>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/services">Services</a></li>
      </ul>

      <h3>Our Condition</h3>
      <ul>
        <li><a href="/privacy">Privacy Policy</a></li>
        <li><a href="/terms">Terms</a></li>
      </ul>

      <h3>Follow Us</h3>
      <ul>
        <li><a href="https://x.com">X</a></li>
        <li><a href="https://instagram.com">Instagram</a></li>
        <li><a href="https://facebook.com">Facebook</a></li>
      </ul>

      <p>© 2026</p>
    </footer>
  </body>
</html>
ValuePropsSection

Hvad nu hvis?

<MainLayout>

  <Hero />
  <MissionBand />
  <StatsRow />
  <ListingsSection />
  <ValuePropsSection />
  <TrendingSection />
  <TestimonialsSection />
  <ContactCTA />

</MainLayout>
ValuePropsSection
<section>
  <h2>Seamless for Simplicity Built Trusted Results</h2>

  <ul>
    <li>
      <strong>35K</strong>
      <p>Happy clients</p>
    </li>
    <li>
      <strong>120+</strong>
      <p>Partners</p>
    </li>
    <li>
      <strong>97%</strong>
      <p>Satisfaction</p>
    </li>
  </ul>

  <img src="v1.jpg" alt="Building detail" />
  <img src="v2.jpg" alt="Architecture" />
</section>
ValuePropsSection
<MainLayout>

  <Hero />
  <MissionBand />
  <StatsRow />
  <ListingsSection />
  <ValuePropsSection />
  <TrendingSection />
  <TestimonialsSection />
  <ContactCTA />

</MainLayout>

Hvad er det?

D

x

Designer Experience

Hvordan det føles at bygge noget

Figma

D

x

Figma

  • Components
  • Instances
  • Component Properties
  • Variants
  • Auto Layout
  • Variables
  • mv.

Lad os kigge på det...

Top navigation (logo + actions)

Stories bar (Story items)

Story bar + item

Feed

Post card

- header

- media

Billede (karrusel)

Indlæg actions (like osv.)

Diverse (tekst, tilføj, kommentar, timestamp, osv.)

Components

D

eveloper E   perience

x

D

eveloper E   perience

x

Developer Experience

Hvordan det føles at bygge noget

Astro

Astro

Et framework, der bl.a. handler om DX

Framework

Et værktøj, der hjælper med at bygge hurtigere og smartere

Hvorfor lige Astro?

  • Det er let at komme i gang med
  • Forholdsvis lille læringskurve
  • Det er bare HTML & CSS...

Marketing-afdelingen

Lad os kigge på det...

Forbehold

Følgende er en hurtig overflyvning af Astro
— det er ikke noget, I skal kunne efter i dag

Figma

Astro

vs.

  • Components
  • Instances
  • Component Properties
  • Variants
  • Auto Layout
  • Variables
  • Components
  • Brug af component
  • Props
  • Betinget props
  • Flexbox/Grid
  • CSS Variabler

×

Components

<Button>Knap</Button>

Figma

Astro

npm create astro@latest

Components

npm create astro@latest

Components

figma

npm create astro@latest

HOME

PRODUCTS

ABOUT

Hvad adskiller dem?

npm create astro@latest

HOME

PRODUCTS

ABOUT

<Button variant="secondary">Action</Button>

secondary

primary

secondary

primary

<Button variant="secondary" />
---
const { variant } = Astro.props;
---

<button class={variant}>
  <slot />
</button>

<style>
  .secondary {
    background: transparent;
    border: 2px solid turquoise;
  }
</style>

dynamisk

skabelon

<Button variant="secondary">Knap</Button>
<Button variant="secondary">Knap</Button>

Prop

s

ertie

<Button variant="secondary">Knap</Button>

Prop

s

ertie

Component

<Button variant="secondary">Send</Button>
<button class="secondary">Send</button>

VS Code

Browser

<Button hasIcon={true}>Send</Button>
<button>
  <span>Send</span>
  <svg>...</svg>
</button>

VS Code

Browser

<Button link="/send" hasIcon={true}>Send</Button>
<a href="/send">
  <span>Send</span>
  <svg>...</svg>
</a>

VS Code

Browser

Hvis "link", skift til korrekt HTML-tag

<Button variant="primary"
        hasIcon={true}
        icon="arrow-right"
        link="/send">
  Send
</Button>
<button>
  <span>Send</span>
  <svg>...</svg>
</button>

VS Code

Browser

VS Code

Browser

<ul>
  <Card title="Animation"
        description="Learn the latest..."
        link="/animation"
  />
  <!-- flere Cards -->
</ul>
<!-- ... -->
<ul>
  <li>
    <h3>Animation</h3>
    <p>
      Learn the latest animation techniques.
    </p>
    
    <a href="/animation" class="ghost">
      Get started
    </a>
  </li>
  <!-- flere Cards -->
</ul>
<!-- ... -->

Button.astro

<li>
  <h3>{title}</h3>
  <p>
    {description}
  </p>
  
  <Button variant="ghost">Get started</Button>
</li>

Button.astro

---
import Button from "./components/Button.astro"
---

<li>
  <h3>{title}</h3>
  <p>
    {description}
  </p>
  
  <Button variant="ghost">Get started</Button>
</li>
---
import Button from "./components/Button.astro"
---

<li>
  <h3>{title}</h3>
  <p>
    {description}
  </p>
  
  <Button variant="ghost">Get started</Button>
</li>

"import"

---
import Button from "./components/Button.astro"
---

<li>
  <h3>{title}</h3>
  <p>
    {description}
  </p>
  
  <Button variant="ghost">Get started</Button>
</li>

Nested component

Lad os starte i det små...

Opdeling af HTML

Fra HTML til Astro

<header>
  <h1>Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>

<section id="services">
  <h2>Vores Services</h2>
  <div class="service">
    <h3>Service 1</h3>
    <p>Beskrivelse af service 1.</p>
  </div>
  <div class="service">
    <h3>Service 2</h3>
    <p>Beskrivelse af service 2.</p>
  </div>
  <div class="service">
    <h3>Service 3</h3>
    <p>Beskrivelse af service 3.</p>
  </div>
</section>

<footer>
  <p>© 2024 Min Side. Alle rettigheder forbeholdes.</p>
</footer>
<header>
  <h1>Velkommen til Min Side</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<header>
  <h1>Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>

<section id="services">
  <h2>Vores Services</h2>
  <div class="service">
    <h3>Service 1</h3>
    <p>Beskrivelse af service 1.</p>
  </div>
  <div class="service">
    <h3>Service 2</h3>
    <p>Beskrivelse af service 2.</p>
  </div>
  <div class="service">
    <h3>Service 3</h3>
    <p>Beskrivelse af service 3.</p>
  </div>
</section>

<footer>
  <p>© 2024 Min Side. Alle rettigheder forbeholdes.</p>
</footer>
<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>
<div class="service">
  <h3>Service 1</h3>
  <p>Beskrivelse af service 1.</p>
</div>
<section id="services">
  <h2>Vores Services</h2>
  <Service />
  <Service />
  <Service />
</section>

Fra HTML til Astro

Fra HTML til Astro

<header>
  <h1>Velkommen til Min Side</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<header>
  <h1>Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>

<section id="services">
  <h2>Vores Services</h2>
  <div class="service">
    <h3>Service 1</h3>
    <p>Beskrivelse af service 1.</p>
  </div>
  <div class="service">
    <h3>Service 2</h3>
    <p>Beskrivelse af service 2.</p>
  </div>
  <div class="service">
    <h3>Service 3</h3>
    <p>Beskrivelse af service 3.</p>
  </div>
</section>

<footer>
  <p>© 2024 Min Side. Alle rettigheder forbeholdes.</p>
</footer>
<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>
<div class="service">
  <h3>Service 1</h3>
  <p>Beskrivelse af service 1.</p>
</div>
<section id="services">
  <h2>Vores Services</h2>
  <Service />
  <Service />
  <Service />
</section>
<header>
  <h1>Velkommen til Min Side</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>
<div class="service">
  <h3>Service 1</h3>
  <p>Beskrivelse af service 1.</p>
</div>
<section id="services">
  <h2>Vores Services</h2>
  <Service />
  <Service />
  <Service />
</section>
<Layout>
  <Hero />
  <Services />
</Layout>
<header>
  <h1>Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>

<section id="services">
  <h2>Vores Services</h2>
  <div class="service">
    <h3>Service 1</h3>
    <p>Beskrivelse af service 1.</p>
  </div>
  <div class="service">
    <h3>Service 2</h3>
    <p>Beskrivelse af service 2.</p>
  </div>
  <div class="service">
    <h3>Service 3</h3>
    <p>Beskrivelse af service 3.</p>
  </div>
</section>

<footer>
  <p>© 2024 Min Side. Alle rettigheder forbeholdes.</p>
</footer>

Fra HTML til Astro

<Layout>
  <Hero />
  <Services />
</Layout>
<header>
  <h1>Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>

<section id="services">
  <h2>Vores Services</h2>
  <div class="service">
    <h3>Service 1</h3>
    <p>Beskrivelse af service 1.</p>
  </div>
  <div class="service">
    <h3>Service 2</h3>
    <p>Beskrivelse af service 2.</p>
  </div>
  <div class="service">
    <h3>Service 3</h3>
    <p>Beskrivelse af service 3.</p>
  </div>
</section>

<footer>
  <p>© 2024 Min Side. Alle rettigheder forbeholdes.</p>
</footer>

Fra HTML til Astro

øvelse

Fra HTML til Astro

Analyser HTML'en og identificér potentielle components (se øvelsen på Fronter)

øvelse

Fra HTML til Astro

Analyser HTML'en og identificér potentielle components (se øvelsen på Fronter)

Components

Components

Hvor ser vi components?

Header.astro

Button.astro

Footer.astro

Card.astro

CardSection.astro

Hero.astro

Opbygning

Astro-components

├── src/
    └── components/
    	└── Header.astro
    	└── CardSection.astro
    	└── 
    	└── Button.astro
    	└── Footer.astro
Card.astro

Opbygning

Astro-components

<li>
  <h3>Animation</h3>
  <p>
    Learn the latest animation techniques to create stunning motion
    design and captivate your audience.
  </p>
  <a href="/animation" class="btn" data-variant="ghost">Get started</a>
</li>
Card.astro

Opbygning

Astro-components

---
import Card from "../components/          ";
---

<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
Card.astro

Konvention: Samme navn

Start nyt projekt

npm create astro@latest .

Start nyt projekt

npm create astro@latest .

Start nyt projekt

npm install

Hvis du kloner et eksisterende projekt

Astro & DX

By Dannie Vinther

Astro & DX

  • 134

More from Dannie Vinther