Scribd
Upload
7 views

Day - 1

The document outlines essential topics for front-end development using React, focusing on revisions of HTML, CSS, and JavaScript. Key concepts include HTML structure, CSS selectors and properties, and JavaScript fundamentals such as variables, functions, and DOM manipulation. Each section provides examples to illustrate the concepts discussed.

Uploaded by

VIJAY PRASAD N
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views

Day - 1

The document outlines essential topics for front-end development using React, focusing on revisions of HTML, CSS, and JavaScript. Key concepts include HTML structure, CSS selectors and properties, and JavaScript fundamentals such as variables, functions, and DOM manipulation. Each section provides examples to illustrate the concepts discussed.

Uploaded by

VIJAY PRASAD N
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 48

Front End Development using

React
Day 1 - Topics
• Revision of HTML
• Revision of CSS
• Revision of JavaScript
Revision of HTML
• Here are some basics of HTML that are
important to know when learning React:
– HTML Structure
– Elements and Tags
– Attributes
– Lists
– Forms
– Div and Spans
HTML Structure
• HTML documents have a basic structure with
an opening <html> tag and a closing </html>
tag.
• Inside the <html> tag, you have <head> and
<body> sections.
• The <head> section typically contains
metadata like the page title, character set,
stylesheets, and scripts.
• The main content of your page goes in the
<body> section.
Example
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
<!-- Other metadata, stylesheets, and scripts go here --
>
</head>
<body>
<!-- Your page content goes here -->
</body>
</html>
Elements and Tags
• HTML is made up of elements represented by
tags.
• Tags are enclosed in angle brackets, like
<tagname>content</tagname>.
• Some common tags include <p> for
paragraphs, <h1> to <h6> for headings, <a>
for links, <img> for images, etc.
Example
<p>This is a paragraph.</p>
<h1>This is a heading level 1</h1>
<a href="https://example.com">Visit
Example</a>
<img src="image.jpg" alt="Description of the
image">
Attributes
• HTML tags can have attributes that provide
additional information about an element.

• Attributes are added to the opening tag and


usually come in name/value pairs.
Example
<a href="https://example.com"
target="_blank">Visit Example</a>

<img src="image.jpg" alt="Description of the


image">
Lists

• HTML supports ordered lists (<ol>),


unordered lists (<ul>), and list items (<li>).
Example
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

<ol>
<li>First</li>
<li>Second</li>
</ol>
Forms

• HTML provides form elements like <form>,


<input>, <select>, <textarea>, etc., for user
input.
Example
<form>
<label for="username">Username:</label>
<input type="text" id="username"
name="username">
<label for="password">Password:</label>
<input type="password" id="password"
name="password">
<input type="submit" value="Submit">
</form>
Divs and Spans
• <div> and <span> are generic container
elements often used for layout purposes.
Example
<div>
<!-- Content grouped together for layout -->
<p>Some text here</p>
<img src="example.jpg" alt="Example
image">
</div>

<span>This is an inline element</span>


Revision of CSS
• Here are some basics of CSS that are essential to know
when learning React:
– Selectors
– Properties and Values
– Box Model
– Flexbox
– Grid
– Positioning
– Responsive Design
– Transitions and Animations
– Selectors and Combinators
– Pseudo-classes and Pseudo-elements
Selectors
• Selectors are patterns used to select and style
HTML elements.

• Examples include element selectors (e.g., p for


paragraphs), class selectors (e.g., .myClass),
and ID selectors (e.g., #myId).
Example
/* Element Selector */
p{
color: red;
}

/* Class Selector */
.myClass {
font-size: 18px;
}

/* ID Selector */
#myId {
background-color: lightblue;
}
Properties and Values
• CSS properties define the style aspects of an
element (e.g., color, font-size, margin).

• Values are assigned to properties to specify the


style (e.g., color: blue, font-size: 16px).
Example
/* Setting Color and Font Size */
h1 {
color: #333;
font-size: 24px;
}

/* Setting Margin and Padding */


.box {
margin: 10px;
padding: 20px;
}
Box Model
• The box model describes how elements are
rendered on the page, including content,
padding, border, and margin.
– width and height set the size of the content box.
– padding is the space inside the border.
– border surrounds the padding.
– margin creates space outside the border.
Example
/* Box Model Example */
.box-model-example {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid #ccc;
margin: 20px;
}
Flexbox
• Flexbox is a layout model that allows you to
design complex layouts more efficiently.

• Properties like display: flex, justify-content,


and align-items help control the layout and
alignment of elements.
Example
/* Flexbox Example */
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
}

.flex-item {
flex: 1;
}
Grid
• CSS Grid is another layout model that
provides a two-dimensional grid system.
• It's useful for creating more advanced and
responsive layouts.
• Properties include display: grid, grid-template-
columns, and grid-template-rows.
Example
/* Grid Example */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}

.grid-item {
background-color: lightblue;
padding: 15px;
}
Positioning
• The position property is used to control the
positioning of elements on the page.

• Values include static, relative, absolute, and


fixed.
Example
/* Positioning Example */
.positioned-element {
position: relative;
top: 20px;
left: 30px;
}
Responsive Design
• Media queries are used to apply different
styles based on the characteristics of the
device or viewport.

• Example: @media screen and (max-width:


600px) { /* styles for small screens */ }
Example

/* Media Query Example */


@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
Transitions and Animations
• CSS can be used to create smooth transitions
and animations.

• transition property helps in specifying the


transition effects, and @keyframes is used for
animations.
Example
/* Transition Example */
.transition-element {
transition: color 0.3s ease-in-out;
}

/* Animation Example */
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}

.animated-element {
animation: slide-in 1s ease-in-out;
}
Selectors and Combinators
• CSS provides various ways to select elements
using combinators like descendant ( ), child
(>), and sibling (+, ~) selectors.
Example
/* Descendant Selector */
article p {
font-style: italic;
}

/* Child Selector */
.parent > .child {
border: 1px solid red;
}

/* Sibling Selector */
h2 + p {
margin-top: 10px;
}
Pseudo-Classes and Pseudo-
Elements

• Pseudo-classes (:hover, :active, :focus) and


pseudo-elements (::before, ::after) allow you to
style elements based on their state or position.
Example
/* Pseudo-class Example */
a:hover {
text-decoration: underline;
}

/* Pseudo-element Example */
.styled-element::before {
content: "🔒 ";
color: green;
}
Revision of JavaScript
• Here are some basics of JavaScript that are important to
know:
– Variables
– Data Types
– Functions
– Control Flow
– Objects
– Arrays
– DOM Manipulation
– Event Handling
– Asynchronous JavaScript
– Modules
Variables
• Declare variables using var, let, or const.
• var has function scope, while let and const
have block scope.

Example:
let message = "Hello, World!";
const pi = 3.14;
Data Types
• Primitive data types include strings, numbers,
booleans, null, and undefined.
• Objects and arrays are complex data types.

Example:
let name = "John";
let age = 25;
let isStudent = true;
let person = { name: "John", age: 25 };
let numbers = [1, 2, 3, 4, 5];
Functions
• Declare functions using the function keyword or
use arrow functions (() => {}).
• Functions can take parameters and return values.

Example:
function add(a, b) {
return a + b;
}

const multiply = (a, b) => a * b;


Control Flow
• Use if, else if, and else for conditional statements.
• Use for and while loops for iteration.

Example:
if (condition) {
// code to run if the condition is true
} else {
// code to run if the condition is false
}

for (let i = 0; i < 5; i++) {


// code to repeat
}
Objects
• Objects store key-value pairs and are used for structured
data.
• Access object properties using dot notation or square
brackets.

Example:
let person = {
name: "Alice",
age: 30,
isStudent: false
};
console.log(person.name); // Output: Alice
Arrays
• Arrays store ordered collections of values.
• Access array elements using square brackets
and zero-based indexing.

Example:
let fruits = ["apple", "banana", "orange"];
console.log(fruits[1]); // Output: banana
DOM Manipulation
• JavaScript can manipulate the Document
Object Model (DOM) to interact with HTML
and CSS.
• Use methods like getElementById,
querySelector, and innerHTML.

Example:
document.getElementById("myElement").inner
HTML = "New content";
Event Handling
• Reacting to user interactions is crucial. Use
event listeners.

Example:
document.getElementById("myButton").addEve
ntListener("click", function() {
alert("Button clicked!");
});
Asynchronous JavaScript
• JavaScript supports asynchronous operations using
callbacks, promises, and async/await.

Example:
// Using Promises
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
Modules
• JavaScript can be organized into modules for better
code structure.
• Export and import functionality using export and
import.

Example:
// in module1.js
export const sum = (a, b) => a + b;

// in module2.js
import { sum } from "./module1.js";
Thank You

You might also like