Practical guide · learn by building

Build your first page with TrummerWork.

This is more than a component gallery: take on short challenges, try out changes, and build a page from scratch.

Start lesson 1 Go to the final project

01 · Understand

Start with HTML

Choose elements for their meaning, then add classes to style them.

02 · Combine

Small, reusable classes

Combine typography, color, spacing, and layout without writing every rule from scratch.

03 · Build

A real webpage

Finish with a simple landing page inspired by the project examples.

Your learning path

A hands-on path, not a catalog

At each stage, first understand an idea, then apply it, and finally check what you learned. Try the challenge before looking at the code example.

Your progress this session: 0 of 6 challenges completed

Step 1 · prepare

Get set up

Connect the framework and make sure the browser loads it.

Step 2 · practice

Shape an idea

Choose the HTML element that best represents each piece of content.

Step 3 · experiment

Change the look

Try different combinations and see how they transform the page.

Step 4 · organize

Arrange the content

Choose how the elements on the page should be arranged.

Step 5 · compose

Meet real needs

Choose components based on what your site needs to do.

Step 6 · build

Create your landing page

Use your decisions to build a complete page from beginning to end.

Lesson 01 · setup

Install TrummerWork

The browser reads CSS to style the page. JavaScript enables interactions such as the mobile menu and sliders. You can use the official CDN or download the project files.

Option A · CDN

Link to the published files. You do not need to copy them into your folder.

CSS: https://trummerwork-project.web.app/style.css
JavaScript: https://trummerwork-project.web.app/script.js

Option B · local files

Download the framework and use the correct relative paths in your HTML.

Download TrummerWork

Try first · set up your file

Create a file named index.html.
Think: where would you add the CSS link so it loads when the page opens?
Which file would you add when you want a mobile menu?

I created my first page and connected the framework.

HTML · starter document using the CDN

<!doctype html>
<html lang="en">
<head>
  <!-- Character encoding and viewport settings -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first page</title>

  <!-- Framework stylesheet -->
  <link rel="stylesheet"
        href="https://trummerwork-project.web.app/style.css">
</head>
<body>
  <!-- Your content starts here -->
  <h1 class="titulo titulo-grande texto-primario">Hello, world</h1>
  <p class="texto texto-mediano">My first page with TrummerWork.</p>

  <!-- Required for interactive components -->
  <script src="https://trummerwork-project.web.app/script.js"></script>
</body>
</html>

HTML · loading local files

<!-- In the head: update the path to your CSS file -->
<link rel="stylesheet" href="Example Pags/style.css">

<!-- Before closing body: update the path to your JavaScript file -->
<script src="Example Pags/script.js"></script>

Which file do I need?

style.css contains styles, utilities, and components. script.js is required for sliders and other interactive behavior; basic styling does not depend on JavaScript.

Lesson 02 · the fundamentals

One class, one responsibility

The HTML element describes what the content is; classes add presentation and layout. You can combine multiple classes in one attribute, separated by spaces.

Try first · structure an idea

Imagine a page for a coffee shop. Write down which element you would use for its name and which for its description. Then decide which class changes the size and which changes the color.

I wrote an h1 and a p with different classes to suit their purpose.

A message that stands out

This paragraph combines classes to set text size and color.

Keep learning

HTML · combining classes

        <!-- h2 preserves the heading hierarchy -->
<h2 class="titulo titulo-mediano texto-primario">
  A message that stands out
</h2>

<!-- Separate classes with spaces -->
<p class="texto texto-grande texto-secundario">
  This paragraph combines size and color.
</p>

<!-- A link that looks like a button is still navigation -->
<a class="boton boton-primario texto-blanco" href="#componentes">
  Keep learning
</a>

Simple rule: first choose the right semantic element—for example, h1 for the main heading, p for a paragraph, and button for an action—then adjust its appearance.

Lesson 03 · presentation

Style text and color

Use heading elements in order and add TrummerWork classes to set size, font family, alignment, and emphasis.

Heading hierarchy

Main heading

Section heading

Block heading

Subtitle introducing an idea.

A paragraph in the standard size.

A smaller note or metadata.

Font families

Inter · Interface text

Lato · Interface text

Merriweather · Editorial text

Poppins · Expressive headings

Bebas Neue · Visual impact

Alignment

Aligned to the start

Centered

Aligned to the end

Emphasis and text transformation

Bold for emphasis.

Italic for emphasis.

Uppercase text.

Underlined text.

Text with a shadow.

HTML · headings and emphasis

        <!-- Use one h1 for the page's main topic -->
        <h1 class="titulo titulo-largo texto-primario">Main heading</h1>

<!-- Secondary headings preserve semantic order -->
<h2 class="titulo titulo-mediano">Section heading</h2>
<h3 class="titulo titulo-pequeño">Block heading</h3>

<!-- Text can combine size, font family, and color -->
<p class="texto texto-grande texto-inter texto-secundario">
  An <strong class="texto-negrita">important idea</strong>.
</p>

<!-- Alignment and text transformation are independent classes -->
<p class="texto-centro texto-mayusculas">Centered notice</p>

Color and highlighting

White text on the primary background

White text on the secondary background

Black text on gray

Try utilities such as texto-primario, texto-secundario, texto-negro, texto-blanco, fondo-primario, fondo-secundario and the variants texto-resaltado-*.

Lab · change the style

Before reading the code below, try the controls. Each menu adds a class to the same text: one controls its size and the other its color. Notice that the content stays the same; only its presentation changes.

Text size Text color

A sample sentence for you to transform.

Applied classes: texto texto-mediano texto-primario

I tried two combinations and can explain what changed and what stayed the same.

HTML · color and highlighting

<!-- Text color without changing its background -->
<p class="texto-primario">An important heading or link</p>

<!-- Pair a background with high-contrast text -->
<div class="fondo-azul texto-blanco padding-mediano">
  Light text on a blue surface
</div>

<!-- Highlight only the important part of the paragraph -->
<p>Review this <span class="texto-resaltado-amarillo">key idea</span>.</p>

Check the contrast

A color combination can be hard to read even when the colors look nice. Check contrast, especially for small text and buttons.

Lesson 04 · layout

Arrange the page with layout

Use a container for the overall width, Grid for two-dimensional groups, and Flexbox to align elements in a row or column.

Before you try it: if you want three cards at the same level, which element should define the columns: each card or the container that groups them? The lab lets you test your prediction.

Container

contenedor centers content and controls its width. Try contenedor-completo, contenedor-grande, contenedor-mediano, and contenedor-pequeño depending on how much space you need.

Content area inside the container

Grid · cards in columns

Plan

Break a goal into actions.

Build

Combine the classes you need.

Review

Test at different screen widths.

HTML · three-card grid

<!-- The parent defines the grid, columns, and gaps -->
<section class="display-grid columna-3 espacio-entre-2">
  <!-- Each child occupies one grid cell -->
  <article class="tarjetas fondo-blanco">
    <div class="contenedor-cuerpo-tarjeta">
      <h2 class="titulo titulo-pequeño">Plan</h2>
      <p>Break a goal into actions.</p>
    </div>
  </article>
  <!-- Repeat the pattern for the other blocks -->
  <article class="tarjetas fondo-blanco">
    <div class="contenedor-cuerpo-tarjeta">
      <h2 class="titulo titulo-pequeño">Build</h2>
      <p>Combine the classes you need.</p>
    </div>
  </article>
  <article class="tarjetas fondo-blanco">
    <div class="contenedor-cuerpo-tarjeta">
      <h2 class="titulo titulo-pequeño">Review</h2>
      <p>Test at different screen widths.</p>
    </div>
  </article>
</section>

Flexbox · align a row

Team name View project

HTML · Flexbox for an action bar

<!-- Enable Flexbox on the parent and align its children -->
<div class="display-flex fila centro-vertical espacio-entre-2">
  <strong>Team name</strong>
  <a class="boton boton-primario texto-blanco" href="#proyecto">
    View project
  </a>
</div>

Lab · change the grid

A catalog has two types of content, and a large screen can show both side by side. Change the columns and see what the parent class controls.

Grid columns

Product A

Short description.

Product B

Short description.

Product C

Short description.

Look at the container class: columna-3. The same class on each card would not arrange the grid.

I tried both options and identified which element needs display-grid.

Spacing and borders

Combine classes such as margen-abajo, padding-mediano, borde, and borde-redondo-mediano.

Inner spacing and rounded corners

Responsive layout

The framework's grids adapt using media queries. Check the result on desktop, tablet, and mobile.

Framework breakpoints: 1024, 900, 768, 640, and 576 pixels.

Lesson 05 · reusable components

Build with components

Components are HTML structures whose classes work together. To learn how to choose them, start with the needs of the person using the site; don't begin by looking for a random class.

Responsive navbar

The structure connects a menu control to the navigation list. The script closes the mobile menu when a link is selected.

HTML · framework navbar

<!-- The header lets the sticky navbar stay visible -->
<header class="navbar-contenedor-seguimiento">
  <nav class="navbar navbar-blue navbar-seguimiento"
       aria-label="Main navigation">
    <!-- Brand or site name -->
    <a class="navbar-brand" href="#inicio">My site</a>

    <!-- Mobile control linked to its label through id and for -->
    <input type="checkbox" id="menu"
           class="navbar-toggle" aria-controls="enlaces">
    <label class="navbar-toggle-label" for="menu"
           aria-label="Open or close navigation">
      <span class="navbar-toggle-icon"></span>
    </label>

    <!-- Links shown in the bar and mobile menu -->
    <ul class="navbar-menu" id="enlaces">
      <li><a class="navbar-link" href="#producto">Product</a></li>
      <li><a class="navbar-link" href="#contacto">Contact</a></li>
    </ul>
  </nav>
</header>

Buttons and links

Use a button for an action and a link for navigation. The variations share the same basic structure.

Navigate Simple link

Cards

Combine tarjetas, an optional image, and contenedor-cuerpo-tarjeta.

An idea in progress

Describe the project in one short sentence.

Form

Connect each label to its corresponding field using for and id. Classes add styling, but do not submit data on their own.

Preview

Visual only

To submit a form, connect a service or write the logic that processes the data. Don't publish private information in this demo.

HTML · simple form

<!-- The form groups related labels and fields -->
<form class="formulario-simple fondo-blanco">
  <!-- for must match the field id -->
  <label class="labeltxt" for="correo">Email</label>
  <input class="form-input" id="correo" type="email"
         autocomplete="email" placeholder="you@example.com">

  <label class="labeltxt" for="mensaje">Message</label>
  <textarea class="message-input" id="mensaje"
            placeholder="Enter your message"></textarea>

  <!-- A server or service must process the submission -->
  <button class="send-boton" type="submit">Submit</button>
</form>

Notice and quote

Design tip

Use a notice for an important recommendation, and a quote to highlight a brief note or passage.

“A clear page helps every idea find its place.”

HTML · notice and quote

<!-- Notice with a title and message -->
<aside class="aviso fondo-azul texto-blanco">
  <p class="titulo-aviso">Design tip</p>
  <p>Highlight a recommendation the user should notice.</p>
</aside>

<!-- Quote for a brief note or passage -->
<blockquote class="cita cita-pequeña">
  A highlighted idea to remember.
</blockquote>

Slider with image and text

Slides share a common track. The version with indicators generates dot controls automatically. The framework script enables the controls and transition.

Hands-on example

Start with an idea.

Add an image, a heading, and an action.

View the final project

Then, organize.

Use the components and utilities you already know.

HTML · hero slider

<!-- The hero sets the stage; indicators control navigation -->
<section class="slider slider-con-indicadores slider-hero"
         aria-label="Project introduction">
  <!-- The script moves this track between slides -->
  <div class="slider-pista">
    <!-- A slide contains an image and text -->
    <article class="slider-diapositiva">
      <img src="equipo.jpg" alt="Team collaborating around a table">
      <!-- Combine a style and position for the text -->
      <div class="slider-texto slider-texto-oscuro slider-texto-izquierda-abajo">
        <h1 class="titulo-largo texto-blanco">Start with an idea.</h1>
        <p class="texto-grande texto-blanco">Short description.</p>
        <a class="boton boton-primario texto-blanco" href="#contenido">
          Learn more
        </a>
      </div>
    </article>
    <!-- Duplicate article to add another slide -->
    <article class="slider-diapositiva">
      <img src="proyecto.jpg" alt="Team reviewing a project">
      <div class="slider-texto slider-texto-vidrio slider-texto-centro">
        <h2 class="titulo-grande texto-blanco">Another idea.</h2>
      </div>
    </article>
  </div>
  <!-- Previous and next controls -->
  <button class="slider-anterior" type="button"
          aria-label="Previous slide">‹</button>
  <button class="slider-siguiente" type="button"
          aria-label="Next slide">›</button>
  <!-- The script adds one indicator per slide -->
  <div class="slider-indicadores"></div>
</section>

Other options include slider-basico, slider-fundido, slider-zoom, and slider-compacto. Find more structures and variations in the slider documentation.

Your challenge · choose the right component

Write down which component you would use for each need before checking the answer:

Navigate to another section: a link.
Perform an action: a button.
Show several items in a collection: cards inside a Grid.
Collect visitor data: a form connected to a service.

I matched each need to a component and explained why.

Lesson 06 · final project

Build your landing page

Now apply the decisions from the previous lessons to a page for your own idea. Don't start by copying the example: first organize your content and build a simple version in your editor.

Build in this order

Write the project name, a sentence that explains it, and a main action.
Add navigation that points to real sections of your page.
Create three benefit cards inside a grid.
Add a contact section and a footer with links.
Apply colors, typography, and spacing; then check the result on mobile.

Check your work

Does each link work and lead to an existing destination?
Did you use only one h1 and keep headings in order?
Do the cards fit without overflowing?
Do images have alt text?
Did you make it clear if the form does not submit data yet?

Your project

Build at least these four parts in your file: a header with navigation, an introduction with a call to action, three benefit cards, and a footer. Once it works, resize the screen and fix anything that breaks.

I finished my landing page, checked the links, and tested it on a narrow screen.

Want to compare your structure?

Once you have a first draft, compare your section order with this example and adapt the content to represent your idea.

An idea for the future

Grow something better.

A short description and a clear action to get started.

Discover the benefits

Simple

A clear promise.

Personal

Practical benefits.

Sustainable

A next step.

HTML · simplified final project structure

<!-- Navbar: identity and links to sections -->
<header class="navbar-contenedor-seguimiento">
  <nav class="navbar navbar-green navbar-seguimiento"
       aria-label="Main navigation">
    <a class="navbar-brand" href="#inicio">VERDE</a>
    <ul class="navbar-menu">
      <li><a class="navbar-link" href="#beneficios">Benefits</a></li>
      <li><a class="navbar-link" href="#contacto">Contact</a></li>
    </ul>
  </nav>
</header>

<!-- Main contains the page's main topic -->
<main id="inicio">
  <!-- Hero: main offer and call to action -->
  <section class="fondo-secundario texto-blanco padding-grande texto-centro">
    <p class="texto texto-mayusculas texto-blanco">An idea for the future</p>
    <h1 class="titulo titulo-grande texto-blanco">Grow something better.</h1>
    <p class="texto texto-grande texto-blanco">Describe your project.</p>
    <a class="boton fondo-blanco texto-primario" href="#beneficios">
      Discover the benefits
    </a>
  </section>

  <!-- Grid: show benefits in cards -->
  <section id="beneficios" class="contenedor display-grid columna-3 espacio-entre-2">
    <article class="tarjetas fondo-blanco">
      <div class="contenedor-cuerpo-tarjeta">
        <h2 class="titulo titulo-pequeño">Simple</h2>
        <p>A practical benefit.</p>
      </div>
    </article>
    <!-- Duplicate cards to add more benefits -->
  </section>
</main>

<!-- Footer: brand, navigation, and credits -->
<footer class="footer">
  <div class="footer-contenido">
    <div class="footer-superior">
      <section class="footer-marca">
        <h2>VERDE</h2>
        <p>A short project description.</p>
      </section>
      <nav class="footer-columna" aria-label="Links">
        <h2>Explore</h2>
        <a href="#beneficios">Benefits</a>
      </nav>
    </div>
    <div class="footer-inferior">
      <p>© My project</p>
      <a href="#inicio">Back to top</a>
    </div>
  </div>
</footer>

Next step

Open Nexo to see another complete framework example, and use the documentation as a reference for the classes.

You have the basics

Keep experimenting: replace the content, try different class combinations, and see how each component changes at different screen sizes.

Open the full documentation Explore Nexo