React JS Soc

React JS
1)Introduction to HTML: -
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this
is a paragraph", "this is a link", etc.
 Sample HTML Document Structure: -
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h4>Tejitha Sai Sridevi Nakka</h1>
<p> Studying B.Tech 3rd year at SVEC.</p>
</body>
</html>
Output in Web Browser is:

2)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.
 External stylesheets are stored in CSS files.
 CSS is used to define styles for your web pages, including the design,
layout, and variations in display for different devices and screen sizes.
There are three ways of inserting a style sheet:
1.Inline CSS 2. Internal CSS 3.External CSS
 Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.
 Sample HTML with internal CSS: -
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>Tejitha is a CSE student at SVEC. </h1>
<p>She is an intern at MICROSOFT. </p>
</body>
</html>
Output on Web Browser:
Sample Sign In and Sign Up pages:

<!- -Sign Up Form- ->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="login-style.css">
</head>
<body>
<form>
<h3>Sign In</h3>
<p class="info">sign in with your username and password</p>
<div class="un-container">
<label for="username">Your Username</label>
<input type="text" id="username" placeholder="Enter username"/>
</div>
<div class="pwd-container">
<label for="password">Enter Password</label>

<input type="password" id="password" placeholder="Enter Password" />
</div>
<button>Register</button>
<p><a href="login form.html">Login</a></p>
</form>
</body>
</html>
OUTPUT:
<!- -Sign In Form- ->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="login-style.css">
</head>
<body>
<form>
<h3>Sign In</h3>
<p class="info">sign in with your username and password</p>

<div class="un-container">
<label for="username">Your Username</label>
<input type="text" id="username" placeholder="Enter username"/>
</div>
<div class="pwd-container">
<label for="password">Enter Password</label>
<input type="password" id="password" placeholder="Enter Password" />
</div>
<div class="content">
<div>
<input type="checkbox">
<label for="">Remember me</label>
</div>
<p>Forgot Password?</p>
</div>
<button>Login</button>
<p>Not a member?<a href="signupform.html"> Register here</a></p>
</form>
</body>
OUTPUT:
External CSS Document:
*{
margin:0;
padding:0;
}
body{
font-family:Arial, Helvetica, sans-serif;
color:white;
background: rgb(2,0,36);
background-image: linear-gradient(to right, #e68782,#5803bd);
height: 100vh;
display:flex;
align-items:center;
justify-content: center;
}
form{
background-color: rgba(0, 0, 0, 0.433);
display:flex;
flex-direction:column;
gap:20px;
border-radius:5px;
padding:20px;
border:1px solid black;
}
form > p,h3{
text-align:center;
}
form > div{
display:flex;
flex-direction:column;
}
.content{
display:flex;
flex-direction :row;
justify-content: space-between;
}
button{
background-color:black;
color:white;
border-radius:3px;
padding:10px;
border:none;
}
input{
padding:8px;
border-radius:3px;
border:none;
}
input:focus {
border:none;
outline:none;
}
.un-container label,.pwd-container label{
margin-bottom:10px ;
}
.info{
color:gray;
}
a{
color:white;
}.
3.Introduction to JavaScript:
JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behaviour of web pages.JavaScript syntax is the set
of rules, how JavaScript programs are constructed:
// How to create variables:
var x;
let y;
// How to use variables:
x = 5;
y = 6;
let z = x + y;
JavaScript Values:
The JavaScript syntax defines two types of values:
 Fixed values
 Variable values
Fixed values are called Literals.
Variable values are called Variables.
JavaScript Literals:
The two most important syntax rules for fixed values are:
1. Numbers are written with or without decimals:
10.50
1001
2. Strings are text, written within double or single quotes:
"John Doe"
'John Doe'
JavaScript Variables:
In a programming language, variables are used to store data values.
JavaScript uses the keywords var, let and const to declare variables.
An equal sign is used to assign values to variables.
Examples:
let x;
x = 6;
JavaScript Operators:
JavaScript uses arithmetic operators ( + - * / ) to compute values:
Ex:(5 + 6) * 10
JavaScript uses an assignment operator ( = ) to assign values to variables:
Ex:
let x, y;
x = 5;
y = 6;
JavaScript Expressions:
An expression is a combination of values, variables, and operators, which
computes to a value.
The computation is called an evaluation.
Expressions can also contain variable values:
JavaScript Keywords:
JavaScript keywords are used to identify actions to be performed.
The let keyword tells the browser to create variables:The var keyword also tells
the browser to create variables.
JavaScript Comments:
Not all JavaScript statements are "executed".
Code after double slashes // or between /* and */ is treated as a comment.
Comments are ignored, and will not be executed:
JavaScript Identifiers / Names:
Identifiers are JavaScript names.
Identifiers are used to name variables and keywords, and functions.
The rules for legal names are the same in most programming languages.
A JavaScript name must begin with:
 A letter (A-Z or a-z)
 A dollar sign ($)
 Or an underscore (_)
Subsequent characters may be letters, digits, underscores, or dollar signs.
Numbers are not allowed as the first character in names.
This way JavaScript can easily distinguish identifiers from numbers.
JavaScript is Case Sensitive.
All JavaScript identifiers are case sensitive.
The variables lastName and lastname, are two different variables:
Ex:
let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
JavaScript does not interpret LET or Let as the keyword let.

React JS Soc

Uploaded by

Copyright:

Available Formats

You might also like

React JS Soc

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

React JS Soc

Uploaded by

Copyright:

Available Formats

React JS

 Sample HTML Document Structure: -

Output in Web Browser is:

1.Inline CSS 2. Internal CSS 3.External CSS

Sample Sign In and Sign Up pages:

<!- -Sign In Form- ->

You might also like