DEV Community

Cover image for Preparing a React course in public - Raw HTML + CSS
Manuel Artero Anguita 🟨
Manuel Artero Anguita 🟨

Posted on

Preparing a React course in public - Raw HTML + CSS

The starting point of the journey feels mandatory: The lovely Hobbiton, Pallet Town, a chariot where a stranger asks for your destination: Raw HTML and CSS.

The idea is simple - though not particularly original 🀷 – we begin with the necessity of using JavaScript to create dynamic websites.

The HTML we're starting with has ton of repetition, plus impractical if we want to change something for every card in the list.

This is our starting HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Raw HTML List</title>
  </head>
  <body>
    <main id="root">
      <ul>
        <li>
          <article class="card">
            <h2>Hulk</h2>
            <img
              src="https://marvelcdb.com//bundles/cards/01050.png"
              alt="Hulk"
            />
          </article>
          <article class="card">
            <h2>Tigra</h2>
            <img
              src="https://marvelcdb.com//bundles/cards/01051.png"
              alt="Tigra"
            />
          </article>
          ...
        </li>
      </ul>
    </main>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

that renders a - not exciting - first training mission list:

screenshot of the first render example


As I mentioned in this series, all the pieces of code are public both on Github and StackBlitz:

Screenshot of the collection at StackBlitz, highlighting the project we're discussing

Next Step: Create each card (<article/ >) using Vanilla Js (no libraries).


Cover image created by leonardo.ai; prompt: Β«Renaissance-era professor in a steampunk-style with a back pack, walking outside for his first adventure. adorned with intricate, mechanical details.Β»; 3D Animation-Style.

Thanks for reading πŸ’›.

Top comments (0)