Getting started in HTML and CSS
A non-technical introduction to making internet things for people who don’t know anything about internet things. In other words: getting started really IS the hardest part.
I should probably preface by saying that there are countless resources for learning about HTML and CSS on the internet, of which many are more informative / technical / professional than this. This tutorial is a compilation of things I found the most helpful in getting started; if you make it to the end of the tutorial, you’ll have the building blocks for a website of your very own!
We’ll be making a simple site with horizontal menu buttons and some thumbnail images; it’ll look like this:
Not very visually stimulating, but enough to get you started. You’ll learn how to change the styling to anything you’d like!
Step 1: Installing Atom.
Install Atom (the program you’ll be using to write code) onto your computer. Go to this link:
Step 2: How to set up HTML and CSS files.
Set up your HTML and CSS files. An HTML file will contain the content of your website, and your CSS sheet — which stands for Cascading Style Sheet — will style the content of your HTML file.
First, make an empty folder in your documents. I’m naming mine “tutorial.” Then, open two new files in Atom. Name these index.html and style.css. Drag them into your new folder. At the top of index, type the following lines of code:
<!DOCTYPE html>
<html>
<head>
<meta charset = “utf-8”>
<link rel = “stylesheet” href = “style.css”/>
</head>This identifies index as an HTML file, specifies the character set, and links the CSS sheet you created, style.css, to this file.
Step 3: Creating a body tag.
Below </head>, type <body>, then skip a few lines and write </body>. All the code you write will be between these two things, which are called tags. They are the same except for the “/” in the second tag, which identifies it as an closing tag. The first tag, without the “/”, is an opening tag and signifies the beginning of an element.
This will look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset = “utf-8”>
<link rel = “stylesheet” href = “style.css”>
</head> <body> </body>
Step 4: Writing text!
We’ll start by putting some text onto the page so you can play around with the styling. Let’s make a title and a short paragraph. Between the two body tags on index, make a new element: <h1>. This stands for header. Between the opening and closer header tags, write the text of your title like this:<h1>TITLE</h1>.
Let’s try opening index in a web browser. Save index, and then find it in finder and open with Safari or Chrome. If you don’t save first, you won’t see any of the changes you’ve implemented. Pressing command + S every time you make a change on your file is a good habit to get into.
Next, let’s write a short paragraph. To do so, put your desired paragraph text between the tags <p> and </p>. Try opening your file in a web browser again. Notice the difference in text size and weight between the header and paragraph elements. You can set text to have different hierarchies by using the <h1>, <h2>, <h3>, etc. to <p>. Go ahead and add some more text elements if you’d like!
Step 5: How to style in CSS.
Let’s try styling the header now. Navigate to style.css and type h1 {}. Skip a line between the two brackets. On this empty line, type font-family: Avenir; or any other font family of your choice. Press command + s to save style.css and try opening index in the browser again. See how the typeface of your header has changed! You can also use style.css to change the font weight, font-color, background color, border color, and many more style aspects of your elements, including layout. We’ll get more into layout later. Here’s a look at my style sheet:
h1 {
font-family: Avenir;
}Step 6: Making a menu.
Now we’ll make a menu that links to different pages on your site. There are many different ways to make a menu, but I’m going to teach you one that uses a list element. Before we make the actual menu, we have to understand how to write a list. You can either make an ordered list — which has numbers — or an unordered list, which uses bullet points. We’ll use the latter. Navigate back to index and use the tags <ul> and </ul>. Within these tags, each individual list object will have their own <li> and </li> tags. I’m going to make a list that contains “WORK” and “ABOUT.” My code looks like this:
<ul>
<li>WORK</li>
<li>ABOUT</li>
</ul>Open this in your browser to see what it looks like. You probably won’t want bullet points in your menu; change this by navigating to style.css and creating a new section just like you did for h1; but instead of h1{}, this one will be
ul {}. In this new section, type list-style-type: none; like this:
ul {
list-style-type: none;
}For this tutorial, let’s make the menu bar into a horizontal line. For this, you’ll have to style the list element on your CSS guide. Create a new section called li{}, and inside of the brackets, type display: inline-block;. This just changes the display style of the list to inline-block. This will change the display of all lists on your site if you have more than one, but for now it’s ok.
Step 7: Linking your menu buttons to real pages.
Now, let’s make WORK and ABOUT link to real pages. We’ll make two new html files named accordingly. Remember to add “.html” to the end of each file name. Copy and paste the same chunk of code you pasted at the top of index into both of these files. Now, navigate back to index. You’ll need to make both list items into links; inside each <li> tag, enclose WORK and ABOUT with <a> and </a> tags, which are for hyperlinks. Then, inside the first <a> tag, write href = “work.html” and then close the tag. It’ll look like this:
<ul>
<li> <a href = "work.html"> WORK </a> </li>
<li> <a href = "about.html"> ABOUT </a> </li>
</ul>Now try clicking on WORK and ABOUT in your web browser! (Note that file names are case sensitive!)
Step 8: Images!
Now we’ll try putting an image onto one of your pages. Find an image you’d like to use and drag it into your tutorial folder. It’s probably smart to make a separate folder within tutorial for just the images that you’ll be putting on your site, for the sake of organization, and especially if you’re going to have lots of images on your site. I named mine img and dragged my image into it.
Linking to a photo is pretty similar to linking to a new page, but instead of the <a> tag, you’ll use <img>. I’m going to place my photo underneath the menu on my homepage. In index, below the list element, I typed this:
<img src = “img/photo.jpeg” alt = “art photo” />.
Notice that the image tag is self-closing. Set src equal to the path of your photo — its folder and file name — and alt to a descriptor of that photo. Try this and open in your browser! If you only see the alt descriptor when you open in your browser, it could be that you aren’t linking to your photo properly in index — either the name is mispelled or the path is incorrect.
To change the size of your photo, you can change height and width parameters. These are located inside the image tag after alt. I would set mine like this:
<img src="img/photo.jpeg" alt="homepageimage" height="480px" width="800px" />It’s best to set both width and height — if you only have one parameter set, your photo maybe become stretched or squished when you’re formatting your page later on.
Step 9: Making divs and classes.
Cool! Now that we know the basics of placing different types of elements on our site, it’s time to learn about some basic formatting tricks. First, we need to do some quick organization of our elements in index. Separate each element that you’d like to format differently into a different div element. For example, on my index, I’m going to separate the title and short description, the menu, and the image. Each div will look like this:
<div>
<h1>Title Here</h1>
<p>This is a site where I will display my portfolio work.</p>
</div>I’m also going to give each div a class name so I can identify them in style.css for formatting. Give your div classes names that will be easily recognizable / identifiable on your style sheet. Here’s an example:
<div class = "menu">
<ul>
<li> <a href = "work.html"> WORK </a> <li>
<li> <a href = "about.html"> ABOUT</a> <li>
</ul>
</div>Just like with an image or link, the class name goes within the opening tag of the div.
Step 10: Styling classes.
To format the items in the divs you created above, you’ll access them by their class name. To do so, write a section for each on your style sheet like this: .classname {}. So if, for example, you wanted to change the color of all text within a certain class, you would set color inside .thatclass{}.
Step 11: Flex boxes!
I’m going to teach you a method of displaying divs called “flex boxes.” The best way to describe a flex box is a module on your page that contains one or more elements. The flex box allows you to format the items within. You can
specify the axis direction of items within, the spacing, the placement of the flex box on the page, alignment of items, among other things. This link is really helpful for learning more about flex boxes:
<https://css-tricks.com/snippets/css/a-guide-to-flexbox/>
Take a few minutes to peruse the above link to get an idea of flex box possibilities.
I’ll start by centering my title and header. I’ve given the div that both are within a class name header. First, I have to specify that I’m using a flex box by typing in .header{} (on style.css) the following: display: flex;. Then, I’ll use flex-direction: column; to specify how I want my items (item 1: specified by <h1> in index; item 2: specified by <p> in index) in the box to stack. Then, to center the items, I’ll use align-items: center;. My code looks like this:
.header {
display: flex;
flex-direction: column;
align-items: center;
}Step 12: Some styling tips.
Now I’m going to move my two menu buttons to the middle of the page. This time I’ll use flex-direction: row; inside of .menu{}, the classname that I’ve given my menu div. You actually don’t have to specify row, because it’s the default, but I do anyways just for clarity. To move the buttons to the center of the page, I’ll use justify-content: center; instead of align-items like I used for the column layout. Try opening in a browser to see what this does.
I also want to make the menu buttons more clearly “buttons.” I’m going to add a little spacing between them, a background color, and a hover effect. I’ll do this by formatting both the li and ul elements in style.css, like this:
ul {
list-style-type: none;
padding: 0;
}li {
display: inline-block;
width: 150px;
text-align: center;
background-color: rgba(255, 0, 0, 0.5);
padding-top: 10px;
padding-bottom: 10px
margin-left: 10px;
margin-right: 10px;
color: black;
}
You may be wondering what padding and margin mean; these are the space around an element. I’ve found the best way to understand how padding and margin work is to play around with them on a certain page element. This diagram is also useful:
Try implementing these changes in your own code. Change each line of style.css or delete it momentarily to see the effect each has upon the appearance of your elements!
Here’s how to implement a hover state for your menu buttons:
li:hover {
background-color: rgba(255, 0, 0, 0.75);
}Try making your own!
Step 13: Multiple images!
Let’s try formatting multiple images. Let’s use square images, as if we were formatting thumbnail images. Find three square images and place each in your img folder. Then go to index. We’ll replace the image we had before with these three images. So, link to each of them the same way you did before. Keep all three within the image div that you created earlier. Experiment with the justify content setting! If you want to add spacing, make a new class and apply it in each tag in index, and then add some padding in style.css. Here’s what my index looks like:
<div class = "homepageimage">
<img class = "thumbnail" src = "img/square1.jpg" alt = "thumbnail
1" width = "300px" height = "300px" />
<img class = "thumbnail" src = "img/square2.jpg" alt = "thumbnail
2" width = "300px" height = "300px" />
<img class = "thumbnail" src = "img/square3.jpg" alt = "thumbnail
3" width = "300px" height = "300px" />
</div>and my style.css:
.homepageimage {
display: flex;
justify-content: center;
}.thumbnail {
padding-left: 10px;
padding-right: 10px;
}
That’s it for this tutorial! You’ve learned how to write text, link to other pages, create menus and buttons, place images, and use flex boxes — all things I’ve found most useful in my exploration of basic web development.
If you’re interested in learning more, I recommend the HTML and CSS tutorials offered free by codecademy; visit
https://www.codecademy.com/catalog/subject/web-development
for a list of cool tutorials.
w3schools.com is also a great resource if you have more specific questions about certain features. I highly recommend perusing their site for a greater understanding of all of the possbilites presented by HTML and CSS!
Happy exploring!
