Tutorial create web portfolio with HTML5 and JavaScript

Tutorial create web portfolio with HTML5 and JavaScript | Ecency

What Will I Learn?

You will learn about HTML5
You will learn how to use CSS
You will learn how to use JavaScript
You will learn to create content on structured websites.
You'll learn to create responsive websites on all devices.

Requirements

You have a basic knowledge of HTML
You have a basic knowledge of CSS
You have a basic knowledge of JavaScript
Text Editor For Coding or Script

Difficulty

Intermediate

Tutorial Contents

As we know HTML5 is one of Waring Wera Wanua Consortium's works (World Wide Web Consortium, W3C) to define a single markup language that can be written in HTML or XHTML. HTML5 is the answer to the development of HTML 4.01 and XHTML 1.1 which has been running separately, and is implemented differently by many web-maker software.
And in this tutorial, the author will tell how to create a portfolio website or better known as biodata website about yourself.
Display portfolio website that we will make later, like this:

Header View

Screenshot from 2018-02-01 16-52-49.png

Section About

Screenshot from 2018-02-01 16-52-58.png

Section Gallery

Screenshot from 2018-02-01 16-53-09.png

Section Footer

Screenshot from 2018-02-01 16-53-17.png

Follow these steps to get started creating a personal web portfolio :

Next create a folder, css file placed in the css folder, the image for the gallery is placed in the image folder, while the popup plugin is in the popup folder.

Screenshot from 2018-02-01 17-00-31.png

Open Text Editor
Create HTML5 Structure As below :

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>TUTORIAL | Web Fortofolio Using JavaScript-HTML5</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="popup/magnific-popup.css">

<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"></script>

</head>

<body>
<script type="text/javascript" src="js/scripts.js"></script>

</body>

</html>

Next we will create a website header, copy the html code below and paste it into the tag <body> See the code below:

<div id="banner">

<header id="logo">

<img src="img/a.png" alt="">

<h1>Sysadmin Web Developers</h1>

<span id="jobdesc">

I'am Steemit And Utopian-io

</span>

</header>

<div id="overlay"></div>

</div>

Create About You Work

Screenshot from 2018-02-01 17-25-56.png

After that create the gallery section in accordance with the rules of the Magnific Popup plugin.

Screenshot from 2018-02-01 17-27-37.png

Then this part is up to you want to make a word about what, this is about the words of me :

Screenshot from 2018-02-01 17-33-42.png

And finally make a footer like this :

Screenshot from 2018-02-01 17-37-43.png

After that we will learn here to create website content, which we learn that is from CSS which is used for display view: table, table-row, and table-cell to create high-level column in class section.