Register / Login

Web Development course

Our Vision

We Provide
Best Web Development Services

Dehradun Institute of digital marketing offer affordable Web Development Services to those who need stable keyword ranking in the search engine result pages with premium results. Our certified Web professionals do quality research, plan stunning strategies and deliver promising results. Our team of experts has worked with hundreds of clients across various industries and stages of growth, and has helped them reach their goals by:

– Improving their web presence – from static websites to dynamic landing pages

– Increasing conversions through high-quality content creation

– Improving brand awareness through social media campaigns

Introduction to Web Development

1. What is Web Development?

 Web development refers to the process of building, creating, and maintaining websites. It includes:

  • Frontend development (everything users see)

  • Backend development (the server, database, logic)

  • Full-stack development (both frontend and backend)

2. Web Developer Roles

Role Responsibility
Frontend Developer Builds the visible part of the website (HTML, CSS, JS)
Backend Developer Handles server, database, logic (Node.js, PHP, Python)
Full-Stack Developer Manages both frontend and backend
DevOps Engineer Deployment, performance, and scalability
UI/UX Designer Designs user interfaces and experience

3. Web Development Stages

  1. Planning & Requirement Gathering

  2. Wireframing & Design

  3. Frontend Development

  4. Backend Development

  5. Database Integration

  6. Testing & Debugging

  7. Deployment

  8. Maintenance & Updates

4. Frontend vs Backend vs Full-Stack

Type Technologies Used Description
Frontend HTML, CSS, JavaScript What users interact with
Backend Node.js, PHP, Python, Java, SQL Handles logic, database, server
Full-stack Combination of both End-to-end development

5. Tools You’ll Use

  • Code Editor: VS Code, Sublime Text

  • Browsers: Chrome, Firefox (with DevTools)

  • Version Control: Git & GitHub

  • Terminal/Command Prompt

  • Design Tools: Figma, Adobe XD (optional)

6. Key Web Technologies Overview

Tech Use
HTML Structure of the website
CSS Styling and layout
JavaScript Interactivity and behavior
Node.js / PHP / Python Backend scripting
MongoDB / MySQL Databases
Git Version control
GitHub Code hosting & collaboration

7. Web Developer Career Paths

  • Frontend Developer

  • Backend Developer

  • Full-Stack Developer

  • WordPress Developer

  • Mobile Web Developer

  • Web Designer (UI/UX)

 Exercise

  1. Install VS Code

  2. Install Git

  3. Create a folder and open it in VS Code

  4. Create a file named index.html

  5. Add this:

html
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first step into web development.</p>
</body>
</html>

 HTML (HyperText Markup Language) Basics

1. What is HTML?

HTML stands for HyperText Markup Language.
It is the standard language for creating web pages and gives structure to content.

  • HTML uses tags to define elements.

  • The browser reads HTML to display web content.

2. Basic Structure of an HTML Document

html
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is a simple web page.</p>
</body>
</html>
Tag Description
<!DOCTYPE html> Declares HTML5 document
<html> Root element
<head> Metadata, title, links, scripts
<title> Page title (shown in browser tab)
<body> Visible content on the page

3.Common HTML Tags

Tag Use
<h1> to <h6> Headings (H1 is biggest)
<p> Paragraph
<a href=""> Hyperlink
<img src="" alt=""> Image
<ul>, <ol>, <li> Lists (unordered/ordered)
<br> Line break
<hr> Horizontal rule
<strong> / <em> Bold / Italic
<div> / <span> Layout containers

4. HTML Attributes

Attributes give extra information about elements.

html
<a href="https://example.com" target="_blank">Visit Site</a>
<img src="photo.jpg" alt="My Photo" width="200">

Common attributes:

  • href, src, alt

  • id, class

  • style

  • target, title

5. HTML Lists

html

<ul>
<li>HTML</li>
<li>CSS</li>
</ul>

 

<ol>
<li>Frontend</li>
<li>Backend</li>
</ol>

6. HTML Tables

html
<table border="1">
<tr>
<th>Name</th><th>Age</th>
</tr>
<tr>
<td>Piyush</td><td>22</td>
</tr>
</table>

7. HTML Forms

html
<form>
Name: <input type="text"><br>
Email: <input type="email"><br>
<input type="submit" value="Send">
</form>

8. Semantic vs Non-Semantic Tags

Semantic Meaningful tags
<header>, <footer> Page sections
<article>, <section> Content grouping
<nav> Navigation
<main> Main content

Non-semantic:

  • <div>, <span> – generic containers

9. HTML Best Practices

  • Use proper indentation

  • Close all tags

  • Use alt text for images

  • Avoid using inline styles

  • Keep code clean and readable

 Mini Task

Create a simple webpage:

  • A heading

  • A paragraph

  • A list of 3 favorite websites (with links)

  • An image of your choice

  • A form with name and email

 CSS (Cascading Style Sheets) Basics

1. What is CSS?

CSS stands for Cascading Style Sheets. It controls the presentation (style, layout, color, spacing) of HTML elements.

HTML is for structure, CSS is for styling.

2. Ways to Apply CSS

Method Example Use Case
Inline CSS <p style="color:red;">Hello</p> Small quick styles
Internal CSS Inside <style> in <head> Styling one page
External CSS <link rel="stylesheet" href="style.css"> Reusable across multiple pages

3. CSS Syntax

css
selector {
property: value;
}

Example:

css
h1 {
color: blue;
font-size: 24px;
}

4. Common CSS Properties

Property Example
color color: blue;
font-size font-size: 20px;
background background: yellow;
padding padding: 10px;
margin margin: 20px;
border border: 1px solid;
text-align text-align: center;
width/height width: 300px;

5. Selectors in CSS

Selector Type Syntax Example
Element Selector p p { color: red; }
Class Selector .className .box { }
ID Selector #idName #header { }
Universal Selector * * { margin: 0; }
Group Selector h1, h2 h1, h2 { }
Descendant Selector div p div p { }

6. Box Model

Every HTML element is a box composed of:

mathematica
| Margin |
| Border |
| Padding |
| Content |

Use developer tools to inspect box model.

7. Colors in CSS

  • Named colors: red, blue

  • Hex codes: #ff0000

  • RGB: rgb(255, 0, 0)

  • HSL: hsl(0, 100%, 50%)

8. Units in CSS

Unit Use
px Pixels (fixed)
% Percentage (relative)
em Relative to parent font
rem Relative to root font size
vh/vw Viewport height/width

9. Comments in CSS

css
/* This is a comment */

10. Best Practices

  • Use external stylesheets for scalability

  • Use classes for reusable styles

  • Keep code indented and grouped

  • Avoid too much inline CSS

  • Use semantic naming (.btn-primary, .main-header)

 Mini Task

Create a webpage with:

  • A heading styled with a custom color and font size

  • A paragraph with padding and background color

  • A box (div) with border, margin, and centered text

Advanced CSS – Layouts, Flexbox, and Media Queries

1. CSS Positioning

CSS position property helps control the placement of elements.

Value Description
static Default (normal flow)
relative Positioned relative to itself
absolute Positioned relative to nearest positioned ancestor
fixed Positioned relative to the browser window
sticky Sticks based on scroll position

Example:

css
.box {
position: absolute;
top: 50px;
left: 100px;
}

2. Z-Index

Controls stacking order of overlapping elements.

css
div {
position: absolute;
z-index: 10;
}

3. Display Property

Value Usage
block Takes full width
inline Fits within content
inline-block Like inline, but accepts box properties
none Hides element
flex Turns container into a flexbox
grid Turns container into a grid layout

4. CSS Flexbox (Flexible Box Layout)

Used to layout items horizontally or vertically with ease.

css
.container {
display: flex;
justify-content: center;
align-items: center;
}
Property Description
justify-content Aligns items horizontally (flex-start, center, space-between)
align-items Aligns items vertically
flex-direction row, column, row-reverse
flex-wrap Wraps items onto multiple lines

5. Responsive Design

Makes your website look good on all devices.

Key techniques:

  • Use %, em, rem, vw, vh units

  • Avoid fixed widths

  • Use max-width instead of width

6. Media Queries

Allow styles to change based on screen size.

Syntax:

css
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
}

7. CSS Grid Basics

Powerful 2D layout system.

css
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 10px;
}

8. Transitions and Animations

Add smooth visual effects.

css
.box {
transition: background-color 0.3s ease;
}

9. Pseudo-classes & Pseudo-elements

Selector Usage
:hover On mouse hover
:focus On element focus
:nth-child(n) Selects nth child
::before Inserts content before
::after Inserts content after

Example:

css
p::first-letter {
font-size: 200%;
}

10. CSS Best Practices (Advanced)

  • Use variables with CSS (:root { --primary: #333; })

  • Keep layout and typography separated

  • Use BEM (Block Element Modifier) naming convention

  • Minimize deep nesting in SCSS/LESS

Mini Task

  • Build a responsive card layout using Flexbox

  • Add a hover transition effect

  • Use media queries to change layout on mobile

JavaScript Basics – Introduction to Programming with JS

1. What is JavaScript?

JavaScript is a client-side scripting language used to add interactivity to websites, such as image sliders, form validation, popups, animations, etc.

2. Embedding JavaScript in HTML

  • Inline JS

html
<button onclick="alert('Clicked!')">Click Me</button>

  • Internal JS

html
<script>
alert("Hello World");
</script>

  • External JS

html
<script src="script.js"></script>

3. JavaScript Syntax Basics

javascript
let name = "John";
const age = 25;
console.log(name, age);

  • Variables: var, let, const

  • Comments: // single-line, /* multi-line */

4. Data Types

Type Example
String "Hello"
Number 25
Boolean true, false
Object { name: "John" }
Array [1, 2, 3]
Null / Undefined null, undefined

5. Operators

  • Arithmetic: +, -, *, /, %

  • Comparison: ==, ===, !=, <, >, <=, >=

  • Logical: &&, ||, !

6. Conditional Statements

javascript
if (age > 18) {
console.log("Adult");
} else {
console.log("Minor");
}

7. Loops

javascript
for (let i = 0; i < 5; i++) {
console.log(i);
}

  • for, while, do...while

8. Functions

javascript
function greet(name) {
return "Hello " + name;
}
console.log(greet("Alice"));

9. Arrays and Array Methods

javascript
let fruits = ["Apple", "Banana"];
fruits.push("Mango");
console.log(fruits[1]); // Banana

Common Methods: .push(), .pop(), .length, .forEach()

10. Objects

javascript
let person = {
name: "John",
age: 30
};
console.log(person.name);

11. DOM Manipulation

javascript
document.getElementById("demo").innerHTML = "Changed!";

  • getElementById()

  • querySelector()

  • innerHTML

  • style.property

12. Events

html

<button onclick="sayHello()">Click</button>

 

<script>
function sayHello() {
alert("Hello!");
}
</script>

Mini Task

  • Create a form with Name and Email

  • Use JavaScript to validate that fields are not empty

  • Show an alert on submission

Advanced JavaScript – DOM, Events, Arrays, and Functions

1. DOM (Document Object Model)

DOM is the structure of your HTML page, represented as a tree of objects in JavaScript.

Access Elements:

javascript
document.getElementById("id")
document.querySelector(".class")
document.getElementsByTagName("p")

Modify Elements:

javascript
element.innerHTML = "Text"
element.style.color = "red"
element.classList.add("active")

2. Event Handling

HTML Method:

html
<button onclick="sayHello()">Click</button>

JS Method:

javascript
document.getElementById("btn").addEventListener("click", function () {
alert("Clicked!");
});

Common Events:

  • click

  • mouseover

  • keydown

  • submit

  • change

3. Array Methods (Advanced)

javascript
let numbers = [1, 2, 3, 4];
numbers.push(5); // Add to end
numbers.pop(); // Remove last
numbers.shift(); // Remove first
numbers.unshift(0); // Add to beginning
numbers.includes(3); // Check existence
numbers.indexOf(4); // Get index

Looping Arrays:

javascript
numbers.forEach(num => console.log(num));

Transforming Arrays:

javascript
let doubled = numbers.map(num => num * 2);
let filtered = numbers.filter(num => num > 2);

4. Functions (Advanced)

Function Expression:

javascript
const add = function(x, y) {
return x + y;
};

Arrow Functions:

javascript
const square = (n) => n * n;

Callback Functions:

javascript
function greet(name, callback) {
callback(name);
}
greet("Alex", function(name) {
console.log("Hello " + name);
});

5. Form Validation (Using JS)

javascript
function validateForm() {
let name = document.forms["myForm"]["name"].value;
if (name === "") {
alert("Name must be filled out");
return false;
}
}

HTML:

html
<form name="myForm" onsubmit="return validateForm()">
<input type="text" name="name">
<input type="submit">
</form>

6. Timers

javascript

setTimeout(() => {
alert("Delayed Alert");
}, 2000);

 

setInterval(() => {
console.log("Repeating...");
}, 1000);

7. Local Storage

javascript
localStorage.setItem("username", "John");
let user = localStorage.getItem("username");
localStorage.removeItem("username");

Activity Task:

  • Create a form with Name, Email, and Message

  • On submit, validate data and show a thank-you message using JavaScript

Would you like Module 7: Responsive Design & Media Queries next, or need a PDF version of Module 6?

 
You said:
module 7
 
ChatGPT said:

Here is:

Responsive Web Design & Media Queries

1. What is Responsive Web Design (RWD)?

Responsive Web Design allows your website to adjust and look good on all screen sizes (mobile, tablet, laptop, desktop).

2. Core Concepts of RWD

  • Fluid Grid Layouts
    Uses percentage-based widths rather than fixed units like px.

  • Flexible Images
    Images that scale with the screen using:

    css
    img {
    max-width: 100%;
    height: auto;
    }

  • Media Queries
    CSS technique to apply styles based on screen size.

3. Media Queries Syntax

css
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}

Common Breakpoints:

Device Width Range
Mobile 320px – 480px
Tablet 481px – 768px
Laptop 769px – 1024px
Desktop 1025px and above

4. CSS Techniques for Responsive Layouts

  • Flexbox:

    css
    display: flex;
    flex-wrap: wrap;

  • Grid:

    css
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  • Percentages & Viewport Units (vw, vh):

    css
    width: 100%;
    font-size: 2vw;

5. Responsive Typography

Use relative units like em, rem, %, or vw instead of px.

css

html {
font-size: 16px;
}

 

h1 {
font-size: 2.5rem;
}

6. Mobile-First Design

Design your website for mobile first, then expand styles for larger screens using media queries.

css

/* Base (mobile-first) */
.container {
width: 100%;
}

 

/* Tablet and above */
@media (min-width: 768px) {
.container {
width: 80%;
}
}

7. Tools for Testing Responsiveness

  • Chrome DevTools (Toggle Device Toolbar)

  • Responsive design checker tools

  • BrowserStack, LambdaTest (for cross-browser testing)

 Introduction to Bootstrap

1. What is Bootstrap?

Bootstrap is a free, open-source CSS framework for building responsive and mobile-first websites quickly using pre-built components and utility classes.

2. Why Use Bootstrap?

  • Fast and consistent UI development

  • Mobile-first and responsive by default

  • Grid system for layout design

  • Includes ready-to-use buttons, modals, navbars, etc.

  • Cross-browser compatibility

3. How to Include Bootstrap in a Project

Option 1: Use CDN (Recommended for beginners)

Add the following lines inside the <head> tag:

html
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

Add this before the closing </body> tag:

html
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

4. Bootstrap Grid System

Bootstrap’s grid system is based on 12 columns and works with rows and columns:

html
<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>

Grid Breakpoints:

Class Device Size
.col- Extra small (<576px)
.col-sm- Small (≥576px)
.col-md- Medium (≥768px)
.col-lg- Large (≥992px)
.col-xl- Extra Large (≥1200px)

5. Common Bootstrap Components

Component Class Example
Button btn btn-primary
Navbar navbar navbar-expand-lg
Card card, card-body
Alerts alert alert-success
Modal modal, data-bs-toggle="modal"
Form Layouts form-control, form-group

6. Utility Classes (Quick Styling)

  • Spacing: m-3, p-2, mt-4, etc.

  • Text: text-center, text-danger

  • Display: d-flex, d-none, d-block

  • Background: bg-dark, bg-warning

7. Example: Bootstrap Button

html
<button class="btn btn-success">Click Me</button>

Activity

Build a simple Bootstrap web page with:

  • A navbar

  • Two columns using the grid

  • A card with an image and text

  • A button styled with Bootstrap

JavaScript Basics for Web Development

1. What is JavaScript?

JavaScript is a client-side scripting language used to create dynamic and interactive content on websites. It runs directly in the browser.

2. Why Use JavaScript in Web Development?

  • Add interactivity (e.g., buttons, sliders)

  • Form validation

  • DOM manipulation (changing HTML elements dynamically)

  • Handling events (e.g., mouse clicks, keypresses)

  • Making AJAX requests (fetching data without page reload)

3. How to Add JavaScript to HTML

Inline JavaScript:

html
<button onclick="alert('Hello!')">Click Me</button>

Internal JavaScript:

html
<script>
alert("Welcome to my website!");
</script>

External JavaScript:

html
<script src="script.js"></script>

4. JavaScript Syntax Basics

Variables:

javascript
let name = "John";
const age = 25;

Data Types:

  • String, Number, Boolean, Array, Object, Null, Undefined

Operators:

+, -, *, /, =, ==, ===, &&, ||, etc.

5. Control Structures

if-else:

javascript
if (age >= 18) {
alert("You are an adult.");
} else {
alert("You are underage.");
}

for loop:

javascript
for (let i = 0; i < 5; i++) {
console.log(i);
}

while loop:

javascript
let i = 0;
while (i < 5) {
console.log(i);
i++;
}

6. Functions

javascript
function greet(name) {
alert("Hello " + name);
}
greet("Piyush");

7. Events in JavaScript

html

<button onclick="sayHello()">Click</button>

 

<script>
function sayHello() {
alert("Hello!");
}
</script>

8. JavaScript and the DOM

html

<p id="demo">This is a paragraph.</p>
<button onclick="changeText()">Change</button>

 

<script>
function changeText() {
document.getElementById("demo").innerHTML = "Text changed!";
}
</script>

Activity

  • Create a web page that changes the background color when a button is clicked

  • Display the current date/time using JavaScript

  • Create a form that validates whether all fields are filled

 jQuery and JavaScript Libraries

1. What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library that simplifies:

  • HTML DOM manipulation

  • Event handling

  • AJAX requests

  • Animations

  • Cross-browser compatibility

2. Why Use jQuery?

  • Shorter and cleaner code

  • Easier DOM traversal & manipulation

  • Simplified event handling

  • Easy-to-use animations

  • AJAX support with minimal setup

3. Adding jQuery to Your Website

Option 1: CDN Link (recommended)

html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Option 2: Download jQuery

html
<script src="jquery.min.js"></script>

4. jQuery Syntax Basics

javascript
$(document).ready(function() {
$("button").click(function() {
$("p").hide();
});
});

Format:

javascript
$(selector).action();

5. Common jQuery Methods

Method Description
hide() Hides the selected element
show() Displays the hidden element
toggle() Toggles between hide and show
html() Gets or sets HTML content
text() Gets or sets plain text
css() Changes CSS styles
val() Gets/sets the value of form fields

6. jQuery Events

javascript
$("#btn").click(function() {
alert("Button clicked!");
});

Common Events:

  • click()

  • dblclick()

  • mouseenter()

  • mouseleave()

  • keydown(), keyup()

  • submit(), change()

7. jQuery Effects and Animations

javascript
$("#box").fadeOut();
$("#box").slideUp();
$("#box").animate({width: "300px"});

8. AJAX with jQuery

javascript
$.ajax({
url: "data.txt",
success: function(result) {
$("#output").html(result);
}
});

9. Other JavaScript Libraries to Know

Library Use
Axios AJAX requests (modern alternative to jQuery AJAX)
Lodash Utility functions for arrays, objects, etc.
Chart.js Beautiful charts and graphs
Moment.js Date and time formatting
SweetAlert Modern alert boxes

Mini Project Idea

  • Create a form using HTML

  • Use jQuery to validate it

  • Show a success message using jQuery animation

  • Use AJAX to send data (simulate with local JSON or dummy file)