INDEX

Contents
INTRODUCTION..........................................................................................................................2
Full Stack....................................................................................................................................3
HTML element........................................................................................................................... 4
Basic HTML Document...............................................................................................................4
HTML elements..........................................................................................................................4
Google Fonts..............................................................................................................................6
Icons – Fontawesome................................................................................................................ 7
Text – Styles...............................................................................................................................7
Paragraph-Styles........................................................................................................................8
List-Styles................................................................................................................................... 8
CSS box model............................................................................................................................8
PADDING....................................................................................................................................9
MARGIN..................................................................................................................................... 9
IMAGE-STYLES............................................................................................................................9
Background of website............................................................................................................ 10
Comments in HTML..................................................................................................................10
Comments in CSS..................................................................................................................... 10
Hyperlinks................................................................................................................................ 10
Hyperlink states....................................................................................................................... 11
CSS Units.................................................................................................................................. 11
Table........................................................................................................................................ 12
Table-Styles..............................................................................................................................13
Rowspan.................................................................................................................................. 13
Colspan.................................................................................................................................... 15
Sizing Properties...................................................................................................................... 16
Types of CSS files......................................................................................................................16
Flexbox – layout designing.......................................................................................................16
CSS Positions............................................................................................................................18
 DAY-1
INTRODUCTION

URL(Uniform Resource Locator) = https(protocol)://[Link](Domain

name)/something(path to the resource)
www : world wide web

Full Stack
 UI Layer  React
 Service Layer  Node JS
 Db Layer  Mongo DB
WEB APPLICATION
FRONT END
 HTML  web page
 CSS  styles for web page
 Boot Strap  styles (CSS framework)
 Java Script  interactiveness
 React JS  improves efficiency of an app
BACK END
 Node JS
 Express JS
 MongoDB
Road Map of Front-end
Responsive Web Design :
 HTML
 CSS
 Bootstrap
Interactive Web Design (IWD) :
 Java Script
 ECMA Script 6
 REACT JS Library (REACT)
 DAY-2
A Web App consists of Webpages.
HTML (Hyper Text Markup Language) – to create a webpage
Components required for creation of a Web page :
1. Browser -- access web app (e.g. : Chrome)
2. Web Server – Live Server (should be installed)
3. Editor (IDE) – VS code (Visual Studio code)

HTML
HTML element :
<element_name attributes>Content</element_name>
Opening tag Closing tag
HTML Document  HTML elements

Basic HTML Document

<html>
<head>
<title>content</title> (to add title to our web page)
</head>
<body> contains
</body> html elements
</html>

HTML elements
Heading – h1/ h2/ h3/ h4/ h5/ h6 (block level)
<h1>content</h1>
---------------------------------------------------
Paragraph – p (block level)
<p>content</p>
---------------------------------------------------
Lists (block level):
ol (ordered list – numbered list)
<ol>
<li>item</li>
<li>item</li>
</ol>
ul(unordered list – nonnumbered list)
<ul>
<li>item</li>
<li>item</li>
</ul>
Nesting of Lists :
<ul>
<li>item-1
<ul>
<li>sub-item-1</li>
<li>sub-item-2</li>
</ul>
</li>
<li>item-2
<ol>
<li> sub-item-1</li>
<li> sub-item-2</li>
</ol>
</li>
</ul>
------------------------------------------------------------------------------------
Image (inline element, void element : don’t have content)
<img src=”path of image” width=” ” height= “ ” alt=” ”>
Getting path of Image:
1st approach
 Download image
 Ctrl+space by placing cursor in src= “ | ”
2nd approach
 Right click on the image in google
 Copy image address
 Paste it in src=” ”
-----------------------------------------------------------------------------------------------------
div ( groups elements; block level )
<div>
<h1></h1>
<p></p>
</div>
span (inline level)
<span>part of something you wanna add special effects to </span>
video (inline level)
<video src=”path of video file” controls poster=” path of image “></video>
audio (inline level)
<audio src=”path of video file” controls></audio>
iframe (inline)
it is used to embed other content
<iframe width=” ” height=” “ src=” “ title=” ” frameborder=”0” allow=” (for
3D effects)“ allowfullscreen></iframe>
------------------------------------------------------------------------------------------------------------
Google Fonts
 Search for google fonts in google ([Link])
 Click on any desired font
 Click on ‘select this style’
 Select <link> option
 Copy the second link
 Paste it in <head> part of HTML document

Icons – Fontawesome
 Type the URL [Link]
 Copy link
 Type
<link rel=”stylesheet”
href=”[Link] >

<link rel="stylesheet" href="[Link]

awesome/4.7.0/css/[Link]">
in <head> part
 Now, select any desired icon and copy the html element over it
 You can paste the link wherever you want the icon to be displayed
 <i></i> element is created indicating ‘icon’
 here only fa-accusoft is the class
name

DAY-3
CSS Rule
selector{
property : value;
property : value;
}
where selector could be name of element/attribute/id of
element/pseudo-class/class name of element
CSS Colors
1. Named colors Intensity of color
 2. RGB colors ------------- rgb( RED, GREEN, BLUE [/ALPHA] )
Range: 0-255 or 0-100%
3. Hexadecimal colors -------------- #RRGGBB[AA]
Optional

Text – Styles
 color : color_name;
 font-family : _______;
 font-size : (large/med/small) / __px;
 font-weight : (100-900) / bold;
 text-transform : capitalize / lowercase / uppercase;
 text-decoration : underline / overline / line-through;
 text-shadow : x-axis y-axis blurness color;
 text-align : center / left / right;

Paragraph-Styles
 line-height : 20px / 40px / 90px;
 letter-spacing : __px;
 word-spacing : __px;
 text-indent : __px;
 border/border-left/border-right : __px solid/dotted(type) color;
 border-radius : __px;
 border-top-right-radius/border-bottom-left-radius : __px;
 display : inline/block;

List-Styles
 list-style-type : disc/circle/decimal/square/upper-roman/lower-
roman/none;
 list-style-image : url(“”);
 list-style-position : inside / outside;

DAY-4
Element Level :
1. Block level = entire row gets occupied
2. Inline level = only the area upto the element is occupied
 Developer tools (F12 / right click  inspect) are helpful in finding the level of
an element.

CSS box model

MARGIN

BORDER

CONTENT

PADDING

PADDING
 Padding : __px;
 padding-top/padding-bottom/padding-left/padding-right : __px;

MARGIN
 margin : auto;
 margin-top/margin-left/margin-right : __px;
margin
1 value(all sides)
2 values(top&bottom left&right)
3 values(top right&left bottom)
4 values(top right bottom left)
auto(horizontally center)

IMAGE-STYLES
1. Alignment: left or right
  float : left/right; (for all inline elements)
2. Alignment: center
 display : block;
 margin : auto;
3. box-shadow : x-axis y-axis blurness color;

Identify an element individually:

id or class can be used.
<img id=”string, not number” src=” ” ……………….>

DAY-5
to represent id element in .css file, we use ‘#’
to represent class element in .css file, we use ‘.’

Background of website
 background-color : color_name;

 background-image : url(“path of image”);

(out of folder) : url(“../ “);
 background-image : linear-gradient(yellow, blue, green)
: linear-gradient(to right/left, yellow, blue)
 background-repeat : repeat-x/repeat-y/no-repeat;
 background-position : center/right/left/bottom(if height of web-page is
known)/top;
 background-size : cover/contain/__px;
contain = image occupies max size
cover = image occupies max size
 background-attachment : fixed/scroll(default)

Adjusting height of webpage

 height : 600px;

Comments in HTML
<!--comment-->
Comments in CSS
/*comment*/

Hyperlinks
<a href=”path of other resource” target=”_blank/_self”> content </a>
where ‘a’ is the element name(anchor); href is hyperlink reference
‘_blank’ opens new web page in a new tab; ‘_self’ opens new web page in
the same tab
content could be text or an image:

Hyperlink states
-to style hyperlinks
PSEUDO CLASSES (order or hierarchy shouldn’t be changed)
 a{ } (normal link)
 a:link{ } (unvisited link)
 a:visited{ } (visited link)
 a:hover{ } (when mouse moved over it)
 a:active{ } (when being clicked)
 a:focus{ } (after clicking)

DAY-6
CSS Units
Absolute units:
 cm
 mm
 in (inches)
 px (pixels)
 pt (points)
  pc (pica units)
Relative units:
 em (equal to font-size of parent element)
 rem (equal to font-size of root element)
 vw (view port width; vw  font-size & vice-versa)
 vh (view port height)
 % (related to parent element)
 Default size of <html> (root) element is 16px
 Default size of <body> element is 16px – this is not fixed; depends on user
settings; 16px is restricted to medium size view
To use %, mention width in % or px esp for div element.

Table
<table>
<!-- table header-->
<thead>
<th>column-heading</th>
<th> column-heading</th>
…………
</thead>
<!-- row-1 -->
<tr>
<td>content</td>
<td>content</td>
……………..
</tr>
<!--row-2 -->
<tr>
<td>content</td>
<td>content</td>
 ……………..
</tr>
<!--row-3 -->
………………
…………….
……………….
</table>

Table-Styles
 table{
width : __px;
text-align : center;
background-color : color_name;
}
To create table format:
 table,th,tr,td{
border : width_of_borders type color;
border-collapse : collapse;
padding : __px;
}

Rowspan

Eg-1:
<h1>RowSpan demo</h1>
<table>
<thead>
<th>Name</th>
<th>Age</th>
 </thead>

<!-- row-1 -->

<tr>
<td>Ravi</td>
<td rowspan="2">24</td>
</tr>

<!-- row-2 -->

<tr>
<td>Kiran</td>
</tr>
</table>

Eg-2:
<h1>RowSpan demo-2</h1>
<table>
<!-- row-1 -->
<tr>
<th>Name</th>
<th>Age</th>
<th rowspan="3">Pass</th>
</tr>
<!-- row-2 -->
<tr>
<td>Ravi</td>
<td>26</td>
 </tr>

<!-- row-3 -->

<tr>
<td>Kiran</td>
<td>24</td>
</tr>
</table>

Colspan

Eg-1:
<h1>ColSpan Demo</h1>
<table>
<tr>
<td colspan="2">Andhra pradesh</td>
<td colspan="2">Telangana</td>
<td colspan="2">Kerala</td>
</tr>

<tr>
<td>Male</td>
<td>Female</td>
<td>Male</td>
<td>Female</td>
<td>Male</td>
<td>Female</td>
 </tr>

<tr>
<td>100</td>
<td>2000</td>
<td>12232</td>
<td>3434</td>
<td>2334</td>
<td>4545</td>
</tr>
</table>

Sizing Properties
 width
 height
 min-width/ max-width
 min-height/max-height

Types of CSS files

 internal CSS (style element is must in <head>)
 external CSS (style element is not required; link CSS file with HTML file using
<link rel=”stylesheet” href=”CSS_file_name.css”>)
 inline CSS ()
eg: <p style=”color:red”>content</p>

DAY-7
Flexbox – layout designing

The container should be taken as a <div> element with class name ‘parent’ and
items in it should be taken as a <div> element with class name ‘child1’, ‘child2’,….
Create flex container (parent) (used at parent level)
display : flex;
Change flex direction (used at parent level)
flex-direction : row/row-reverse/column/column-reverse;
Apply wrap (used at parent level)
flex-wrap : wrap/nowrap/wrap-reverse;
Change ability of flex item to grow (child level)
flex-grow : number(1/2/3/…);

Adjust gap (used at parent level)

gap : __px;
Horizontal alignment (used at parent level)
justify-content : flex-start/ flex-end/ center/ space-between/ space-around/
space-evenly;
Vertical alignment (used at parent level)
align-items : flex-start/ flex-end/ center/ stretch/ baseline;
To bring the children to the perfect center of the parent
justify-content : center/ space-between/ space-around/ space-evenly;
 align-items : center;

Align individual item

align-self : flex-end/ flex-start/ center;
align-content : center;
*whenever we use align-content we must use flex-wrap

DAY-8

Styles for child elements

Child combinator :
selector1 > selector2 {
style properties;
}
*where selector2 should be the immediate child of selector1
Descendant combinator :
selector1 selector2 {
style properties;
}
*where selector2 should be child of selector1 (not immediate child)

CSS Positions
 top : __px;
 bottom : __px;
 left : __px;
 right : __px;
 position : static; (default state of all html elements)
*in the presence of static we cannot use top, bottom, left and right
 position : relative; (relative to its normal position)
 position : absolute; (relative to its positioned ancestor(parent)) (element
will be removed from the document flow)
 position : fixed; (it is displaced and remains fixed)
 position : sticky; (moves until it reaches a specified position and sticks on
reaching that position)

 position : z-index;
NOTE-
o left: 50% ---
.logo2{
position: absolute;
left:50%;
bottom: -(half the width of the child)px;
margin-left: -(half the width of the child)px;
}
Note : generally, parent element is taken relative and child element is taken
absolute

DAY-9
Forms
[Link] and [Link]
input{
box-sizing : border-box; (for making all the input boxes of the same size)
resize : none; (to disable the resize option of textarea element)
}
width:100% shouldn’t be assigned for checkbox’s input element
In the picture, the CSS styles could be applied by specifying the attributes to the
elements possessing those attributes only
For ‘radio’ element all the ‘name’ attributes must have the same value

DAY-11
In [Link], we can get the links to work with bootstrap in HTML
document

Bootstrap element syntax:

<element class=”class-1 class-2 class-3 …..”> content </element>

DAY-12