If you truly have little to no experience, it can be difficult to conceptualize and see what the future could hold for your creativity.
In this tutorial, I hope to get you rolling with a quick HTML/CSS portfolio addition.
To see what we are building, checkout this demo. It includes a home and about page, with a CSS animation using Keyframes.
My project folder looks like the following
.
├── about.html
├── main.css
└── main.html
1. Open new files called main.html, main.css, and about.html and open main in the browser
*the following is for use in the terminal with VSCode as my editor, if you are not familiar with this, open a notepad and use the file system to create and save new files.
touch main.html main.css about.html
code main.html
open main.html
2. In main.html, start out by creating the structure we will fill in
<!DOCTYPE html>
<html>
<head>
</head>
<header>
</header>
<body>
</body>
</html>
Here we define our html document, our head tags (where we will link our css file and document title), the header tags for our navigation, and the body for our content div. All of these with closing (</>) tags.
3. Let's fill in the <head> tag
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css">
</head>
<header>
</header>
<body>
</body>
</html>
Here we have two tags within <head>, the title and link tags.
The <title> will show up in your browsers tab and be readable by crawlers for SEO. So make sure it makes sense. The <link> is to attach our stylesheet to this document. Rel let's our doc know this is a stylesheet, and href is the path to our stylesheet. In this case, it is in the same path as our main.html
4. Let's add some navigation
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css">
</head>
<header>
<nav>
<a href="./main.html">Home</a>
<a href="./about.html">About</a>
</nav>
</header>
<body>
</body>
</html>
Pretty straight forward here. Within our <header> tags we have a <nav> tag that then includes two inline <a> tags. As seen in our <link> tag about, the href here is the path to the html doc we want the browser to display. In between the <a> tags we have visible text for the link (i.e. Home, About)
5. The Body - Both the main.html and about.html
./main.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css">
</head>
<header>
<nav>
<a href="./main.html">Home</a>
<a href="./about.html">About</a>
</nav>
</header>
<body>
<div class="content">
<h1>scottyfullstack.com</h1>
</div>
</body>
</html>
./about.html - Literally a copy of main but with content updates.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css">
</head>
<header>
<nav>
<a href="./main.html">Home</a>
<a href="./about.html">About</a>
</nav>
</header>
<body>
<div class="content">
<h1>About</h1>
<p>This is my about page!</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum."</p>
</div>
</body>
</html>
We have three types of tags here between the files: <div>, <h1> and <p>. The <div> is a "divider" that will contain other elements. We are targeting this with a "class" called "content". The <h1> is a formatted heading that is bold and large, while the <p> is a paragraph tag for standard text.
6. Refresh your Browser Page:
Well this sucks...
Because we need styling.
7. Open main.css and let's add our css targeting specific elements
There is a lot going on here if you don't know css. If you need a commentary on this section, check out the youtube video walkthrough.
./main.css
body {
margin: 0;
}
header nav {
position: fixed;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
height: 4rem;
}
nav a {
color: white;
text-decoration: none;
font-size: 1.5rem;
margin: 0 3rem;
font-family: sans-serif;
}
.content {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, black, slateblue);
flex-direction: column;
}
.content p {
color: white;
font-family: sans-serif;
width: 70%;
text-align: center;
}
.content h1 {
color: white;
font-size: 3rem;
font-family: 'Monoton', cursive;
font-weight: 400;
animation-name: fadein;
animation-duration: 3s;
}
At this point if you refresh you may notice the text isn't quite right, even though we set font-family to Monoton under .content h1. Let's fix that now.
8. Import a google font
Head to https://fonts.google.com and search for "Monoton".
Click it and then on the right click on the "Embed" tab:
Grab that reference from inside <script> tags and paste it at the top of your css:
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
body {
margin: 0;
}
header nav {
position: fixed;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
height: 4rem;
}
nav a {
color: white;
text-decoration: none;
font-size: 1.5rem;
margin: 0 3rem;
font-family: sans-serif;
}
.content {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, black, slateblue);
flex-direction: column;
}
.content p {
color: white;
font-family: sans-serif;
width: 70%;
text-align: center;
}
.content h1 {
color: white;
font-size: 3rem;
font-family: 'Monoton', cursive;
font-weight: 400;
animation-name: fadein;
animation-duration: 3s;
}
9. Adding the Animation
In a lot of fancy sites, animations are done through javascript and subsequent libraries. But often a little css magic can make the dullest site pop. We will be using Keyframes for this.
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
body {
margin: 0;
}
header nav {
position: fixed;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
height: 4rem;
}
nav a {
color: white;
text-decoration: none;
font-size: 1.5rem;
margin: 0 3rem;
font-family: sans-serif;
}
.content {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, black, slateblue);
flex-direction: column;
}
.content p {
color: white;
font-family: sans-serif;
width: 70%;
text-align: center;
}
.content h1 {
color: white;
font-size: 3rem;
font-family: 'Monoton', cursive;
font-weight: 400;
animation-name: fadein;
animation-duration: 3s;
}
@keyframes fadein {
from {transform:scale(1.1);opacity: 0;}
to {transform:scale(1);opacity: 1;}
}
As you can see at the very bottom, we define the animation as "fadein" (referenced just above at .content h1 ) following @keyframes. We are doing a transform scale 1.1 and opacity of 0 to scale of 1 with opacity at 1. This delivers the shrinking fade in effect you see.
You did it! This is a simple example that should give you some pretty cool tools to study and expand on. Check out my youtube channel for a more detailed walkthrough.
Don't forget to sign up on the site for coming info!