Scribd
Upload
16 views16 pages

A Hands-On Experience in Web Dev

The document provides an overview of web development, including setting up a development environment, learning HTML, CSS, and JavaScript, and creating a personal portfolio. It outlines different roles in web development such as front-end, back-end, and full-stack developers, along with potential salaries for freshers. Additionally, it discusses web development trends and includes examples of client-side and server-side coding.

Uploaded by

harshitsaxena170998
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
16 views16 pages

A Hands-On Experience in Web Dev

The document provides an overview of web development, including setting up a development environment, learning HTML, CSS, and JavaScript, and creating a personal portfolio. It outlines different roles in web development such as front-end, back-end, and full-stack developers, along with potential salaries for freshers. Additionally, it discusses web development trends and includes examples of client-side and server-side coding.

Uploaded by

harshitsaxena170998
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/ 16

A Hands-on Experience

in
Web Development

By Harshit Saxena (IV Year)


& Anubhav Gupta (III Year)
What will be cooked today ??
Installing you own development enviroment.
Head start with html, css, javascript.
Dive deep into the source code of a website.
Make your own portfolio.
Sources of knowledge.
Next steps...
BUT, where will W3B D3V3L0PM3NT get me
??

Microsoft reads 1337 as italian, try tweeting in 1337


Reality check

1. Flipkart
2. PayTM
3. Zomato
4. Swiggy
5. Amazon India
6. OYO
7. Facebook
8. Instagram
9. Google
10.Snapchat
11.Microsoft
And who manages these websites?
Different Roles and

Front-end Developer

In this you work on building dynamic interfaces for


websites or web apps. You need to know HTML5,
CSS3, Jquery, JavaScript, and advance frameworks
like Angular, React, and Vue.
Their salary can reach up to 5 LPA as a fresher.
Different Roles and

Back-end Developer

For this, you need to know a server-side


programming language such as PHP, JavaScript,
Python, Ruby etc and related framework. For
example, if you work with PHP, you would also be
required to learn Laravel ( a popular PHP-based
framework).
Their salary can reach up to 8 LPA as a fresher.
Different Roles and

Full Stack Developer

In this you work on both front-end and back-end


development. Full-stack developers are paid more
than front-end and back-end developers.
Their salary can reach up to 15 LPA as a fresher.
The $PATH is SIMPLE

But, it's not easy


Top 5 Web Development Trends of 2019

• JavaScript
• Progressive Web App
• Single Page Application
• Mobile-friendly Website
• Cybersecurity
Mobile-Friendly Website

Mobile-friendly websites are websites that


work well on smartphones. They use touch
controls and can fit on small screens for quick
navigation. Furthermore, they load fast due to
their fantastic features which reduce data entry.
Inside a Website
Client side
<div class="login">
<table border="0" cellspacing="10">
<form name="frmsignin" method="post" action="index.php"><?php include('errors.php'); ?><tr>
<td><div class="title"><nobr>SIGN IN</nobr></div><hr color="royalblue">
</td></tr><tr><td>
<input type="text" placeholder="Email ID" name="username"/>
</td></tr> <tr> <td>
<input type="password" placeholder="Password" name="password"/>
</td> </tr><tr><td><br>
<a href="#">Forgot Password</a> <br></td> </tr> <tr> <td>
<input type="submit" value="SIGN IN" id="signInBtn" name="login_user"/></td> </tr> <tr> <td><br><div
class="signUpMsg">Don't Have An Account ?<a href="#" id="flipToSignUp">SIGN
UP</a></div></td></tr></form></table> </div>

if (isset($_POST['login_user'])) {
$username = mysqli_real_escape_string($db, $_POST['username']);
$password = mysqli_real_escape_string($db, $_POST['password']); Server side
if (empty($username)) {
array_push($errors, "Username is required");}
if (empty($password)) {
array_push($errors, "Password is required");}
if (count($errors) == 0) {
$password = md5($password);
$query = "SELECT * FROM user WHERE username='$username' AND password='$password'";
$results = mysqli_query($db, $query);
if (mysqli_num_rows($results) == 1) {
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}else {
array_push($errors, "Wrong username/password combination");
error_reporting(E_ALL ^ E_WARNING);
}}}
Is this done Server side or Client Side ??

$(function(){
$("#passtry2").on("keyup keydown focusout", function(){
var pass1 = frmsignout.newpass.value;
var pass2 = frmsignout.confirmpass.value;
if(pass1 == pass2 && pass1!='')
$(this).css('border','2px solid lime');
else{
$(this).css('border','2px solid red');
}
});
});
Event Feedback

You might also like