Poetic Web also means techniques!

Class #1: intro to HTML

VSCodium

Installing VSCodium.
- Windows download
- Mac download
↘ Opening a folder in VSCodium
```
File > Open folder
```
↘ Creating a file or a subfolder
Saving and opening HTML files in your computer
Opening HTML files with your browser

HTML

Tags → which tags can I use?

Codeberg

Registering an account on Codeberg

How do I use Codeberg?

Creating a new repository
Uploading your HTML document and assets

Full Cycle Screen Rec

Class #2: styling and formatting

HTML

Attributes → which attributes can I use?

↘

<body>
    <h1 style="font-size:1.5em">bigger font size</h1>  
    <p style="color:red">red text</p>
</body>

Element styling in <body>

↘

<head>
    <style>
        h1 {
            font-size: 1.5em;
        }
        .red-text {
            color: red;
        }
    </style>
</head>
<body>
    <h1>bigger font size</h1>  
    <p class="red-text">red text</p>
</body>

General styling in <head>

↘

<style>
    @font-face {
        font-family: "Syne Mono";
        src: url("fonts/SyneMono-Regular.otf");
        }
    
    h1 {
        font-family: "Syne Mono";
        }
</style>

Load and use a font

↘

<head> 
    <link rel="stylesheet" href="style.css">
</head>

Connecting a CSS document: HTML CSS

CSS

Understanding CSS → how to use CSS
Color attributes: HTML Colors
Sizing attributes: Values & Units

↘

<style>
    tag {
        property: value;    
        }
    .class {
        property: value;    
        }
    #id {
        property: value;    
        }
</style>

Selectors

Full Cycle Screen Rec

Class #3: hypertext & layouts

HTML

<a> tag

                            <a href="https://poeticweb.net">Visit poeticweb.net</a>

Connecting multiple pages
Sharing a CSS document across pages
Sharing assets across pages

Full Cycle Screen Rec

Class #4: GIT

GIT

Initialise and upload a repository
Update a repository
Clone a repository

Full Cycle Screen Rec

Class #5: transitions & interactions

CSS

CSS transitions
CSS animations

↘


    .class:hover {
        display: none; 
        ... element disappears when mouse goes over it    
        }

   img {
        display: none; 
        ... image is hidden by default   
        }

    .class:hover img {
        display: block  
        ... image appears when mouse is over element   
        ... note that image has to be written after the selected element  
        }

Pseudo-classes

Technical Trajectory

Class #1: intro to HTML

VSCodium

HTML

Codeberg

Full Cycle Screen Rec

Class #2: styling and formatting

HTML

CSS

Full Cycle Screen Rec

Class #3: hypertext & layouts

HTML

Full Cycle Screen Rec

Class #4: GIT

GIT

Full Cycle Screen Rec

Class #5: transitions & interactions

CSS