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>
that renders a - not exciting - first training mission list:
As I mentioned in this series, all the pieces of code are public both on Github and StackBlitz:
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)