This tutorial will walk you through creating a website using HTML and CSS on CodePen. Although this will not be hosted live, the skills you learn are the skills people use to make real websites.
HTML and CSS are the coding langauges used to make every webpage on the Internet. If you want to own your own business someday, or if you want to create an online personal resume, you'll need to know HTML and CSS. Knowing these languages can make you a strong candidate for any employer looking to enhance their web presence.
HTML stands for HyperText Markup Language and is used to put elements (like headings, images, links, and paragraphs) on the page.
CSS stands for Cascading Style Sheet and is used to add style (like color, font, and size). The way I like to think of it is that HTML is like the foundation, support beams, walls, ceilings, and windows of a building. CSS is like the paint and decor of the building -- the things that give it style and personality. We'll talk more in depth about these two later.
We'll start by opening CodePen and clicking "New Pen". Here's what you should see:
The left box is where you'll write your HTML. The box in the middle is where we'll write our CSS. The final box is for JavaScript. We won't write any JavaScript today, but you may want to explore learning JavaScript on your own later! Feel free to minimize the JavaScript box for now.
You'll also see a blank white box across the bottom. This is where your webpage will show up as you build it.
We'll start by adding a heading to the page.
<h1>Welcome</h1>The things before and after the word Welcome are called tags. We use `
` to indicate that this heading is done.You've probably already guessed that the "h" in "h1" stands for heading, but what does the 1 in h1 represent? The number indicates the priority and size. Try changing your h1 to an h2, h3, h4, h5, or h6. What happens?
If this is a personal website, we probably want a few sections. Here's a few I thought of:
- About Me
- My Life Goals
- Favorite Websites
Add three more headings to your page. You can use the ones I thought of, or you can come up with your own. Use an appropriate size for the headings (1-6).
Here's a quick hint: if you don't like typing the bracket characters, you can type the letters of the tag (like h1 or h2) and hit the tab key. Tada! It automatically makes the opening and closing tags for you!Now that you have headings, we need some content! When we type our "About Me" paragraph or "My Life Goals" section, we don't want it to be in the same font size as the heading. This is where we'll use a paragraph tag. Can you guess what letter goes inside of the tag?
If you guessed the letter "p", you're correct! Add a paragraph tag underneath your "About Me" heading. It should look something like this:
<h3>About Me</h3>
<p></p>Inside of the paragraph tags, write a few sentences about youself. Here are some ideas: name, age, city and state, family members. Feel free to get creative!
Next, add another set of paragraph tags under the "My Life Goals" section. Inside of the tags, write a few sentences about your life goals. Here are some ideas: your dream job, where you want to work, where you want to go to college and what you'll study, what you want people to say about you.
At this point, your website should be looking pretty neat! It still doesn't have any style, but we have headings and paragraphs!
We have a heading at the bottom called "Favorite Websites". People don't normally write paragraphs about their favorite websites, so let's make a list instead.
Making a list involves two different sets of tags: one to indicate that we're starting a list, and one or more to indicate the different items in the list. Any guesses which letters will be used for lists?
The first tag used for lists, "ul", stands for unordered list and will create bullet points for each list item we add. The second tag, "li", stands for list item and indicates that we are putting something in the list. Here is an example of how you would make a grocery list:
<ul>
<li>Bread</li>
<li>Coconut yogurt</li>
<li>Ben & Jerry's chunky monkey ice cream</li>
</ul>Under your "Favorite Websites" heading, create an unordered list and add three (or more!) of your favorite websites. Remember, each new item in the list gets its own set of tags.
So far, we only have text :( Let's add some images!
Take a look at the example below:
An image tag is a little bit different than the tags we've looked at so far. It only has an opening tag -- no closing tag! However, there's something else a little special about it. Try typing "img" and then hit the tab key to see what pops up.
<img src="" alt="">You'll see two things that we call attributes. One is src which stands for source. The source is how we indicate which picture we want to show. The other, alt, is used as the text that shows up if the image doesn't work. It is also used if someone cannot see the image and is having the website read to them by a screen reader.
Search Google images for a picture of something that has to do with your life goals. When you find the picture, right-click on it and select "open image in a new window". Copy the address bar for the image and paste it in between the quote marks for the src attribute. It should look something like this:
<img src="http://example.com/my-cool-image.jpg" alt="">Inside of the quote marks for the alt attribute, write a short description of the image, like this:
<img src="http://example.com/my-cool-image.jpg" alt="Photo of two students graduating from college">Find two more images to go on your page. They can be images for any of your heading sections (About Me, My Life Goals, or Favorite Websites). Depending on the size of the original image, it may look kind of funny right now. But don't worry! We'll fix that when we style our page.
Now that we have some structure on our page, let's style it! We'll start with the style of our images. Remember that you'll be typing in the CSS box of CodePen now.
With CSS, we can control things like color, size, font, border, shape, background, etc. The way CSS is written is a little different than the way HTML is written. Take a look at the example below:
The first part is the selector. The selector is what we want to style. If I wanted to style my largest heading, I would use h1. If I wanted to style my image, I would use img. What would you use if you wanted to style the items in your list? What about if you wanted to style my paragraphs?
The second part is the property. The property is what about it you want to style. Examples of properties are border, font-family, size, height, width, and color.
The last part is the value. Once you've identified what property you want to style, the value is what you use to indicate the style you want. If I were styling the color, the value might be red. If I were styling the height, the value might be 100 pixels. If I were styling the font-family, I might choose Times New Roman or Arial. Can you think of a value if I were styling the width? What about background-color?
Finally, we put a semicolon (;) at the end of the value. Don't forget to do this!
Let's style our images so that we can control the height and width. Try using a height of 100 pixels (px).
img {
height: 100px;
}Does that look ok on your page? If it does, great! If not, change the value to a different number of pixels.
Right now, our images are too close together. It would be nice to have some space between them. We can do this with a property called padding. Padding will add space around the outside of the images. Notice that I can just add a padding property and value inside of the same curly braces I used to set the height:
img {
height: 100px;
padding: 15px;
}Experiment with different amounts of padding. If you want the images to be close together, then use a smaller amount of padding. If you want them to be farther apart, then use a larger number of pixels (try 20 or 30 pixels).
How do you think you'd write a CSS rule to change the color of your h1 headings? Try it out!
There are some pretty cool colors out there to choose from. Take a look at this list and pick your favorite for the color of your h1 and other headings. Here are some examples of what it might look like:
h1 {
color: red;
}
h3 {
color: blue;
}Next, experiment with the font-family property. Here's what it might look like:
h3 {
color: blue;
font-family: cursive;
}There are lots of font families out there, such as sans-serif, Arial, Geneva, Helvetica, Monaco, and Palatino. Try a few of them and pick the one you like the best.
Right now, our background is pretty boring. Let's add a background for the body.
body {
background-color: lemonchiffon;
}Experiment with a few of the different colors from this list until you find one you like.
Wouldn't it be cool to have a paragraph's background change color when the user's mouse hovers over it?
Since we want this to only happen for paragraphs, we'll need to use the paragraph selector and indicate that we want the property and value to change only when hovering over it:
p:hover {
}Next, find a color you want for the background of the paragraph:
p:hover {
background-color: deeppink;
}Try it out! Hover over one of your paragraphs. Did the background change?
Congratulations! You've made your own basic website. If you want to save your work, click "Save" and create an account.
If HTML and CSS was interesting to you, I encourage you to keep learning! There are many online resources to learn how to code, but one of my favorites for beginners is Codecademy. It is free and walks you through the whole process.
Good luck!