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.
Design
Most of the companies will have a UI designer providing visual designs to developers. Industry wide standard is a tool called Figma. You will get a design like the one below. But the toughest part of your job is to mimic those designs in your webpages. For this you need to understand the building blocks of a web application.
If the design provided has navigation in it, then your job is to check if your understanding (user flow diagram) and design flow are matching. If not fix the user flow diagram accordingly.
Now that the designer and developer are on the same page, it's time to convert the designs into webpages.
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. If you open a .html file, it is rendered in a browser by default. A sample html file is given below.
<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>All those easy to look at code between < and > are called html tags.
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 referenceCascading 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.
: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,
<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.
<!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>Hello world!
Now let us start designing our home 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.