HTML Site in 10 Minutes or Less

HTML Site in 10 Minutes or Less

Disclosure: scottyfullstack.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.

Scotty Parlor

Sept. 15, 2020

Read Time 15 min

                

Starting out can be discouraging and mind numbing. If you haven't checked out 5 Ways to Break into a Technology Career with NO prior experience, check that out and get an idea of some practical ways to enter this industry. And don't forget to subscribe!





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.

Check out the video at scottyfullstack and be sure to subscribe!

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!