HTML/CSS: The Fun Parts (Make a Personal Web Page)

Photo by Matias Rengel on Unsplash

This tutorial will show you how to make a rad personal web page with all the crazy colors and styles you could dream of!

Getting started

You’ll be taken to the “Read Me” page of your new project, which tells you that you’ll be writing the content of your website in the index.html file and putting in the styles of your website (colors, etc.) in the styles.css file.

You can see all your project files, including README.md, in the left-hand menu of your site:

All your files are on the left-hand side. We’ll be using index.html and styles.css.

If you already know about HTML and CSS, bear with me and skim over this brief introduction!

HTML and CSS are the building blocks of websites. Let’s start with HTML. When you open index.html, you’ll see some text, some of it surrounded by angle brackets that look like this: < >.

You can recognize HTML by the words and phrases in the angle brackets, like <h1> and <p>.

Focus on the middle of page, where you see <h1> and <p>. These phrases or letter surrounded by angle brackets are called HTML tags. You’ll notice that each of these tags (<h1> and <p>) also has a closing tag with a slash through it (</h1> and </p>).

These tags surround words or blocks or text and format them on the page. What do h1 and p do? Click the “Show Live” button at the top of your Glitch project to open a third tab that displays your project as is:

Show live! And then keep that tab open. It’ll automatically update.
What your web page should look like so far.

You can see that the h1 tag makes the text (“Hi there!”) super big and bold, and the p tag just contains normal text (“I’m your cool new webpage”). p stands for paragraph, and h1 stands for “header one” (i.e. the biggest header).

But why are the contents of the h1 tag fuschia? To answer that question, we need to look at the CSS and play with colors.

CSS and Web-Safe Colors

This code is CSS, the language used to style web pages, and it consists of a single rule-set. To write a CSS rule-set, we say the HTML tag name we want to modify (here, h1), the property we want to modify (here, color), and the value we want that property to have (here, fuschia).

You can list multiple property-value pairs in one rule-set. For instance, if I wanted to change the font of the h1 tag, I would add in a line like this:

h1 {
color: fuschia;
font-family: arial;
}

Which is the property and which is the value of the property-value pair I just wrote? (If you said that font-family is the property and arial is the value, you’re correct!)

Now, a challenge for you. Change the color of the h1 tag to one of the web-safe colors on this list. Instead of fuschia, write the name of another color.

In addition to writing the English color name, you can also write the hex value of a color. For instance, instead of AliceBlue (the first color on the list), you could give its hex value, #F0F8FF (don’t forget the hashtag!). Either works.

If you’re comfortable with hex values (it’s really just a matter of copying and pasting), you can also select colors from this HTML Color Picker.

Selected a good color for your h1 tag? Now try writing a rule-set that colors your p tag. If you want to make your paragraph blue, for instance, you could write at the bottom of your styles.css file:

p {
color: blue;
}

Now the paragraph is blue!

Any errors? Make sure you have the curly braces and the semi-colons just like in the example. Also make sure that your rule-sets are separate, and you’re not putting the p rule-set inside the h1 rule-set.

Background Colors & Gradients

body refers to the body of our web page. If we use CSS to target the body tag, we can make changes that affect our whole page — like changing the background color!

Choose a color for your background. Then, in styles.css, make a new CSS rule-set that sets the background color of your web page, using the background-color property:

body {
background-color: fuschia;
}

Check out the page where you have your web page open. Did the background color change?

Sometimes, for the creative soul, just one color isn’t enough. But with a little extra code, you can make a gradient: a background that starts out as one color and blends into another. Here’s how:

body {
background: linear-gradient(yellow, red);
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}

Instead of yellow and red, play around with different color names and hex codes until you find something you like!

You can add as many colors as you want after the first two. You can also change linear-gradient to radial-gradient and see what happens!

Divs & Transparency

For instance, I might add this property-value pair to my h1 rule-set in styles.css:

text-shadow: 2px 2px black;

Depending on your color scheme, you may also wish to try out a white shadow.

However, a good way to make large chunks of text more legible against a colorful background is by using a div (short for “division”).

In index.html, add an opening <div> tag before the h1 and p tags and a closing </div> tag after those tags. This will be tricky since Glitch will try to auto-close the opening div tag right after you type it. Move the closing tag to its correct position, so that your code looks like this:

Add in div tags!

So far, your div won’t change the look of your web page. But what if we open styles.css and add a rule-set to style it?

div {
background-color: black;
}

Change the background color to whatever works for you. One cool feature you can add is making your div slightly transparent. For this, you need to define your color using an rgba value (rgba stands for “red, green, blue, alpha”).

The first three values for rgba are between 0 and 255 — that’s the level of red, green, and blue to mix into your color. The a (alpha) value is between 0 and 1, and it tells the computer how transparent you want the color (0 is totally transparent, 1 is totally opaque).

For black, I can crank the rgb values down to 0. For transparency, maybe I’ll say it’s .8. Here’s the rule-set for that background color:

div {
background-color: rgba(0, 0, 0, .8);
}

Play around with transparency to see what you like. To get rgb colors, consult the rgb values that appear at the bottom of the HTML Color Picker:

I’d also like to center my div on the page and make the text not so squashed up against the edges. Here’s the property-value pairs I’ll add to my div rule-set to format it better:

width: 80%;
margin: 0 auto;
padding: 10px;

These property-value pairs tell the div to take up 80% of the screen, automatically center itself in the middle of the page, and leave about 10 pixels worth of padding between the boundaries of the div and the text.

Again, play around to find a color and format for your div that you like!

GIFs & Background Images

Then go to your assets folder and drag the image in.

Drag your image in!

Finally, click on your image and press “Copy Url.”

I chose a gif of people being excited, just like I’m excited about computer science. Press the “Copy Url” button.

Now the URL is on your clipboard! Return to index.html and add this code inside your div:

<img src="paste_your_image_url_here" />

Except instead of paste_your_image_url_here, paste in your actual image URL!

Check out your web page now. Does the image appear?

You can even use CSS to make an image your background. If you’re happy with your gradient, you can skip this step, but if you’d like to make an image your background, press on!

First, it’s best to find a large image to make your background. Search Google for a nice background image. Using the same process that you used to upload your GIF, upload a background image and copy the URL.

Now update your body rule-set to feature your new background image:

body {
background: url(paste_your_url_here);
}

Just like last time, paste your background image URL where it says paste_your_url_here!

Cool Fonts

When you find a Google font you like, first go to your index.html page. In between the head tags, find the tag that begins with link. Paste this second link tag below, on a new line:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Your Font Name">
Your index.html code should look something like this.

Of course, put in the name of the font your selected instead of Your Font Name!

Now, in styles.css, you can use the font wherever you choose. For instance, if you wanted to change the font of your h1 tag, you would add this property-value pair into the h1 rule-set:

font-family: 'Your Font Name', arial;

Your Google font name should be in quotation marks, just like the example. I also listed arial as a backup, in case my website can’t connect to Google for some reason.

Links

<ul>
<li> Link One </li>
<li> Link Two </li>
<li> Link Three </li>
</ul>

ul stands for “unordered list” and tells the computer you’re about to make a bulleted list. li signifies a “list item” and makes a bullet point appear on the screen.

Of course, our list items aren’t links yet. To make a link, we need to use an a tag (stands for “anchor”) and specify an href (hyperlink reference), i.e. the URL of the web page we want to link to.

For instance, if I wanted to link to Google, I would say:

<a href="https://www.google.com/">Google</a>

Notice that the opening a tag has the href attribute containing the URL, and that there is also a closing a tag.

If I wanted to make a list of links, it would look like this:

<ul>
<li> <a href="https://www.google.com/">Google</a> </li>
<li> <a href="https://www.nytimes.com/">Google</a> </li>
<li> <a href="https://www.theonion.com/">The Onion</a> </li>
</ul>

Copy the code above and fill in the links with your own favorite websites!

Saving Your Work

Everyone Copy and paste the contents of your index.html file into a text editor (ideally a code-oriented text editor like Sublime); save it with the same “.html” extension. Do the same with the contents of your styles.css file; save it with a “.css” extension in the same location as your index.html file. You may need to also save your images in the same location and change their URLs to their file names.

More Cool Features

What now?

Add more HTML files and link them together! Instead of the URL, just say the filename as the hyperlink reference (href).

Good luck and happy coding!

Software developer & educator