Basics of Front End Development

Hello, and welcome to my first post on this platform as well as the first post in the series "Basics of Front End Development."

In this series, we will cover the essential concepts for starting your Front End Development journey. Topics include the fundamentals of HTML, CSS, and JavaScript. For those interested in building Flask applications, we'll wrap up with a post dedicated to that. Once we've covered the basics, we’ll build a simple website with core functionality using HTML/CSS/JS and a Flask application.

In this post, we will focus on the fundamentals of HTML.

What is HTML?

HTML (Hypertext Markup Language) is the standard markup language used to create webpages. It forms the backbone of any website — everything from the text you read to buttons and tables is structured using HTML. Simply put, HTML is the skeleton that supports a webpage’s content and layout.

Sections of a Website

An HTML document is divided into two main sections: the head and the body. Both of these sections are contained within the outer <html> tag.

The head section holds meta-information about the webpage, such as the page title and links to external resources like stylesheets.
The body section contains the main content of the webpage that users will interact with.

Here is a simple example:

<html>
<head>
    <title>Page 1</title>
</head>
<body>
    <p>Your main webpage content goes here</p>
</body>
</html>

Notes:

The <!DOCTYPE html> declaration defines the document type and version of HTML being used.
The <title> tag is used to set the title of the webpage, which appears in the browser tab.

HTML Elements

An HTML element consists of a start tag, content, and an end tag. The content is placed between the tags. For example, a paragraph element looks like this:

<p>This is a paragraph.</p>

Types of HTML Elements

1. Headers

Header tags define headings for sections of a webpage. They range from <h1> (the largest) to <h6> (the smallest). Headers are used to organize and structure content. Here's an example:

<h1>Main Header</h1>
<h2>Subheader</h2>

Use the appropriate header tag depending on the level of importance. For example, <h1> is typically used for the main title, while <h2> and others are used for subsections.

2. Paragraphs

The <p> tag is used to define a paragraph of text. It helps group text into readable chunks and allows for easier styling.

<p>This is a paragraph of text.</p>

3. Lists

HTML supports two types of lists:

Ordered List (<ol>): Lists that have a specific order (e.g., steps in a tutorial).
Unordered List (<ul>): Lists with no specific order (e.g., a shopping list).

Each list item is enclosed in an <li> tag.

Ordered list example:

<ol>
    <li>Step 1: Learn HTML</li>
    <li>Step 2: Learn CSS</li>
    <li>Step 3: Learn JavaScript</li>
</ol>

Unordered list example:

<ul>
    <li>Eggs</li>
    <li>Bread</li>
    <li>Milk</li>
</ul>

4. Text Area

The <textarea> element creates a box that allows users to input multiple lines of text. It is commonly used for comments, feedback forms, or search fields.

<textarea>Your text goes here</textarea>

You can also set attributes like placeholder and id for additional functionality:

<textarea id="my_text_area" placeholder="Enter your name"></textarea>

5. Buttons

To create a button, you can use the <button> tag. Buttons are typically used for form submissions or interactive actions.

<button>Click Me!</button>

You can also assign an id to the button to style or interact with it via JavaScript.

<button id="my_button">Click Me!</button>

6. Hyperlinks

Hyperlinks (<a> tags) allow users to navigate between pages or to external sites. The href attribute defines the destination URL.

<a href="https://www.example.com">Click here to visit Example</a>

You can also control whether the link opens in the same window or a new tab using the target attribute:

<a href="https://www.example.com" target="_blank">Visit Example</a>

By default, the link opens in the same tab (_self), but using _blank opens the link in a new tab.

7. Images

To display images, use the <img> tag, with the src attribute pointing to the image source (URL or file path). The alt attribute provides a description for the image (useful for accessibility).

<img src="image.jpg" alt="Description of image">

8. Divs

The <div> tag is a container used to group elements. It's useful for layout purposes, such as creating different sections on a webpage.

<div>
    <h2>About Us</h2>
    <p>We are a company that...</p>
</div>

9. Text Formatting

HTML offers a variety of tags to format text. Some of the most commonly used are:

<b>: Bold text
<strong>: Important text (semantically stronger than <b>)
<i>: Italic text
<em>: Emphasized text (semantically stronger than <i>)
<mark>: Highlighted text
<small>: Smaller text
<del>: Strikethrough text
<sub>: Subscript text
<sup>: Superscript text

Examples:

<p><b>This is bold text</b></p>
<p><strong>This is important text</strong></p>
<p><i>This is italic text</i></p>
<p><em>This is emphasized text</em></p>
<p><mark>This text is highlighted</mark></p>
<p><small>This is smaller text</small></p>
<p><del>This text is crossed out</del></p>
<p>Water is H<sub>2</sub>O</p>
<p>E = mc<sup>2</sup></p>