Live Web Demos

HTML Only Demo

Full Size

<h1>Hello, World!</h1>

<p>The nature of our immortal lives is in the
consequences of our words and deeds, that go on
and are pushing themselves throughout all time.</p>

Medium Size

<h1>Hello, World!</h1>

<p>The nature of our immortal lives is in the
consequences of our words and deeds, that go on
and are pushing themselves throughout all time.</p>

Small Size

<h1>Hello, World!</h1>

<p>The nature of our immortal lives is in the
consequences of our words and deeds, that go on
and are pushing themselves throughout all time.</p>

Tiny Size

<h1>Hello, World!</h1>

<p>The nature of our immortal lives is in the
consequences of our words and deeds, that go on
and are pushing themselves throughout all time.</p>

Mobile Size

<h1>Hello, World!</h1>

<p>The nature of our immortal lives is in the
consequences of our words and deeds, that go on
and are pushing themselves throughout all time.</p>

HTML and CSS Demo

<h1>Hello, World!</h1>

<p>The nature of our immortal lives is in the
consequences of our words and deeds, that go on
and are pushing themselves throughout all time.</p>

body {
    background-color: hotpink;
}

CSS Only Demo

body {
    background-color: hotpink;
}

JS Only Demo

const headings = document.querySelectorAll('h1')
if (headings) {
    h1 = headings[0]
    h1.textContent = "Hello from JS!"
}

HTML, CSS and JS Demo

<h1>Hello, World!</h1>

<p>The difference between stupid and intelligent
people - and this is true whether or not they are
well-educated - is that intelligent people can
handle subtlety.</p>

const headings = document.querySelectorAll('h1')
if (headings) {
    h1 = headings[0]
    h1.textContent = "Hello from JS!"
}

body {
    background-color: dodgerblue;
}

Mobile Demo

<h1>Hello, World!</h1>

<p>In the moment when I truly understand my enemy,
understand him well enough to defeat him, then in
that very moment I also love him.</p>

body {
    background-color: yellow;
    font-family: system-ui, sans-serif;
}

Code and Live Code Demo

Look at this code

<h1>Hello, World!</h1>

<p>In the moment when I truly understand my enemy,
understand him well enough to defeat him, then in
that very moment I also love him.</p>

body {
    background-color: yellow;
    font-family: system-ui, sans-serif;
}

Here it is Live!

<h1>Hello, World!</h1>

<p>In the moment when I truly understand my enemy,
understand him well enough to defeat him, then in
that very moment I also love him.</p>

body {
    background-color: yellow;
    font-family: system-ui, sans-serif;
}

Code Hidden Demo

All Code Hidden

<h1>Hello, World!</h1>

<p>The difference between stupid and intelligent
people - and this is true whether or not they are
well-educated - is that intelligent people can
handle subtlety.</p>

const newPara = document.createElement('p')
newPara.innerHTML = '<strong>Hello from JS!</strong>'
document.body.append(newPara)

body {
    font-family: system-ui, sans-serif;
}

HTML Code Hidden

<h1>Hello, World!</h1>

<p>The difference between stupid and intelligent
people - and this is true whether or not they are
well-educated - is that intelligent people can
handle subtlety.</p>

const newPara = document.createElement('p')
newPara.innerHTML = '<strong>Hello from JS!</strong>'
document.body.append(newPara)

body {
    font-family: system-ui, sans-serif;
}

CSS and JS Code Hidden

<h1>Hello, World!</h1>

<p>The difference between stupid and intelligent
people - and this is true whether or not they are
well-educated - is that intelligent people can
handle subtlety.</p>

const newPara = document.createElement('p')
newPara.innerHTML = '<strong>Hello from JS!</strong>'
document.body.append(newPara)

body {
    font-family: system-ui, sans-serif;
}

Show Structure

Without

<header>
    <strong>Site Name</strong>

    <nav>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </nav>
</header>

<main>
    <h1>Main Heading</h1>

    <section>
        <h2>Sub-Heading</h2>

        <p>Ordering matter was the sole endeavour of Life, whether it was a jumble of self-replicating molecules in the primordial ocean, or a steam-powered English mill turning weeds into clothing.</p>
    </section>

    <section>
        <h2>Sub-Heading</h2>

        <p>His eyes were eggs of unstable crystal, vibrating with a frequency whose name was rain and the sound of trains, suddenly sprouting a humming forest of hair-fine glass spines.</p>
    </section>
</main>

<footer>
    <p>&copy; 2025 Jimmy Tickles</p>
</footer>

body > header {
    display: flex;
    justify-content: space-between;
}

With

<header>
    <strong>Site Name</strong>

    <nav>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </nav>
</header>

<main>
    <h1>Main Heading</h1>

    <section>
        <h2>Sub-Heading</h2>

        <p>Ordering matter was the sole endeavour of Life, whether it was a jumble of self-replicating molecules in the primordial ocean, or a steam-powered English mill turning weeds into clothing.</p>
    </section>

    <section>
        <h2>Sub-Heading</h2>

        <p>His eyes were eggs of unstable crystal, vibrating with a frequency whose name was rain and the sound of trains, suddenly sprouting a humming forest of hair-fine glass spines.</p>
    </section>
</main>

<footer>
    <p>&copy; 2025 Jimmy Tickles</p>
</footer>

body > header {
    display: flex;
    justify-content: space-between;
}

On Hover

<header>
    <strong>Site Name</strong>

    <nav>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </nav>
</header>

<main>
    <h1>Main Heading</h1>

    <section>
        <h2>Sub-Heading</h2>

        <p>Ordering matter was the sole endeavour of Life, whether it was a jumble of self-replicating molecules in the primordial ocean, or a steam-powered English mill turning weeds into clothing.</p>
    </section>

    <section>
        <h2>Sub-Heading</h2>

        <p>His eyes were eggs of unstable crystal, vibrating with a frequency whose name was rain and the sound of trains, suddenly sprouting a humming forest of hair-fine glass spines.</p>
    </section>
</main>

<footer>
    <p>&copy; 2025 Jimmy Tickles</p>
</footer>

body > header {
    display: flex;
    justify-content: space-between;
}

<header>
    <strong>Site Name</strong>

    <nav>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </nav>
</header>

<main>
    <h1>Main Heading</h1>

    <section>
        <h2>Sub-Heading</h2>

        <p>Ordering matter was the sole endeavour of Life, whether it was a jumble of self-replicating molecules in the primordial ocean, or a steam-powered English mill turning weeds into clothing.</p>
    </section>

    <section>
        <h2>Sub-Heading</h2>

        <p>His eyes were eggs of unstable crystal, vibrating with a frequency whose name was rain and the sound of trains, suddenly sprouting a humming forest of hair-fine glass spines.</p>
    </section>
</main>

<footer>
    <p>&copy; 2025 Jimmy Tickles</p>
</footer>

body {
    background-color: #111;
    color: #eee;
}

body > header {
    display: flex;
    justify-content: space-between;
}

Structure With Info

Via CSS

<header id="main-header">
    <strong>Site Name</strong>

    <nav id="main-nav">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </nav>
</header>

<section class="big">
    <h1>Main Heading</h1>
</section>

#main-header::before { content: 'header id="main-header"'; }
#main-menu::before { content: 'nav id="main-menu"'; }
section.big::before { content: 'section class="big"'; }

Via Data Attrs

<header data-info='id="main-header"'>
    <strong>Site Name</strong>

    <nav data-info='id="main-menu"'>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </nav>
</header>

<section data-info='class="big"'>
    <h1>Main Heading</h1>
</section>