Static landing page

Create remote repository

GitHub > New Repository Copy link to remote repository

Add directory

mkdir landing-page

Initialize git

cd landing-page
git init

Add git remote

git remote add origin <remote-repo-link>

Setup branch

git branch -M main

Setup initial commit

git commit --allow-empty -m 'Initial commit'

Push and set upstream repo

git push --set-upstream origin main

Add index.html

touch index.html

Write HTML

Write page elements

DOCTYPE

• html

html

• lang="en"

Write head elements

head

meta (character set)

• charset="utf-8"

meta (page description)

• name="description"
• content="Duo Budget helps you understand how your time and money work together using shared categories."

title

Duo Budget – A Clear View of Your Time and Money

viewport

• name="viewport"
• content="width=device-width, initial-scale=1.0"

Write body elements

body

Write header

header

h1

Duo Budget

p

A clear view of your time and money in one place.

Write main section

main

Write intro section

section

• aria-labelledby="section-intro"

h2

• id="section-intro"

Time is Money

p

When time and money live in different apps, it’s hard to understand how they influence each other. Duo Budget connects them in one simple system.

Write features section

section

• aria-labelledby="section-features"

h2

• id="section-features"

How Duo Budget helps

ul => li
Give each feature name strong emphasis

• Shared categories: Track hours and dollars using the same simple categories.
• Yearly projections: Plan your time and money with a forward-looking view.
• Unified dashboard: See where your resources go and what they support.

Write audience section

section

• aria-labelledby="section-audience"

h2

• id="section-audience"

Can it help you?

dl => dt => dd

Are you busy?

Find clarity without the extra effort.

Are you a planner?

Get a simple view of your time and money.

Are you curious?

See how your resources work together.

Write approach section

section

• aria-labelledby="section-approach"

h2

• id="section-approach"

A simple, incremental approach

p

Duo Budget is growing step by step, starting with the essentials and expanding as the vision evolves.

Write footer

footer

p

© Duo Budget

Preview

Open files explorer from vs code terminal

explorer .

Double click index.html to open in browser (using file protocol => file:///)

Commit

git add .
git commit -m 'Adds index.html

Add deploy workflow for GitHub pages

mkdir -p .github/workflows
touch .github/workflows/deploy.yml

Write workflow

name: Deploy static site

on:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: .

      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4

View live page on GitHub

Go to GitHub repo > settings > pages > Your site is live at ...