Tutorial¶

This is a tutorial, designed to be learning-oriented. It is a practical activity in which you learn by doing something meaningful, towards some achievable goal. While you will learn by doing, what you do is not necessarily what you will learn.

This page contains links to tutorials for technologies used in the app.

HTML¶

HTML defines the meaning and structure of web content.

Note

Learn HTML at Codecademy.

HTML example

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Page title</title>
    </head>
    <body>
        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

CSS¶

CSS is a way to change the look of HTML web pages.

Note

Learn CSS at Codecademy.

CSS example

body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

p {
    font-family: verdana;
    font-size: 20px;
}

Tailwind CSS¶

Tailwind CSS is a CSS framework that provides utility HTML classes that are used to apply styles rapidly. This means less CSS has to be used and the styling is very close to the structure (HTML).

Note

Learn Tailwind and see available classes (search for their CSS counterpart) at https://tailwindcss.com/

Tailwind example

<button
    class="flex items-center bg-blue-500 px-4 py-3 text-white hover:bg-blue-400"
/>
Click me!
</button>

/* this is what that corresponds to */
button {
    align-items: center;
    align-items: center;
    background-color: rgb(59 130 246);
    padding: 1rem 0.75rem;
    color: rgb(255 255 255);
}
button:hover {
    background-color: rgb(96 165 250);
}

/* CSS - automatically generated from the Tailwind classes used in the HTML */
.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.hover\:bg-blue-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}

TypeScript¶

TypeScript is a superset of JavaScript that adds static types to the language.

Note

Learn TypeScript at Codecademy.

TypeScript example

interface User {
    id: number;
    firstName: string;
    lastName: string;
    role: string;
}

function updateUser(id: number, update: Partial<User>) {
    const user = getUser(id);
    const newUser = { ...user, ...update };
    saveUser(id, newUser);
}

Svelte¶

Svelte is a component framework used to build more advanced web applications.

Note

Learn Svelte at https://svelte.dev/tutorial.

Svelte example

<script lang="ts">
    const name = "world";
    let count = $state(0);

    function handleClick() {
        count += 1;
    }
</script>

<h1>Hello {name}!</h1>

<button onclick="{handleClick}">
    Clicked {count} {#if count === 1} time {:else} times {/if}
</button>

SvelteKit¶

SvelteKit is an application framework for Svelte that provides routing (e.g. how the file structure corresponds to the website navigation), compilation, data fetching, and more.

Note

Learn SvelteKit at https://svelte.dev/tutorial/kit.

Git¶

Git is a version control system that allows you to track changes in your code and collaborate with others.

Note

Learn Git at Codecademy.

Git example

git switch -c new-feature
git add .
git commit -m "Add new feature"
git push origin new-feature