HTML/CSS: The Fun Parts (Make a Personal Web Page)
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
We’ll be making our web pages on Glitch, so open a new tab and go to glitch.com (but keep this tutorial open so you can follow along!). On Glitch, click on “Start a New Project” and select “Create a Website.”
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:
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: < >.
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:
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
If we open styles.css, we see this code:
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
If you flip back to index.html, you’ll see that the h1 and p tags are both surrounded by body tags:
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
Sometimes when we get too crazy with colors, it’s hard to read the text on the page. One option, particularly for large text, is to add a shadow to increase legibility.
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:
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
You can put images on your website, even GIFs! Google a GIF to upload to your site. When you find one you like, drag it to your desktop.
Then go to your assets folder and drag the image in.
Finally, click on your image and press “Copy Url.”
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
Frankly, the default web-safe fonts offered by CSS are kind of boring. It’s much more exciting to choose a font from Google 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">
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
Now that we’ve made our site look awesome with cool fonts and colors, let’s add some links to other sites! Inside the body tags of your web page, you can put your links in a bulleted list like this:
<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
13+ Create an account on glitch.com by pressing “Sign In” in the upper right hand corner. Use your GitHub login (or sign up for a GitHub account if you don’t have one).
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
Want to add more flair to your website? Check out more tutorials:
- Website Q&A: Customizing pictures, advanced work with divs, using JavaScript
- CSS Beyond Code.org: Repeats Google Fonts & gradients, but also includes styling links & adding CSS transitions
- Dark & Stormy Night with CSS Animations: Teaches CSS animations by guiding you through making a stormy night scene on Glitch
What now?
Add content to your web page! Make it personal site, a fansite for something you like, or an information site about something you’re an expert on. Click “New File” on Glitch to add other HTML files (with that .html extension)!
Good luck and happy coding!
