Static Website for Beginners

Part 1

Photo by Pankaj Patel on Unsplash

So this week I want to help get a total beginner to get some stuff on a webpage.

We will use mostly html and css, possibly some js too.

Okay so first this will assume that you have a code editor and at least know what the terminal is. I will be using VSCode on a macbook pro.

If you don’t have VSCode follow this link and it will get you set up.

Alright first let's open our terminal on a mac …

lets create a folder on our desktop by first cd’ing into it…

this is where our project will live. Know let’s create a new folder…

then cd into that…

now from here we can open vscode by typing code .

We have a blank vscode folder.

Let’s add three files by clicking the new file icon.

An HTML, a CSS, and a JS file. These can be named whatever you want the names I chose are just standard convention.

We will start in the HTML file. This is how we get everything onto a web browser.

This is a basic starting point for a html file. Where it says Title you can put anything in there. The name of your site for example. We can go back to our terminal now and open our index.html page like so…

and we will see a blank web page with our name on the tab.

So now anything we put in the body will show up on the page.

So let's put some stuff on here and style it a little.

this will become our navbar but without styling this is what it will look like.

So lets style our navbar.

and to make sure our styling shows up we need to let the html file see it.

We add a link tag to the head. it can go anywhere in the head I usually just put it last, but it has to be inside the head tag.

Now with a lot of css.

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh Sans", sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #9518fc;
transition: all 0.3s ease;
}

we have a navbar…

With clickable links.

Next week I will go into more detail about the styling etc of the navbar as well as adding content to our webpage.

Thanks for reading