Points to ponder

Read the below points before you start.

Any web application will be accessed by your users via browsers. So we need to send the user interface (UI) through internet, in a format any browser can understand.
We need a reusable UI design that can be used across multiple pages, to reduce our development efforts.
User actions are dynamic and hence we need some language like JavaScript to handle and react with some response. This response could be an alert, navigation to a new page, etc.

HyperText Markup Language (HTML)

HTML is a language used to develop webpages which browsers can render from anywhere. In other words, HTML is the format in which we need to send our UI to the user's browser.

HTML tags

HTML tags are the building blocks of any web page. There are 100s of html tags each denoting something unique which you don't have to know by heart. But there are some tags which all web application developers should know and remember. They are given below,

<html>

<html> tag tells the browser that whatever code is enclosed within <html></html> tag should be treated and rendered as a html page. This is also called as the root element. Most of the times it contains a lang attribute, saying which language this webpage contents are.

<head>

<head> tag encloses title tag (browser tab shows this), meta tags and other dependent resource tags like link tags (mostly CSS) and script tags (mostly JavaScript). When we use frameworks like Next.js it will generate most of the tags inside head.

<body>

<body> tag contains html code for the elements that user will actually see and interact with. Everything explained after this will go inside body tag.

<header>

<header> tag contains html code for introductory elements like logo or heading and navigation elements like top menu. You may have noticed <ol> and <li> tags inside header, which represents ordered list and list item inside header for menu.

<main>

<main> tag contains html code for the main content of the page. This could be a form, list of items, dashboard, etc.

<div>

<div> tag is the most widely used tag to display an element with some content in it. Anything can be created with just this one tag.

<span>

<span> tag is used within a div tag for an inline element or text.

<img>

<img> tag is used to display an image. It contains the src attribute to mention where the image can be found.

<footer>

<footer> tag contains html code for the footer as the name suggests. This is where you keep your social media links, copyright text and secondary menu which might not be that important.

I have given a sample html page code below. To learn more about other tags click the below link,

HTML elements reference

.html

/docs/html/tags.html

<html lang="en">
<head>
    <title>Home</title>
</head>
<body>
<header>
    <nav>
        <ol>
            <li><a href="/images">Images</a></li>
            <li><a href="/videos">Videos</a></li>
        </ol>
    </nav>
</header>
<main>
    <div>
        <h1>Home page</h1>
    </div>
</main>
<footer>
    <nav>
        <ol>
            <li><a href="https://www.youtube.com">YouTube</a></li>
            <li><a href="https://www.facebook.com/">Facebook</a></li>
        </ol>
    </nav>
</footer>
</body>
</html>

Cascading Style Sheets (CSS)

CSS is a language used for styling the elements rendered by html code. If HTML is the face then CSS is makeup. And you might have seen all kinds of prosthetic makeup in the movies, that can completely alter someone's face. Same can be done with CSS for HTML. An example of applying CSS to some html tags are given below.

.css

/docs/html/basic.css

:root { /* class symbol ":" with root represents the root element which is html */
    --background: #ffffff; /* CSS variable background with html color code for white */
    --foreground: #171717; /* CSS variable foreground with html color code for black */
}

body { /* body tag will take the below styling */
    color: var(--foreground); /* Using variable --foreground for text color (color property) */
    background: var(--background); /* Using variable --background for background color (background property) */
}

You can define tag level, class level (class attribute in your html elements) and even define inline style within the html code. Inline is not considered a good practice due to reasons like maintainability, priority issues. An example of such style is given below,

.html

/docs/html/inline-css.html

<h1 style="font-size: x-large">
   Heading
</h1>

Even though you can style everything from the scratch, it is not advisable due to the effort it takes to build reusable design ground up. Also it is highly unlikely your company might not have a design template. So let us focus on such design framework.

Tailwind CSS

A CSS framework with pre-defined class names which you can use to achieve any type of styling. By declaring a combination of classes like mx-4, p-2, flex in class property of any html tag, gives you the results desired.

.html

/docs/html/tailwind-basic.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>
</body>
</html>

The above code styles the h1 element like below,

Hello world!

Now let us start designing our form page in accordance with the requirements mentioned in the ticket #1. This will help us understand HTML and Tailwind CSS easily than going through the official documentation.

End of sample lesson

Back to details

Points to ponder

HyperText Markup Language (HTML) Create a flash card

HTML tags

<html>

<head>

<body>

<header>

<main>

<div>

<span>

<img>

<footer>

Cascading Style Sheets (CSS) Create a flash card

Tailwind CSS Create a flash card

Hello world!

HyperText Markup Language (HTML)

Cascading Style Sheets (CSS)

Tailwind CSS