Learn to Code via Tutorials on Repl.it!

← Back to all posts
Materialize- Beautify your webpages with no CSS!
iamcooliguess (17)

Hey guys!
Welcome to my first tutorial. In this tutorial, I will teach you how to use Materialize, a CSS framework that doesn't require you to write any!
Yes, there are other such libraries such as Bootstrap, but I prefer using Materialize, for me it just looks better.
Firstly, let's look at a shameless plug- I mean a website made with Materialize- https://aryamaan-js.github.io/home
With that out of the way, let's start!
Let's say we have this HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello Materialize</title>
</head>
<body>
<h1>Hello Materialize</h1>
<p>Small paragraph with information, for small screens.</p>
<h4>Larger head with same info as paragraph, but for larger screens.</h4>
<button>Click Me</button>
</body>
</html>

Now, let's add some Materialize magic!
Firstly, since Materialize is a CSS library, we need to import it just like any other CSS file. This can be done either by downloading it from the web or using a CDN. A CDN is a webpage that just contains all of the CSS, so instead of being a file path to Materialize, it's a webpage path. Write this in the head:

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

As you can see, instead of href to something like style.css it is a webpage. Going to this link will show you all the code. You can even copy-paste or save this code into your own project if you want to.

If Materialize doesn't require you to write CSS, but is a CSS library, how will it style your tags? The answer is classes. We give class names to our tags and Materialize applies the required styles. Thus, learning Materialize is mostly learning (or fully learning) these class names.

If you run this, you might see that the font has changed. By default (without applying classes) Materialize has made your webpage 10 times better.

Now, let's make this button more "lively".

<button class="btn">Click Me</button>

Now you will notice a bigger, colorful, and overall better button. You can change the color by adding a color name as a class (class names are added by space-separating them) and by using darken, lighten, or accent to get the color you want.
The list of colors are here:

https://materializecss.com/color.html

You can see that they have a tutorial as well, so I guess now you don't need me :P

Anyways, this was my Materialize tutorial. If you want to see more, please upvote. I'll make another one at 20 upvotes.
Stay tuned!

Comments
hotnewtop