SAKHIB HUSSAIN PPT 2.pptx

SRI VENKATESWARA COLLEGE OF ENGINEERING AND TECHNOLOGY
(AUTONOMOUS)
Department of ELECTRONICS And COMMUNICATION ENGINEERING
INTERNSHIP Presentation on
WEB DEVELOPMENT
-SAKHIB HUSSAIN SHAIK
20781A04G3
4TH YEAR

CONCEPTS
• WEB DEVELOPMENT
• WEB TECHNOLOGIES
• PROJECTS
• FUTURE ENHANCEMENT
• CONCLUSION

WEB DEVELOPMENT
• Web development refers to the creating, building, and maintaining of
websites. It includes aspects such as web design, web publishing, web
programming, and database management. It is the creation of an application
application that works over the internet i.e. websites.
• The word Web Development is made up of two words, that is:
• Web: It refers to websites, web pages or anything that works over the
internet.
• Development: It refers to building the application from scratch.
• Web Development can be classified into two ways:
• Frontend Development
• Backend Development

Web development includes----
Web Design
Web Content Development
Web Server and Network Security
Client-Side/Server-Side Scripting
E-Commerce Development

WEB TECHNOLOGIES
WEB TECHNOLOGIES are the languages, packages, and
protocols
that are used to create and communicate web sites and applications
over the internet.
▪ HTML
▪ CSS
▪ JAVASCRIPT
▪ REACT JS
▪ PYHTON
▪ JAVA

Scope of Web Development
• In Software Industry
• In Media
• In Education etc…..

PROJECTS
• Creating/Building a SPOTIFY CLONE/Music player Using HTML,CSS
and JS.

SPOTIFY CLONE Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Music Player</title>

<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="player">

<div class="details">
<div class="now-playing">PLAYING x OF y</div>
<div class="track-art"></div>
<div class="track-name">Track Name</div>
<div class="track-artist">Track Artist</div>
</div>

<div class="buttons">
<div class="prev-track" onclick=“prevTrack()">
<i class="fa fa-step-backward fa-2x"></i>
</div>
<div class="playpause-track" onclick=“playpauseTrack()">
<i class="fa fa-play-circle fa-5x"></i>
</div>
<div class="next-track" onclick="nextTrack()">
<i class="fa fa-step-forward fa-2x"></i>
</div>
</div>

<div class="slider_container">
<div class="current-time">00:00</div>
<input type="range" min="1" max="100"
value="0" class="seek_slider" onchange="seekTo()">
<div class="total-duration">00:00</div>
</div>

<div class="slider_container">
<i class="fa fa-volume-down"></i>
<input type="range" min="1" max="100"
value="99" class="volume_slider" onchange="setVolume()">
<i class="fa fa-volume-up"></i>
</div>
</div>

<script src="main.js"></script>
</body>
</html>
body {
background-color: lightgreen;
/* Smoothly transition the background color */
transition: background-color .5s;
}
/* Using flex with the column direction to
align items in a vertical direction */
.player {
height: 95vh;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.details {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 25px;
}
.track-art {
margin: 25px;
height: 250px;
width: 250px;
background-image: URL(
"https://source.unsplash.com/Qrspubmx6kE/640x360");
background-size: cover;
background-position: center;
border-radius: 15%;
}
/* Changing the font sizes to suitable ones */
.now-playing {
font-size: 1rem;
}
.track-name {
font-size: 3rem;
}
.track-artist {
font-size: 1.5rem;
}
/* Using flex with the row direction to
align items in a horizontal direction */
.buttons {
display: flex;
flex-direction: row;
}
let now_playing = document.querySelector(".now-playing");
let track_art = document.querySelector(".track-art");
let track_name = document.querySelector(".track-name");
let track_artist = document.querySelector(".track-artist");
let playpause_btn = document.querySelector(".playpause-track");
let next_btn = document.querySelector(".next-track");
let prev_btn = document.querySelector(".prev-track");
let seek_slider = document.querySelector(".seek_slider");
let volume_slider = document.querySelector(".volume_slider");
let curr_time = document.querySelector(".current-time");
let total_duration = document.querySelector(".total-duration");
// Specify globally used values
let track_index = 0;
let isPlaying = false;
let updateTimer;
// Create the audio element for the player
let curr_track = document.createElement('audio');
// Define the list of tracks that have to be played
let track_list = [
{
name: "Night Owl",
artist: "Broke For Free",
image: "Image URL",
path: "Night_Owl.mp3"
},
{
name: "Enthusiast",
artist: "Tours",
image: "Image URL",
path: "Enthusiast.mp3"
},
{
name: "Shipping Lanes",
artist: "Chad Crouch",
image: "Image URL",
path: "Shipping_Lanes.mp3",
},
];

Future Enhancement
‣ There are numerous web developer jobs available in the market for those with the
requisite skills. We discussed the trending technologies earlier – it goes without saying that it
is essential for developers to master those technologies: IoT, AI, VR in addition to the latest
programming languages, platforms and tools.
‣ As we are in upgrading world ,Every Education Institute Should teach the Students
regarding new Technologies and Train them.

CONCLUSION
• As a conclusion , I can say that this Internship was a great experience. I
acquired deeper knowledge concerning my technical skills but I also
personally benefitted.
• There are huge opportunities available for the students who are well
Front-end ,Back-end or in Full Stack development and also, We Should
Update ourselves with the New Technologies.

SAKHIB HUSSAIN PPT 2.pptx

Recommended

Recommended

More Related Content

Similar to SAKHIB HUSSAIN PPT 2.pptx

Similar to SAKHIB HUSSAIN PPT 2.pptx (20)

Recently uploaded

Recently uploaded (20)

SAKHIB HUSSAIN PPT 2.pptx