Log In

HTML and CSS Basics

HTML and CSS form the foundation of modern web design, allowing you to create visually appealing & functional web pages.

HTML (HyperText Markup Language) is the standard language used to create web pages. It is used to structure content and add elements such as headings, paragraphs, images, links, and more.

CSS (Cascading Style Sheets) is used to describe the presentation of HTML documents. It allows you to control layout and appearance by defining styles for elements such as fonts, colors, margins, borders, and more.

The following topics are covered in this tutorial:

  • Creating an HTML file, adding code into it using VS Code, and viewing it in a browser

  • Using basic HTML tags (html, head, title, body, div etc.) to create a web page

  • Using HTML tags (h1 to h6, p, lists, link, images) to structure content on a page

  • Adding styles using CSS and understanding the CSS box model for layout

  • Styling HTML tags using CSS and replicating the structure of a desired wireframe

  • Deploying a website to the cloud using an online hosting service

There are no prerequisites for this tutorial. The best way to learn these skills is to follow along step-by-step and type out all the code yourself.

You can find the completed code for this tutorial here: https://github.com/JovianHQ/web-development-with-html-and-css/tree/main/lesson-1-html-and-css-basics

Problem Statement

We'll explore the basics of HTML & CSS by attempting to solve this problem statement:

Create a web page that showcases job listings for Jovian, including the following:

  • A navbar at the top showing the Jovian logo
  • A header section displaying a picture and some relevant information
  • A list of job openings that include the job designation, location, and salary details
  • A footer at the bottom of the web page with important links

Make the page visually appealing and informative.

Your First Web Page

Creating a web page is quite easy! We simply need to create a file, put some text into it, and open it within a web browser. While you can use any text editor, web developers often use editors that are better suited for programming. These are called code editors or Integrated Development Environments (IDEs).

In this tutorial, we will use a code editors called Visual Studio Code. You can download it for free from this website: https://code.visualstudio.com/. Just click on the download button and follow the instructions to install it on your computer. Once it's installed, we can start creating our very first web page!

  1. First, let's create a project folder called "My First Web Page" on the computer's desktop :
  1. Launch VS Code and up the project folder in VS Code using "File" > "Open Folder"
  1. Create a new file called webpage.html and type the following code into it:
<html>
    <head>
        <title>My First web page</title>
    </head>
    <body>
        Hello HTML and CSS
    </body>
</html>

Save the file once you've added the code. We'll take a closer look at the code shortly.

  1. Open the web page in a browser. You can either double click on it, or right click and select "Open With"

Notice that the title of the page and the text shown within the page are picked from the content we've entered within the file webpage.html

Understanding HTML Tags

Tags are the building blocks of HTML, used to describe the structure and content of a webpage.

  • Tags are denoted by angle brackets, with the opening tag starting with < and the closing tag starting with '</'.

  • The opening tag of a tag pair contains the name of the tag, such as p for a paragraph tag

  • The closing tag has the same name but with a forward slash before it, such as </p>.

  • A tag contains one or more children. A tag and its children are together referred to as an element.

  • Tags can contain attributes whose values are often used to modify the behavior of the tag

  • Different tags are used to create headings, paragraphs, lists, images, links, and other elements.

  • The html tag is often preceded by a <!doctype> declaration, which is used to indicate the version of HTML used in the page. Learn more about it here: https://www.w3schools.com/tags/tag_doctype.asp

Let's look at some common tags used to create the layout of a page.

html Tag

Every web page starts with the <html> tag (and ends with it's corresponding closing tag </html>)

  • It's the outermost tag for every web page and must always be present.
  • It generally contains the tags <head> and <body> within it.
  • It has a lang attribute to indicate the language within the page.
  • You'll also often see a <!doctype> tag just above the HTML tag (learn more)

head and title Tags

The <head> tag is a container tag in HTML that appears after the <html> tag and before the <body> tag.

  • It's used to provide the title of the page, links to CSS stylesheets, and metadata for search engines and social media platforms.

  • The <head> tag doesn't contain any content that's visible on the web page itself, but it's essential for good web design and user experience.

  • You can include a variety of tags inside the <head> tag, such as the <title> tag for the page title, the <meta> tag for metadata, the <link> tag for stylesheets, and the <script> tag for scripts and code.

For now, we'll just use the <title> tag within <head>. We'll add some more tags later when we're ready to deploy our website.

body Tag

The body tag defines the main content of an HTML document.

  • It is usually placed after the head tag and contains all the visible elements of a web page.

  • The body tag can include other HTML tags such as headings, paragraphs, lists, links, and images.

  • You can add CSS styling and JavaScript code to the body tag to appearance and functionality.

Here's an example of web page with some content within the body tag:

<!DOCTYPE html>
<html>
<head>
	<title>My Web Page</title>
</head>
<body>
	<h1>Welcome to My Web Page</h1>
	<p>This is some text that will be displayed on the page.</p>
	<img src="https://i.imgur.com/diObXWC.png" alt="An Image">
	<a href="https://www.example.com">Click here to go to Example.com</a>
</body>
</html>

We'll take a closer look at the tags used above as we build out our page.

div Tag

The div tag is an HTML element used to group and organize other HTML elements together.

  • The div tag stands for "division" and is used to divide or group content into logical sections.

  • It is a block-level element, meaning it takes up the full width of its container and creates a line break after it.

  • It does not have any inherent styling or semantic meaning, and its purpose is mainly to help with layout and organization of content.

  • It can be styled using CSS to control its appearance, such as its size, background color, border, and positioning.

  • It can also be used with JavaScript to manipulate its contents or perform actions based on user interaction.

Here's an example of a web page containing various div tags:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <div>This is some content</div>
        <div>
            This content creates a new line.
            This content doesn't create a new line.
        </div>
        <div>
            <div>Some</div><div>more</div><div>lines</div>
        </div>
    </body>
</html>

The above code produces the following output:

EXERCISE: Can you explain why some content is on a new line while other content isn't?

Wireframes for Web Pages

When building a web page, it's a good idea to plan ahead and create a wireframe before diving into the code.

  • A wireframe is a rough drawing of what the page should look like.

  • It serves as a visual guide while you're writing the HTML & CSS code

  • You can create a wireframe using pen and paper, or using digital whiteboards like excalidraw.com

  • Separating the design and implementation processes helps you focus on one component at a time

NOTE: Professional web developers generally work with detailed design mockups of a page, not wireframes. These mockups are often created by UI/UX designers in accordance with a standardized design system.

Let's recall the problem statement and create a wireframe:

Problem Statement: Create a web page that showcases job listings for Jovian, including the following:

  • A navbar at the top showing the Jovian logo
  • A header section displaying a picture and some relevant information
  • A list of job openings that include the job designation, location, and salary details
  • A footer at the bottom of the web page with important links

Make the page visually appealing and informative.

The following wireframe was created using excalidraw.com :

EXERCISE: Replicate the above wireframe using Excalidraw. You can use loremipsum.io to generate fake text. Make some changes to the structure of the page e.g. add a section listing courses offered by Jovian.

Adding Content in HTML

Different tags are used to create headings, paragraphs, lists, images, links, and other elements. Let's build our page step by step using various tags.

Headings

HTML headings are used to create headings or titles within a web page

  • Headings are defined using the HTML <h1> to <h6> tags

  • <h1> is the highest level of heading and <h6> is the lowest.

  • Headings should be used in a logical order and accurately describe the content of the page

  • The <h1> tag should be used for the most important heading, <h2> for subheadings, and so on

Let's add some headings into the body of our page:

<body>
    <h1>About Jovian</h1>
    <h2>Job Opportunities</h2>
    <h3>Frontend Developer</h3>
    <h3>Backend Developer</h3>
    <h3>Data Scientist</h3>
</body>

This produces the following output:

Our web page is slowly starting to take shape!

EXERCISE: Experiment with HTML headings by following this tutorial: https://www.w3schools.com/html/html_headings.asp

Text & Paragraphs

The p and span tags are both used to define text in HTML:

  • The p tag defines a paragraph of text and is typically used for longer sections of text that form a distinct block.

  • The span tag defines a small section of text and is typically used for inline styling, such as changing the color of a single word or phrase.

We can now use the p tag to add some description below "About Jovian":

<h1>About Jovian</h1>
<p>At Jovian, we're on a mission to build
    the world's most highly reputed technical
    university, and we're building completely
    online. We offer several beginner friendly 
    courses that are taken by 300,000+ registered
    users. 
</p>

We can also add some divs and spans to indicate the locations for each job role under "Job Opportunities":

<h2>Job Opportunities</h2>
<div>
    <h3>Frontend Developer</h3>
    <span>Bengaluru, India</span>
</div>
<div>
    <h3>Backend Developer</h3>
    <span>Delhi, India</span>
</div>
<div>
    <h3>Data Scientist</h3>
    <span>Mumbai, India</span>
</div>

Tip: You can right click within VS Code and select "Format Document" to add proper indentation into the code.

This produces the following output:

Modifier tags, such as b, i, u, strong, em, etc., are used to modify the appearance or meaning of text within HTML:

  • The b tag is used to make text bold.
  • The i tag is used to italicize text.
  • The u tag is used to underline text.
  • The strong tag is used to indicate that the text is important and should be emphasized.
  • The em tag is used to indicate emphasis on text, typically displayed in italics.

NOTE: Use of modifier tags like b and i is considered outdated. It is recommended to use CSS styles instead.

EXERCISE: Use some modifier tags to highlight important keywords in the description below "About Jovian"

Lists

Special HTML tags are used to create lists, which allow for the presentation of information in an organized and structured manner.

There are two types of lists in HTML:

  1. Unordered lists:
  • Created using the <ul> tag
  • List items are added using the <li> tag
  • Bullet points are used to denote list items.
  • Appearance of bullet points can be customized with CSS
  1. Ordered lists:
  • Created using the <ol> tag
  • List items are added using the <li> tag
  • Numbers/characters are used to denote list items.
  • Appearance of numbers can be customized with CSS

Lists can be nested within each other, allowing for the creation of sublists. It's important to close all tags properly to ensure that the page is rendered correctly.

Let's some footer items to our page using the ul tag:

<div>
    <ul>
        <li>Courses</li>
        <li>Programs</li>
        <li>YouTube</li>
    </ul>
    <span>© 2023, Jovian</span>
</div>

Let's also update the "About Jovian" section to include the names of the 2 bootcamps we offer using ol:

<h1>About Jovian</h1>
<p>At Jovian, we're on a mission to build
    the world's most highly reputed technical
    university, and we're building completely
    online. We offer several beginner friendly
    courses that are taken by 300,000+ registered
    users.
</p>
<p>We also offer 2 industry-focused bootcamps:
    <ol>
       <li>Jovian Full Stack Developer Bootcamp</li> 
       <li>Jovian Data Science Bootcamp</li>
    </ol>
</p>

These changes produce the following output:

EXERCISE: Learn more about HTML lists and experiment with nested lists by following this tutorial: https://www.tutorialspoint.com/html/html_lists.htm

The a tag is used to create hyperlinks in HTML i.e. links to other web pages or a different part of the same page.

  • The a tag must have an href attribute that specifies the URL of the destination page.

  • The text that is displayed as the link is placed between the opening and closing a tags.

  • You can use the target attribute to specify where the linked page should be opened, such as in a new tab or window.

You can also create links to specific sections of a page by using the id attribute to identify the section and adding it to the URL in the href attribute.

Let's update the description section to include links to the two programs offered at Jovian:

<ol>
    <li>
        <a href="https://www.jovian.com/full-stack-developer-bootcamp">
            Jovian Full Stack Developer Bootcamp
        </a>
    </li>
    <li>
        <a href="https://www.jovian.com/data-science-bootcamp">
            Jovian Data Science Bootcamp
        </a>
    </li>
</ol>

Let's also update the footer section with appropriate links, and set them to open in a new tab:

<ul>
    <li>
        <a href="https://jovian.com/learn" target="_blank">
            Courses
        </a>
    </li>
    <li>
        <a href="https://jovian.com/learn" target="_blank">
            Programs
        </a>
    </li>
    <li>
        <a href="https://www.youtube.com/@jovianhq" target="_blank">
            YouTube
        </a>
    </li>
</ul>

This produces the following output with proper links:

EXERCISE: Learn more & experiment with various types of HTML links by following this tutorial: https://www.w3schools.com/html/html_links.asp

Images

The img tag is used to add images to an HTML page.

  • The src attribute of the img tag is used to specify the URL or file path of the image.

  • The alt attribute of the img tag is used to provide alternative text for the image, which is displayed if the image cannot be loaded.

  • The width and height attributes of the img tag can be used to specify the size of the image in pixels or as a percentage of the containing element.

  • It's good practice to include a descriptive alt attribute for each image, not only to improve accessibility but also for search engine optimization (SEO).

  • The img tag is a self-closing tag, meaning it doesn't need a closing tag. Example: <img src="image.jpg" alt="A beautiful sunset" width="800" height="600">.

Unsplash.com is a good place to find royalty-free images for your websites. You can place images in your project folder next to your HTML page, or upload them to a cloud service like imgur.com

Let's download and save this image as banner.jpg and this image as team.jpg.

Let's add an image above "About Jovian":

<body>
    <img src="banner.jpg" alt="Banner" height="240">
    <h1>About Jovian</h1>
...

Let's add another image before job opportunities:

<img src="team.jpg" height="240" alt="team">
<h2>Job Opportunities</h2>

Note that we've added a height attribute to each image to limite the space it takes up on the page.

EXERCISE: Learn more and experiment with HTML images by following this tutorial: https://www.w3schools.com/html/html_images.asp

At this point, our page contains the desired content, and we can start styling it to match the wireframe using CSS.

EXERCISE: Follow this tutorial to learn about other HTML tags and use them within the page you're building: https://www.htmldog.com/guides/html/ .

Adding Styles with CSS

CSS (Cascading Style Sheets) is used to describe the presentation of HTML documents. It allows you to control layout and appearance by defining styles for elements such as fonts, colors, margins, borders, and more.

Let's look at different ways to apply CSS styles by attempting to center the heading "About Jovian" and changing its color to indigo. The resulting page will look like this:

Inline Styles

One way to achieve this is using the style attribute directly within HTML:

<h1 style="text-align: center; color: indigo;">About Jovian</h1>

text-align and color are both properties and center and indigo are their respective values.

The style Tag

Another way to do this is using a style tag within the head or body.

<head>
    <title>My First Web Page</title>
    <style>
        h1 {
            text-align: center;
            color: indigo;
        }
    </style>
</head>

In this case, the properties are applied to all h1 tags on the page.

CSS Files

Yet another way is to create a separate file containing the styles with a .css extension and connect it to the HTML page using the link tag.

Create a file styles.css and put the following content into it:

h1 {
    text-align: center;
    color: indigo;
}

Then, put the following content into the head of webpage.html:

<head>
    <title>My First Web Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

EXERCISE: Learn more & experiment with the different ways to add CSS here: https://www.w3schools.com/css/css_howto.asp

Selectors

When using the style tag or a separate CSS file, CSS properties can be applied to the desired elements on the page using different types of selectors:

  1. Tag: We've already seen this in action above with the h1 tag.
h1 {
    text-align: center;
    color: indigo;
}
  1. ID: We can set the id attribute of a tag and then use the # prefix to select it in a CSS
<img id="banner" src="...">

#banner {
    width: 100%;
}
  1. Class: We can set the class attribute of one or more tags and use the . prefix to select it in CSS
<div>
    <h3>Frontend Developer</h2>
    <span class="location">Bengaluru, India</span>
<div>
<div>
    <h3>Backend Developer</h2>
    <span class="location">New Delhi, India</span>
<div>


.location {
    color: gray;
}

Selectors of various types can also be combined to selecting a specific set of elements matching all the conditions.

EXERCISE: Learn more & experiment with various types of CSS selectors here: https://www.w3schools.com/css/css_selectors.asp

The CSS Box Model

The CSS box model describes how HTML elements are rendered as rectangular boxes in a web page. The box is composed of several layers that determine the layout and sizing of the element.

Here are the main components of the CSS box model:

  1. Content: The actual content of the HTML element, such as text, images, or videos.
  • The size of the content can be controlled using the height and width properties.
  1. Padding: The space between the content and the border of the element.
  • Padding can be set for all sides or for each side individually.
  • The background color set for the content also applies to the padding area
  1. Border: The border that surrounds the content and padding.
  • Borders can be set for all sides or for each side individually
  • Borders can be styled with various properties such as color, width, and style.
  1. Margin: The space between the border of the element and the adjacent elements.
  • Margins can be set for all sides or for each side individually.
  • The background color set for the content does not apply to the margin area.
  • Margins for two elements can overlap, and collapses to the larger value

We'll create a file boxmodel.html to experiment with the CSS box model.

Implementing the Wireframe

We can now implement the wireframe by applying styles step by step:

  1. Basic Styles: We'll apply some styles to the body

  2. Nav Bar: We'll add a nav bar at the top showing the Jovian logo: https://i.imgur.com/m1wXjqw.png

  3. Banner Image: We'll extend the banner image to show from left to right

  4. About Jovian: We'll center the heading, and show the description and image side by side. We'll also limit the width of this section

  5. Jobs: We'll limit the width of this section, move the apply button to the right, and make the location gray

  6. Footer: We'll center the links, show them on the same line and make the copyright text gray. We'll also add a light gray background color.

Here's what the final page looks like:

EXERCISE: Follow the basic and intermediate tutorials on this to learn more about various CSS properties: https://www.htmldog.com/guides/css/ .

Deploying to the Cloud

While there are many ways to deploy a website to the cloud, we'll use a really simple platform called static.app.

Here's how it works:

  1. Make sure you have a file index.html in your project folder
  2. Create a ZIP archive using your project folder
  3. Visit https://static.app and upload the ZIP file
  4. Create an account by providing email, name and password
  5. Verify your account using the link sent over email
  6. The website will be deployed as a subdomain of static.app

That's it, your website is live! You can now share the link with your friends & colleagues.

You can also connect your website to custom domain by upgrading to a paid plan.

Summary and References

The following topics were covered in this tutorial:

  • Creating an HTML file, adding code into it using VS Code, and viewing it in a browser
  • Using basic HTML tags (html, head, title, body, div etc.) to create a web page
  • Using HTML tags (h1 to h6, p, lists, link, images) to structure content on a page
  • Styling HTML tags using CSS and replicating the structure of a desired wireframe
  • Understanding the CSS box model and inspecting other websites to improve CSS skills
  • Uploading an HTML page to GitHub repository and deploying to a cloud platform

You can find the completed code for this lesson here: https://github.com/JovianHQ/web-development-with-html-and-css/tree/main/lesson-1-html-and-css-basics

Check out these resources to learn more: