WELCOME TO
FULL STACK DEVELOMENT
.
WHAT IS A
FULL STACK DEVELOPMENT
?
FULL STACK DEVELOPMENT
Full stack development refers
to the end-to-end application
software development, including
the Front End, Back End and
Database
FRONT END DEVELOPMENT
The Front End of a website is the
part that users interact with.
Everything that you see when you're
navigating around the Internet, from
fonts and colors to dropdown
menus and sliders
TECHNOLOGIES USED IN
FRONT END DEVELOPMENT
Memes...
3 THINGS YOU HAVE TO KNOW
IN FRONT END DEVELOPMENT
1.INFORMATION
2. PRESENTATION
3. FUNCTIONALITY
WHAT IS HTML ?
(INFORMATION)
HTML stands for Hyper Text
is Markup Language
the standard markup language for creating Web p
HTML describes the structure of a Web page
HTML
WHAT IS CSS ?
(PRESENTATION)
CSS stands for Cascading Style
SS Sheets
describes how HTML elements are to be displayed
on screen, paper, or in other media
CSS
WHAT IS JS ?
(FUNCTIONALITY)
JS stands for JAVA SCRIPT
Java Script is used to create dynamic and interactive web
content like applications and browsers.
JavaScript is so popular that it's the most used
programming language in the world,
used as a client-side programming language by 97.0% of all
JSwebsites
WEBSITE
WHAT IS A WEBSITE ?
A website is a collection of
linked WEB PAGES
WHY WE CREATE A WEBSITE?
Brand Awareness
Improve Customer Experience
Updates And Announcements
HOW WE CREATE
We Create WEBPAGES ?
Webpages using HTML
DOCUMENT
TOOLS USED TO CREATE A
FRONT END PART OF WEBSITE
• VS Code
• Sublime
• Notepad
BASIC STRUCTURE OF HTML
<!DOCTYPE
<html> html
> <head>
<title> </title>
</head>
<body>
</body>
</html>
WHAT IS DOCTYPE IN
HTML?
• <!DOCTYPE html>
All HTML documents must start
with a <!DOCTYPE html>
declaration.
The DOCTYPE declaration is an
instruction to the web browser
about what version of HTML the
page is written
KNOW ABOUT HEAD TAG
• The <head> element is a
container for metadata (data
about data) and is placed
between the <html> tag and the
<body> tag
• Metadata is data about the HTML
document.
• Metadata is not displayed.
Metadata typically define the
KNOW ABOUT BODY TAG
• The <body> element contains all
the contents of an HTML
document, such as headings,
paragraphs, images, hyperlinks,
tables, lists, etc
• All the Information present in
the website is written in this
BODY tag only
STRUCTURE OF HTML
NORMAL ELEMENT
STRUCTURE OF HTML
VOID ELEMENT
HEADING TAG
A HTML heading tag is used to
define the headings of a page.
There are six levels of headings
defined by HTML.
These 6 heading elements are
h1, h2, h3, h4, h5, and h6
Here h1 being the highest level
and h6
being the least
STRUCTURE OF HEADING
TAG
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
PARAGRAPH TAG
<p> is the HTML tag for a paragraph.
Adding the <p> to an HTML doc,
followed by text, will create a
paragraph on your page. Adding
the </p> tag will end the paragraph
BUTTON TAG
The <button> tag in HTML is used to
define the clickable button. <button>
tag is used to submit
the content
<button> Click Here
</button>
SOME BASIC HTML TAGS
<b> Text </b>
<i> Text </i>
<mark> Text </mark>
<del> Text </del>
<sub> Text </sub>
<sup> Text </sup>
<u> Text </u>
SOME BASIC HTML TAGS
<marquee> Text </marquee>
<center> Text </center>
<pre> Text </pre>
<br>
<hr>
ATTRIBUTES IN HTML
• All HTML elements can
have attributes
• Attributes provide additional
information about elements
Syntax: name="value“
Example: href
src (source)
class
alt
ANCHOR TAG
The <a> tag defines a hyperlink,
which is used to link from one page
to another
It can also redirects the page to
another website
<a href=“url address”>
Link</a>
IMAGE TAG
The <img/> tag is used to embed an
image in an
HTML page
In Image Tag we mainly use src &
alt attributes
• src - Specifies the path to the
image
• alt - Specifies an alternate text
for the image, if the image for
STRUCTURE OF IMAGE TAG
Image Tag has mainly two types
of src’s
Absolute & Relative
In Absolute we give URL address
In Relative we give local image
file paths
<img src=“url address”
alt=“image”/>
<img src=“path address”
alt=“image”/>
LISTS IN HTML
Lists are mainly of 3 types
Unordered Lists
Ordered Lists
Description Lists
Unordered lists displays content
related to
shapes like discs, circle, square,
none
Ordered lists displays
content related to
STRUCTURE OF UNORDERED
LIST
<ul>
<li> Content </li>
<li> Content </li>
</ul>
<ul style="list-style-type:
square;">
<li> Content </li>
<li> Content </li>
</ul>
STRUCTURE OF ORDERED
LIST
<ol>
<li> Content </li>
<li> Content </li>
</ol>
<ol type=“1”>
<li> Content </li>
<li> Content </li>
</ol>
<ol start=“40”>
<li> Content </li>
<li> Content </li>
STRUCTURE OF
DESCRIPTION LIST
<dl>
<dt> Description term
</dt>
<dd> Description data
</dd>
</dl>
LET US KNOW ABOUT ELEMENTS
TO CREATE A TABLE
The <table> tag defines an HTML
table
The <tr> element defines a table
row
The <th> element defines a table
header
the <td> element defines a table
data
STRUCTURE OF A TABLE
<table>
<tr>
<th>Name</th>
<th>City</th>
<th>College</th>
</tr>
<tr>
<td>Raghuveer</td>
<td>Eluru</td>
<td>Sir C R Reddy</td>
</tr>
<tr>
<td>Srivastav</td>
<td>Vijayawada</td>
<td>KL University</td>
</tr>
</table>
VIDEO TAG
Video Tag is used to Display
Video in Your Web Page
Syntax:
<video>
<source src=“path address”
type=“video/format” />
</video>
AUDIO TAG
Audio Tag is used to play audio
in Your Web Page
Syntax:
<audio>
<source src=“path address”
type=“audio/format” />
</audio>
<source src="" type="audio/mp3">
INPUTS IN HTML
• The <input/> tag specifies an
input field where the user can
enter data.
• The <input/> element is the
most important form element.
• The <input/> element can be
displayed in several ways,
depending on the type attribute
Syntax:
TYPES OF INPUTS
• text
• number
• checkbox
• date
• email
• file
• password
• radio
• button
• reset
TYPES OF INPUTS
Syntax:
<input type=“text” name=“name”
placeholder=“Enter Your Name”/>
FORMS IN HTML
• The <form> tag is used to
create an HTML form for user
input.
• The <form> element can contain
one or more of the following
form elements
Syntax:
<form>
<input/>
<input/>
INTRODUCTION TO CSS
• CSS stands for Cascading Style
Sheets
• CSS describes how HTML elements
are to be displayed on screen,
paper, or in other media
• CSS saves a lot of work. It can
control the layout of multiple
web pages all at once
WHY CSS ?
CSS is used to define styles for
your web pages, including the
design, layout and variations in
display for different devices
and screen sizes
SYNTAX OF CSS
Selector { property: value;}
Example :
h1 {
color: red;
text-align: center;
}
TYPES OF CSS
There are three ways of
inserting a style sheet:
• Internal CSS
• External CSS
• Inline CSS
HOW TO WRITE INTERNAL
CSS
The internal style is defined inside the <style>
element, inside the head section
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HOW TO CREATE EXTERNAL
CSS
An external style sheet can be
written in any text editor, and
must be saved with a .css
extension
This .css extension file is
written in <link> tag
Syntax :
HOW TO WRITE INLINE CSS
• An inline style may be used to apply a
unique style for a single element.
• To use inline styles, add the style
attribute to the relevant element. The
style attribute can contain any CSS
property.
Example:
<body>
<h1 style="color:blue; text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
CLASS ATTRIBUTE (HTML)
• The class attribute specifies one
or more classnames for an element.
• The class attribute is mostly used
to point to a class in a style
sheet
syntax:
<h1 class=“yourprefferredname” >
Content </h1>
<h1 class=“yourprefferredname
yourpreferredname2” > Content </h1>
CLASS SELECTOR (CSS)
• The .class selector selects
elements with a specific class
attribute. To select elements with
a specific class, write a period
“.” character, followed by the
name of the class
Syntax:
.yourprefferredname {
color: red;
font-size: 30px;
}
ID ATTRIBUTE (HTML)
• The HTML id attribute is used to
specify a unique id for an HTML
element.
• You cannot have more than one
element with the same id in an
HTML document.
Syntax:
<h1 id=“yourprefferredname” >
ID SELECTOR (CSS)
• To select an element with a
specific id, write a hash (#)
character, followed by the id of
the element.
Syntax:
#yourprefferredname {
color: red;
font-size: 30px;
}
#yourprefferredname2 {
color: red;
font-size: 30px;
CONTAINER ELEMENT (DIV)
• The <div> tag defines a division
or a section in an HTML document.
• The <div> tag is easily styled by
using the class or id attribute.
• It is mainly used to wrap all the
required elements at one place
CONTAINER ELEMENT (DIV)
Syntax :
<div>
<h1> Hi Guys </h1>
<p> How are you ? </p>
<button> Click Here
</button>
</div>
IMPORTANT CSS
PROPERTIES
font-style
font-size
font-weight
font-family
text-decoration
height
border width
border-width
background-image
border-color border-
radius margin
color
padding
IMPORTANT CSS
PROPERTIES
Syntax:
font-style: normal;
italic;
oblique;
font-weight: bold;
100 to
1000;
IMPORTANT CSS
PROPERTIES
Syntax:
text-decoration: underline;
overline;
line-through;
border: solid;
dashed;
dotted;
IMPORTANT CSS
PROPERTIES
Syntax:
border-width: 0px;
2px;
border-color: red;
green;
IMPORTANT CSS
PROPERTIES
Syntax:
border-radius: 0px;
10px;
color: red;
green;
IMPORTANT CSS
PROPERTIES
Syntax:
background-color: red;
green;
cursor: pointer;
move;
crosshair;
IMPORTANT CSS
PROPERTIES
Syntax:
font-size: 10px;
50px;
height: 100px;
50%;
IMPORTANT CSS
PROPERTIES
Syntax:
width: 100px;
50%;
background-image: url(‘link
address’);
background-size: cover;
IMPORTANT CSS
PROPERTIES
Syntax:
margin: 10px;
5%;
padding: 10px;
5%;
IMPORTANT CSS
PROPERTIES
Syntax:
font-family: ‘Roboto’;
For accessing different types of
fonts we use
fonts.google.com
From there we select our desired font
and copy our html code which we want
to paste in our <head> part of html
code
Then we type font-family: ‘our
SPAN ELEMENT
• The <span> tag is an inline
container used to mark up a
part of a text, or a part of a
document.
• The <span> tag is easily styled
by CSS
Syntax:
<h1> Email Id : <span>
raghuveer@gmail.com</span></h1>
CSS BOX MODEL
• In CSS, the term "box model" is
used when talking about design and
layout.
• The CSS box model is essentially a
box that wraps around every HTML
element. It consists of: margins,
borders, padding, and the actual
Content - The
content. Thecontent
imageofbelow
the box, where
text and imagesthe
illustrates appear
box model
Padding - Clears an area around the content.
The padding is transparent
Border - A border that goes around the
padding and content
Margin - Clears an area outside the border.
CSS BOX MODEL
PSUEDO ELEMENTS
A CSS pseudo-element is used to style
specified parts of an element.
For example, it can be used to:
• Style the first letter, or line, of
an element
• Insert content before, or after,
the content of an element
PSUEDO ELEMENTS
Syntax:
::first-letter
::first-line
::before
::after
::selection
PSUEDO CLASSES
A pseudo-class is used to define a
special state of an element.
For example, it can be used to:
• Style an element when a user mouses
over it
• Style visited and unvisited links
differently
PSUEDO CLASSES
Syntax:
Selector:pseudo-classname {
property:value;
}
:hover
:link
:active
:focus
CSS FLOAT
The float property is used for
positioning and formatting content
e.g. let an image float left to the
text in a container.
The float property can have one of
the following values:
• left - The element floats to the
left of its container
• right - The element floats to the
right of its container
CSS POSITIONING
The position property specifies the type of
positioning method used for an element.
There are five different position values:
• static
• relative
• fixed
• absolute
• Sticky
Elements are then positioned using the top,
bottom, left, and right properties. However,
these properties will not work unless
the position property is set first. They also
work differently depending on the position
value.
Z-INDEX
The z-index property specifies the
stack order of an element.
z-index only works on positioned
elements (position: absolute,
position: relative, position: fixed,
or position: sticky)
CSS OVERFLOW
The overflow property specifies whether
to clip the content or to add scrollbars
when the content of an element is too
big to fit in the specified area.
The overflow property has the following
values:
• visible - Default. The overflow is not
clipped. The content renders outside
the element's box
• hidden - The overflow is clipped, and
the rest of the content will be
invisible
• scroll - The overflow is clipped, and
CSS 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
Syntax:
display: none;
display: inline;
display: block;
CSS GRID
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
Syntax:
display: grid; or display:inline-grid;
The spaces between each column/row are
called gaps
You can adjust the gap size by using one of
the following properties:
• column-gap
• row-gap
RESPONSIVE BREAKPOINTS
What are Breakpoints ?
Breakpoints are customizable widths that
determine how your responsive layout
behaves across device or viewport sizes.
Mainly Devices are categorised into 5
types of Responsive Break points. They
are :
1. Extra Small Devices
2. Small Devices
3. Medium Devices
4. Large Devices
5. Extra Large Devices
RESPONSIVE BREAKPOINTS
Device Device Size
Extra Small < 576px
Devices
Small >= 576px
Devices
Medium >=768px
Devices
Large >=992px
Devices
Extra Large >=1200px
Devices
CSS ANIMATIONS
• An animation lets an element
gradually change from one style to
another.
• You can change as many 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 certain times
CSS ANIMATIONS
To learn about CSS Animations you must
follow the below properties:
• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
CSS ANIMATIONS
@keyframes Rule
• When you specify CSS styles
inside the @keyframes rule, the
animation will gradually change
from the current style to the
new style at certain times.
• To get an animation to work,
you must bind the animation to
an element
CSS ANIMATIONS
animation-name:
To start the animation initially
we want to declare a value in
animation-name
animation-delay:
• The animation-delay property
specifies a delay for the start
of an animation.
CSS ANIMATIONS
animation-iteration-count:
• The animation-iteration-
count property specifies the
number of times an animation
should run
CSS ANIMATIONS
animation-direction:
The animation-direction property specifies
whether an animation should be played forwards,
backwards or in alternate cycles.
The animation-direction property can have the
following values:
• normal - The animation is played as normal
(forwards). This is default
• reverse - The animation is played in reverse
direction (backwards)
• alternate - The animation is played forwards
first, then backwards
• alternate-reverse - The animation is played
backwards first, then forwards
CSS ANIMATIONS
animation-timing-function:
The animation-timing-function property
specifies the speed curve of the animation.
The animation-timing-function property can have
the following values:
• ease - Specifies an animation with a slow
start, then fast, then end slowly (this is
default)
• linear - Specifies an animation with the same
speed from start to end
• ease-in - Specifies an animation with a slow
start
• ease-out - Specifies an animation with a slow
end
• ease-in-out - Specifies an animation with a
CSS ANIMATIONS
animation-fill-mode:
The animation-fill-mode property specifies a
style for the target element when the animation
is not playing (before it starts, after it ends,
or both)
The animation-fill-mode property can have the
following values:
• none - Default value. Animation will not
apply any styles to the element before or
after it is executing
• forwards - The element will retain the style
values that is set by the last keyframe
(depends on animation-direction and
animation-iteration-count)
• backwards - The element will get the style
values that is set by the first keyframe
(depends on animation-direction), and retain
INTRODUCTION TO
BOOTSTRAP
• Bootstrap is a large collection of
predefined code snippets which is
written in HTML, CSS, JS
Example:
Navbar, Buttons, Backgrounds
• Bootstrap is created by Twitter
• Bootstrap is currently used by many
companies like Twitter, Linked in,
Spotify
• Almost every company uses this
Bootstrap to build websites
HOW TO ACCESS BOOTSTRAP
Introduction to Bootstrap Website:
• For accessing Bootstrap Bundles first
we want to go to getbootstrap.com
• Then paste the Bundles in <head> part
& above the body end tag </body>
Example of a Bootstrap Code
Snippet:
<button class=“btn btn-primary”>
Click Here </button>
REUSABLE CODE OF
BUTTONS
• To access the buttons very easily we use
Buttons Code Snippets given in Bootstrap
Website
Snippets for Buttons:
btn btn-primary -> displays button
in blue color
btn btn-secondary -> displays
button in grey color
btn btn-success -> displays button
in green color
btn btn-danger -> displays button
in red color
btn btn-warning -> displays button
in yellow color
LAYOUT METHODS
Firstly Designing Layouts as
Developer has Huge Demand in IT
Industry
We have mainly two types of Layout
Methods:
• Flexbox (Stable)
• CSS Grid (Unstable)
Introduction to Flexbox:
The main purpose of this Flexbox is
FLEXBOX PROPERTIES
• Flexbox Container
• Direction
• Justify Content
• Align Items
• Align Self
• Wrap
• Order
• Align Content e.t.c..,
FLEXBOX CONTAINER
• Firstly we will open a <div> tag
and in class attribute we will
start with d-flex to define our
content is in a Flex Container
• All HTML Elements that are Inside
FLEXBOX DIRECTION
• The Flex Direction Specifies the
direction in which the Flex items
should be arranged within the
Flexbox Container
• For defining the direction we will
JUSTIFY CONTENT
Alignment in Alignment in
Rows Columns
• Justify Content defines the
alignment of flex items along the
flex direction
• For defining the alignment we will
write justify-content-start or
justify-content-center or justify-
INTRODUCTION TO
RESPONSIVE WEB DESIGN
What is Responsive Web Design?
Responsive Web Design helps us to
make web pages give a best user
experience across all devices
How to create Responsive Web Design?
By using Bootstrap Grid System we can
make normal web pages into Responsive
Web pages
RESPONSIVE BREAKPOINTS
What are Breakpoints ?
Breakpoints are customizable widths that
determine how your responsive layout
behaves across device or viewport sizes
in Bootstrap.
Mainly Devices are categorised into 5
types of Responsive Break points. They
are :
1. Extra Small Devices
2. Small Devices
3. Medium Devices
4. Large Devices
RESPONSIVE BREAKPOINTS
BOOTSTRAP GRID SYSTEM
Bootstrap's grid system uses a series
of containers, rows, and columns to
layout and align content. It's built
with flexbox and is fully responsive
Bootstrap Grid system mainly works
with
• Container
• Row
• Column
A Container consists of a Row and
BOOTSTRAP GRID SYSTEM
12 COLUMN LAYOUT SYSTEM
Bootstrap Grid System mainly uses 12
Column Layout in Responsive Web
Design
Not only Desktop screen Every Screen
follows this 12 Column Layout System in
this Responsive Web Design
12 COLUMN LAYOUT SYSTEM
• We want to specify no of columns
that our Content should occupy in
our device
• The no of columns we specify should
be any number but it should be in
between 1 to 12
Container:
As we all know Container is a div
Element which has a class name
container. The main purpose of
container is to hold the Rows &
Columns
12 COLUMN LAYOUT SYSTEM
Row:
A Row is also a div Element which has
a class name Row. The main purpose of
Row is to group all the Columns
<div class=“container”>
<div class=“row”>
</div>
</div>
12 COLUMN LAYOUT SYSTEM
Column:
A Column is also a div Element which has
a class name col-*. Inside the column we
write/place our content
Here * indicates the range of column
<div class=“container”>
<div class=“row”>
<div class=“col-
12”>
<h1> Hello
World </h1>
</div>
CLASS NAME PREFIXES FOR
DEVICES
Device Device Size Class Name
Prefix
Extra Small < 576px col-
Devices
Small >= 576px col-sm-
Devices
Medium >=768px col-md-
Devices
Large >=992px col-lg-
Devices
Extra Large >=1200px col-xl-
Devices
TRANSPARENT HEX CODE FOR
COLORS
MARGIN PREFIXES IN
BOOTSTRAP
margin : m-
margin-top : mt-
margin-right : mr-
margin-bottom : mb-
margin-left : ml-
Margin Size & Values:-
Size Range: 0 to 5
Here Spacer = 16px
MARGIN PREFIXES IN
BOOTSTRAP
Size Value
0 0
1 0.25 x Spacer
2 0.5 x Spacer
3 1 x Spacer
4 1.5 x Spacer
5 3 x Spacer
MARGIN PREFIXES IN
BOOTSTRAP
margin : m-*
* denotes the Size of margin as
discussed in previous class
Along with sizes Margin also have
another value
named auto
Example:
m-auto
ml-auto
mr-auto
CSS GRADIENTS
CSS Gradients are mainly of two
types:
1. Linear Gradient
2. Radial Gradient
Linear Gradient also have directions:
1. to top
2. to bottom (Default)
3. to left
4. to right
PADDING PREFIXES IN
BOOTSTRAP
padding : p-
padding-top : pt-
padding-right : pr-
padding-bottom : pb-
padding-left : pl-
Padding Size & Values:-
Size Range: 0 to 5
Here Padding Sizes & Values are same
as Margin Prefixes
WIDTH PREFIXES IN
BOOTSTRAP
width : w-
Width Values:
w-25 (25%)
w-50 (50%)
w-75 (75%)
w-100 (100%)
SHADOW PREFIXES IN
BOOTSTRAP
shadow-none
shadow-sm
shadow
shadow-lg
ORDER CLASS IN
BOOTSTRAP
Order is used to change the visual
order of items contained in Flex
Container
Order has range from 0 to 12
Example:
order-1
order-2
order-3 e.t.c…,
