Scribd
Upload
29 views114 pages

Front End Roadmap

The document discusses full stack development and provides information about front end development including HTML, CSS, and JavaScript. It also discusses backend development and databases.

Uploaded by

kotapati Thrilok
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
29 views114 pages

Front End Roadmap

The document discusses full stack development and provides information about front end development including HTML, CSS, and JavaScript. It also discusses backend development and databases.

Uploaded by

kotapati Thrilok
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/ 114

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>


[email protected]</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…,

You might also like