Front-end development focuses on building the user interface (UI) and user experience (UX) of websites and web applications. It involves HTML for structure, CSS for styling, and JavaScript for interactivity.
Popular front-end frameworks and libraries include React, Vue.js, and Angular. Styling tools like Bootstrap, Tailwind CSS, and Sass enhance design and responsiveness.
" India, front-end developers earn an average annual salary of ₹6,16,835, with entry-level positions starting around ₹1.2 lakh per year."
| Technology | Description | Official Website |
|---|---|---|
| HTML | Markup language for structuring web content | w3.org |
| CSS | Stylesheet language for designing web pages | w3.org |
| JavaScript | Scripting language for dynamic content | javascript.com |
| React | JavaScript library for UI development | react.dev |
| Vue.js | Progressive JavaScript framework | vuejs.org |
| Angular | TypeScript-based front-end framework | angular.io |
| Bootstrap | CSS framework for responsive design | getbootstrap.com |
| Tailwind CSS | Utility-first CSS framework | tailwindcss.com |
| Sass | CSS preprocessor for advanced styling | sass-lang.com |
| Next.js | React framework for server-side rendering | nextjs.org |
| Gatsby | Static site generator for React | gatsbyjs.com |
| Webpack | JavaScript module bundler | webpack.js.org |
| Vite | Next-gen front-end tool for fast development | vitejs.dev |
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Example</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a simple HTML structure.</p>
</body>
</html>CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
h1 {
color: blue;
}JavaScript
document.addEventListener("DOMContentLoaded", function() {
alert("JavaScript Loaded!");
});ReactJS
import React from "react";
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;AngularJS
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>Hello, Angular!</h1>`,
})
export class AppComponent { }Vue.js
<template>
<h1>Hello, Vue!</h1>
</template>
<script>
export default {
name: "App"
};
</script>Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
<h1 class="text-3xl font-bold text-blue-500">Hello, Tailwind CSS!</h1>
</body>
</html>Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container text-center">
<h1 class="mt-5">Hello, Bootstrap!</h1>
<button class="btn btn-primary">Click Me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>HTML (HyperText Markup Language) is the backbone of web development, providing the fundamental structure for creating web pages. It is a standardized system for structuring content on the web, allowing developers to build and organize content in a meaningful way. HTML serves as the foundation for any website, alongside CSS (Cascading Style Sheets) for styling and JavaScript for interactivity.
HTML defines the structure of web content. It uses a set of tags to mark up content such as headings, paragraphs, links, images, lists, forms, and more. These elements give web browsers the instructions they need to render a webpage. Without HTML, web browsers would not be able to display text, images, or any other content on a website.
HTML is composed of various elements that dictate how content should appear. Some of the most common HTML elements include:
<html>: Defines the entire HTML document.<head>: Contains metadata about the webpage, such as the title, links to stylesheets, and scripts.<body>: Encloses the visible content of the page, including headings, paragraphs, images, and links.<h1>to<h6>: Headings used to create titles or subheadings, with<h1>being the most important and<h6>the least.<p>: Represents a paragraph of text.<a>: Defines a hyperlink, allowing navigation to other web pages or resources.<img>: Embeds an image in the webpage.<ul>,<ol>,<li>: Used for creating unordered or ordered lists.
HTML has evolved significantly since its inception. The first version of HTML was developed by Tim Berners-Lee in 1991, and over the years, HTML has gone through multiple updates. The most recent version, HTML5, was finalized in 2014. HTML5 introduced new elements, improved accessibility, and provided better support for multimedia content, including native support for audio and video embedding. HTML5 has become the industry standard for modern web development.
HTML5 introduced several new features that made web development more powerful and efficient:
- Semantic Elements: New tags like
<header>,<footer>,<article>, and<section>provide meaning to the structure of the page, improving accessibility and SEO. - Canvas: The
<canvas>element allows developers to draw graphics and animations directly within the browser using JavaScript. - Local Storage: HTML5 offers the ability to store data on the client side, allowing for more dynamic and offline web applications.
- Forms Enhancements: New input types like
email,date, andrangesimplify form validation and improve user experience.
| Tag | Description |
|---|---|
<html> |
Represents the root of an HTML document and contains all the content of the webpage. |
<head> |
Contains metadata about the document, like title, charset, and links to stylesheets and scripts. |
<title> |
Sets the title of the document that appears in the browser's title bar or tab. |
<body> |
Contains the visible content of the webpage, such as text, images, and links. |
<h1> to <h6> |
Define headings in the document, with <h1> being the most important and <h6> the least. |
<p> |
Represents a paragraph of text. |
<a> |
Defines a hyperlink to another webpage or resource. |
<img> |
Embeds an image into the webpage. Requires the src attribute to specify the image file location. |
<ul> |
Defines an unordered (bulleted) list. |
<ol> |
Defines an ordered (numbered) list. |
<li> |
Represents a list item inside an <ul> or <ol> list. |
<div> |
A block-level container element used for grouping content and applying styles. |
<span> |
An inline container element used to style small sections of text or other content. |
<form> |
Represents an HTML form used to collect user input. |
<input> |
Defines an input field in a form (e.g., text field, checkbox, radio button, etc.). |
<button> |
Represents a clickable button, used in forms or as a standalone element for interactions. |
<table> |
Represents an HTML table. Contains table rows (<tr>) and cells (<td>, <th>). |
<tr> |
Represents a row in a table. |
<td> |
Represents a cell in a table, typically contains data. |
<th> |
Represents a table header cell, usually displayed in bold and centered. |
<footer> |
Represents the footer of a document or section, usually containing information like copyright, links. |
<header> |
Represents the header of a document or section, typically containing navigation or introductory content. |
<section> |
Represents a section of content, often with its own heading. |
<article> |
Represents independent content that can be reused or syndicated (e.g., blog post, news article). |
<aside> |
Represents content tangentially related to the main content, such as a sidebar. |
<strong> |
Represents important text that should be displayed with strong emphasis (usually bold). |
<em> |
Represents text that should be emphasized (usually displayed in italics). |
<br> |
Represents a line break in the text, often used to separate content within a paragraph. |
<hr> |
Represents a thematic break or horizontal rule, used to separate sections of content. |
<meta> |
Provides metadata about the HTML document, such as charset, author, and description for search engines. |
<link> |
Defines relationships between the current document and external resources (e.g., stylesheets). |
<script> |
Defines client-side JavaScript to be executed in the document. |