Categories
html-css-tutorials

Create an HTML page resume by using 9 html element with ease

Are you looking to create an HTML page?
In this HTML tutorial, you will create your first HTML page by making use of nine html elements. 

For this exercise, I have taken the design of a simple resume. This is how your HTML resume will look like.

As promised, we will learn HTML CSS by doing.

This tutorial is part 1 of the exercise to create a simple HTML CSS Resume.

I also recommend going through these 14 HTML CSS basic

This is how your HTML Page Resume will look like.

Create an HTML page resume
Create an HTML page resume

We will only use some HTML elements semantically and get the resume’s structure and content ready in this part.

In part 2 (coming soon), we will add some basic styling to the first HTML page created by you.

Tools needed to create an HTML page

We need the following tools to create an HTML page:

  • An HTML Editor (local or online editor)
  • A browser to test 

For this tutorial, I am using glitch.com, which is an excellent online editor for coding.

So let’s create an HTML page resume with the following content:

I have divided this simple HTML page resume into the following five sections

  • Your Name& A short description of your experience and current status
  • Your photograph
  • Your Experience history
  • Your Academic background or qualification
  • Contact details

Here is the list of nine HTML elements that we will use to create an HTML page

In this HTML tutorial, we will learn and make use of the following HTML elements:

  • <section>
  • <p> – Paragraph element
  • Header elements (from h1, h2, h3)
  • <strong>
  • <img /> – element to display your photograph
  • <hr /> – Horizontal rule
  • <ul> – Un ordered list element

Create an HTML page- start with a blank HTML document

Start by creating a blank HTML page that has the base HTML elements.

When you create a page using glitch.com, or any HTML editor, they provide a blank page with the default elements. Below is the code on how your blank page should look. You can simple copy and paste the code below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    
    
  </body>
</html>

Below is the screenshot of the code of a blank HTML page.

Click here to read more about the anatomy of an HTML page. 


Create an HTML page – Section one – Add name and description

Let’s start by adding your name and a short description. We will make use of the following seven HTML Elements for this section:

  • Section
  • h1
  • strong
  • paragraph

Create an HTML page – Section Element

The <sectionelement defines a section in a document. According to W3C’s HTML documentation: “A section is a thematic grouping of content, typically with a heading.” 

A web page is split into sections for introduction, content, and contact information.

Below is the code with section element inside the body element.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
    </section>
  </body>
</html>

Create an HTML page – h1 Element

The HTML h1–h6 elements represent six levels of section headings. h1 is the highest section level, and h6 is the lowest.

As a thumb rule, one HTML page should only have one h1 HTML element, and it should have the most important keyword of your page.

h1 element is primary used for page titles.

Look at the code below, I have added an h1 element inside the section element and I added my name inside the h1 element

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        Parvez Ansari
      </h1>
    </section>
  </body>
</html>

Create an HTML page – Strong Element

The HTML <strongelement defines text with strong importance. The content inside is typically displayed in bold.

Look at the code below, I have added a strong element inside the h1 element to give some importance to my first name

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
    </section>
  </body>
</html>

An element inside an element is called Nesting in HTML.

Use paragraph element to Create an HTML page

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Look at the code below. I have used the paragraph element to display the description.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
      <p>
        A developer turned User Experienced Designer Writer, Trainer and a Mentor
      </p>
    </section>
  </body>
</html>

Let’s take at the screen shot below. This is how your html page should look in the browser.

HTML Page Resume - Name and Description
HTML Page Resume – Name and Description

If your page looks like the screen shot above, you have developed the first section of your HTML Page resume.

In this section we learnt the following four html elements:

  • <section>
  • <h1>
  • <strong>
  • <p> paragraph

Create an HTML page – Section two – Add photograph

In this section we will add our photograph.

We make use of the Image element to insert a photograph in an HTML page

Use Image Elemenr to Create an HTML page –

The HTML <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image. The <img> tag is empty, it contains attributes only, and does not have a closing tag.

We link an image by providing the image path in the src (source) attribute.

Lets take a look at the code below

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
      <p>
        A developer turned User Experienced Designer Writer, Trainer and a Mentor
      </p>
    </section>
    <section>
      <img src="https://i.ibb.co/9yWxfzw/parvez-pp1.jpg" alt="parvez-pp1" border="0">
    </section>
  </body>
</html>

I created another section for the photograph and added an image element.

I also added the path of the image in the value of the src attribute.

For this exercise I have uploaded the photograph on https://imgbb.com/ which is a free site that allow you upload images.

Create an HTML page – hr Element

The <hrtag defines a thematic break in an HTML page (e.g. a shift of topic). The <hrelement is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

Take a look at the code below, I added a hr element between the two section to create a break.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
      <p>
        A developer turned User Experienced Designer Writer, Trainer and a Mentor
      </p>
    </section>
    <hr />
    <section>
      <img src="https://i.ibb.co/9yWxfzw/parvez-pp1.jpg" alt="parvez-pp1" border="0">
    </section>
  </body>
</html>

With the code above, your html page should look like the following screen shot.

HTML Resume photograph
HTML Resume photograph

In this section we learnt the following two html elements:

  • <img /> image element
  • <hr /> (horizontal rule)

Create an HTML page – Section three – Experience history

In this section we will add some experience history.

We will make use of the next two level of headings after h1 element.

h2 element

The HTML <h2tag defines the second level heading in the HTML document. This tag is also commonly referred to as the <h2element.

h3 element

The h3 element represents a level 3 heading. 

Look at the code below

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
      <p>
        A developer turned User Experienced Designer Writer, Trainer and a Mentor
      </p>
    </section>
    <hr />
    <section>
      <img src="https://i.ibb.co/9yWxfzw/parvez-pp1.jpg" alt="parvez-pp1" border="0">
    </section>
    <hr />
    <section>
      <h3>
        Experience History
      </h3>
      <h2>
        Design Capital Ventures LLP <strong>Senior Product Designer</strong>
      </h2>
      <p>
        March 2019 to Till Date
      </p>
    </section>
  </body>
</html>

I added a new section for Experience history.

I have made use of h3 element to create a sub heading for “Experience history” and I used h2 element to display the name of the organisation that I am working for.

I am using a paragraph element to display the duration of this experience.

Let us now add some roles and responsibilities by making use of a unordered list element.

Unordered List Element

The HTML <ul> element represents an unordered list of items, typically rendered as a bulleted list.

The <ul> element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unorderedlist items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square.

Look at the code below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
      <p>
        A developer turned User Experienced Designer Writer, Trainer and a Mentor
      </p>
    </section>
    <hr />
    <section>
      <img src="https://i.ibb.co/9yWxfzw/parvez-pp1.jpg" alt="parvez-pp1" border="0">
    </section>
    <hr />
    <section>
      <h3>
        Experience History
      </h3>
      <h2>
        Design Capital Ventures LLP <strong>Senior Product Designer</strong>
      </h2>
      <p>
        March 2019 to Till Date
      </p>
      <ul>      
        <li>Actively participate in product definition and contribute ideas</li>
        <li>Conduct User Interviews and identify insights</li>
        <li>Brainstorm and propose ideas</li>
        <li>Designing Userflows / Wireframes / Interfaces</li>
        <li>Develop Interactive Prototype using Figma and HTML/CSS</li>
        <li>Designing the Mobile App (iOS + Android)</li>
        <li>Design Emailers</li>
      </ul>  
    </section>
  </body>
</html>

If you have followed the instruction correctly, your html page should look like the screenshot below.

HTML page resume with experience
HTML page resume with experience

With the code above we have added the third section to our html page.

In this section we learnt the following three html elements:

  • <h3>
  • <h2>
  • <ul> Unordered list

Create an HTML page – Exercise 

Now that you have created your first HTML page let’s test your learning by working on the following task.

  • Add three more sections (skills, Achievements & Awards, Personal details) similar to how you added the experience section.
  • Add multiple experiences within the Experience section

Conclusion

In this tutorial we learnt to create an HTML page which is a simple resume by making use of the following nine html elements.

  • <section>
  • <p> – Paragraph element
  • Header elements (from h1, h2, h3)
  • <strong>
  • <img /> – element to display your photograph
  • <hr /> – Horizontal rule
  • <ul> – Un ordered list element

Click here to view the entire code.

Please subscribe and stay tuned for my next CSS tutorial in which we will apply learn and write your first css code to apply some basic styles to this HTML resume

Feel free to leave feedback.

Categories
html-css-fundamentals

How these 14 HTML CSS basics can clear your fundamentals

Do you still struggle while coding in HTML CSS? Perhaps you need to revisit your HTML CSS Basics.

It is of utmost importance to have your basics very clear if you wish to learn any language.

HTML CSS Basics
HTML CSS Basics

This post will clear your basics of HTML CSS.


HTML CSS basics – What is HTML?

What is HTML?
What is HTML?

HTML stands for HyperText Markup Language. 

HTML is the standard markup language for creating Web pages. 

HTML describes the structure of a Web page. 

HTML consists of a series of elements. HTML elements tell the browser how to display the content.

Every programming language has a version. HTML5 is the latest and current version of the HTML language.

Click here to read more about HTML


HTML CSS basics – What is an HTML document?

What is an HTML Document
A basic HTML document

An HTML document is a file containing Hypertext Markup Language, and its filename most often ends in the .html extension or .htm. 

An HTML document is a text document read in by a Web browser and then rendered on the screen.


HTML CSS basics – Anatomy of an HTML document

Anatomy of an HTML document
Anatomy of an HTML document

Any valid HTML document should consist of the following HTML elements:

  • <!DOCTYPE html> — doctype. It is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML mean automatic error checking and other useful things. However, these days, they don’t do much and are just needed to make sure your document behaves correctly. That’s all you need to know for now.
  • <html></html> — the <html> element. This element wraps all the content on the entire page and is sometimes known as the root element.
  • <head></head> — the <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn’t the content you show to your page’s viewers. It includes keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
  • <meta charset= “utf-8”> — This element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
  • <body></body> — the <body> element. It contains all the content that you want to show to web users when they visit your page, whether that’s text, images, videos, games, playable audio tracks, or whatever else.

HTML CSS basics – What is an HTML element?

HTML Element
HTML Element (the paragraph element)

An HTML element is an individual component of an HTML document. It represents semantics or meaning. For example, the title element represents the title of the document. We will learn about the HTML attributes in the next chapter.


HTML CSS basics – Anatomy of an HTML element

Anatomy of an HTML element
Anatomy of an HTML element

The main parts of an HTML element are as follows: 

The opening tag: This consists of the element name (in this case, p), wrapped in opening and closing angle brackets. 

The content: This is the actual content that you want to show to the user.

The closing tag: This consists of the element name (in this case, p), wrapped in opening and closing angle brackets with a / prefix. 

The element: The opening tag, the closing tag, and the content together form the element.

You can read more about anatomy of an HTML element


HTML CSS basics – What is an HTML attribute?

HTML attribute
HTML attribute (class)

HTML attributes are special words used inside the opening tag to control the element’s behavior. HTML attributes are a modifier of an HTML element type.

Attributes contain extra information about the element that you don’t want to appear in the actual content.

You can read more about HTML attribute in the article anatomy of an HTML element


HTML CSS basics – What are Tags in HTML?

Tags in HTML
Tags in HTML (paragraph)

Any HTML element comprises of tags. 

Pairing HTML elements have an opening and closing tag.

Inline or Empty HTML element has a self-closing tag.


HTML CSS basics – What is CSS?

What is CSS?
What is CSS?

CSS stands for Cascading Style Sheets. 

CSS is used to style the HTML elements.

The appearance of an HTML element on the screen, paper, or mobile is defined using CSS.

Click here to read more about CSS


HTML CSS basics – What is a CSS file?

A simple CSS file
A simple CSS file

A CSS file in an independent file with an extension .css.

A CSS file has CSS rules written to control the HTML page’s appearance and its elements.


HTML CSS basics – What is a CSS Ruleset?

CSS Ruleset
CSS Ruleset

CSS ruleset consists of a selector and a declaration block: The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.


HTML CSS basics – What are CSS Selectors?

CSS Selectors
CSS Selectors

CSS selectors are used to selecting an HTML element or a set of HTML elements to assign styles.

CSS selectors are patterns used to select the element(s) you want to style.

In the example above ‘p’ is the selector.


HTML CSS basics – What are CSS properties?

CSS Properties
CSS Properties

We assign a style to a particular element using a CSS property.

Each property has a set of possible values. 

In the example above we are assigning the value ‘red’ to the property color.

This declaration means that the text color of all the paragraph elements should be red.


HTML CSS basics – Anatomy of a CSS ruleset

Anatomy of a CSS ruleset
Anatomy of a CSS ruleset

The whole structure is called a ruleset. (We often refer the term ruleset to as a just rule.) Note the names of the individual parts:

Selector

The HTML element name at the start of the ruleset. It defines the element(s) to be styled (in this example, <p> elements). To style a different element, change the selector.

Declaration

A declaration is a single rule like color: red; 

It specifies which of the properties of the element you want to style.

Properties

These are ways in which you can style an HTML element. (In this example, color is a property of the <p> elements.) In CSS, you choose which properties you want to affect the rule.

Property value

To the right of the property—after the colon—there is the property value. The property value chooses one out of many possible appearances for a given property. (For example, there are many color values in addition to red.)

Note the other important parts of the syntax:

  • Apart from the selector, we should wrap the ruleset in curly braces. ({})
  • Within each declaration, you must use a colon (:) to separate the property from its value or values.
  • Within each ruleset, you must use a semicolon (;) to separate each declaration from the next one.

To modify multiple property values in one ruleset, write them separated by semicolons, like this:


HTML CSS basics – How to include CSS in HTML

How to Include CSS in HTML page
How to Include CSS in HTML page

There are three different ways to include CSS in HTML

  1. By linking an external CSS file
  2. By writing internal CSS in HTML page
  3. By writing Inline CSS in HTML page

You can read the more about this in my article How to include CSS in HTML page

Conclusion

Each of the HTML CSS Basics listed on this page deserver a post of its own (stay tuned).

I hope these HTML CSS Basics are helpful and have cleared your doubts and gained you some confidence.