CSS Tutorial #1 — Styling with MaterializeCSS
So, you want to figure out how to make your HTML website look good. Well, you’ve come to the right site.
Before we begin, there’s something I need to say that I probably should’ve mentioned earlier. If you think this set of tutorials is going to make you a web developer, you’re wrong. Nothing — no book, no website, no Udemy course — can make you a web developer overnight, or even in a few months. If you’re looking to get a job as a developer by following online tutorials, I applaud your enthusiasm, but I’m gonna have to burst your bubble on that right away. Sure, other people may have done it, but that’s the survivorship bias talking.
The fact of the matter is, if you’re looking to get into a full-time programming job, it takes a lot more than online tutorials. That’s not to say you can’t do it — if you want to don’t let me discourage you. You can learn full-stack web development online and for free, but you have to be all-in. On average, 800 hours is what it takes to learn everything you need to know. But before you even think of applying for a job as a programmer, you need to have real-world experience. There are places you can go to get this, like www.freecodecamp.com.
Anyway, sorry if that was discouraging, but I just want you to take away two things from this before we delve deeper into this:
- Never pay for a course on web development if you’re not 100% into it and committed to learn all the course has to offer. There are free ways of learning the same material. I’ll make up a list of them in a later tutorial.
- If you want to become a full-time web developer, it’s going to take a lot of work. If you’re like me and don’t have time (or don’t want to work as a programmer), don’t fret! I believe everyone can and should try to learn a bit of code, at least HTML and CSS and maybe Ruby or Python. So whether you’re the founder of a small business, want to know how to make your own website, have the urge to learn something new, or just want to improve your professional skillset, I recommend following along with these tutorials. They won’t get you a job — they won’t even make you an expert. But they’ll teach you practical skills you can use in life.
OK, so heavy stuff aside, let’s get back to CSS. When we left off, I said that CSS stands for Cascading Style Sheets, and is a language that complements HTML in that it can be used to stylize web pages and make them look spiffy. When used correctly, CSS can make a website astound your visitors, and make your site stand out from the crowd. But as I said above, this course isn’t going to make you a CSS guru, it’s just going to teach some practical basics that get you started fast. If you want to learn more, I’ll be posting a list of the best web design tutorials I’ve found (for free, by the way).
First off, you may remember that the syntax for styling an HTML element in CSS is as follows:
The selector here can be made to target a bunch of things, but for now let’s target a class of HTML objects. Remeber, to add a class to any object, put the class attibute inside its tag like this:
So, enough talk and let’s get down to business, to defeat… the Huns?
Never mind the Mulan reference, I’ve got a new tool to show you, something that just got developed. It’s called Web Maker, and it’s basically CodePen.io offline and faster. You can get it as an extension to the Chrome/Chromium Browser (which you really should be using, it’s just so much better) by clicking here. Once you’ve clicked Add to Chrome, confirmed it, and got the message that it was installed, you should see a little orange parallelogram in the top-right of your browser window. Click on it, and a new tab should open up that looks a little bit like this:
This is your Web Maker IDE, your personal web design playground!
First, create an h1 with a class of bigtext by typing your code into the HTML section. Next, click on the CSS section and give the h1 a color of green. If you need help, look up at what I just mentioned about targeting an HTML element (Hint: to select an HTML class in CSS you should put a period followed by the name of the class)
no peeking until the text is green!
Well, I’m assuming you didn’t cheat and your Web Maker window now looks a little something like this:
You should have noticed while typing your code that Web Maker has a nifty little autocomplete function that guesses what you’re trying to type and gives you suggestions on how to finish it. Pretty smart, eh?
Now that you’ve got a refresher, let’s get down and dirty with CSS!
First off, instead of walking you through all the common attributes and values like I walked through HTML tags (since that would be boring and a waste of time), I’m going to introduce you to your new friend, the CSS Framework!
Frameworks are add-ons to programming languages that basically make everyone’s lives easier. There’s no sense in re-inventing the wheel, so frameworks that have already been made by people with lots of skill and time cut out the dirty work and let us build programs and websites faster and focus on expressing our own ideas instead of being burdened by the programming language. Some frameworks add functionality to languages, but the one we’ll be dealing with in this tutorial is called a boiler-plate framework, and it essentially just stops you from having to repeat yourself and gives you a good starting place for your project.
The framework we’ll be using today is called Materialize CSS. It’s open-source (meaning that it’s free for anyone to use as long as you follow its license), and attempts to replicate the “Flat” design of modern websites like Google. It’s very pretty, and allows you to style your site without much CSS!
To add it to your project (since it’s actually a CSS file that will act as a stylesheet for your document and has pre-configured styles for different HTML classes, we’re going to add it as a link, by copying the following bit of code and putting it in the head of our HTML document like so:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
See, that wasn’t so bad, was it?
Now your HTML document should look something like this:
You should notice your header is now a different, snazzier font. Also, you may as well delete the bit of CSS you wrote earlier. We won’t be needing it — I made your write it only to test your knowledge (hahahahahahaha)!
Well that’s cool, but what now?
The answer is easy — divs and classes.
The reason I wanted to focus so much on these two things up until now was that they are how MaterializeCSS (or pretty much any other CSS Framework) makes your life easier and your HTML more pleasing to the eye.
First off, MC (as I’ll be affectionately referring to it for the rest of this tutorial) has a whole ton of colour choices, just like HTML. The full list is here; you may want to bookmark it.
Just add a class to your h1 with the name of the colour you want (like yellow darken-1 [don’t worry about the #colors, I’ll get to them later]), and watch the magic occur before your eyes.
So that simplifies things a bit — one or two words versus a few lines of CSS. But like I said before, CSS does a whole ton of things other than colouring.
For one, MC has a grid system, which allows you to — well, it’s better if you find out. First, put a div with a class of container in your document. Also add a colour class to the div, put a few different HTML elements inside the div, and watch what happens:
See, the container class allows for a responsive (able to look good on any screen size) page content. But there are more!
Try putting this into the document (outside the container div’s closing tag)
You’ll now see 12 equally-spaced numbers on the screen. If you give the divs inside the row div a colour class like blue or red, you can see that the row class divides the screen into 12 sections that are filled with col divs you put inside it.
Think of it this way, if you make a row div, the screen is divided into 12 chunks from left to right. If you put a div inside it with the classes of col (they always need col, that means column) and s1, you essentially just gave 1 of those chunks, in this case the one on the extreme left, for the sole use of whatever content is inside it. You don’t have to fill the 12 chunks, but this just serves as an example that they exist.
For more on the MC grid system, check out it’s official page at http://materializecss.com/grid.html. You should be able to understand most of the things on that page, but don’t worry if you don’t get it all yet — I’ll be covering the grid system in-depth later.
Lastly, (at least for this tutorial) we’ll be dealing with the alignment classes, namely valign-wrapper, center-align, left-align, and right-align. As you’d probably expect, giving this class to a div or an element will align it vertically, to the center, to the left, or to the right of its parent element, respectively. These can be super helpful for text or icons that you want to align just right, and it sure beats guessing and pixel measurements, which is what you would have to be doing if MC wasn’t around at this stage.
Anywho, there’s lots more to explore when it comes to CSS, and in the next few tutorials we’ll be creating a website that looks like it could fit right in with the likes of Google, Facebook, Medium, or YouTube. I’m serious!
That’s the power of CSS!
(Man, I spent waaaay too much time on that stupid video…)