Scribd
Upload
26 views31 pages

Front End Lecture 1

Uploaded by

rv504263
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
26 views31 pages

Front End Lecture 1

Uploaded by

rv504263
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/ 31

WEB DEVELOPMENT

( UNDERSTANDING THE BASICS )


LECTURE-1
Today’s Agenda
 What You Should Know Before Joining This Course ?

 What Is Web Development ?

 Important Terminologies

 Client-Server

 Front End Development

 Three Pillars Of Front End Development-HTML,CSS,JS

 Back End Development

 Full Stack Development

 Course Outline
What You Should Know ?

 To start learning Web Development , there is no strict pre-


requisite

 You just have to be familiar with how to use browser for surfing the
internet

 No specific programming language knowledge is needed.

 Just basic knowledge in C/C++ is more than sufficient and that too will
be needed when we will learn JavaScript
What Is Web Development ?

 Web development is basically the tasks associated with


developing websites/web applications for hosting via internet.

 When you view a website/web application on the web in a


browser, it is because of all the processes involved in web
development.
What Is A Web Application ?

 A web application which most of the non IT people refer to as a


website , is a collection of web pages .

 In technical terms , a Web application (Web app) is a


program that executes on a server on the Internet and it’s
output is delivered to the client i.e. browser
What Is A Web Application ?
What Are Servers And Clients ?

 Server : The Servers are computers that are used to host


websites and store the website files. These servers are
connected to the giant network called the World Wide Web.

 Clients: The Clients are computers that have browsers running


and they load the website files via internet connection
What Are Servers And Clients ?
What Is A Web Site ?

 A website, is a set of web pages built using HTML, CSS, and


JavaScript that contains static information in the form of text,
images, audio, and video content.

 Websites are generally meant to present information to


visitors about a business , a person , an organization etc.

 Examples of websites include News papers websites, tutorial


websites ,personal websites etc.
Web Site V/s Web Application

Website Web Application


Convey static information to the visitor i.e. Convey dynamic information to the visitor
every user sees the same information i.e. every user sees different information
based upon his input

Provide a one-way communication where a Provides a two-way interaction wherein a


user visits a website, goes through the user performs certain actions on a web page
information on a website and leaves which generates responses from the
server.

Can be developed by simply using front-end Alongwith front-end technologies they also
technologies like HTML, CSS and JS require support of a backend technologies
like Python, PHP, Java , Go, C# etc.

Examples are bhaskar.com, Examples are amazon.in, facebook.com ,


stroustrup.com , tutorialspoint.com etc gmail.com etc
Web Application Architecture

 A Web application is a complex piece of software.

 It consists of many components like the user interface, a login-


screen, a products display screen, the database, etc.

 It’s actually easier to define web application architecture with


the help of a diagram , present on next slide that shows how
everything fits together
Web Application Architecture
Web Application Components

 Every web application , primarily contains 2 very important


components and these are called :

 Front End
AND
 Back End
What Is Front End ?

 The front end , also called client side of a web application , is


everything that the user sees and interacts within inside their
browser.

 It includes everything the user experiences directly: from text


and colors to buttons, images etc.

 The main purpose of the client side is to collect data from users.
What Is Front End ?
What Is Front End Made Up Of ?

 The front end is built with 6 key technologies :

 HTML
 CSS
 JavaScript
 Bootstrap
 Ajax
 jQuery

 The three very important of them are HTML , CSS and


JavaScript
The Three Key Players In Front End
The Three Key Players In Front End

 HTML (HyperText Markup Language)


It is the backbone of the Web. Every website you visit is built with HTML.
It takes care of all the structure and content

 CSS (Cascading Style Sheets)

It is what controls the look and feel of the page.


CSS sets the colors, fonts, background images, and even the way the page
is laid out

 JavaScript

It is a programming language commonly used to create interactive effects


within web browsers.
The Three Key Players In Front End

 In short we can remember that:

 HTML is for content

 CSS is for presentation

 JavaScript is for behaviour


The Three Key Players In Front End
What Is Back End ?

 Back-end development refers to the server-side development.

 It is the term used for the behind-the-scenes activities that


happen when performing any action on a web application.

 Backend developer focuses on databases, business logic, and the


architecture of web application.
What Is Back End ?

 Think for a minute, what happens when you fill your username
and password in Gmail’s login page.

 All the data you filled goes to the gmail server

 At the server , there is some piece of code which receives this data , performs a
search query on the database and retrieves the result.

 Based on the result of the query , it sends the response login accepted or login
failed to the browser.

 And the browser displays this result to you.


Front End V/s Back End
What Is Back End Made Up Of ?

 A backend developer needs to understand 2 very important


elements :

 A server side programming language like Python , Java, PHP ,


Ruby, C# etc

AND

 Database Management System like Oracle, MySQL etc.


What Full Stack Web Development
Contains ?

 Full stack developers work with both the front and back end of a
web application.

 They’re familiar with HTML, CSS, JavaScript and one or more


back end language/framework which in our case are JEE or
Django.
What Full Stack Web Development
Contains ?
What We Will Learn ?

 If you join only Front End Web Development course then you
will learn Front End Technologies as a part of the course.

 That means , we will be covering :


 HTML
 CSS
 JavaScript
 React JS
 Bootstrap
 Ajax
 jQuery
If You Know Core Java . . .

 You can join Full Stack Web Development through Java EE, which
will cover :
Client Tier Business Tier Data Tier
HTML Servlets JDBC
CSS JSP Advance JDBC
JavaScript Session Management Design Pattern
React JS Java Beans DAO Pattern
Ajax & Jquery EL MVC Pattern
Bootstrap Custom Tags

 Finally all this will be incorporated in a FREE PROJECT


 Course Duration : Around 55 hours
If You Know Python. . .

 You can join Full Stack Web Development through Django , which
will cover :

Front End Back End


HTML Django Models Model Forms
CSS Django Views Url Routing
JavaScript Django Templates Administration
React JS ORM
Ajax & jQuery User Management
Bootstrap Django Forms

 Finally all this will be incorporated in a FREE PROJECT


 Course Duration : Around 50 hours
Batch Schedule

 Class Timing (For Front End): 8:00 PM on Tue,Thu,Sat

 The next class is on Thursday , 29th Oct @ 8:00 PM

 Topic: HTML

 For any query ,please call at 9826086245, 7000521916,


9826686245
Course Fee For
Front End Development

You might also like