cloud_queue1. How I Added Materialize

I picked Materialize CSS because it is very beginner friendly and works straight out of the box using simple CDN links. No downloads or installations needed.

Linking the CSS file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

Adding Material Icons:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Linking the JavaScript file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Once these links were added, I could use prebuilt components like cards, buttons, grids, and icons right away.

web2. How the Page Was Made

The layout for this page uses Materialize’s grid system and its ready-made cards. This kept the structure simple and clean.

What I did:

• Started with a basic HTML5 layout
• Used .container to center everything
• Placed content into .card sections
• Used .row and .col for spacing
• Added icons using Material Icons
• Used simple custom CSS for background/style

Thanks to Materialize, I barely needed custom styling—most of the work was handled by the framework’s default components.

report_problem3. Challenges & Fixes

Grid System

Classes like .col s12 m10 offset-m1 were confusing at first. I learned that s stands for small screens and m stands for medium screens.

Missing Icons

Icons weren’t showing because I forgot the Google Icons link. Adding the CDN fixed it instantly.

Components Needing JavaScript

Some Materialize components require initialization. I fixed this using:

document.addEventListener('DOMContentLoaded', () => {
  M.AutoInit();
});

Hosting

I also hosted this on the moon server as lab10a.html but wanted to try something new so use Neocities as well, since Materialize uses CDN links, it worked without needing any installation.