How to make a Basic HTML portfolio website??

how to make a basic html portfolio website

hello do you want to make a basic HTML portfolio website? If you want to make a portfolio and you are short of money then I will suggest you to learn HTML and create a basic website. In this blog post I will guide on how to make a basic HTML website with the help of atom editor.

HTML stands for hypertext markup language. It is a language used by computer machines to understand or convert basic human language into to search engine language. To make any website you will need a domain and hosting. But if you want to make a portfolio website and use it for personal use like attending an interview then machine language generated site can be showcased in your project.

How to Make a portfolio Website by Html ??

Now I will tell you the steps that you will need to follow in order to make a portfolio website using HTML. Consider the below mentioned steps:

  • To code in HTML you will need a text editor like atom all notepad.
  • Atom is a text editor where you can install different type of packages that you can use to beautify and get extra features in coding which is not found in notepad.
  • There are other multiple text editors like VS code, sublime, bracket, you may choose according to your system and device.
  • Now that you’ve installed atom you will have to make it project file where you will store all the code. To do that and then right click on the project file in text editor and create a file named index.html.
  • Index.html is the basic home page file of your website.
  • Now normally we use HTML5 version to check that you can type HTML Plus enter.
  • You will get a code that is used again and again in a basic HTML website. This is known as boilerplate code.
  • For that you will need to install a package plugin in atom editor known as Emmet plugin. This will automatically generate the boilerplate code and also help in in auto suggestions of code in HTML.

Now that you are ready with your code let us drive deep into into details of each and every code used in the the process of making heading and body of your code.

How to structure the code in HTML to make a basic portfolio website??

A basic boilerplate code consists of head section body section enclosed in between HTML tags at the beginning and at the end.

If you are new to HTML a basic boilerplate code looks like this:

<!DOCTYPE html>



<meta charset=”utf-8″>






now let us understand what each and every line of the sport means.

  1. doctype HTML means the document type of HTML used in the current version. This is the default in HTML5 version.
  2. HTML enclosed in between opening tag and close tag is way of representing HTML.
  3. Heading tag tell the browser about the website.
  4. Body tag help us to write the code which is the main content of our website.

There can be six heading tags in HTML website i.e., H1 to H6.

To create a heading in your website use H1 tag. H1 tag must be used only once in a website. H2 tag to H6 tag must be used in a nested way.

We mention the title of our website in the title tag. The meta charset are the set of characters that can be used in the programming. The utf8 system includes all the setup characters which is in Unicode system so it is used as a default.

Let Drive deep into code of Html

Before approaching any further i would like you to grab pen and paper and make a layout of a basic portfolio.

Keep H1 as your name,H1 will go into the body section. Then we use the p tag also known as the paragraph tag that is shown as <p> </p>.

In the paragraph tag right about yourself in between the the starting and ending tag. To italicize we use <em></em> tags. This is also known as emphasis.

To bold any text we use <strong></strong> tags.

I would like you to note all your code can be lost if you don’t save it to do that I would like you to press control + S in windows.

If you want to add a horizontal line we use the HR tag. <hr> tags. This tags that sell closing tags that we don’t need any closed bracket.

Remember to save the code as mentioned earlier.

Also all this code is saved locally in the computer. To beautify your code go to packages and search for atom beautify then press beautify.

You will get automatic recommendations as you are using a Emmet plugin. This will help you in your code.

Like this you can add H2 and other heading and make a resume in HTML website. To see what you are doing you can copy the full path from your text editor by going into the edit button and paste it in Chrome browser.

This way you can see your work progress. Keep a reference website as your help.

You can add images also in your HTML website. Do that by using <img src=”url.jpg”alt=””> in or after any heading tag.

Src stands for source. It can be URL or any image address from local computer.Alt means alternate text that is used by search engines to identify what is your image about and normally news for ranking your image in search engines.

You can also add list to your website by using <ol></ol> tags. This is a list tag for ordered list.

The unordered list are represented by <ul>.

Now we will come to the conclusion of this blog on how to make a basic portfolio website using HTML??


I truly hope that this blog was helpful for you in order to make a basic portfolio for yourself. As a Challenge I want you to comment your code below so that I can understand understood what I have mentioned above.

I will help you with any difficulties if you face for that you can connect with me in the contact form this website.

Until then keep on practicing.For more on HTML I follow documentation in Mozilla Documentation Network for HTML and when I get stuck in any code I follow the website Stack Overflow I will request you all to do the same.

How do I create a portfolio website in HTML?

You need a text editor to make a portfolio website in HTML.In the above tutorial I have used Atom Text Editor.

How do you make a portfolio website for beginners?

If you want a portfolio website you can use HTML language to create a simple one or you can buy a domain and hosting and start a setup a WordPress website.

What is the best book to learn HTML and CSS?

You can look into this book from Amazon as a resource but I think you need a practical approach if you want to learn any coding.

Leave a Reply

Your email address will not be published. Required fields are marked *