WEB OPS EXECUTIVE

RECRUITMENT
ALCHERINGA 2025
 Hello Junta,

Resources We the Web-ops team, would like to

extend a warm welcome to you as
we embark on an exciting journey
Web-ops recruitment together. Your involvement in the
executive requirement process is
Alcheringa 2025 crucial, and we will be thrilled to
have you as part of our team.This
document will guide to HTML ,
CSS and JS resources.

This resources will play a vital role in

shaping the online and offline
presence and user experience.
 HTML
WHAT IS HTML ?

HTML is a markup language that defines the structure of your

content. Imagine a web page as a house. HTML acts as a
framework of the house. It defines the various element and their
placements such as heading,paragraphs,images,forms etc.
 CSS
WHAT IS CSS ?
CSS, Cascading Style Sheets, is a language used to describe the
visual appearance and formatting of web pages.In simpler terms,
you can think of CSS as the paint and decorations that give
style and beauty to the structure (HTML) of aweb page.

Link to the resources:

https://youtube.com/playlist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
 CSS
WHAT IS FLEXBOX ?

Flexbox is a CSS layout model that provides an efficient way to arrange

and align elements within a container. It is designed to simplify the
process of building responsive and flexible web layouts.

Link to the resources:

https://youtube.com/playlist?list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG
 CSS
WHAT IS GRID?
CSS Grid is a powerful layout system in CSS It enables
you to divide a web page into rows and columns, and then position
elements within those grid cells. It helps you
create grid structures on a web page, align elements, and
define their placement in a more precise and flexible manner.

Link to the resources:

https://youtube.com/playlist?list=PL4cUxeGkcC9itC4TxYMzFCfveyutyPOCY
 JS
WHAT IS JAVA SCRIPT?
JavaScript is a high-level, interpreted programming language primarily
used for web development. JavaScript allows developers to add
interactivity and dynamic behavior to websites, making them more
engaging.

Now, we will examine this great language and some of its most prevalent
features;
 JS
Let' s begin with a quick setup in your Visual Studio code so that
JS may be used easily.
Video 1: https://youtu.be/iWOYAxlnaww

JS has its own data types and syntax, just like all other
programming languages. Let' s take our time getting to know them.
Video2 : https://youtu.be/FhguwBJeqWs
 JS
Conditional statements and loops are most used features of any
programming language conceptually they are similiar in all
languages just quickly go through the video given below.
Video 3: https://youtu.be/JloLGV9DmtQ

Now lets visit Functions in JS:

Video 4: https://youtu.be/xUI5Tsl2JpY
 JS
WHAT IS OBJECT?
Objects in JavaScript are similar to real-life objects in that they have
properties and behaviors. Properties represent the characteristics or
attributes of an object, while behaviors are the actions or methods that an
object can perform.

Example: Here, the person object has four properties: name, age, occupation, and greet. The
name, age, and occupation properties store data, while the greet property holds a function
that can be invoked.
const person = {
name: "John"
,
age: 30,
occupation: "Engineer"
,
greet: function() {
console.log("Hello, my name is " + this.name);
Video 5: https://youtu.be/X0ipw1k7ygU
}
};
 JS
DOM MANIPULATION
DOM (Document Object Model) manipulation refers to the process of
accessing and modifying the structure, content, and styles of an HTML
document using JavaScript. The DOM represents the HTML document as a
tree-like structure of objects, where each element, attribute, and text node
is represented by an object. JavaScript provides methods and properties to
interact with this DOM tree and dynamically update the webpage.

Video 6: https://youtu.be/wKBu_dEaF9E
Popular JS Frameworks and liberaries

Frontend Frameworks: React.js, Angularjs, Vue.js

Frontend Libraries: jQuery, Axios, Chart.js, Redux
Backend Frameworks: Node.js, Express.js, Nest.js
Mobile Development Frameworks: React Native
UI Component Libraries: Material-UI, Bootstrap, Tailwind CSS
 ASYNC JS
WHAT IS ASYNCHRONUS JAVASCRIPT?

JavaScript is a high-level, interpreted programming language primarily used

for web development. JavaScript allows developers to add interactivity and
dynamic behavior to websites, making them more engaging.

We will examine this great language and some of its most prevalent
features; the previous slide may have given you an indication of its
significance.
 ASYNC JS
CALLBACKS
Callback functions are functions that are passed as arguments to other functions
and are executed once a certain task is completed. They allow you to define what
should happen when an asynchronous task finishes.

In this example, the fetchData function function fetchData(callback) {

simulates an asynchronous operation by setTimeout( () => {
using setTimeout. It takes a callback const data = 'Callback example data' ;
callback(data);
function as an argument and invokes it
}, 2000);
with the fetched data after a delay. The }
processData function is passed as the function processData(data) {
callback and is responsible for console.log('Processed data:' , data);
processing the received data. }
fetchData(processData);
 ASYNC JS
PROMISES

Promises are objects that represent the eventual completion

(or failure)anasynchronous operation. They provide a more
structured way to handleasynchronous code by allowing
you to attach callbacks to handle the successor failure of
an operation.
 ASYNC JS
function fetchData() {
return new Promise((resolve, reject) => {
Here, the fetchData function
setTimeout(() => {
returns a promise that resolves const data = 'Promise example data';
with the fetched data after the resolve(data);
specified delay. The then method }, 2000);
});
is used to handle the resolved }
value, and the catch method is fetchData()
used to handle any errors that .then(data => {
console.log('Resolved data:' , data);
occur during the promise })
execution. .catch(error => {
console.error('Error:' , error);
});
 ASYNC JS
ASYNC/AWAIT

Introduced in ES2017, async/await is a syntactic sugar built on top of promises.

It allows you to write asynchronous code that looks similar to synchronous
code, making it easier to understand and maintain. The async keyword is used
to define an asynchronous function, and the await keyword is used to pause
the execution of the function until a promise is resolved.
 ASYNC JS
function fetchData() {
return new Promise( (resolve, reject) => {
In this example, the fetchData setTimeout( () => {
function remains the same as in const data = 'Async/await example data';
resolve(data);
the previous example. The }, 2000);
processData function is defined });
}
as an async function and uses
async function processData() {
the await keyword to pause try {
execution until the promise const data = await fetchData();
console.log('Processed data:' , data);
returned by fetchData is } catch (error) {
resolved. Any errors are caught console.error('Error:' , error);
}
in the catch block.
}
processData();
 ASYNC JS
Video Resource:
Follow the given playlist to dive deep and code along for better understanding

Do complete it within alloted time:

Playlist: https://youtube.com/playlist?list=PL4cUxeGkcC9jx2TTZk3IGWKSbtugYdrlu

After completing the playlist It's highly recommended that you once
go through:
https://javascript.info/async-await

For enhanced understanding, Do try to small tasks given in the

above link take some time to complete it at your own pace.
 EXTRA RESOURCES
GSAP :

- https://youtube.com/playlist?list=PLMPgoZdlPumexxtvuPUB3TY7LExI1N_Xp&si=qFHIZscegKpgGYvd

-https://youtu.be/m6PDUIF24v4?si=6zU8NXQf6BBnBNDa

TRANSITIONS AS ANIMATIONS :
-https://medium.com/engineerbabu/a-detailed-guide-to-css-animations-and-transitions-b544502c089c

-https://medium.com/@kmlo/css-transitions-and-animations-basics-a98c0fd444d8

CSS :

-https://www.w3schools.com/css/default.asp
 EXTRA RESOURCES
CSS FUNDAMENTALS: ( Video no - 1,9,10,11,16,17,18,20,22)

-https://www.youtube.com/playlist?list=PL4-IK0AVhVjPRj8P56TtFX2hg33BlbT3x

CSS ANIMATION :

-https://www.youtube.com/watch?v=YszONjKpgg4

CSS TRANSFORM :

-https://www.youtube.com/watch?v=rzD-cPhq02E