[Link]
com/sudhakarreddy2000/g4g2
2nd Aug:
=======
website:
=======
website is a collection of webpages.
which contains information.
information in the form of text, graphics, images, videos and audio
Browser:
=======
Browser is a application/software, which is used to connect to websites
Home page:
==========
It is a first page / landing page of a website.
Home page name always should be 'index'
1) Domain name registration
ex: [Link]/net/in/org/edu
2) Server space / hosting
2gb / 3gb
3) Designing / Development
10th Aug:
Session-1
=======
Welcome to first session of MernStack
HTML5:
Hyper Text Markup Language
We use html for developing web applications.
What is required to create webapplication/ Where you write html code and execute it
1) Text Editor
ex: Notepad, Visual studio code
2) Browser
html file has to be saved as .html
html contains TAGS
<title> </title>
Tags are 2 types
1) Opening Tag
<title>
2) Closing Tag
</title>
<br> ==>break
<hr> ==>Horizontal ruler
ATTRIBUTES:
It is used to provide additional information about a tag.
Attributes are used in opening of html
hr tag attributes
<hr color="red" size="10px" width="400px" align="left/center/right">
body tag attribute:
<body bgcolor="yellow">
</body>
HTML headings:
============
<h1> to <h6> tags are used for defining html headings
<h1> </h1> =>big size
<h2> </h2>
.
.
.
<h6> </h6> ==>small size
Attributes for headings:
align="left/center/right"
Paragraph:
=========
<p> </p>
List items:
=========
List items are 2 types
Order list item
<ol> </ol>
UnOrder list item
<ul> </ul>
Hyperlinks:
=========
<a href="[Link]"> goto file </a>
a=>anchor
href=>hyper reference
Tables:
======
Tables are used to organize web content
Tables contains rows and columns
<table> </table>
<tr> </tr> =>table row
<td> </td> =>table data
<th> </th> =>table head
FORMS:
========
<form> </form>
<input type="text/password/checkbox/radio/submit/reset/email/color/date/range">
Session 2
16th Aug:
=========
<textarea> </textarea>
<select>
<option> </option>
</select>
CSS3
Cascading Style Sheets
Why:
CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web
pages as you want.
Pages load faster − If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster download times.
Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
Superior styles to HTML − CSS has a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.
Multiple Device Compatibility − Style sheets allow content to be optimized for more
than one type of device. By using the same HTML document, different versions of a
website can be presented for handheld devices such as PDAs and cell phones or for
printing.
Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML pages
to make them compatible to future browsers.
Css can be written in 3 ways:
Internal css
External css
Inline css
<h1> </h1>
syntax of css:
selector{
property:value;
}
ex:
h3{
color:red;
}
Different types of selectors:
====================
1) Tag/Element Selector
2) Class Selector
3) Id Selector
4) pseudo selector
5) compound selector
Properties:
-------------
color:red;
text-align:left/center/right;
font-size:16px;/ 1em;
font-family:arial;
background-color:yellow;
comments in css:
----------------------------
// single line comment
/*
multi
line
comment
*/
border:1px solid/dotted/dashed red;
width:300px;
height:300px;
background-image:url([Link]/gif/png);
background-repeat:no-repeat/repeat-x/repeat-y;
Spaces:
margin ==>margin is a outside space of an element
padding ==>padding is inside space of an element
margin:30px;
padding:30px;
text-decoration:none;
============
divisions:
=======
<div> </div> ==>division tag
CLASS SELECTOR:
===============
class selector starts with dot(.);
we need to call the class to any element
.txt{
color:green;
}
<h3 class="txt"> </h3>
17th Aug:
Session 3
========
float:left/right;
clear:left/right/both;
line-height:80px;
ID SELECTOR:
============
#txt{
}
<h3 id="txt"> </h3>
Uniqueness (ID):
An id attribute is designed to uniquely identify a single element within an entire
HTML document. Each id value must be unique on a given page.
Reusability (Class):
A class attribute can be applied to multiple HTML elements, allowing for the
application of the same styles or behaviors to a group of elements. An element can
also have multiple classes assigned to it.
FLEX BOX MODEL:
===============
CSS Flexible Box Layout, commonly known as Flexbox, is a one-dimensional CSS layout
model designed for arranging items in rows or columns.
It provides an efficient way to lay out, align, and distribute space among items
within a container, making it easier to create flexible and responsive designs
without relying on floats or positioning.
display:flex; ==>give this property to parent element
justify-content:flex-start / flex-end /center / space-around /space-between;
=>horizontal alignment
align-items:flex-start / flex-end / center; ==>vertical alignment
RESPONSIVE DESIGNING:
======================
Responsive web design is a web development approach where a website's layout and
content adapt to various screen sizes and devices, ensuring a consistent and user-
friendly experience across desktops, tablets, and smartphones.
Media queries:
=============
Media queries are a feature of CSS3 that allow web developers to create responsive
web designs. They enable the application of different CSS styles based on various
device characteristics, such as screen size, resolution, orientation, and media
type.
@media screen and (max-width:999px){
23rd Aug:
========
Session4
Bootstrap:
Bootstrap is a framework of css:
[Link]
text/typography classes:
=====================
.text-danger
.text-success
.text-warning
.text-dark
.text-primary
.text-info
.text-light
.text-primary-emphasis
background colors:
======================
bg-danger
bg-success
bg-warning
bg-primary
bg-dark
bg-light
.bg-primary-subtle
button classes:
============
<input type="submit">
<input type="reset">
<button> </button>
.btn
.btn-primary
.btn-danger
.btn-success
.btn-warning
etc
Img class:
========
.img-fluid
JAVASCRIPT:
===========
Javascript is used for Dynamic web pages
Javascript is used for Interactive web pages
Javascript is used for client side validation
javascript is case sensitive
[Link](" ");
double quotes should not be used inside double quotes
single quotes should not be used inside single quotes
popup messages
alert() =>used to display alert messages
prompt() =>used to take input values
confirm() =>for confimation
24th Aug
=======
Session-5.
Comments
// Single line comment
/* multi line comment */
Variables:
===========
variables are containers, which can store some data values.
in js variables can be declared with 3 keywords
1) var keyword
2) let keyword
3) const keyword
CONCATINATION:
we use + for String concatination
String concatenation in JavaScript refers to the process of combining two or more
strings into a single, new string.
var str1="javascript is "
var str2="Dynamic"
[Link](str1)
[Link](str2)
[Link](str1 + str2);
2% rate of interest for 50000 is 1000
functions:
=======
functions are block of code which can be used for reusability.
functions are basically 2 types
1) in built function
ex:Date()
2) user defined function
ex:sudhakar()
Date methods:
============
getHours()
getMinutes()
getSeconds()
getDate()
getMonth()
getFullYear()
getDay()
if you want to use these methods we need to create date object
new Date(); ==>creation of a object
if else :
======
syntax:
if(condition){
statement
}else{
statement
}
marks
Operators:
=========
Operators are symbols
ex: +, -,&
1)Arithmatic operator
+,-,%,/,*
2) Assignment operator
=,+=,-=,*=,/=
3) conditional operator
<=,>=,!=,==,===
4) Logical operators
&& , ||
30th Aug:
6th Session:
DOM
Document Object Model
The Document Object Model (DOM) in JavaScript is a programming interface that
represents the structure of an HTML document as a tree of objects.
This allows JavaScript to interact with and manipulate the content, structure, and
style of a web page dynamically.
getElementById() method:
The [Link]() method in JavaScript is a fundamental tool for
interacting with the Document Object Model (DOM) of an HTML page. It allows
developers to retrieve a specific HTML element by its unique id attribute.
loops:
=======
Loops are used to iterate the code.
There are different types of loops available in js
for loop
while
do while
for loop:
=======
for(initialisation; condition; i++){
while loop:
initialisation
while(condition){
statement;
increment/decrement
}
do while loop:
==========
The do...while loop in JavaScript is a control flow statement that executes a block
of code at least once, and then repeatedly executes the block as long as a
specified condition evaluates to true
do {
// code to be executed
} while (condition);
let i = 0;
do {
[Link]("The number is: " + i);
i++;
} while(condition)
functions:
========
In JavaScript, a function is a block of reusable code designed to perform a
specific task. Functions allow for code organization, modularity, and efficiency by
enabling you to write code once and execute it multiple times
syntax:
function functionName(){
code;
}
We need to call the function to execute the code
functionName()
functionName()
Parameters and Arguments:
===================
parameters are variable which are declared inside a function
function Test(parameter){
parameter
}
Arguments are real values for that parameters
Test("argument")
Test("argument")
Parameters: These are the named variables listed in a function's definition. They
act as placeholders for the values that the function expects to receive when it is
called. Parameters define the input structure of a function.
Arguments: These are the actual values or expressions passed to a function when it
is invoked or called. These values are assigned to the corresponding parameters
within the function's scope.
Events:
======
onclick event
onmouseover event
onmouseout event
onchange event
onload event
onfocus event
onblur event
onsubmit event
onscroll event
31 Aug:
7th Session:
onchange event
call back functions:
===============
Function calling another function is call back function
A callback function is a function passed as an argument to another function,
intended to be executed at a later time or after a specific event or task
completes.
call back functions:
setInterval() ==>setInterval("Demo()")
setTimeout()
validation:
onkeydown
onkeyup
Arrays:
An array can hold many values under a single name, and you can access the values by
referring to an index number.
index number starts from 0;
It is a variable but stores multiple values.
variable example:
let emp1="Ramesh"
let emp2="Suresh"
[Link](emp1) ===>Ramesh
arrays example
let emp=["Ramesh", "Suresh", "Kapil"]
[Link](emp[0]); ==>Ramesh
[Link](emp[1]); ==>Suresh
Arrays method:
push() method =>add arrays elements/items at the end of an array
pop() " =>removes an array item from end
shift() " ==>removes an item from begining
unshift() " ==>this method will item at the beginging of an array
Promise:
=======
A Promise in JavaScript represents the eventual completion (or failure) of an
asynchronous operation and its resulting value.
A promise can be in one of three states:
Pending: The initial state, where the operation has not completed yet.
Fulfilled: The operation completed successfully.
We will be using
.then() method ==>resolved state
.catch() method ==>rejected state
Regular expressions:
In JavaScript, a regular expression (RegExp) is an object that defines a search
pattern for text.
It is used to perform powerful pattern-matching, search-and-replace functions on
strings.
6th Sept
8th Session:
React
React is library of javascript
React can be used to develop single-page, mobile, or server-rendered applications .
Because React is only concerned with the user interface and rendering components to
the DOM, React applications often rely on libraries for routing and other client-
side functionality.
=>REact is component based app
=>React is used for single page application
=>React will have features of routing
=>React is SEO friendly
=>React is easy to learn if you javascript knowledge
=>React is used by many comanies
INSTALLING REACT:
=>Node should be installation
=>to check node version=>at cmd =>node -v
=>if not showing version, then install node from
[Link]
=>Creating React App:
=>create a folder(react) and open in cmd
=>npm create vite@latest appname
Folder Structure:
appname (folder)
Node_modules(folder)
Public(folder)
[Link]
src(folder)
assets(folder)
[Link]
[Link]
[Link]
[Link]
[Link]
JSX:
JSX, which stands for JavaScript XML or JavaScript Syntax Extension, is a syntax
extension for JavaScript used in React to describe the user interface. It allows
developers to write HTML-like markup directly within JavaScript code.
HTML is static
jsx(looks like html) =>dynamic
To start working on react:
1) delete all files from src folder except '[Link]'
2) delete entire code from '[Link]'
======================
Using multiple jsx elements:
1)Wrapping in div tag
<div>
jsx element
jsx element
</div>
2)Wrapping in [ ]
[
jsx element,
jsx element
]
3) Wrapping <>(fragment)
<>
jsx element
jsx element
</>
Expression:
Expressions enable the display of dynamic content, such as variables, data from
state or props, and results of calculations.
for expression we use { }
ex: 20+20
Using variables and calling variable:
Css:
1)inline css=><h1 style="color:red;"></h1>
in react(jsx) => <h1 style={{color:'red'}}>Hello </h1>
2)external css
3)internal css
Inserting images in jsx:
==================
<img src="[Link]">
if image from 'public' folder, we can use above code
otherwise, if it is from 'src' folder, it has to be imported
import pic from './[Link]'
we can include in jsx with expression
<img src={pic} />
7th Sept:
9th Session
inline css
internal
<head>
<style>
</style>
</head>
external
html==>[Link]
css file=>[Link]
<head>
<link href="[Link]" rel="stylesheet">
</head>
in react:
under src folder =>create one css file
then
import [Link]
========================
importing and exporting data
==========
COMPONENTS:
In React, a component is a fundamental building block of a user interface (UI).
It is an independent, reusable piece of code that defines a specific part of your
application's UI and its associated logic.
Components are 2 types:
1)Function components
2)Class component
function component:
================
1) create a new file
ex: [Link]
export component=>export default Comp1
2) then import to [Link]
import Comp1 from './Comp1'
3) include in jsx
<Comp1/>
*Component name should start with Capital letter
PROPS:
=======
In React, "props" (short for properties) are a mechanism for passing data from a
parent component to a child component. They are a fundamental concept in React
development, enabling the creation of reusable and dynamic components.