.jpg)
Introduction
In this article I will show you the “magic” world of HTML and CSS. And believe me it’s not that “magical” and it is actually pretty easy, you just need to know a few principles. And when you keep those in mind it’s not that complicated and after a while it of typing HTML and CSS it will be like typing a text document.
At the end of this article you have created the first section of your own portfolio website. It will run in the browser and it will look something like this:
Installation
To get started you need a program to easily type HTML and CSS. Visual Studio Code is the easiest and most used in the industry. It’s very intuitive and simple. It works for Windows and Mac.
Download Visual Studio Code by this URL:
https://code.visualstudio.com/download
- Download Visual Studio Code for your operating system (so Windows or Mac)
- Click Run
- Accept the agreement
- Click next
- Click next
- You will get a screen with some settings, you can just keep it on the default values and click next
- Click install
- When the installation is done click finish
Open Visual Studio Code and move on below, we will make Visual Studio Code a bit more pleasant to work with.
Making Visual Studio Code even better
Visual Studio Code allows third party developers to create extension to make development easier. We’re going to download 2 extensions that will come in handy later on.
The first one is vscode-icons. It’s not really functional but it will give files and folders an icon and will make Visual Studio Code a bit more intuitive.
In Visual Studio Code in the left menu click the cube icon
Type in the search bar vscode-icons
Click install
Once installed it will prompt which theme you want to use. They only have one option, so go for that one. Click it and it will activate the theme and activate vscode-icons extension.
We want to run the HTML and CSS in the browser. There are different ways of doing that. And we’re going to use Live Server, it’s one is the easiest.
Search for Live Server in the search bar
Click install
Now we’re all set to create your first HTML file.
Creating your first HTML file
Congratulations your PC is now ready to start coding HTML. Next up we need to create a working directory.
In Visual Studio Code in the top left click File and than Open Folder…
In Windows go to your desktop folder (any folder you prefer) and click create folder.
Type in HTML and press [ENTER]
On the bottom right click “Select Folder”
Okay great know you’ve created and selected a folder that we will be working in from Visual Studio Code.
Now it’s time to create a HTML file. Do a right click in the left folder panel and select New file.
Call it index.html and press [ENTER]
In the index.html file, add the next piece of code.
<html>
<head>
</head>
<body>
Hello World
</body>
</html>
Now your index.html will look like this:
Now it’s time to get the browser up and running. In Visual Studio Code press on your keyboard CTRL + SHIFT + P. And type in Live Server and press [ENTER]
Your browser will automatically open and you will see:
If the browser doesn’t automatically open, go to your browser type http://127.0.0.1:5500/index.html in the browser URL and it should open the page like the screenshot above.
Congratulations! You’ve just created your first HTML file and got it up and running on your own PC.
Before we go on for the final step let’s talk about a few principles
Before we start filling the HTML file you need to know a few principles I was talking about earlier. You need to know what < html >, < head > and < body > means.
< html >: This is called a “tag” and you basically say to the hey browser I’m going to type some HTML text between < html > and</ html >. The browser knows that everything between that is HTML. It’s the same as you use quotes in a sentence. < html > is the start quote (“) and </ html > basically the end quote (”).
< head >: The head tag is basically the same but instead of saying to the browser there is html between the < head > and </ head >. This is basically the the settings part of the HTML file. It will become more clear later on just remember < head ></ head > is the settings part.
< body >: The body tag is the fun part that’s what users see. In the example you’ve seen the word Hello World the body “tags”. The Hello World is also displayed in the browser. So remember < body ></ body > is what users directly see in the browser.
Final step: Creating your personal website
Now we’ve learned a few principles you need to know to understand the basics of HTML. We’re now going to fill the HTML file for your portfolio website.
- Putting an image of you in the HTML
- Setting a title and subtitle
- Setting a background image
- Putting an image of you in the HTML
Putting an image of you in the HTML
Find an image of you and put it into the HTML folder. Remember that the HTML folder is in your desktop folder. Once you’ve copied the image to the HTML folder you will see it appear in Visual Studio Code.
Now replace the HTML file with the following code:
<html>
<head>
<style>
.circle { width: 270px; height: 270px; border-radius: 150px; -webkit-border-radius: 150px; }
</style>
</head>
<body>
< img src="./profile-photo.jpg" class="circle" />
</body>
</html>
📢 Attention! Please make sure you edit “profile-photo.jpg” with the file name of your own picture.
Now you see your own picture appear in the browser.
2. Setting a title and subtitle
Let’s get a title and subtitle. Add the < h1 ></ h1 > and < h3 ></ h3 > beneath your image in the body tag.
<body>
< img src="./profile-photo.jpg" class="circle" />
<h1>Jordan Smith</h1>
<h3>Full Stack Developer</h3>
</body>
Let’s add some CSS the head tag. You don’t need to know yet what is means. You will get there later. Replace everything between < head ></ head > with the code below.
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<style>
body { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; margin: 0; }
h1{ font-size: 72px; font-weight: 700; margin: 0; }
h3{ font-size: 24px; font-weight: 500; margin: 24px; }
.circle { width: 270px; height: 270px; border-radius: 150px; -webkit-border-radius: 150px; }
</style>
</head>
In the browser you can see your image with a title and subtitle.
3. Setting a background image
For the website we need a pretty background. You can go to https://www.pexels.com/ which is an awesome website with a lot of beautiful images who are free of any copy right. Find a beautiful image download it and put it into your HTML folder. It will appear in Visual Studio Code like below.
Before we can add the background to our website. We need to change the body a bit for layout purposes. Let’s put the image and titles between < div >and </ div >. Copy and paste the < div > “tags” below in your own HTML so it will matches your own file.
<body>
<div class="main-box">
<div class="text-vertical-center">
< img src="./profile-photo.jpg" class="circle" />
<h1>Jordan Smith</h1>
<h3>Full Stack Developer</h3>
</div>
</div>
</body>
The < div ></ div > tags itself don’t do anything. We need to add some CSS code to make the layout better. Replace the whole < head ></ head > of your file with the code below.
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<style>
body { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; margin: 0; }
h1{ font-size: 72px; font-weight: 700; margin: 0; }
h3{ font-size: 24px; font-weight: 500; margin: 24px; }
.circle { width: 270px; height: 270px; border-radius: 150px; -webkit-border-radius: 150px; }
.text-vertical-center { display: table-cell; text-align: center; position: relative; top: -50px; vertical-align: middle; }
.main-box{ display: table; position: relative; width: 100%; height: 100%;
background: url(./bg .jpg) no-repeat center center scroll; background-size: cover;}
</style>
</head>
📢 Attention! Between the < style ></ style > you see background: url(./bg.jpg). My background file name is bg.jpg. If your file name is different, make sure you change “bg.jpg” to your own file name. Once you’ve done that your website will look something like this:
If you don’t see something similar to this here is a link for the whole index.html file:
https://github.com/jordansmithtech/HTML_Beginner_Guide_Form_Zero_To_Basics/blob/master/index.html
Copy and paste the whole file to your own HTML file. And in your index.html file change “profile-photo.jpg” to the file name of your own profile picture. And change “bg.jpg” to the file name of your own background image. Once you’ve done that you should be all set!
Wrapping up
Congratulations! You’ve made your very first website. And for sure you don’t know everything about it now. That’s impossible in such a short tutorial. But you have a feeling how it’s like to program HTML and CSS. And if you play around for a bit with your code you will see changes appear and over time you will get better at it.
For the full index.html file check it on GitHub:
https://github.com/jordansmithtech/HTML_Beginner_Guide_Form_Zero_To_Basics/blob/master/index.html
Going into more detail
You feel the joy of coding HTML and CSS and you want to make your own complete portfolio website? I’ve got a course on Udemy and you will learn the basics of HTML and CSS. I will get you ready to make a full website on your own. In the course we will make your own complete portfolio website. Have a look at the link below. Hopefully see you over there!
https://www.udemy.com/course/getting-started-with-html-and-css-in-60-minutes/
Thank you for following this course. I hope you have a feeling of what HTML and CSS is. And that the “magic” of building a website has disappeared a bit. Feel free to give it a clab if you’ve enjoyed it, it really helps me out.
Good luck with coding HTML and CSS!