scrimba
Frontend Career Path
Responsive design
Build a Responsive Layout with CSS Grid
Starter Code
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

AboutCommentsNotes
Starter Code
Expand for more info
index.html
run
preview
console
<!doctype html>
<html lang="en">

<head>
<title>SciStream</title>
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<header class="site-header">
<h1>SciStream</h1>
</header>
<main>
<a href="/crystals-stabilise-quantum-computers.html"
class="technology"
aria-label="Discover how crystals stabilize time in quantum computers">
<article>
<img src="images/crystals.jpg"
alt="An AI rendering of crystals in a quantum computer">
<header class="article-header">
<h2>Technology</h2>
<h3>Crystals used to stabilise time in quantum computers</h3>
</header>
</article>
</a>
<a href="/plastic-eating-enzymes.html"
class="environment"
aria-label="Read about enzymes that eat oceanic pollution">
<article>
<img src="images/plastics.jpg"
alt="Plastic floating in the ocean">
<header class="article-header">
<h2>Environment</h2>
<h3>Enzymes eat oceanic pollution</h3>
</header>
</article>
</a>
<a href="/origins-universe-asteroid.html"
class="nasa"
aria-label="Discover how asteroid debris offers clues to the universe's origins and potential extraterrestrial life">
<article>
<img src="images/asteroid.jpg"
alt="An asteroid flying through space">
<header class="article-header">
<h2>Nasa</h2>
<h3>Samples collected from debris thrown off by collision between asteroids in deep space could give clues to origins of
the universe and point towards extra-terrestrial life</h3>
</header>
</article>
</a>
<a href="/physics-unified-theory-failed.html"
class="physics"
aria-label="Explore how physicists are redefining the Unified Theory">
<article>
<img src="images/physics.jpg"
alt="A complex diagram showing Unified Theory in physics">
<header class="article-header">
<h2>Physics</h2>
<h3>Unified Theory: physicists are rewriting the book</h3>
</header>
</article>
</a>
<a href="/inhalable-nanoparticles-medical-breakthrough.html"
class="health"
aria-label="Read about inhalable nanoparticles, a potential breakthrough in treating pulmonary diseases">
<article>
<img src="images/nano.jpg"
alt="A close-up of nanoparticles">
<header class="article-header">
<h2>Health</h2>
<h3>Inhalable nanoparticles could be gamechanger in fight against pulmonary diseases</h3>
</header>
</article>
</a>
</main>
<footer>
<p>&copy; SciStream 2025</p>
</footer>
</body>

</html>
Console
/index.html
-1:33