Scribd
Upload
46 views39 pages

Full Stack Development - Part 1

Uploaded by

rebeccacharles2306
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
46 views39 pages

Full Stack Development - Part 1

Uploaded by

rebeccacharles2306
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

Full Stack Development

Unit I
HTML: Tags -structuring document -web page–Make it Prettier with CSS-
Loading background images–Organizing files-JavaScript- variables-
Controlling HTML and CSS-Organizing JavaScript code

1.1 HTML: TAGS


Tags Description

Root

<HTML> Root – top level element – others descendants – 1 <html> tag

Meta Information

<base> Inside <head> - set a base URL

<head> meta-information

<title> Document title

<link> Link external resources – CSS , icons, fonts

Meta data – not displayed on the page- machine parsable.


<meta charset="UTF-8">
<meta name="description" content="Learn HTML basics.">
<meta>
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">

Example 1:
<!DOCTYPE html>
<html>
<head>
<!-- Base URL for all relative links -->
<base href="https://www.sairam.edu.in/">
<!-- Metadata -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a sample HTML page using ba
se, link, meta, head, and title tags.">

Full Stack Development 1


<meta name="author" content="ULAGANATHAN MS">
<!-- Title -->
<title>My Sample HTML Page</title>
<!-- External CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Sample Page</h1>
<!-- Relative link that uses <base> -->
<p> this is the sample text </p>
<a href="transport">Contact Us</a>
</body>
</html>

Tags Description

Sectioning Root

<body> Main content

<address> Define contact information

<article> independent, self-contained content

<aside> Define content related to main content – not essential

<footer> Footer section

<header> Introductory content

<h1>..<h6> Levels of Section Heading

<hgroup> Group multiple heading – title and subtitle

<main> Dominant content

<nav> Navigation section

Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Introduction to HTML</title>
</head>
<body>
<header>

Full Stack Development 2


<hgroup>
<h1>Learn HTML</h1>
<h2>Structure the Web with Semantic Tags</h2>
</hgroup>
</header>
<article>
<h2>What is HTML?</h2>
<p>HTML stands for <strong>HyperText Markup Language</strong>. It is
the standard language used to create webpages.</p>
<aside>
<h3>Quick Fact</h3>
<p>HTML was created by Tim Berners-Lee in 1991.</p>
</aside>
</article>
<footer>
<address>
Contact me: <a href="mailto:[email protected]">Click</a><
br>
Sri Sairam Engineering College
</address>
</footer>
</body>
</html>

Tags Description

Text content

<body> Main content

<p> Paragraph

<br> Line Break

<hr> Horizontal line separator

<strong> Important text (bold + semantic meaning)

<b> Bold text (visual only)

<em> Emphasized text (italic + semantic meaning)

<i> Italic text (visual only)

<u> Underlined text

<mark> Highlighted text

Full Stack Development 3


Tags Description

<small> Smaller text

<del> Deleted text

<ins> Inserted (underlined) text

<sub> Subscript

<sup> Superscript

<s> Strikethrough text (non-semantic)

<pre> Preformatted text (preserves spacing and line breaks)

<code> Inline code

<kbd> Keyboard input

<q> Short inline quote

<blockquote> Block quote (longer quotation)

<abbr> Abbreviation with tooltip

<cite> Citing a source (book, article)

<dfn> Definition term

<var> Variable name in programming

<samp> Sample output from program

Example 3:
<!DOCTYPE html>
<html>
<head>
<title>Formatted Text Example</title>
</head>
<body>
<h1>Text Formatting Showcase</h1>
<p>This is a <strong>strong</strong> and <em>emphasized</em> senten
ce with <mark>highlighted</mark> text.</p>
<p><b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <s>Strikethrough</s>
</p>
<p>H<sub>2</sub>O and x<sup>2</sup></p>
<p><del>Old Price</del> <ins>New Price</ins></p>
<pre>
for (int i = 0; i < 5; i++) {
print(i);

Full Stack Development 4


}
</pre>
<p>Use <code>Ctrl + S</code> to save. <kbd>Alt + F4</kbd> to close.</
p>
<p><abbr title="HyperText Markup Language">HTML</abbr> is easy to le
arn.</p>
<p>He said, <q>Practice makes perfect</q>.</p>
<blockquote>
"Success usually comes to those who are too busy to be looking for it."
</blockquote>
<p>This is a definition: <dfn>Internet</dfn> – a global network.</p>
<p>Value of <var>x</var> is 10.</p>

<p>Program Output: <samp>Hello, User!</samp></p>


<p>Reference: <cite>Modern Web Design</cite></p>
</body>
</html>

Tag Purpose

Multimedia

<img> Embed image

<video> Embed video

<audio> Embed audio

<figure> Group image/audio/video with caption

<figcaption> Add caption to figure

<picture> Responsive image handling

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image and Multimedia Gallery</title>
</head>
<body>
<h1>Welcome to the Multimedia Gallery</h1>
<!-- Image Tag -->

Full Stack Development 5


<h2>Image Example</h2>
<img src="https://images.unsplash.com/photo-1506748686214-e9df14d4d
9d0?auto=format&fit=crop&w=600&q=60" alt="Nature" width="300">
<!-- Figure with Caption -->
<h2>Image with Caption</h2>
<figure>
<img src="https://images.unsplash.com/photo-1524492412937-4961d66a
a114?auto=format&fit=crop&w=400&q=60" alt="Mountain Landscape">
<figcaption>A peaceful mountain landscape.</figcaption>
</figure>

<!-- Video Tag -->


<h2>Video Example (Online Source)</h2>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="vide
o/mp4">
Your browser does not support the video tag.
</video>
<!-- Audio Tag -->
<h2>Audio Example (Online Source)</h2>
<audio controls>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Son
g-1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<!-- Picture Tag -->
<h2>Responsive Image Example</h2>
<picture>
<source media="(min-width: 400px)" srcset="https://images.unsplash.co
m/photo-1584395630827-860eee694d7b?auto=format&fit=crop&w=500&
q=40">
<source media="(max-width: 767px)" srcset="https://images.unsplash.co
m/photo-1584395630827-860eee694d7b?auto=format&fit=crop&w=400&
q=80">
<img src="https://images.unsplash.com/photo-1584395630827-860eee69
4d7b?auto=format&fit=crop&w=600&q=80" alt="Forest Landscape" style
="width:50%;">
</picture>

Full Stack Development 6


</body>
</html>

Lists
Tag Description Example
<ul> Unordered list (bullets) <ul><li>Item</li></ul>

<ol> Ordered list (numbers) <ol><li>First</li></ol>

<li> List item <li>Item</li>

<dl> Description list <dl><dt>Term</dt><dd>Definition</dd></dl>

<dt> Term in a description list <dt>HTML</dt>

<dd> Description of the term <dd>HyperText Markup Language</dd>

Table
Tag Description Example
<table> Table container <table>...</table>

<tr> Table row <tr>...</tr>

<td> Table data cell <td>Data</td>

<th> Table header cell <th>Header</th>

<caption> Table title <caption>Student List</caption>

<thead> Group header rows <thead>...</thead>

<tbody> Group body rows <tbody>...</tbody>

<tfoot> Group footer rows <tfoot>...</tfoot>

Forms and Input


Tag Description Example
<form> Form container <form action="submit.php">...</form>

<input> Form field <input type="text">

<textarea> Multi-line text field <textarea></textarea>

<select> Dropdown list <select><option>One</option></select>

<option> Dropdown option <option value="1">One</option>

Full Stack Development 7


Tag Description Example
<button> Clickable button <button>Submit</button>

<label> Label for input <label for="name">Name</label>

Attributes
To represent further information about how an element should be displayed -
Each element can have an attribute - They are always defined in the opening
tag

name = "value"

Attribute Description Example

Unique identifier for an


id <p id="intro">Hello</p>
element

Assigns one or more class


class <div class="container"></div>
names for styling
style Inline CSS styling <h1 style="color:red;">Title</h1>

Extra information shown as a <abbr title="World Health


title
tooltip Organization">WHO</abbr>

Language of the element’s


lang <html lang="en">
content
dir Text direction ( ltr , rtl ) <p dir="rtl">CSE</p>

hidden Hides the element from view <p hidden>This is hidden</p>

Shortcut key to focus/activate


accesskey <button accesskey="s">Save</button>
element

Source file for media (image,


src <img src="image.jpg">
video, script)
href URL for a link <a href="page.html">Click</a>

alt Alternate text for images <img src="photo.jpg" alt="Description">

Where to open the linked <a href="link.html"


target
document ( _blank , _self ) target="_blank">Open</a>

Specifies type (input, button,


type <input type="text">
script, etc.)
name Name for form elements <input name="username">

Full Stack Development 8


Attribute Description Example

Default or current value of an


value <input type="text" value="John">
input
placeholder Short hint for input fields <input placeholder="Enter name">

maxlength Limits number of characters <input maxlength="10">

required Makes input mandatory <input required>

Relationship between linked


rel <link rel="stylesheet" href="style.css">
resource and document
controls Shows media player controls <video controls>

Event Handler Attributes


Mouse Events
Attribute Triggered When Example

User clicks an <button onclick="alert('Clicked!')">Click


onclick
element Me</button>

User double-clicks <p ondblclick="this.style.color='red'">Double


ondblclick
an element Click</p>

Mouse button is <div


onmousedown
pressed down onmousedown="console.log('Down')">Press</div>

Mouse button is
onmouseup <div onmouseup="console.log('Up')">Release</div>
released

Mouse pointer moves <div


onmousemove
over element onmousemove="console.log('Moving')">Move</div>

Pointer enters the <p onmouseover="this.style.color='blue'">Hover


onmouseover
element area Me</p>

Pointer leaves the <p


onmouseout
element area onmouseout="this.style.color='black'">Leave</p>

Pointer enters (no <div


onmouseenter
bubble) onmouseenter="console.log('Enter')">Hover</div>

Pointer leaves (no <div


onmouseleave
bubble) onmouseleave="console.log('Leave')">Out</div>

Keyboard Events

Full Stack Development 9


Attribute Triggered When Example
<input onkeydown="console.log('Key
onkeydown Key is pressed down
down')">

Key is pressed (deprecated in


<input
onkeypress modern HTML, use
onkeypress="console.log('Press')">
onkeydown / onkeyup )

onkeyup Key is released <input onkeyup="console.log('Key up')">

Form Events
Attribute Triggered When Example

Element gains
onfocus <input onfocus="this.style.background='yellow'">
focus

Element loses
onblur <input onblur="this.style.background='white'">
focus

Value changes
onchange <input onchange="alert('Changed!')">
and loses focus

Value changes
oninput <input oninput="console.log(this.value)">
(while typing)

Form is
onsubmit <form onsubmit="alert('Submitted!')">
submitted
onreset Form is reset <form onreset="alert('Form Reset')">

Text is selected
onselect <input onselect="alert('Text selected!')">
in input/textarea

1.2 Structuring Document


Definition: In HTML, structuring a document means organizing the content
in a logical and hierarchical way so that browsers, search engines, and
assistive technologies can interpret it correctly.

The structure is like the skeleton of your webpage — it defines the order
and grouping of content.

Basic HTML Structure


<!DOCTYPE html> – Declares HTML5 document type.

<html> – Root element containing the whole document.

Full Stack Development 10


<head> – Contains metadata (not displayed directly).

<title> – Page title (appears in browser tab).

<body> – Contains all visible page content.

The <head> section


<title> – Sets page title.

<meta> – Specifies character set, viewport, keywords, and description.

<link> – Links CSS stylesheets and favicons.

<style> – Internal CSS styles.

<script> – Internal or external JavaScript.

The <body> section


Text (headings, paragraphs)

Images, videos, audio

Links and navigation menus

Tables and lists

Forms and input elements

1.3 Make it Prettier with CSS


CSS (Cascading Style Sheets) is used to style and enhance the visual
appearance of HTML documents. While HTML structures the content, CSS
makes it attractive and user-friendly.

Why CSS?
Separates content (HTML) from presentation (CSS)

Provides consistency across multiple web pages

Makes websites responsive and visually appealing

Easier to maintain and update

Way to add CSS

Full Stack Development 11


Inline CSS

Written inside the HTML element using the style attribute.

<p style="color: blue; font-size: 18px;">Hello World!</p>

Internal CSS

Written inside the <style> tag in the HTML <head> .

<style>
p { color: green; font-size: 18px; }
</style>

External CSS

Stored in a separate .css file and linked with <link> .

<link rel="stylesheet" href="style.css">

CSS Selectors
Element Selector: p{} → Targets all <p> tags

Class Selector: .className { } → Targets elements with a class

ID Selector: #idName { } → Targets a unique element

Group Selector: h1, p { } → Applies styles to multiple elements

CSS Properties
Text & Font Styling
color → Text color

font-size → Size of text

font-family → Font style (Arial, Times New Roman, etc.)

text-align → left, right, center, justify

text-decoration → underline, none, overline

Backgrounds

Full Stack Development 12


background-color → Sets background color

background-image → Adds an image as background

background-size → cover, contain, auto

background-repeat → repeat, no-repeat

Box Model (Spacing & Borders)


margin → Space outside element

padding → Space inside element

border → Width, style, and color of border

width / height → Element dimensions

Colors
Named colors (e.g., red, blue)

Hex values (e.g., #ff5733 )

RGB / RGBA (e.g., rgb(255,0,0) , rgba(0,0,0,0.5) )

Example 4:
<!DOCTYPE html>
<html>
<head>
<title>Styled Page</title>
<style>
body {
background-color: #f0f8ff;
font-family: Arial, sans-serif;
}
h1 {
color: #2e8b57;
text-align: center;
}
p{
color: #333;
font-size: 18px;
line-height: 1.6;
}

Full Stack Development 13


.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Welcome to CSS Styling</h1>
<p>This is a simple web page with <span class="highlight">prettier</spa
n> styling.</p>
</body>
</html>

CSS Position
Position Behavior
static Default, normal flow
relative Moves relative to itself
absolute Moves relative to nearest positioned parent
fixed Stays fixed in viewport
sticky Sticks when scrolling

Full Stack Development 14


1. static (default)
Elements are positioned in the normal document flow.

<div style="position: static; border: 2px solid blue;">


I am static (default).
</div>

2. relative
Positioned relative to its normal position.
Use top , left , right , bottom to move slightly.

<div style="position: relative; top: 10px; left: 20px; border: 2px solid gree
n;">
I moved 10px down and 20px right.
</div>

3. absolute
Positioned relative to the nearest positioned ancestor (not the viewport).
If no ancestor has position set, it uses the <body> .

<div style="position: relative; border: 2px solid red; height: 100px;">


Parent (relative)
<div style="position: absolute; top: 10px; right: 10px; border: 2px solid ora
nge;">
I am absolute inside parent.
</div>
</div>

4. fixed
Positioned relative to the viewport (stays in place when scrolling).

<div style="position: fixed; bottom: 10px; right: 10px; background: yellow; p


adding: 5px;">

Full Stack Development 15


I stick to the corner even on scroll.
</div>

5. sticky
Behaves like relative until you scroll, then it "sticks" to a position.

<div style="position: sticky; top: 0; background: lightblue; padding: 10px;">


I stick to the top when scrolling.
</div>
<p style="height: 300px;">Scroll down to see sticky effect...</p>

CSS Layout Systems


CSS Flexbox
one-dimensional layout system (row OR column) - aligning items along a
row or a column with flexible resizing - Great for navigation bars, cards,
toolbars, sidebars.

Easily align items horizontally or vertically - Automatically adjust spacing


between items. - Rearrange items without changing HTML - Works well for
responsive design.

Setting up Flexbox

.container
{
display: flex;
}

The container becomes a flex container.

Its children become flex items.

Full Stack Development 16


Example 5: Flexbox
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 200px;
background-color: lightgray;
}
.item {
background: tomato;
padding: 20px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Box 1</div>
<div class="item">Box 2</div>
<div class="item">Box 3</div>

Full Stack Development 17


</div>
</body>
</html>

Flexbox Container Properties


Apply display: flex; to a parent container.
Property Description Values

Defines the direction of row (default), row-reverse , column ,


flex-direction
flex items column-reverse

Aligns items horizontally flex-start , flex-end , center , space-


justify-content
(main axis) between , space-around , space-evenly

Aligns items vertically flex-start , flex-end , center , baseline ,


align-items
(cross axis) stretch

flex-wrap Controls wrapping of items nowrap (default), wrap , wrap-reverse

Aligns multiple lines of flex


align-content Same values as align-items
items

Flexbox Item Properties


Applied to children inside a flex container

Property Description Example

flex-grow Defines how much an item can grow flex-grow: 1;

Full Stack Development 18


Property Description Example

Defines how items shrink when space


flex-shrink flex-shrink: 1;
is tight

Initial size of item before space


flex-basis flex-basis: 200px;
distribution

align-self Overrides align-items for a single item align-self: center;

Example 6: Using wrap in Flexbox


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Responsive Cards with Flexbox</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.card {
flex: 1 1 250px; /* grow, shrink, basis */
max-width: 300px;
background: #f4f4f4;
border-radius: 10px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>Responsive Flexbox Cards</h2>

Full Stack Development 19


<div class="card-container">
<div class="card">
<h3>Card One</h3>
<p>This is a sample description for card one.</p>
</div>
<div class="card">
<h3>Card Two</h3>
<p>This is a sample description for card two.</p>
</div>
<div class="card">
<h3>Card Three</h3>
<p>This is a sample description for card three.</p>
</div>
<div class="card">
<h3>Card Four</h3>
<p>This is a sample description for card four.</p>
</div>
</div>
</body>
</html>

Full Stack Development 20


CSS Grid Layout
Grid is a two-dimensional layout system (rows AND columns).

It allows precise placement of items in both directions.

Perfect for web page layouts, dashboards, galleries.

Grid Container Properties


Property Description Example

grid-template- Defines number and width of grid-template-columns: 200px 1fr


columns columns 2fr;

Defines number and height of


grid-template-rows grid-template-rows: 100px auto;
rows

gap / row-gap ,
Space between grid items gap: 20px;
column-gap

justify-items Aligns items horizontally start , end , center , stretch

align-items Aligns items vertically start , end , center , stretch

justify-content Aligns whole grid horizontally start , center , space-between

align-content Aligns whole grid vertically Same values as above

Grid Item Properties


Property Description Example

grid-column Defines column span grid-column: 1 / 3;

Full Stack Development 21


Property Description Example

grid-row Defines row span grid-row: 2 / 4;

justify-self Aligns item horizontally in its cell center

align-self Aligns item vertically in its cell end

Example 7: CSS Grid


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Grid Layout Example</title>
<style>
.grid-container {
display: grid; /* Enables Grid layout */
grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
gap: 15px; /* Space between grid items */
padding: 20px;
}

.grid-item {
background: lightblue;
border: 2px solid #333;
padding: 20px;
text-align: center;
font-size: 18px;
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Simple Grid Layout</h2>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>

Full Stack Development 22


<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>

Flexbox vs Grid
Feature Flexbox Grid

One-dimensional (row OR Two-dimensional (rows AND


Layout
column) columns)

Navbars, menus, toolbars, Page layouts, image galleries,


Best For
aligning items dashboards

Grid-based (explicit rows &


Control Content-based
columns)

Alignment Easy along main/cross axis Full control over rows & columns

1.4 Loading Background Images


Syntax

{
background-image: url("image.jpg");
}

Common Properties
background-repeat → repeats the image (default).

Values: repeat , no-repeat , repeat-x , repeat-y

background-size → controls image scaling.

Values: cover (fills the area), contain (fits inside), auto (default).

background-position → sets image alignment.

Values: left , center , right , top , bottom , or coordinates (e.g., 50% 50% ).

background-attachment → scrolling behavior.

Full Stack Development 23


scroll (default), fixed (stays in place), local .

background-color → used as fallback when image not loaded.

Example 8: Loading Background Image


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Background Image Example</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}

/* Full page background */


.hero {
height: 100vh;
background-image: url("");
background-size: cover; /* scale image */
background-position: center; /* center image */
background-repeat: no-repeat; /* don't repeat */
display: flex;
justify-content: center;
align-items: center;
color: white;
text-shadow: 2px 2px 5px black;
}
</style>
</head>
<body>
<div class="hero">
<h1>Hello, Background Image!</h1>
</div>

Full Stack Development 24


</body>
</html>

1.5 Organizing Files


When creating a website, keeping files organized is very important. It makes
the project easier to manage, update, and debug.

Easy to find HTML, CSS, JS, and image files.

Helps when the project grows bigger.

Makes teamwork simple.

Avoids broken links and missing files.

Standard Folder Structure

project-folder/
│── index.html (main web page)
│── about.html (another page)
│
├── css/ (all stylesheets)
│ └── style.css
│
├── js/ (all JavaScript files)
│ └── script.js
│
├── images/ (all images)
│ ├── logo.png
│ └── background.jpg
│
├── fonts/ (custom fonts if any)
│ └── myFont.ttf
│
└── assets/ (other files like videos, pdfs, icons)
└── video.mp4

Bytes

Full Stack Development 25


inline and inline-block in CSS

inline: Elements do not start on a new line, and you cannot set
width/height. (e.g., <span> )

inline-block: Elements do not start on a new line, but you can set
width/height.

<style>
.inline {
display: inline;
background: lightcoral;
width: 150px; /* will not work /
height: 50px; /* will not work */
}
.inline-block {
display: inline-block;
background: lightgreen;
width: 150px; /* works */
height: 50px; /* works */
}
</style>

Bouncing Ball Animation

<!DOCTYPE html>
<html>
<head>
<style>
.ball {
width: 50px;
height: 50px;
background: red;
border-radius: 50%;
position: relative;
animation: bounce 1s infinite alternate;
}

Full Stack Development 26


@keyframes bounce {
from { top: 0; }
to { top: 200px; }
}
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>

Difference between Margin and Padding

Margin: Space outside an element’s border (creates gap between


elements).

Padding: Space inside an element’s border (creates space between


content and border).

Box-Sizing Property
The box-sizing property in CSS defines how the total width and height of an
element are calculated.

(default): Width & height include only the content, not


content-box

padding/border.

border-box : Width & height include content + padding + border.

<div style="width:200px; padding:20px; border:5px solid black; box-sizing:


content-box;">
Content-Box
</div>

<div style="width:200px; padding:20px; border:5px solid black; box-sizing:


border-box;">
Border-Box
</div>

In the first one, the actual size becomes 200 + 20 + 20 + 5 + 5 = 250px

Full Stack Development 27


In the second one, the total stays 200px (padding and border shrink the
content).

Center a div horizontally and vertically using CSS

<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center; /* horizontal center */
align-items: center; /* vertical center */
height: 100vh; /* full screen height */
margin: 0;
}
.box {
width: 200px;
height: 100px;
background: lightblue;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">Centered Div</div>
</body>
</html>

Setting up Gradient Background

<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100vh;

Full Stack Development 28


margin: 0;
background: linear-gradient(to right, lightblue, pink);
}
</style>
</head>
<body>
</body>
</html>

defer attribute
The defer attribute in the <script> tag makes the script load in the background
and execute only after the HTML document has been fully parsed.

Question Repository ✅✅✅


1. Create an HTML5 form with fields for username, password, and a
"Remember Me" checkbox. Style it with CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Login Form</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f3f4f6;
}

.form-container {
background: white;

Full Stack Development 29


padding: 20px 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
width: 280px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 5px;
}

.remember {
margin: 10px 0;
font-size: 14px;
}

button {
width: 100%;
padding: 10px;
background: #007bff;
border: none;
color: white;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}

button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Login</h2>
<form>

Full Stack Development 30


<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<label class="remember">
<input type="checkbox"> Remember Me
</label>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>

2. CSS position property with practical examples.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>CSS Position Example</title>
<style>
body {
font-family: Arial, sans-serif;

Full Stack Development 31


margin: 0;
padding: 20px;
}
.box {
width: 120px;
height: 80px;
margin: 20px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}

.static { background: steelblue; position: static; }


.relative { background: green; position: relative; top: 20px; left: 20px; }
.absolute { background: crimson; position: absolute; top: 10px; right: 10p
x; }
.fixed { background: orange; position: fixed; bottom: 10px; right: 10px; }
.sticky {
background: purple;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="box static">Static</div>
<div class="box relative">Relative</div>
<div class="box absolute">Absolute</div>
<div class="box sticky">Sticky</div>
<p> Sri Sai Ram Institute of Technology</p>
<p> Sri Sai Ram Institute of Technology</p>
<p> Sri Sai Ram Institute of Technology</p>
<p> Sri Sai Ram Institute of Technology</p>
<p> Sri Sai Ram Institute of Technology</p>
<p> Sri Sai Ram Institute of Technology</p>
<p> Sri Sai Ram Institute of Technology</p>
<p> Sri Sai Ram Institute of Technology</p>

Full Stack Development 32


<p> Sri Sai Ram Institute of Technology</p>
<p> Sri Sai Ram Institute of Technology</p>
<div class="box fixed">Fixed</div>

</body>
</html>

Full Stack Development 33


3. Design a responsive card layout using CSS Flexbox. Include a
title, image, and description.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Responsive Flexbox Cards</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background: #f4f4f9;
}

.card-container {
display: flex; /*Turns container into Flexbox layout.*/
flex-wrap: wrap; /*Cards will wrap to the next line if screen is small. */
gap: 20px; /*Adds spacing between cards. */

Full Stack Development 34


justify-content: center;
}

.card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
width: 300px;
overflow: hidden; /* hides any extra content that spills out of the contai
ner. */
transition: transform 0.2s; /* Smooth animation when hovering. */
}

.card:hover {
transform: translateY(-5px); /* moves 5px in y direction when hovered
*/
}

.card img {
width: 100%;
height: 200px;
object-fit: cover; /* Image keeps its original shape */
}

.card-content {
padding: 15px;
}

.card-content h3 {
margin: 0 0 10px;
font-size: 1.2rem;
color: #333;
}

.card-content p {
margin: 0;
font-size: 0.95rem;
color: #666;

Full Stack Development 35


}

</style>
</head>
<body>
<h1 style="text-align:center;">Responsive Flexbox Cards</h1>
<div class="card-container">
<div class="card">
<img src="https://picsum.photos/300/200?1" alt="Card Image 1">
<div class="card-content">
<h3>Card Title 1</h3>
<p>This is a description for the first card.</p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/300/200?2" alt="Card Image 2">
<div class="card-content">
<h3>Card Title 2</h3>
<p>This is a description for the second card.</p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/300/200?3" alt="Card Image 3">
<div class="card-content">
<h3>Card Title 3</h3>
<p>This is a description for the third card.</p>
</div>
</div>
</div>
</body>
</html>

Full Stack Development 36


4. Responsive navigation bar using HTML and CSS.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Basic Navbar</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}

/* Navbar container */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 10px 20px;
}

Full Stack Development 37


/* Logo */
.logo {
color: white;
font-size: 20px;
font-weight: bold;
}

/* Navigation links */
.nav-links a {
color: white;
text-decoration: none;
padding: 5px 10px;
}

.nav-links a:hover {
background: #555;
border-radius: 5px;
}
</style>
</head>
<body>

<div class="navbar">
<div class="logo">MySite</div>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</div>

</body>
</html>

Full Stack Development 38


Full Stack Development 39

You might also like