NSIC

ISO 9001:2008

CERTIFICATE COURSE
IN
WEB DEVELOPMENT

CONDUCTED BY

NSIC TECHNICAL SERVICES CENTER

THE NATIONAL SMALL INDUSTRIES CORPORATION LTD.
(A GOVERNMENT OF INDIA ENTERPRISE)
SECTOR B 24, GUINDY INDUSTRIAL ESTATE EKKADUTHANGAL, CHENNAI-32.
EMAIL: [email protected]
 BONAFIDE CERTIFICATE

This is to certify that Mr/Mrs. , student

Alagappa Chettiar Government College of Engineering and Technology, Karaikudi,
Computer Science and Engineering, Final year, 7th semester has successfully completed
internship on “WEB DEVELOPMENT” at National Small Industries Corporation,
Chennai from 03/06/2024 to 02/07/2024.

Submitted for Internship held in NSIC, Chennai from 03/06/2024 to 02/07/2024 at

Alagappa Chettiar Government College of Engineering and Technology, Karaikudi-
630003

SIGNATURE
Mrs.S.SHANTHI,
DEPUTY GENERAL MANAGER, NSIC, CHENNAI-600032.

SIGNATURE SIGNATURE
Prof.S. SYED SUHAILA, M.E., Dr.C.UmaRani M.E., Ph.D.,
Internship Coordinator, Head of the Department,
Department of CSE, Department of CSE,
Alagappa Chettiar Government Alagappa Chettiar Government
College of Engineering and College of Engineering and
Technology, Karaikudi - 630003. Technology, Karaikudi - 630003.
 ACKNOWLEDGEMENT

The successful completion of this internship report would not have been possible
without the support and assistance of many individuals and organizations. I feel immensely
blessed to have gotten this during the course of my internship program. I would like to take
this opportunity to offer my earnest admiration to each and every one of them. I express
my sentiment of gratitude to sir, who has been a continuous source of inspiration as my
intern trainer. Without his constant guidance and suggestions, this report would have been
nowhere near completion. My gratitude for his trust and generosity goes beyond words. I
am indebted and thankful to my learned and revered Dr.C.UmaRani, Head of Department
of Computer science and Engineering, Alagappa Chettiar Government College of
Engineering and Technology, Karaikudi - 630003, for her encouraging support and
providing a meticulous platform to learn.

I owe my deepest gratitude to internship coordinator Prof.S.Syed Suhaila, for her

upbeat personality, kindness, encouraging support and willingness to help, have tangibly
and greatly improve the quality of my internship report and brought up to its present status.

Thanks to my classmates who helped me directly or indirectly to accomplish my

work. Finally, I thank all my teachers, who were the people, who prepared us for this
endeavour. I owe you all my success.

i
 ABSTRACT

The Dynamic Portfolio Website is designed to showcase technical skills and projects
using a combination of HTML, CSS, and JavaScript, along with API connectivity and web
hosting solutions. The primary goal of this project is to create an engaging and professional
online presence that effectively highlights individual projects, skills, and achievements in
web development and data analysis.

This website features a responsive design to ensure compatibility across various

devices and screen sizes, providing a seamless user experience. JavaScript is utilized to
enhance interactivity and dynamic content rendering, while API integration allows for
real-time data updates and content management. The site is hosted on a reliable web
hosting platform, ensuring high availability, fast load times, and robust performance.

Overall, the Dynamic Portfolio Website not only serves as a professional portfolio
but also as a testament to proficiency in modern web development technologies and best
practices.

ii
 TABLE OF CONTENTS

CHAPTER TITLE PAGE NO

NO
ACKNOWLEDGEMENT i
ABSTRACT ii
TABLE OF CONTENTS iii
LIST OF FIGURES viii
LIST OF TABLES ix
1 INTRODUCTION 11
1.1 FRONTEND DEVELOPMENT 11
1.2 BACKEND DEVELOPMENT 11
1.3 DATABASE 12
2 HYPERTEXT MARKUP LANGUAGE 13
2.1 INTRODUCTION 13
2.2 HTML5 OVERVIEW 13
2.3 SYNTAX 14
2.4 SEMANTIC HTML 15
2.5 TABLES 16
3 HTML ELEMENTS AND 20
ATTRIBUTES
3.1 ELEMENTS 20
3.2 ATTRIBUTES AND FORMATS 20
3.3 HTML IMAGE 20
3.4 EMBEDDING EXTERNAL IMAGE 20
3.5 TEXT FORMATTING ELEMENTS 20
3.6 STRUCTURAL ELEMENTS 21
3.7 LIST, HYPERLINK, MULTIMEDIA 21
ELEMENTS
4 HTML TEMPLATING AND WEB 22
iii
 COMPONENTS
4.1 HTML TEMPLATES 22
4.2 WEB COMPONENTS 22
4.3 HTML CONTROL ELEMENTS 23
4.4 RESPONSIVE WEB DESIGN 24
5 HTML APIS AND SEO 25
5.1 HTML APIS 25
5.2 HTML ACCESSIBILITY 25
5.3 HTML SEO 26
6 CASCADING STYLE SHEETS 28
6.1 INTRODUCTION 28
6.2 STRUCTURE 28
6.3 SYNTAX 28
6.4 BACKGROUND 28
6.5 HEIGHT AND WIDTH 29
6.6 INHERITANCE AND CASCADE 30
6.7 BORDERS 30
7 CSS BOXMODEL AND ICONS 32
7.1 MARGIN 32
7.2 PADDING 32
7.3 CONTENT 32
7.4 LISTS 33
7.5 ICON FONTS 33
7.6 LINKS 33
7.7 DISPLAY 33
8 CSS POSTION, NAVIGATION BARS, 35
GRADIENTS
8.1 POSITIONING 35
8.2 GRADIENTS 35
8.3 NAVIGATION BARS 35
8.4 INLINE BLOCKS 35
8.5 FLOAT 36

iv
9 CSS SHADOWS, ANIMATIONS AND 37
GRIDS
9.1 SHADOW 37
9.2 ANIMATIONS 37
9.3 GRID LAYOUT 37
9.4 STYLING BUTTONS 38
10 ADVANCED CSS 39
10.1 VARIABLES 39
10.2 RESPONSIVE DESIGN 39
10.3 TRANSITION, 39
TRANSFORMATION
10.4 CUSTOM SCROLL BARS 39
11 JAVASCRIPT INTRODUCTION 41
12 JAVASCRIPT OBJECTS 45
12.1 CREATING OBJECTS 45
12.2 ACCESSING OBJECT 45
PROPERTIES
12.3 ADDING AND DELETING 45
PROPERTIES
12.4 METHODS IN OBJECTS 46
12.5 NESTED OBJECTS 46
13 JAVASCRIPT CONDITONS AND 47
LOOPS
13.1 CONDITIONAL STATEMENTS 47
13.2 LOOPING STATEMENTS 48
13.3 BREAKING AND CONTINUING 49
LOOPS
13.4 NESTED LOOPS 50
14 JAVASCRIPT DOM 52
14.1 SELECTING DOM ELEMENTS 52
14.2 MODIFYING DOM ELEMENTS 52
14.3 EVENT HANDLING 52

v
 14.4 DOM TRAVERSAL 53
14.5 CREATING AND INSERTING 53
ELEMENTS
14.6 REMOVING ELEMENTS 53
15 JAVASCRIPT NAVIGATION 54
15.1 BROWSER HISTORY 54
15.2 LOCATION OBJECT 54
15.3 ROUTING IN JS FRAMEWORK 54
16 DATABASE 56
16.1 SETTING UP THE PROJECT 56
16.2 DATABASE CONNECTIONS 57
16.3 CREATING A MYSQL 58
DATABASE TABLE
16.4 SWITCHING TO THE 59
DATABASE
16.5 CREATING A TABLE 59
16.6 CRUD OPERATIONS 60
16.7 EXPRESS.JS API SETUP 61
16.8 FRONTEND INTEGRATION 64
16.9 SECURITY CONSIDERATIONS 65
17 HOSTING INTRODUCTION 66
18 TYPES OF WEB SERVICES 67
18.1 VIRTUAL PRIVATE SERVER 67
18.2 DEDICATED HOSTING 68
18.3 CLOUD HOSTING 68
18.4 MANAGED HOSTING 68
19 WEB HOSTING FEATURES 69
20 WEB HOSTING PLATFORMS 69
20.1 SHARED HOSTING PLATFORMS 70
21 DOMAIN SERVICES 71
21.1 DOMAIN REGISTRATION 71
21.2 DOMAIN TRANSFER AND 71

vi
 RENEWAL
21.3 DOMAIN MANAGEMENT 72
TOOLS
21.4 DOMAIN PRIVACY 72
PROTECTION
21.5 SUBDOMAINS AND DOMAIN 72
FORWARDING
21.6 DNS MANAGEMENT 72
22 DEVELOPER TOOLS 73
22.1 DATABASE SUPPORT 73
22.2 PROGRAMMING LANGUAGES 74
22.3 VERSION CONTROL SYSTEMS 74
22.4 DEVELOPMENT STAGING 74
ENVIRONMENTS
22.5 SECURITY AND MONITORING 74
23 SEO AND MARKETING TOOLS 75
23.1 KEYWORD RESEARCH 75
23.2 ON-PAGE SEO OPTIMIZATION 75
23.3 SEO AUDITING 75
24 OS CHOICES 76
24.1 LINUX HOSTING 76
24.2 WINDOWS HOSTING 76
24.3 DEVELOPER FRIENDLY 76
OPTIONS

25 SECURITY AND BACKUPS 77

25.1 BACKUP SOLUTIONS 78
26 PROJECT 79
27 CONCLUSION 81

vii
 28 REFERENCES 82

LIST OF FIGURES

CHAPTER FIGURE PAGE

NO
NO
6 6.4.1 BACKGROUND PROPERTIES 29
viii
7 7.7.1 DISPLAY PROPERTIES 34
9 9.1.1 BOX SHADOWS 37

9.1.2 TEXT SHADOWS 37

9.1.3 MULTIPLE SHADOWS 37

9.3.1 CSS GRID 38

16 16.1.1 PROJECT INITIALIZATION 56
COMMANDS
16.1.2 COMMANDS FOR INSTALLING 57

16.2.1 CODE TO CONNECT DATABASE 57

16.2.2 QUERY TO CREATE TABLE 58

16.4.1 DATABASE SWITCHING 59

16.5.1 CREATING A TABLE 60
16.6.1 CREATE DATA OPERATION 61

16.7.1 EXPRESS APP INITIALISATION 62

16.7.2 EXPRESS JS ROUTES 63

16.8.1 FETCH API POST METHOD USAGE 64

ix
 26.2 PORTFOLIO ABOUT PAGE 79
26.3PORTFOILIO PROJECT PAGE 80
26.4 PORTFOLIO SKILLS PAGE 80
28 28.5PORTFOLIO CONTACT PAGE 81

x
xi
 CHAPTER 1
INTRODUCTION

Web development is the process of creating and maintaining websites and web
applications. It encompasses a broad range of tasks, including web design, content creation,
client-side/server-side scripting, and network security configuration. Web developers utilize
programming languages such as HTML, CSS, JavaScript, and various server-side languages
(e.g., PHP, Python, Ruby) to build interactive and functional websites. They also integrate
databases and ensure web compatibility across different browsers and devices. Effective
web development requires a blend of technical expertise, creativity, and problem-solving
skills to deliver user-friendly, visually appealing, and secure online experiences tailored to
meet specific business or personal needs.

1.1 FRONTEND DEVELOPMENT

Frontend development in web development involves creating the visible parts of

websites that users interact with directly. Using HTML, CSS, and JavaScript, frontend
developers build the structure, design, and interactivity of web pages. HTML defines the
content and basic structure, CSS styles elements for visual presentation, and JavaScript adds
dynamic behavior and interactivity. Frontend developers ensure websites are responsive,
visually appealing, and user-friendly across various devices and browsers, collaborating
with UX/UI designers and backend developers to integrate frontend components with
backend functionalities for seamless web experiences.

12
1.2 BACKEND DEVELOPMENT

Backend development in web development refers to the server-side programming that

powers the functionality and logic behind websites and web applications. It involves
building and maintaining the server, database, and application logic that enable the frontend
(user-facing) aspects to function effectively.

Backend developers use server-side languages such as PHP, Python, Ruby, Java, or
Node.js to handle data processing, user authentication, server management, and database
interactions. They work with databases like MySQL, PostgreSQL, MongoDB, or others to
store, retrieve, and manipulate data securely.

Security, performance optimization, and scalability are key focuses in backend

development, ensuring that websites can handle large volumes of traffic and transactions
reliably. Backend developers collaborate closely with frontend developers and designers to
integrate frontend components with backend functionalities, creating cohesive and efficient
web applications that deliver seamless user experiences.

1.3 DATABASE

Databases in web development are essential repositories that store and manage data
for websites and applications. They come in various types, including relational databases
like MySQL and PostgreSQL, ideal for structured data storage with defined relationships,
and NoSQL databases such as MongoDB and Redis, suited for handling unstructured or
semi-structured data efficiently. Web developers use programming languages like PHP,
Python, Node.js, or Java to interact with databases, executing queries and ensuring data
integrity and performance through proper design and optimization. Databases play a critical
role in enabling dynamic content, user authentication, and transaction processing in web
applications, supporting their functionality and scalability.

13
 CHAPTER 2

HYPERTEXT MARKUP LANGUAGE

2.1 INTRODUCTION

HTML (Hyper Text Markup Language) is the standard language for creating web
pages and web applications. It forms the skeleton of a web page, defining the structure and
layout. HTML uses a variety of tags and attributes to specify the content and its
presentation.

2.2 HTML5 OVERVIEW

HTML5 is the fifth and current major version of HTML. It introduces new elements,
attributes, and behaviours, provides better support for multimedia, and aims to improve the
language with support for the latest multimedia while keeping it easily readable by humans
and consistently understood by computers and devices.

Key Features of HTML5:

- New parsing rules for enhanced flexibility.

- Support for new form controls like date pickers and sliders.

- Enhanced multimedia support with `<audio>` and `<video>` elements.

- Introduction of new elements like `<article>`, `<section>`, `<nav>`, `<header>`, and

`<footer>`.

- Enhanced support for web applications with APIs for offline storage, drag-and-drop, and
more.

14
2.3 SYNTAX

HTML syntax involves a combination of tags enclosed in angle brackets. Tags

usually come in pairs, an opening tag and a closing tag, with content between them.

Basic HTML Document Structure:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Key Points:

· `<!DOCTYPE html>` declares the document type and version of HTML.

· `<html>` is the root element.

· `<head>` contains meta-information about the document.

· `<title>` sets the title of the webpage.

· `<body>` contains the content of the webpage.

15
2.4 SEMANTIC HTML

Semantic HTML introduces meaning to the web page rather than just presentation. It
helps search engines and other user devices determine the importance and context of web
pages. Examples include `<header>`, `<footer>`, `<article>`, `<section>`, and `<aside>`.

Example of Semantic HTML:

<html>
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="home">Home</a></li>
<li><a href="about">About</a></li>
</ul>
</nav>
</header>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
<aside>
<p>Related links or advertisements.</p>
</aside>
<footer>
<p>Footer information</p>
</footer>
</html>

16
2.5 TABLES

Tables are used to organize data into rows and columns. HTML provides various tags
to create and format tables.

Basic Table Structure

<Html>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</table>
</html>

17
1. Spanning Rows and Columns

To make cells span across multiple rows or columns, use `rowspan` and `colspan`
attributes.

<html>
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Details</th>
</tr>
<tr>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
</table>
</html>

18
2. Nested Tables

You can embed one table inside another to create nested tables.

<table border="1">
<tr>
<td>Row 1, Cell 1</td>
<td>
<table border="1">
<tr>
<td>Nested Row 1, Cell 1</td>
</tr>
</table>
</td>
</tr>
</table>

3. Responsive Tables

Responsive tables adjust to different screen sizes. Use CSS to make tables responsive.

<html>
<style>
.responsive-table {
width: 100%;
border-collapse: collapse;
}
.responsive-table th, .responsive-table td {
border: 1px solid ddd;
padding: 8px;
}
.responsive-table th {
background-color: f2f2f2;
}
19
</style>
<table class="responsive-table">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
</table>
</html>

20
 CHAPTER 3

HTML ELEMENTS AND ATTRIBUTES

3.1 ELEMENTS

HTML elements are the building blocks of HTML pages. They consist of a start tag,
content, and an end tag.

<p>This is a paragraph</p>
<a href="https://www.example.com">This is a link</a>

3.2 ATTRIBUTES AND FORMATS

Attributes provide additional information about elements and are always included in
the start tag.

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

3.3 HTML IMAGE

Images are embedded using the `<img>` tag with the `src` attribute specifying the
image source.

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

3.4 EMBEDDING EXTERNAL IMAGE

<img src="https://www.example.com/image.jpg" alt="External Image">

3.5 TEXT FORMATTING ELEMENTS

<p>This is <b>bold</b>, <i>italic</i>, and <u>underlined</u> text</p>

Formatting elements are used to change the appearance of text.

21
3.6 STRUCTURAL ELEMENTS

Structural elements define the structure of a document. Examples include `<header>`,

`<footer>`, `<nav>`, `<article>`, and `<section>`.

3.7 LIST, HYPERLINK, MULTIMEDIA ELEMENTS

Lists, hyperlinks, and multimedia elements are essential for creating interactive and
engaging web content.

Lists:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Hyperlinks:

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

Multimedia:

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

22
 CHAPTER 4

HTML TEMPLATING AND WEB COMPONENTS

4.1 HTML TEMPLATES

HTML templates allow you to define reusable HTML fragments that are not rendered
until they are used. They help in creating repetitive HTML code blocks dynamically.

<template id="my-template">
<div>
<h2>Template Content</h2>
<p>This is a paragraph inside a template.</p>
</div>
</template>
<script>
const template = document.getElementById('my-template').content;
document.body.appendChild(document.importNode(template, true));
</script>

4.2 WEB COMPONENTS

Web components allow you to create custom, reusable HTML elements with their
own behavior, encapsulated CSS, and DOM. They consist of three main technologies:
Custom Elements, Shadow DOM, and HTML Templates.

<custom-element></custom-element>

<script>
class CustomElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
23
 this.shadowRoot.innerHTML = `
<style>
p { color: blue; }
</style>
<p>Custom Element Content</p>
`;}}
customElements.define('custom-element', CustomElement);
</script>

4.3 HTML CONTROL ELEMENTS

HTML5 introduces new form controls to enhance user input functionality. These
controls include date pickers, color pickers, and range sliders.

<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>

<label for="favcolor">Favorite Color:</label>

<input type="color" id="favcolor" name="favcolor"><br><br>

<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100">
</form>

4.4 RESPONSIVE WEB DESIGN

Responsive web design ensures that web pages render well on a variety of devices
and window or screen sizes. This is achieved using flexible grids and layouts, images, and
CSS media queries.

24
<style>
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
<p>This paragraph will change background color based on the screen size.</p>

25
 CHAPTER 5

HTML APIS AND SEO

5.1 HTML APIS

HTML APIs provide additional functionalities like offline storage, geolocation, and
canvas drawing, enhancing the interactivity and usability of web applications.

Canvas API:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = 'green';
context.fillRect(10, 10, 150, 75);
</script>

5.2 HTML ACCESSIBILITY

Accessibility ensures that web content is usable by people with disabilities. Using
ARIA (Accessible Rich Internet Applications) attributes enhances the accessibility of web
applications.

<label for="name">Name:</label>
<input type="text" id="name" name="name" aria-label="name">

26
5.3 HTML SEO

Search Engine Optimization (SEO) involves optimizing web content to improve

search engine rankings. Proper use of HTML tags, meta tags, headings, and attributes like
`alt` for images can significantly impact SEO.

SEO-friendly HTML:

<head>
<title>SEO Example</title>
<meta name="description" content="An example of a webpage optimized for SEO">
<meta name="keywords" content="HTML, SEO, Example">
<meta name="author" content="John Doe">
</head>
<body>
<h1>Main Heading</h1>
<p>This is a paragraph that provides detailed information on the topic.</p>
<img src="example.jpg" alt="An example image">
<a href="https://www.example.com">Read more</a>
</body>

27
5.3 HTML SEO

Search Engine Optimization (SEO) involves optimizing web content to improve

search engine rankings. Proper use of HTML tags, meta tags, headings, and attributes like
`alt` for images can significantly impact SEO.

SEO-friendly HTML:

<head>
<title>SEO Example</title>
<meta name="description" content="An example of a webpage optimized for SEO">
<meta name="keywords" content="HTML, SEO, Example">
<meta name="author" content="John Doe">
</head>
<body>
<h1>Main Heading</h1>
<p>This is a paragraph that provides detailed information on the topic.</p>
<img src="example.jpg" alt="An example image">
<a href="https://www.example.com">Read more</a>
</body>

28
 CHAPTER 6
CASCADING STYLE SHEETS
6.1 INTRODUCTION
CSS (Cascading Style Sheets) is a language designed to simplify the process of
making web pages presentable. It allows you to apply styles to HTML documents,
describing how a webpage should look by prescribing colors, fonts, spacing, and
positioning. CSS provides developers and designers with powerful control over the
presentation of HTML elements.
6.2 STRUCTURE
CSS (Cascading Style Sheets) structure is composed of rules that define how HTML
elements are displayed. Each rule consists of a selector and a declaration block. The selector
identifies the HTML elements to style, and the declaration block contains one or more
declarations, each specifying a property and its corresponding value.
6.3 SYNTAX
CSS syntax consists of a selector and a declaration block. The selector targets the
HTML elements, and the declaration block contains property-value pairs that define the
styles. For example, in p { color: blue; }, p is the selector, and color: blue; is the declaration
that sets the text color to blue.
Ex: p { color:blue;
font-size: 16px;
text-align: center; }
6.4 BACKGROUND

CSS background properties are used to define the background effects for elements.
These properties allow you to set background colors, images, positions, and more.

COMMON BACKGROUND PROPERTIES

1. background-color: Sets the background color of an element.

2. background-image: Sets an image as the background.
3. background-repeat: Controls how background images are repeated.

29
 4. background-position: Sets the starting position of a background image.
5. background-size: Specifies the size of the background image.
6. background-attachment: Sets whether a background image scrolls with the rest of
the page.

Fig 6.4.1 Background properties

6.5 HEIGHT AND WIDTH

CSS height and width properties are used to set the size of elements. These properties
can define the dimensions of an element explicitly or relative to its parent container.

COMMON PROPERTIES

1. width: Sets the width of an element.

2. height: Sets the height of an element.
3. max-width: Sets the maximum width of an element.
4. min-width: Sets the minimum width of an element.
5. max-height: Sets the maximum height of an element.
6. min-height: Sets the minimum height of an element.

Ex:

div { width: 50%;

30
 max-width: 600px;

height: 200px;

min-width: 300px;

max-height: 400px;

min-height: 100px;

background-color: lightgreen; }

6.6 INHERITENCE AND CASCADE

CASCADE:

CSS cascade refers to the process of determining which styles apply to an element when
multiple rules could apply. It follows these principles:

 Styles from different sources are combined.

 Specificity of selectors determines which rule takes precedence.
 Inline styles override styles in external CSS files.

INHERITANCE:

CSS inheritance defines which properties are passed from parent elements to their
children. By default, properties related to text styling (like color, font-family, font- size) are
inherited, while others are not.

Ex:
p { color: blue;
font-family: Arial, sans-serif; }
#special-paragraph { color: red;
font-weight: bold; }
6.7 BORDERS
CSS borders define the outline of an element. border to set a border's width, style, and
31
color; border-radius for rounded corners; and border-color to specify the color.

CHAPTER 7
32
 CSS BOXMODEL AND ICONS
7.1 MARGIN

CSS margin properties control the space outside of an element's border. Margins are
used to create space between elements on a webpage.

COMMON MARGIN PROPERTIES

1. margin: Sets all margins (top, right, bottom, left) simultaneously.

2. margin-top, margin-right, margin-bottom, margin-left: Sets individual margins.
3. margin: auto: Automatically centers an element horizontally within its parent
container.

7.2 PADDING

CSS padding properties control the space between an element's content and its border.
Padding is used to create space inside elements.

COMMON PADDING PROPERTIES

1. padding: Sets all paddings (top, right, bottom, left) simultaneously.

2. padding-top, padding-right, padding-bottom, padding-left: Sets individual
paddings.

Ex: div { padding: 20px;

padding-top: 10px;}

7.3 CONTENT

The CSS content property is used primarily with pseudo-elements (::before and ::after)
to insert content before or after an element's actual content in HTML. It's commonly used for
decorative purposes or to insert additional text or symbols.

Ex:

.element::before {
33
 content: "\2022";}

7.4 LISTS
For styling the lists using CSS, the default bullets can be removed or numbers with
list-style: none;, customize bullets using li:before for symbols or icons, and arrange items
horizontally with display: inline-block; or display: flex;. These techniques allow precise
control over list appearance and layout in web design.
7.5 ICON FONTS

Icon fonts are a convenient way to add scalable vector icons to your web projects using
CSS.This can be implemented by

1.Include Icon Font Library

2.Apply Icons

3. Style Icons

7.6 LINKS:
Links can be styled with any CSS property (e.g., colour, font-family, background,
etc.).
7.7 DISPLAY
The display property specifies if/how an element is displayed. Every HTML element
has a default display value depending on what type of element it is. The default display value
for most elements is block or inline. A block-level element always starts on a new line and
takes up the full width available (stretches out to the left and right as far as it can).
Ex:

34
Fig .7.7.1 Display properties

35
 CHAPTER 8
CSS POSITION,NAVIGATION BARS,GRADIENTS

8.1 POSITIONING
The position property specifies the type of positioning method used for an element.
There are five different position values:
1.static- HTML elements are positioned static by default.
2.relative- An element with position: relative; is positioned relative to its normal position.
3.fixed- An element with position: fixed; is positioned relative to the viewport, which
means it always stays in the same place even if the page is scrolled.
4.absolute- An element with position: absolute; is positioned relative to the nearest
positioned ancestor (instead of positioned relative to the viewport, like fixed)..
5.sticky- An element with position: sticky; is positioned based on the user’s scroll position
8.2 GRADIENTS
CSS gradients let you display smooth transitions between two or more specified
colours. CSS defines three types of gradients:
 Linear Gradients (goes down/up/left/right/diagonally)
 Radial Gradients (defined by their centre)
 Conic Gradients (rotated around a centre point)
Syntax:
background-image: linear-gradient (direction, color-stop1, color-stop2, ...);
8.3 NAVIGATION BARS
A navigation bar needs standard HTML as a base. A navigation bar is basically a list of
links, so using the <ul>and<li> elements makes perfect sense. List-style-type: none; -
Removes the bullets. A navigation bar does not need list markers. Display: block; -
Displaying the links as block elements makes the whole link area clickable (not just the text),
and it allows us to specify the width (and padding, margin, height, etc.) width: 60px; - Block
elements take up the full width available by default. Add text-align:center to <li> or<a> to
center the links.
8.4 INLINE-BLOCKS
Compared to display: inline, the major difference is that display: inline-block allows to

36
set a width and height on the element. Also, with display: inline-block, the top and bottom
margins/paddings are respected, but with display: inline they are not. Compared to display:
block, the major difference is that display: inline-block does not add a line-break after the
element, so the element can sit next to other elements.
8.5 FLOAT
The float property is used for positioning and formatting content e.g. let an image float
left to the text in a container.
 left – The element floats to the left of its container
 right – The element floats to the right of its container

37
 CHAPTER 9
CSS SHADOWS, ANIMATIONS AND GRIDS
9.1 SHADOWS
CSS shadows can enhance the visual appeal of elements on your website by adding
depth and dimension. Here are some examples of how to use shadows in CSS:
1.Box Shadows: Use box-shadow to create shadows for block elements.

Fig 9.1.1 Box shadows

2.Text Shadows: Use text-shadow to add shadows to text elements.

Fig 9.1.2 Text shadows

3.Multiple Shadows: Apply multiple shadows to an element for a more complex effect.

Fig 9.1.3 Multiple shadows

9.2 ANIMATIONS
CSS allows animation of HTML elements without using JavaScript or Flash! An
animation lets an element gradually change from one style to another. You can change as
many 34 CSS properties you want, as many times as you want. To use CSS animation, you
must first specify some keyframes for the animation. Keyframes hold what styles the
element will have at cetain times.
9.3 GRID LAYOUT
The CSS Grid Layout Module offers a grid-based layout system, with rows and
columns, making it easier to design web pages without having to use floats and positioning.
38
A grid layout consists of a parent element, with one or more child elements. An HTML
element becomes a grid container when its display property is set to grid or inline-grid. The
vertical lines of grid items are called columns. The horizontal lines of grid items are called
rows. The spaces between each column/row are called gaps.

Fig 9.3.1 CSS Grid

9.4 STYLING BUTTONS

Styling buttons with CSS involves setting background color, text color, padding, and
border radius, and using :hover, :active, and :focus for interactive states. For disabled
buttons, use a gray background and cursor: not-allowed. Icon buttons can be styled with
inline-flex for alignment, and full-width buttons with width: 100%.

39
 CHAPTER 10

ADVANCED CSS

10.1 VARIABLES
CSS variables, also known as custom properties, allows to store values that can be
reused throughout the stylesheet. They are defined with a -- prefix and accessed using the
var() function. For example, it can define a variable for a primary color (--primary-color:
#007bff;) and use it in CSS (color: var(--primary-color);). This makes it easy to maintain
and update your styles consistently across a project.
10.2 RESPONSIVE DESIGN

Responsive design in CSS utilizes @media queries to apply styles based on screen
width (max-width, min-width), ensuring adaptability across devices. Flexible units (% for
widths, em for fonts) and max-width: 100%; for images enable fluid resizing. The
viewport meta tag (<meta name="viewport" content="width=device-width, initial-
scale=1.0">) controls initial scaling on mobile, while CSS Grid (display: grid;) and
Flexbox (display: flex;) streamline layout management for responsive web design.

10.3 TRANSITION,TRANSFORMATION

CSS transitions (transition) allow gradual property changes over specified durations,
controlled by properties like transition-property, transition-duration, transition-timing-
function, and transition-delay.

This enables smooth animations for effects like color fades or size adjustments. CSS
transformations (transform) modify element appearances by translating, rotating, scaling, or
skewing them, enhancing visual dynamics without affecting document flow. together,
transitions and transformations empower designers to create compelling and interactive user
interfaces with responsive and engaging animations on web pages.

10.4 CUSTOM SCROLL BARS

Customizing scroll bars in CSS allows for personalized user experiences by using ::-
webkit-scrollbar selectors to style scrollbar elements like width, height, background-
color, and border-radius. This feature enhances design cohesion by ensuring scroll bars
align with overall site aesthetics, improving usability and visual appeal across browsers.
40
Ex:

::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}

41
 CHAPTER 11

JAVASCRIPT INTRODUCTION

JavaScript is a high-level, interpreted scripting language primarily used for creating

and controlling dynamic website content. Developed in 1995, it allows developers to
implement complex features on web pages, such as interactive forms, animated graphics,
and dynamic content updates. JavaScript is a core technology of the web, alongside HTML
and CSS.

One of the key features of JavaScript is its versatility. It can be used for both client-
side and server-side development. On the client side, JavaScript is used to enhance user
interaction with web pages, create dynamic content, and handle events. On the server side,
with environments like Node.js, it allows for building scalable network applications.

JAVASCRIPT STATEMENT

In JavaScript, statements are instructions that are executed by the browser or Node.js.
A statement can be a simple or complex operation that performs an action, such as assigning
a value to a variable, calling a function or controlling program flow with conditional
statements. Semicolons serve to separate statements in JavaScript, denoting the end of each
statement. Code Blocks in JavaScript serve to unite statements within curly brackets,
allowing multiple statements to be executed as a cohesive entity.

JAVASCRIPT SYNTAX

JavaScript syntax refers to the rules and conventions dictating how code is structured
and arranged withing the JavaScript programming language. This includes statements,
expressions, variables, functions, operators and control flow constructs.

42
// Variable declaration
let c, d, e;
// Assign value to the variable
c = 5;
// Computer value of variables
d = c;
e = c / d;

JAVASCRIPT VARIABLES

JavaScript Variable is the simple name of the storage location where data is stored.

There are two types of variables in JavaScript:

Local variables: declare a variable inside of a block or function.

Global variables: declare a variable outside function or with a window

object.

In JavaScript, you can declare the variables in 4 ways

· Without using any keywords.

· Using the 'var' keyword.
· Using the 'let' keyword.
· Using the 'const' keyword.

some rules for the naming of the identifiers in JavaScript −

· Valid characters − In JavaScript, a variable name can contain digits, alphabetical

characters, and special characters like underscore (_) and dollar sign ($). JavaScript
variable names should not start with a numeral (0-9). They must begin with a letter or
an underscore character. For example, 123test is an invalid variable name
but _123test is a valid one.
· Case sensitivity − Variable names are case sensitive. It means Name and name are
different identifiers.

43
 · Unicode support − The identifiers can also contain the Unicode. So, developers may
define variables in any language.
· Reserve keywords − You should not use any of the JavaScript reserved keywords as
a variable name. For example, break or Boolean variable names are not valid. Here,
we have given a full list of the JavaScript revered keywords.

JAVASCRIPT DATATYPES
JavaScript data types are the types of values that can be represented and manipulated
in a program. JavaScript is a loosely typed language, which means variables can hold values
of any data type without any explicit declaration.

Primitive Data Types:

· Number: Represents both integer and floating-point numbers.

let age = 30;

let temperature = 36.6;
· String: Represents a sequence of characters.

let greeting = "Hello, world!";

· Boolean: Represents a logical entity and can have only two values: true or false.

let isValid = true;

· Null: Represents an intentional absence of any object value.

let emptyValue = null;

· Undefined: Indicates that a variable has not been assigned a value.

· Symbol: A unique and immutable primitive value, often used as keys for object
properties.

let uniqueId = Symbol('id');

Non-Primitive Data Types (Objects):

· Object: A collection of properties, where each property is a key-value pair.

44
 let person = {
name: "Alice",
age: 25,
greet: function() { console.log("Hello!"); }};
· Array: A special type of object used for storing ordered collections of values.

2. let numbers = [1, 2, 3, 4, 5];

· Function: A block of code designed to perform a particular task.

function sayHello() {
console.log("Hello!");
}
· Date: Represents a single moment in time.

let now = new Date();

JAVASCRIPT OPERATORS
JavaScript operators are symbols or keywords that perform operations on values
(operands).
· JavaScript Arithmetic Operators
· JavaScript Assignment Operators
· JavaScript Comparison Operators
· JavaScript Logical Operators
· JavaScript Bitwise Operators
· JavaScript Ternary Operators
· JavaScript Unary Operators
· JavaScript Relational Operators

45
 CHAPTER 12
JAVASCRIPT OBJECTS

JavaScript objects are fundamental to the language, providing a way to structure

data and create complex entities. An object is a collection of related data and/or
functionality consisting of key-value pairs. Each key in an object is a string (or Symbol),
and its associated value can be any data type, including numbers, strings, arrays, functions,
and even other objects

12.1 CREATING OBJECTS

Objects can be created using object literals, the new Object() syntax, or constructor
functions.

//Creating an object using a constructor function

function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
let john = new Person("John", "Doe", 30);

12.2 ACCESSING OBJECT PROPERTIES

Object properties can be accessed using dot notation or bracket notation.

console.log(person.firstName);
console.log(person["lastName"]);

12.3 ADDING AND DELETING PROPERTIES

Properties can be added or deleted from an object dynamically.

person.gender = "male"; // Adding a property

delete person.age; // Deleting a property
46
47
12.4 METHODS IN OBJECTS

Objects can have methods, which are functions defined within the context of the
object.

//Adding a method to an object

person.fullName = function() {
return this.firstName + " " + this.lastName;
};
console.log(person.fullName());

12.5 NESTED OBJECTS

Objects can contain other objects as properties, creating nested structures.

let employee = {
name: "Alice",
position: "Developer",
address: {
street: "123 Main St",
city: "New York",
zip: "10001"
}
};

48
 CHAPTER 13
JAVASCRIPT CONDITIONS AND LOOPS

JavaScript conditions and loops are fundamental control structures that enable
developers to dictate the flow of their programs. They allow for decision-making and
repetitive execution of code blocks based on certain conditions.

13.1 CONDITIONAL STATEMENTS

if Statement

· The if statement is used to execute a block of code only if a specified condition is

true.

let time = 10;

if (time < 12) {
console.log("Good morning");
}

if...else Statement

· The if...else statement executes one block of code if the condition is true, and another
block if it is false.

let time = 18;

if (time < 12) {
console.log("Good morning");
} else {
console.log("Good afternoon");
}

if...else if...else Statement

· This statement tests multiple conditions in sequence and executes the corresponding
block of code for the first true condition.
49
let time = 14;
if (time < 12) {
console.log("Good morning");
} else if (time < 18) {
console.log("Good afternoon");
} else { console.log("Good evening");}

switch Statement

· The switch statement executes one of many blocks of code based on the value of an
expression.

let day = 3;
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
default:
console.log("Unknown day");
}

13.2 LOOPING STATEMENTS

for Loop

· The for loop is used when the number of iterations is known. It consists of three
parts: initialization, condition, and increment.

for (let i = 0; i < 5; i++) {

console.log("The number is " + i);
}

50
while Loop

· The while loop executes a block of code as long as a specified condition is true.

let i = 0;
while (i < 5) {
console.log("The number is " + i);
i++;
}

do...while Loop

· The do...while loop is similar to the while loop, but it executes the block of code at
least once before checking the condition.

let i = 0;
do {
console.log("The number is " + i);
i++;
} while (i < 5);

13.3 BREAKING AND CONTINUING LOOPS

break Statement

· The break statement exits a loop immediately, skipping any remaining iterations.

for (let i = 0; i < 5; i++) {

if (i === 3) break;
console.log("The number is " + i);
}
continue Statement

· The continue statement skips the current iteration and proceeds to the next iteration
of the loop.

for (let i = 0; i < 5; i++) {

if (i === 3) continue;
console.log("The number is " + i);
}

51
13.4 NESTED LOOPS

· Nested loops are loops inside other loops, often used for working with multi-
dimensional data structures.

for (let i = 0; i < 3; i++) {

for (let j = 0; j < 3; j++) {
console.log("i = " + i + ", j = " + j);
}}

Conditional (Ternary) Operator

· The conditional operator (? :) is a shorthand for the if...else statement. It assigns a

value based on a condition.

let age = 18;

let canVote = (age >= 18) ? "Yes" : "No";
console.log(canVote);

Logical Operators in Conditions

· Logical operators (&&, ||, !) are often used in conditional statements to combine
multiple conditions.

Complex Conditions

· Complex conditions can be created using a combination of logical operators and

parentheses to ensure correct order of operations.

let age = 22;

let hasPermission = true;
if ((age >= 18 && age <= 25) || hasPermission) {
console.log("Access granted");}

52
Using Loops with Arrays
let fruits = ["Apple", "Banana", "Cherry"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
let i = 0;
while (i < fruits.length) {
console.log(fruits[i]);
i++;
}

Using Loops with Objects

let car = { make: "Toyota", model: "Camry", year: 2020 };
for (let key in car) {
console.log(key + ": " + car[key]);
}

53
 CHAPTER 14
JAVASCRIPT DOM

JavaScript is an essential web technology, empowering developers to create

dynamic and interactive web pages. A core concept in JavaScript that allows for this
interactivity is the Document Object Model (DOM). The DOM is a programming interface
for web documents, representing the structure of a document as a tree of objects.

14.1 SELECTING DOM ELEMENTS

· DOM elements can be selected using methods like getElementById,

getElementsByClassName, and querySelector.

let element = document.getElementById("myElement");

14.2 MODIFYING DOM ELEMENTS

· DOM elements can be modified by changing their properties or attributes.

element.innerHTML = "New Content";

element.style.color = "blue";

14.3 EVENT HANDLING

· JavaScript can handle events like clicks, key presses, and form submissions.

element.addEventListener("click", function() {
alert("Element clicked!");
});

54
14.4 DOM TRAVERSAL

· DOM traversal allows navigation through parent, child, and sibling elements.

let parent = element.parentNode;

let children = element.childNodes;

14.5 CREATING AND INSERTING ELEMENTS

· JavaScript enables dynamic creation and insertion of new elements into the DOM,
allowing for flexible content management.

let newDiv = document.createElement("div");

newDiv.innerHTML = "New content”;

let parent = document.getElementById("myParent");

parent.appendChild(newDiv);

14.6 REMOVING ELEMENTS

· Removing elements from the DOM is essential for managing content dynamically
and maintaining a streamlined user interface.

55
 CHAPTER 15
JAVASCRIPT NAVIGATION

15.1 BROWSER HISTORY

The history object allows manipulation of the browser's history stack.

history.back(); // Go to the previous page

history.forward(); // Go to the next page

15.2 LOCATION OBJECT

The location object contains information about the current URL and can be used to
redirect the browser.

// Redirecting the browser

location.href = "https://www.example.com";

15.3 ROUTING IN JS FRAMEWORKS

Modern frameworks provide sophisticated routing solutions for SPAs.

//React Router basic setup

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
}

Single Page Applications (SPAs)

SPAs load a single HTML page and dynamically update content as the user
interacts with the app.
56
//Simple SPA setup
function loadPage(page) {
fetch(page)
.then(response => response.text())
.then(html => {
document.getElementById("content").innerHTML = html;
});
}
window.addEventListener("hashchange", function() {
loadPage(location.hash.substring(1));
});

57
 CHAPTER 16

DATABASE

Databases are crucial in full stack web development, providing the infrastructure to
efficiently store, manage, and retrieve data. They enable dynamic web application features
like user authentication, content management, e-commerce, and real-time updates. By
organizing data in structured formats, databases support complex queries and transactions,
ensuring data is accessible, secure, and well-managed.

MySQL, a popular open-source relational database, is known for its robustness and
ease of use. It supports standard SQL and integrates well with various programming
languages. Integrating MySQL with web applications typically involves using Node.js and
Express.js. Node.js offers an event-driven, non-blocking architecture ideal for handling
multiple database operations, while Express.js simplifies API development and HTTP
request handling. This integration enables the creation of responsive, data-driven web
applications that provide real-time, interactive experiences for users.

16.1 SETTING UP THE PROJECT

· Initializing the project

To start setting up the project, create a new directory and initialize a Node.js
environment:

Fig 16.1.1 Project initialization commands

The mkdir command creates a directory named node-express-mysql, and cd navigates

into this directory. npm init -y initializes a new Node.js project with default settings,
creating a package.json file that manages the project's dependencies and scripts.
58
 · Installing Dependencies

Fig 16.1.2 Commands for installing packages

Express: A fast, unopinionated, minimalist web framework for Node.js that simplifies
setting up a web server.
mysql2: A MySQL client for Node.js, enabling interaction with MySQL databases.
body-parser: Middleware for parsing incoming request bodies in middleware before
handlers, available under the req.body property.
This setup establishes the foundation for developing a Node.js application with
MySQL integration, ensuring efficient handling of server-side operations and database
interactions.

16.2 DATABASE CONNECTIONS

Configure the MySQL connection in Node.js application. Create a file named db.js
to handle database connections:

const mysql = require('mysql2');

require('dotenv').config();

This will load environment variables from .env file

Fig 16.2.1 Code to connect Database

59
 This setup ensures efficient and secure database connections, allowing the application
to perform SQL queries and interact with the MySQL database seamlessly. Use the
connection pool in the application’s routes to execute queries and handle database
operations.

Environment Variables:

DB_HOST=localhost

DB_USER=root

DB_PASSWORD=password

DB_DATABASE=mydatabase

16.3 CREATING A MYSQL DATABASE

· Create a Database:

CREATE DATABASE mydatabase;

· Use the Database:

USE mydatabase;

3. Create a Table:

Fig 16.2.2 Query to Create Table

60
4. CREATE DATABASE mydatabase; creates a new database named mydatabase.

5. USE mydatabase; switches to the newly created database so subsequent commands

will apply to it.

6. CREATE TABLE users (...); creates a users table with columns for id, username,
email, password, and created_at.

16.4 SWITCHING TO THE DATABASE

To switch the current MySQL session to use mydatabase for subsequent operations, an
SQL query is executed to USE the database. The process includes error handling within the
callback function. If an error occurs, it logs an error message; otherwise, it proceeds with
the operation. This ensures that the session correctly switches to the mydatabase and
provides clear feedback to any issues.

Fig 16.4.1 Database Switching

16.5 CREATING A TABLE

To create the users table in the mydatabase, an SQL query is executed, defining the
table schema with columns id, username, password, and email. The process includes error
handling within the callback function. If an error occurs, it logs an error message;
otherwise, it logs a success message confirming the table's creation. This ensures robust and
clear feedback during the table creation process.

61
 Fig 16.5.1 Creating a Table

16.6 CRUD OPERATIONS

CRUD operations (Create, Read, Update, Delete) are fundamental actions performed
on a database.

Read (Retrieve Data)

Retrieve all records:
SELECT * FROM users;
Retrieve a single record by ID:
SELECT * FROM users WHERE id = 1;
· Update (Modify Data)

Fig 16.6.1 Create Data Operation

· Delete (Remove Data)

DELETE FROM users WHERE id = 1;

62
 Create (Insert Data)

Fig 16.6.2 Create Data Operation

16.7 BUILDING THE EXPRESS.JS API

The application uses Express.js to build an API that exposes endpoints for interacting
with the users table. Middleware such as body-parser is employed to parse incoming JSON
data. API routes are defined to handle various HTTP requests: POST for creating a user,
GET for fetching all users, PUT for updating user details by ID, and DELETE for deleting a
user by ID. Error handling middleware is implemented to log and respond to errors that may
occur during request processing, ensuring robustness in API responses and user interaction.

63
Fig 16.7.1 Express App initialisation

64
Fig 16.7.2 ExpressJS routes

65
16.8 FRONTEND INTEGRATION

JavaScript leverages the fetch API to interact with the backend API endpoints
asynchronously. Upon page load, it fetches and displays all users within the container.
Additionally, it demonstrates usage scenarios for creating, updating, and deleting users,
illustrating seamless integration between frontend user actions and backend data
manipulation operations.

Fig 16.8.1 Fetch API POST method usage

Fig 16.8.2 Fetch API PUT and DELETE methods usage

66
16.9 SECURITY CONSIDERATIONS

· Protection Against SQL Injection: Implement parameterized queries and input

validation to prevent SQL injection attacks, ensuring secure database interactions.

· Sensitive Data Handling: Employ encryption techniques for sensitive data storage
and transmission, leveraging HTTPS to encrypt communication between client and
server.

· Authentication and Authorization: Implement robust authentication mechanisms

such as JWT (JSON Web Tokens) or OAuth for secure user access control. Role-
based access control (RBAC) was enforced to limit privileges based on user roles.

· Error Handling and Logging: Utilize structured logging to monitor and analyze
security events, while minimizing exposure of detailed error messages in production
environments.

67
 CHAPTER 17
HOSTING INTRODUCTION

A service known as web hosting enables people and businesses to publish their
websites online. It entails keeping website files on powerful PCs called web servers that are
linked to fast networks. The web server that hosts a website is contacted by the internet
when a user types in its address, and the user's browser receives the requested pages. The
technology and support required for a website to be viewed online are provided by web
hosting companies. These services, which guarantee that websites function properly and are
always accessible, frequently include email hosting, domain name registration, and
technical support.

Different types of web hosting cater to various needs. Shared hosting is the most
common and affordable option, where multiple websites share the same server resources.
Virtual Private Server (VPS) hosting offers more control and resources by partitioning a
physical server into multiple virtual servers. Dedicated hosting provides an entire server
exclusively for one website, offering maximum performance and control but at a higher
cost. Cloud hosting uses a network of virtual servers to host websites, ensuring high
reliability and scalability. Each type of hosting has its advantages, depending on the
website's size, traffic, and specific requirements.

Additionally, web hosting providers often offer various features to enhance website
functionality and security. These can include automated backups, SSL certificates for secure
connections, and Content Delivery Networks (CDNs) to speed up the delivery of content to
users worldwide. Many hosts also provide website builders and one-click installations for
popular Content Management Systems (CMS) like WordPress, making it easier for users to
create and manage their sites. Advanced hosting plans may offer specialized services such
as managed hosting, where the provider takes care of all technical aspects, allowing website
owners to focus solely on content and business operations.

68
 CHAPTER 18

TYPES OF WEB SERVICES

There are various types of web hosting available, each suited to varying requirements
and levels of online visibility. The least expensive and most user-friendly option is shared
hosting, in which several websites share a single server's CPU, RAM, and bandwidth. This
shared environment is perfect for small websites, personal blogs, and startups with low
traffic and technical requirements because it is inexpensive and simple to manage. The
drawbacks are that there is less control over server settings and that other sites hosted on the
same server may have an impact on performance.

18.1 VIRTUAL PRIVATE SERVER (VPS)

A Virtual Private Server (VPS) is a type of web hosting where a physical server is
divided into multiple virtual servers, each with its own dedicated resources like CPU, RAM,
and storage. This virtualization technology allows each VPS to function independently with
its own operating system and software, providing more control and flexibility compared to
shared hosting.

VPS hosting offers better performance since resources are not shared with other users,
ensuring consistent and reliable service. It allows greater customization, enabling users to
install and configure software, manage security settings, and optimize performance
according to their needs. Enhanced security is another benefit, as the activities of one user
do not affect others, reducing the risk of breaches. Additionally, VPS hosting is scalable,
allowing easy resource upgrades as a website grows without downtime or migration. This
makes VPS hosting ideal for websites needing more resources and control than shared
hosting offers, but not yet requiring dedicated hosting.

69
18.2 DEDICATED HOSTING

Dedicated hosting allocates an entire physical server to one user or website, offering
maximum performance, control, and security. Users can customize server configurations,
install software, and manage security settings without sharing resources with others. This
high level of reliability and flexibility is ideal for high-traffic websites or resource-intensive
applications, though it is more expensive than shared or VPS hosting.

18.3 CLOUD HOSTING

Cloud hosting uses a network of virtual servers to host websites, distributing resources
across multiple physical machines. It offers high reliability and scalability, allowing
websites to handle varying traffic demands efficiently. Users pay for resources used, making
it cost-effective and scalable. Cloud hosting is ideal for businesses needing flexibility,
resilience, and the ability to quickly scale resources up or down based on demand.

18.4 MANAGED HOSTING

Managed hosting is a type of web hosting where the service provider takes care of all
technical aspects of server management for the user. This includes hardware and software
setup, configuration, maintenance, security patches, updates, and monitoring. Managed
hosting allows businesses to focus on their core activities without worrying about server
management tasks. It is ideal for users who lack technical expertise or prefer to delegate
server management responsibilities to experts.

70
 CHAPTER 19
WEB HOSTING FEATURES

Web hosting features are essential components that influence the functionality, security,
and ease of management for websites. Fundamental aspects include storage and bandwidth
capabilities, determining how much data can be stored and the volume of traffic the site can
handle efficiently. High uptime guarantees, typically 99.9% or above, ensure the website
remains accessible with minimal downtime. Security features such as SSL certificates,
firewalls, and DDoS protection safeguard against cyber threats, complemented by regular
backups for data restoration in emergencies. Scalability options allow easy upgrades to
resources like CPU, RAM, and storage, accommodating growing traffic and data needs.
User-friendly control panels simplify account management, while email hosting services
offer features like spam filtering and webmail access. Reliable 24/7 customer support
resolves technical issues promptly, enhancing overall user experience. Performance
optimization tools such as Content Delivery Networks (CDNs) and SSD storage contribute
to faster load times and improved server efficiency. Domain management services
encompass registration, renewal, and transfer, often with additional features like domain
privacy and support for subdomains. Development tools supporting databases and
programming languages further enhance website functionality and customization
capabilities.

Furthermore, features like an easy-to-use control panel (like Plesk or cPanel) simplify
file management, email setup, and domain settings. Caching systems and CDN integration
are examples of performance-enhancing technologies that maximise load speeds and lessen
server stress, which are essential for effectively managing peak traffic. Python, PHP, and
MySQL are just a few of the databases and programming languages that development
support, allowing for advanced customisation and application development to meet a wide
range of technical and website needs. These extensive features guarantee that websites are
safe, easily navigable, and capable of expanding and skillfully responding to changing
needs.

71
 CHAPTER 20
WEB HOSTING PLATFORMS

Web hosting platforms serve as the fundamental technologies and environments that
support websites on the internet. They provide the necessary infrastructure and tools for
website operation, catering to diverse needs and technical requirements. These platforms
vary widely in features, scalability, and management options. Shared hosting offers cost-
effective solutions with shared server resources, suitable for smaller websites. Virtual
Private Servers (VPS) provide more control and scalability by partitioning a physical server
into virtual servers. Dedicated hosting offers maximum performance and control with an
entire server dedicated to one user. Cloud hosting utilizes a network of servers for
scalability and reliability, adapting resources based on demand. Managed WordPress
hosting optimizes for WordPress sites with specialized features like automatic updates and
enhanced security. Reseller hosting allows users to resell hosting services with tools to
manage multiple client accounts. Each platform addresses specific needs, ensuring websites
are hosted efficiently and securely.

20.1 SHARED HOSTING PLATFORMS

Shared hosting platforms allocate server resources among multiple websites on the
same server. It's a cost-effective option where users share server space, CPU, RAM, and
other resources, reducing individual costs. This type of hosting is ideal for small to
medium-sized websites with moderate traffic, such as personal blogs or small business
websites. Shared hosting providers manage server maintenance, security, and technical
support, simplifying management for users without extensive technical expertise. However,
resource sharing can lead to performance fluctuations if neighboring sites experience high
traffic or resource consumption, making it less suitable for high-traffic or resource-intensive
websites.

72
 CHAPTER 21

DOMAIN SERVICES

Domain services offered by web hosting providers are essential for managing and
utilizing domain names effectively online. These services simplify registration,
management, and maintenance tasks, ensuring smooth operation of websites and reliable
online presence. Features include DNS configuration, domain transfers, privacy protection,
email forwarding, and subdomain management, catering to diverse needs in the digital
domain landscape.

21.1 DOMAIN REGISTRATION

The process of obtaining and formally registering a distinctive domain name for use on
the internet is known as domain registration. It entails choosing a domain name that is
available, giving contact details, and setting DNS to point the domain to the correct servers.
In order to access the associated website, users must first establish the web address
(www.example.com), so registering a domain name is an essential first step in creating an
online presence and guaranteeing website visibility.

21.2 DOMAIN TRANSFER AND RENEWAL

Domain transfer involves moving a domain name from one registrar to another,
typically to benefit from better service or pricing. This process requires unlocking the
domain at the current registrar, obtaining an authorization code (EPP code), and initiating
the transfer with the new registrar, which may take several days to complete. Domain
renewal extends the registration period beyond the initial term by paying a renewal fee to
the registrar before the domain's expiration date, ensuring continued ownership and
uninterrupted website accessibility under the domain name on the internet. Both processes
are essential for managing and maintaining domain ownership effectively.

73
21.3 DOMAIN MANAGEMENT TOOLS

Domain management tools provided by hosting providers allow customers to

efficiently control their domains. These tools include interfaces for updating contact details,
managing DNS settings for server redirection, setting up redirects, and configuring domain
privacy settings to protect personal information from WHOIS queries. They ensure domains
remain secure, accessible, and aligned with operational needs and preferences online.

21.4 DOMAIN PRIVACY PROTECTION

Domain privacy protection is a service provided by domain registrars to hide the

personal contact information of domain owners from public view in the WHOIS database.
Instead of showing personal details, it displays generic contact information, reducing spam
and protecting against identity theft and unwanted solicitations, while still complying with
registration requirements.

21.5 SUBDOMAINS AND DOMAIN FORWARDING

Subdomains are extensions of a main domain that allow for additional organization and
customization of a website's URL structure. They precede the main domain name (e.g.,
blog.example.com) and can represent different sections or functions of a site, such as a blog
or a store. Domain forwarding, also known as URL forwarding, redirects traffic from one
domain or subdomain to another designated destination. This feature helps consolidate web
traffic and ensures seamless access to content by directing visitors to specific URLs or
consolidating multiple domains under a single website.

21.6 DNS MANAGEMENT

Users can now alter DNS records, including A (Address), CNAME (Canonical Name),
MX (Mail Exchange), and TXT (Text), according to their preferences. This adaptability
makes it possible to fine-tune how domain names resolve to particular IP addresses or other
services, which is necessary for setting up email services linked to the domain or integrating
with third-party platforms.

74
 CHAPTER 22

DEVELOPER TOOLS

Developer tools in web hosting support efficient website development and

customization. They include programming language support (e.g., PHP, Python), databases
(e.g., MySQL), version control systems like Git, and SSH access for secure file
management. These tools enable developers to build dynamic websites and applications
while maintaining control over configuration, performance, and security within their
hosting environment.

22.1 DATABASE SUPPORT

Web hosting platforms offer essential database support for managing dynamic content
and user data efficiently. They typically support popular databases like MySQL,
PostgreSQL, MongoDB, and SQLite, providing tools such as phpMyAdmin for easy
database administration directly from a web browser. These features enable users to create,
modify, and query databases seamlessly, supporting the development and maintenance of
robust websites and applications with reliable data storage capabilities.

22.2 PROGRAMMING LANGUAGES

Web hosting platforms support essential programming languages like PHP, Python,
Ruby, Node.js, and Java for developing dynamic websites and applications. These
languages enable server-side scripting, database integration, and complex functionality
implementation. Hosting services offer optimized environments tailored to each language,
ensuring compatibility and facilitating efficient development with frameworks and libraries.

75
22.3 VERSION CONTROL SYSTEMS

Git integration is essential for code management and collaborative development with
version control systems (VCS). Git repositories, SSH access, and tools for branching,
merging, and deploying code changes are frequently offered by hosting platforms. As a
result, team members can collaborate more effectively and version control integrity is
maintained throughout the development process.

22.4 DEVELOPMENT STAGING ENVIRONMENTS

Development staging environments provided by advanced hosting services allow

developers to safely test and preview website changes before deploying them to production.
These environments closely replicate the production setup, enabling developers to identify
and resolve issues without impacting the live site's performance or user experience.

22.5 SECURITY AND MONITORING

Developer tools in web hosting also include crucial security features such as SSL/TLS
certificates, firewall configurations, and malware scanning capabilities. Hosting providers
often integrate monitoring tools and analytics dashboards that track website performance,
uptime metrics, and security threats. These tools offer developers actionable insights to
optimize application performance and enhance security measures proactively.

76
 CHAPTER 23

SEO AND MARKETING TOOLS

A range of SEO (Search Engine Optimization) and marketing tools are available from
web hosting companies to improve the effectiveness and visibility of websites. For
companies and individuals trying to boost their search engine rankings, draw in more
customers, and maximize their digital marketing initiatives, these tools are essential.

23.1 KEYWORD RESEARCH

Keyword research tools integrated by hosting providers enable users to identify

relevant keywords and phrases that potential customers use when searching for products or
services online. This feature helps website owners strategically optimize their content to
align with popular search queries, enhancing organic search visibility and driving targeted
traffic to their sites. This capability is essential for improving SEO efforts and maximizing
the effectiveness of digital marketing strategies deployed on hosted websites.

23.2 ON-PAGE SEO OPTIMIZATION

These tools offer recommendations for adhering to SEO best practices when it comes to
optimising meta tags, headings, image alt attributes, and overall content structure. Websites
can increase organic traffic and engagement by optimising these components to increase
their likelihood of ranking higher in search engine results pages (SERPs) for targeted
keywords.

23.3 SEO AUDITING

SEO auditing tools provided by hosting providers analyze various aspects of a website's
SEO performance, including page load speed, mobile-friendliness, and broken links.

Additionally, hosting services integrate with analytics platforms like Google

Analytics, offering insights into traffic sources, user demographics, and behavior. Some
hosting providers also include email marketing tools or integrations with third-party
platforms, enabling businesses to create, manage, and track email campaigns directly from
their hosting control panels.

77
 CHAPTER 24

OS CHOICES

Web hosting providers offer a variety of operating system (OS) choices such as Linux
and Windows, each suited to different technical requirements and preferences for websites
and applications.

24.1 LINUX HOSTING

Linux is one of the most widely used options for web hosting because of its open-
source, security, and dependability. Typically, distributions like CentOS, Ubuntu, or Debian
power hosting environments. Numerous programming languages and frameworks, such as
PHP, Python, Ruby on Rails, and Perl, are supported by Linux hosting. It works well with
websites created with content management systems (CMS) like WordPress, Joomla, and
Drupal as well as custom applications that need web servers like Nginx or Apache.

24.2 WINDOWS HOSTING

Windows hosting works with SQL Server databases, ASP.NET, and ASP Classic, and
it runs on Microsoft's Windows Server operating system. It is perfect for companies and
developers who are accustomed to working with Microsoft environments because it
supports languages like C#, Visual Basic, and.NET frameworks. Because it provides strong
support for.NET applications and Microsoft SQL databases, this hosting option is
recommended for websites and applications that need to work with Microsoft tools and
technologies.

24.3 DEVELOPER-FRIENDLY OPTIONS

Some hosting providers specialize in developer-centric services, offering optimized OS

choices for development and testing environments. These include pre-configured setups for
various programming languages, integration with version control systems like Git, and tools
that streamline coding and deployment processes. These environments are invaluable for
developers seeking to build, test, and deploy applications efficiently, without the
complexities of server management.

78
 CHAPTER 25

SECURITY AND BACKUPS

Security and backup services offered by web hosting providers are critical for
safeguarding websites and data against various threats and ensuring continuous availability.
These services encompass comprehensive measures to protect against cyber threats and
mitigate risks associated with data loss and system failures.

Web hosting platforms prioritize security features such as SSL/TLS certificates,

which encrypt data transmitted between users and servers to secure transactions and protect
sensitive information like login credentials and financial details. Firewall protection is
another vital component, filtering incoming and outgoing traffic to block unauthorized
access attempts and thwart malicious attacks.

Additionally, robust DDoS mitigation services detect and neutralize large-scale

attacks that aim to overwhelm servers with excessive traffic, ensuring uninterrupted website
availability even during peak traffic periods. Regular malware scanning and automated
removal tools are deployed to detect and eliminate malware infections, thereby
safeguarding website security and reputation.

Furthermore, server hardening practices are implemented, including timely security

patching, disabling unnecessary services, and implementing secure authentication
mechanisms. These measures strengthen defenses against potential vulnerabilities and
ensure the overall security posture of hosted websites.

79
25.1 BACKUP SOLUTIONS

Web hosting providers offer automated backup services that schedule regular backups
of website files, databases, and configurations. These backups are securely stored on remote
servers or in separate data centers to mitigate the risk of data loss caused by hardware
failures or unexpected disasters. Flexible backup retention policies allow website owners to
define how long backup copies are retained before being overwritten, ensuring compliance
with data retention regulations and facilitating recovery from historical data states if
necessary.

User-friendly interfaces typically include one-click restore options, enabling quick

recovery of websites from backup archives in case of accidental data deletion or
compromise. Offsite backup storage options enhance redundancy and disaster recovery
readiness by storing backup copies in geographically diverse locations. This approach
safeguards against localized disasters and ensures data availability during recovery
scenarios.

Additionally, advanced hosting plans often provide manual backup options, allowing
users to initiate on-demand backups before making significant website changes or updates.
This precaution helps prevent data corruption and safeguards against unintended
modifications, supporting the overall security and integrity of hosted websites.

80
 CHAPTER 26
PROJECT

Fig 26.1 Portfolio Front Page

Fig 26.2 Portfolio About Page

81
Fig 26.3 Portfolio Project Page

Fig 26.4 Portfolio Skills Page

82
Fig 26.5 Portfolio Contact Page

83
 CHAPTER 27
CONCLUSION

In conclusion, the Dynamic Portfolio Website exemplifies the convergence of technical

prowess, design acumen, and strategic implementation of modern web development
practices. This project goes beyond merely serving as a static online resume; it is a
dynamic and interactive showcase of individual technical skills and projects. By leveraging
the foundational web technologies of HTML, CSS, and JavaScript, the website ensures a
strong, versatile, and engaging user interface.
The responsive design of the site guarantees that it remains accessible and visually
appealing across a wide array of devices and screen sizes, from desktops to smartphones.
This responsiveness is crucial in today's digital age, where users expect seamless
experiences regardless of the device they use. Through the effective use of CSS for styling
and layout, the website maintains a consistent and professional look that adapts fluidly to
various screen dimensions.
JavaScript plays a pivotal role in enhancing the interactivity of the website. It powers
dynamic content rendering, allowing users to interact with the site in real-time. This
interactivity is further augmented by API integration, which enables the website to pull and
display real-time data from external sources. This capability ensures that the content
remains current and relevant, showcasing not only the developer's ability to handle real-
time data but also their proficiency in integrating third-party services.
The choice of a reliable web hosting platform underscores the importance of performance
and availability. High availability and fast load times are critical for retaining visitors and
providing a positive user experience. The robust performance of the hosting service
ensures that the site remains accessible and responsive, even under varying traffic loads.
Furthermore, the project highlights best practices in web development, including clean,
maintainable code, and efficient resource management. The seamless blend of front-end
technologies and back-end capabilities demonstrates a comprehensive understanding of
full-stack development.

84
 CHAPTER 28
REFERENCES

 Responsive Web Design by Ethan Marcotte.

 High Performance Web Sites by Steve Souders.
 Designing Web Interfaces by Bill Scott and Theresa Neil.
 The Principles of Beautiful Web Design by Jason Beaird.
 Web Form Design: Filling in the Blanks by Luke Wroblewski.
 A List Apart: https://alistapart.com/
 Google PageSpeed Insights:
https://developers.google.com/speed/pagespeed/insights/
 MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web
 CSS-Tricks: https://css-tricks.com/
 WebPageTest: https://www.webpagetest.org

85