SlideShare a Scribd company logo
View HTML5 + CSS3 + JavaScript course details at
http://www.edureka.co/front-end-web-development
For Queries during the session and class recording:
Post on Twitter @edurekaIN: #askEdureka
Post on Facebook /edurekaIN
For more details please contact us:
US : 1800 275 9730 (toll free)
INDIA : +91 88808 62004
Email Us : sales@edureka.co
web development
With
HTML5, CSS3 and JavaScript
www.edureka.co/front-end-web-development
Slide 2
www.edureka.co/front-end-web-development
www.edureka.co/front-end-web-development
Objectives
At the end of this module, you will be able to:
 Importance of Web Development
 Web Designer Vs. Web Developer
 Front-end and Back-end Web Development
 HTML, CSS and JavaScript - An Overview
 JavaScript Frameworks - jQuery and AngularJS
 Advanced Web Development Topics
Slide 3 www.edureka.co/front-end-web-development
Importance of Web Development
 The Internet is ubiquitous
• Accessible through mobile and desktop
• Customers/users need to find you/your business
• Builds trust in your organization and improves your reputation
• Your website is your first round-the-clock sales person!
 The Website
• Creates first impression of your business
• Create it to suit the needs of your target audience
• Reflects your expertise and reputation
• Can bring business from any part of the world!
• Call to Action – Encourage the users to give you business
 You need Web Development skills to create a Website!
Slide 4 www.edureka.co/front-end-web-development
Web Designer Vs. Web Developer
 A Web Designer
• Designs the look and feel of a website (creative side of website)
• Decides the layout, fonts, color, images and overall branding
• Creates the visual mock-up of the website
• Rarely does the development of a website!
• A Right-brained (Creative) Person
 A Web Developer
• Brings the website mock-up to life on the Internet (development side of website)
• Develops the website and hosts on a web server
• Has Web Development Skills: HTML, CSS, JavaScript, PHP, Perl, Python, Java, Ruby
• A Left-brained (Logical) Person
 Gain Web Development skills to become a Web Developer!
Slide 5 www.edureka.co/front-end-web-development
Web Developer Vs. Web Designer
Courtesy: www.smashingmagazine.com
Slide 6 www.edureka.co/front-end-web-development
Front End and Back End Web Development
 Front End Web Development
• Defined components on the page with HTML
• Make them look pleasing with CSS
• Enable interactivity with JavaScript
• Enhance productivity with use of frameworks
 Back End Web Development
• Create the page components and content dynamically on the web server
• Send the HTML + CSS + JavaScript to web browser (used by a human user)
• Generate pages by programming in Java, JavaScript, PHP, Perl, Python, Ruby
• Aim to achieve fast response times to end users
 Front End Web Development is the focus of this webinar!
Slide 7 www.edureka.co/front-end-web-development
HTML, CSS, and JavaScript – An Overview
 HTML
• Hypertext Markup Language
• Structure of Page
 JavaScript
• Interactivity with User
• Dynamic Updates in a Web Page
 CSS
• Cascading Style Sheets
• Presentation/Styling
Slide 8 www.edureka.co/front-end-web-development
Hypertext - Origins
 HyperText
• Text with references (hyperlinks) to other text
 “Hyper” - meaning
• Greek Origin: “over”, “beyond”
 First Idea
• Vannevar Bush, USA, in 1945
Slide 9 www.edureka.co/front-end-web-development
A Simple HTML5 Page
 Save the following code in a test.html file
<!DOCTYPE html>
<html>
<head>
<title>This is a Edureka Course</title>
</head>
<body>
<p>Welcome to HTML5, CSS3 and JavaScript!</p>
</body>
</html>
Slide 10 www.edureka.co/front-end-web-development
Hosting a Web Site
 A Web Site
• Serves one or more HTML Pages
Default Page: index.html, index.php
 Served / Hosted by a Web Server
• HTTP Web Server
httpd, apache2, Ngnix, inetmgr.exe - Internet Information Server (Microsoft’s)
• Web Application Server
Apache Tomcat (Open Source), IBM WebSphere (Licensed)
 Technologies
• HTML, HTTP, TCP/IP Protocols
• Operating Systems: Linux, Windows, MacOS
Slide 11 www.edureka.co/front-end-web-development
HTML Page
 HTML (Web) Page / Document
• User Interface for the Web (site or application)
• A plain text file – human readable
• Transported on HTTP - HyperText Transfer Protocol
 Page Types
• Static – ready-made pages with fixed page content
File Extension: .html, .htm
• Dynamic – generated on the fly with varying page content
Generated on the Web Server
Interspersed with JavaScript, PHP, JSP, ASP
File Extensions: .js, .php, .jsp, .asp, .aspx
Slide 12 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd.
CSS - Introduction
 Cascading Style Sheet
• Describes the look and formatting of a page
• Used for Changing Presentation and Styling
• Can apply to a mark-up language
 HTML, XHTML, XML, SVG
 Separates Content from Presentation
 Properties (Attributes) Styled
• Layout, Font (Typography), Color, Background
• Box Properties: Border, Margin, Padding
• Lists, Tables
Slide 13 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd.
CSS Syntax (Contd./-)
 Style Selector
• The HTML elements to which the Style rule should be applied
• It is a match expression
• Specified as:
 Element’s tag name
 h1, p, label - case insensitive
 Value of Element’s attribute
 id, class - Case Sensitive
 Element’s placement in the Document tree
 Child element is nested within Parent
 A Sibling element is at the same nesting level
Slide 14 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd.
CSS Syntax (Contd./-)
 CSS Declaration Block
• List of Declarations
• Enclosed in curly braces { . . . }
• Declaration
 property : value(s) ;
• property and value(s) are pre-defined
• Property name is unique
• Property value – Specified in multiple formats
 keywords (words) or mnemonics (in combination with some symbols like: #, /)
 numerical, hexadecimal, or a combination
 some values may have units of measure
Slide 15 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd.
New CSS3 Selectors
 New CSS3 Structural Pseudo-Class Selectors
• E:first-of-type – Selects the first element of type E for its parent
li:first-of-type { color: red; }
• E:last-of-type - Selects the last element of type E for its parent
li:last-of-type { color: yellow; }
• E:only-child - Selects if E is only the child of its parent
li:only-child { color: blue; }
• E:nth-child(n) - Selects nth child of the element E
li:nth-child(3) { color: yellow; }
• E:nth-last-child(n) - Selects nth last child of the element E
li:nth-last-child(2) { color: red; }
Slide 16 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd.
CSS3 – 2D Transforms
 Transformation
• Change of position, shape and size of an element
 CSS3 Transforms
• 2-D: Two Dimensions
• 3-D: Three Dimensions (not covered in this course)
 Transform Operations
• move, scale, spin, stretch and turn elements
Slide 17 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd.
CSS3 – 2D Transforms (Contd./-)
 Specified with transform attribute
• Translation – Movement along X-axis and Y-axis
transform: translate( 50px, 100px );
• Rotation – in clock-wise direction
transform: rotate( 5deg );
• Scaling – increase/decrease size along width and height
transform: scale( 2, 2 );
• Skewing – tilting (turning) in X-axis and Y-axis directions
transform: skew( 10deg, 5deg);
Slide 18 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd.
CSS3 Transitions
 Changing from one style to another (on an event)
 CSS property on which the transition effect has to take place
 Time Duration over which transition has to take place (smoothly)
 Specified in seconds (s) or milliseconds (ms)
p { width: 100px; }
p:hover { width: 200px; transition: width 2s; }
 Transition starts on events
 Events: hover, active, checked, focus, enabled, disabled
 @media queries, and JavaScript
 Specify multiple transitions sets with a comma
p { width: 200px; height: 100px; }
p:hover {
width: 400px; height: 200px;
transition: width 2s, height 5s; }
Slide 19 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd.
JavaScript – An Introduction
 Mocha, later renamed as LiveScript - Developed by Netscape
 Based on ECMAScript 5.1 (Ver. 6.0 is finalized in mid 2015)
 LiveScript  JavaScript (due to Java popularity)
 Scripting Language for Web Browsers
• Dynamically Typed
• Interpreted by JavaScript Engine
 Can not Do (for Security Reasons)
• Unlimited reading/writing of files from client machine’s file system
• Writing to the files on the Server
• Can not close a window that was not opened by it
• Can not read from a web page served by another web server
 Microsoft’s version - JScript
Slide 20 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd.
Document Object Model (DOM) (Contd./-)
 Structure and Style of a Page, Access / Update Content
 DOM + JavaScript = Dynamic HTML (on client-side)
 What JavaScript can do with DOM?
 Change an HTML Element
 Change an attribute of an HTML Element
 Change the CSS style of an HTML Element
 Remove an existing HTML element or its attributes
 Add new a HTML Element or a new attribute to an Element
 React to an event associated with an HTML Element
 Create a new event listener and associate with an HTML Element
Slide 21 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd.
HTML DOM Methods
 DOM Methods – Finding HTML Elements
• getElementById() Method
 Gets the HTML Element with specified ID
• getElementsByClassName() Method
 Gets the HTML Elements with specified class name
document.getElementsByClassName("middlePara")[0].innerHTML = "Welcome
to Edureka!";
document.getElementsByClassName("middlePara")[1].innerHTML = "This is
HTML5, CSS3 and JavaScript Course!";
• getElementsByTagName() method
 Gets the HTML Elements with specified element tag
document.getElementsByTagName("p")[0].innerHTML = "Welcome to
Edureka!";
document.getElementsByTagName("p")[1].innerHTML = "This is HTML5,
CSS3 and JavaScript Course!";
Slide 22 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd.
jQuery - Introduction
 jQuery Core – a Cross-Platform JavaScript Library
• Simplifies client-side JavaScript scripting for a web page
• It is FREE and Open Source
• Used by about 6,000 most visited websites
• It uses the familiar HTML DOM model
 Latest Versions
• Version 1.11.3 - has support for IE 6/7/8
• Version 2.1.4 - has NO support for IE 6/7/8
• Development Version
 For use during development of the website
• Minified Version
 For use in production (live / online) use of website
Slide 23 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd.
jQuery - Introduction
 Why use jQuery?
• JavaScript Framework
• Separates HTML and JavaScript in a web page
• Eliminates cross-browser incompatibilities
• Simple/Short, Clean and Easy to read, write and understand
 What jQuery can do?
• Can Select Elements
 Has Selectors are similar to CSS Selectors
• Can Manipulate the Selected Elements
• Can Modify the Style of the Selected Elements
• Supports Events, Effects and Animations
• Supports JSON Parsing and Ajax (Asynchronous JavaScript + XML)
Slide 24 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd.
jQuery Basics
 Download the latest version
• From jquery.com website
 Reference it in HTML file
• Host it on your Web Server and Use it with <script> tag
<script src="jquery-2.1.3.js"></script>
• Point to a Public Web Server and Use it with <script> tag
 Google CDN Server (recommended) CDN – Content Delivery Network
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
 Microsoft CDN Server
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js">
</script>
 MaxCDN CDN Server (moved from MediaTemple, before that Amazon)
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
• Do not put the jQuery code in the <script> tag that loads jQuery library
Slide 25 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd.
AngularJS - Introduction
 Developed by Google
 Based on MVC Pattern – on Front-End (Browser) side
• Model – Sourcing and Managing Data
• Controller – Application Logic – Decides what/when to display
• View – Presentation of Data – How (Where) to display the data
 In AngularJS
• Model
 Represents current state of the application
 Stored in Object Properties
• View
 Displays the data in the Page’s DOM
• Controller
 Manages the relationship between the Model and the View (JavaScript Code)
• Data Binding Concept
 Map parts of UI to a JavaScript Object’s properties
 Sync between them happens automatically
Slide 26 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd.
Advanced Web Programming Topics
 HTML Canvas, WebGL, SVG
 HTML5 Geolocation API
 HTML5 Drag and Drop API
 HTML5 Web Storage API
 HTML5 Web Workers
 HTML5 Server-sent Events
Slide 27 www.edureka.co/front-end-web-development
Job trends for Full Stack Web Developer
Slide 28 www.edureka.co/front-end-web-development
 Module 6
» CSS3
 Module 7
» Java Script- Part 1
 Module 8
» Java Script- Part 2
 Module 9
» jQuery and AngularJS
 Module 10
» Advanced Web Programming
 Module 1
» HTML Part-1
 Module 2
» HTML Part-2
 Module 3
» CSS
 Module 4
» HTML5
 Module 5
» HTML5 Forms, Audio and Video
Front End Web Development - Course Topics
Slide 29 www.edureka.co/front-end-web-development
Disclaimer
Criteria and guidelines mentioned in this presentation may change. Please visit our website for latest
and additional information on Front End Web Development course.
Questions
Slide 30 www.edureka.co/front-end-web-development
Web Development with HTML5, CSS3 & JavaScript

More Related Content

What's hot (20)

PPTX
Complete Lecture on Css presentation
Salman Memon
 
PPT
Web Application Introduction
shaojung
 
PPTX
Responsive web designing ppt(1)
admecindia1
 
PPTX
Full Stack Web Development
SWAGATHCHOWDARY1
 
PPTX
Web development
Sunil Moolchandani
 
PPT
Ppt of web development
bethanygfair
 
PDF
Web Designing Presentation
RahulSuri30
 
PPTX
Full stack web development
Crampete
 
PPT
JavaScript - An Introduction
Manvendra Singh
 
PPT
javaScript.ppt
sentayehu
 
PPT
Javascript Basics
Vishal Mittal
 
KEY
HTML CSS & Javascript
David Lindkvist
 
PDF
Intro to html 5
Ian Jasper Mangampo
 
PDF
Introduction to HTML5
Gil Fink
 
PPT
CSS Basics
WordPress Memphis
 
PDF
WEB I - 01 - Introduction to Web Development
Randy Connolly
 
PPT
Java Script ppt
Priya Goyal
 
PPTX
Web Development
Lena Petsenchuk
 
PPT
Introduction to JavaScript (1).ppt
MuhammadRehan856177
 
PPTX
Internship presentation
Wasim Shemna
 
Complete Lecture on Css presentation
Salman Memon
 
Web Application Introduction
shaojung
 
Responsive web designing ppt(1)
admecindia1
 
Full Stack Web Development
SWAGATHCHOWDARY1
 
Web development
Sunil Moolchandani
 
Ppt of web development
bethanygfair
 
Web Designing Presentation
RahulSuri30
 
Full stack web development
Crampete
 
JavaScript - An Introduction
Manvendra Singh
 
javaScript.ppt
sentayehu
 
Javascript Basics
Vishal Mittal
 
HTML CSS & Javascript
David Lindkvist
 
Intro to html 5
Ian Jasper Mangampo
 
Introduction to HTML5
Gil Fink
 
CSS Basics
WordPress Memphis
 
WEB I - 01 - Introduction to Web Development
Randy Connolly
 
Java Script ppt
Priya Goyal
 
Web Development
Lena Petsenchuk
 
Introduction to JavaScript (1).ppt
MuhammadRehan856177
 
Internship presentation
Wasim Shemna
 

Viewers also liked (20)

PPTX
HTML5 & CSS3
Ian Lintner
 
PDF
The Role Of Java Script
Christian Heilmann
 
PDF
Javascript, HTML5 e CSS3
Tim Koch-Grünberg
 
PPTX
Presentation about html5 css3
Gopi A
 
PDF
CSS3: A practical introduction (FT2010 talk)
Lea Verou
 
PDF
Curso de Desenvolvimento Web - Módulo 02 - CSS
Rodrigo Bueno Santa Maria, BS, MBA
 
PDF
Curso de Desenvolvimento Web - Módulo 01 - HTML
Rodrigo Bueno Santa Maria, BS, MBA
 
PDF
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
PDF
Introdução a HTML, CSS, JS, Ajax
Gabriel Kamimura Yano
 
PPSX
Introduction to Html5
www.netgains.org
 
PPTX
html5.ppt
Niharika Gupta
 
PPT
Html Ppt
vijayanit
 
PDF
Javascript & SQL within database management system
Clusterpoint
 
PPTX
Parceiro Programador
Carlos Henrique Muller
 
PDF
HTML e CSS
Mónica Ferreira
 
PDF
Css cascading style sheet
Morvana Bonin
 
PDF
ebook Solidário Fluência de HTML & CSS
David Arty
 
PPTX
Meaning of Six Sigma : The Industry Independent Methodology
Edureka!
 
PPTX
About Best friends - HTML, CSS and JS
Naga Harish M
 
PPTX
Css3
Deepak Mangal
 
HTML5 & CSS3
Ian Lintner
 
The Role Of Java Script
Christian Heilmann
 
Javascript, HTML5 e CSS3
Tim Koch-Grünberg
 
Presentation about html5 css3
Gopi A
 
CSS3: A practical introduction (FT2010 talk)
Lea Verou
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Rodrigo Bueno Santa Maria, BS, MBA
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Rodrigo Bueno Santa Maria, BS, MBA
 
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
Introdução a HTML, CSS, JS, Ajax
Gabriel Kamimura Yano
 
Introduction to Html5
www.netgains.org
 
html5.ppt
Niharika Gupta
 
Html Ppt
vijayanit
 
Javascript & SQL within database management system
Clusterpoint
 
Parceiro Programador
Carlos Henrique Muller
 
HTML e CSS
Mónica Ferreira
 
Css cascading style sheet
Morvana Bonin
 
ebook Solidário Fluência de HTML & CSS
David Arty
 
Meaning of Six Sigma : The Industry Independent Methodology
Edureka!
 
About Best friends - HTML, CSS and JS
Naga Harish M
 
Ad

Similar to Web Development with HTML5, CSS3 & JavaScript (20)

PPTX
webdevelopment_6132030-lva1-app6891.pptx
lekhacce
 
PDF
A Work Day Of A Web Developer
Edureka!
 
PPTX
Introduction to HTML language Web design.pptx
lekhacce
 
PPTX
Introduction to HTML .pptx
lekhacce
 
PDF
web development
ABHISHEKJHA176786
 
PPTX
25444215.pptx
YashMittal302244
 
PPTX
WEB DEVELOPMENT.pptx
silvers5
 
PPTX
web development
RamanDeep876641
 
PPTX
025444215.pptx
RiyaJenner1
 
PPTX
Web Desing.pptx
SiamSarker2
 
PDF
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Edureka!
 
PDF
Web development ppt
ParasJain222
 
PPTX
UI Web Development.pptx
SHAIKIRFAN715544
 
PDF
Top 10 Front End Developer Skills | How to become a Front End Developer? Edureka
Edureka!
 
PPTX
Basics of Web Development.pptx
Palash Sukla Das
 
PPTX
Curtin University Frontend Web Development
Daryll Chu
 
PPTX
Fornt End Web Development domu 12345.pptx
Mm071
 
PPTX
Web-Development Powerpoint Presentation.
JohnLagman3
 
PPTX
webdevelopmentppt-210923044639 (1) (1).pptx
sitesite4
 
PPTX
uuserinterfacewebdevelopmentnewoneppt.pptx
SHAIKIRFAN715544
 
webdevelopment_6132030-lva1-app6891.pptx
lekhacce
 
A Work Day Of A Web Developer
Edureka!
 
Introduction to HTML language Web design.pptx
lekhacce
 
Introduction to HTML .pptx
lekhacce
 
web development
ABHISHEKJHA176786
 
25444215.pptx
YashMittal302244
 
WEB DEVELOPMENT.pptx
silvers5
 
web development
RamanDeep876641
 
025444215.pptx
RiyaJenner1
 
Web Desing.pptx
SiamSarker2
 
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Edureka!
 
Web development ppt
ParasJain222
 
UI Web Development.pptx
SHAIKIRFAN715544
 
Top 10 Front End Developer Skills | How to become a Front End Developer? Edureka
Edureka!
 
Basics of Web Development.pptx
Palash Sukla Das
 
Curtin University Frontend Web Development
Daryll Chu
 
Fornt End Web Development domu 12345.pptx
Mm071
 
Web-Development Powerpoint Presentation.
JohnLagman3
 
webdevelopmentppt-210923044639 (1) (1).pptx
sitesite4
 
uuserinterfacewebdevelopmentnewoneppt.pptx
SHAIKIRFAN715544
 
Ad

More from Edureka! (20)

PDF
What to learn during the 21 days Lockdown | Edureka
Edureka!
 
PDF
Top 10 Dying Programming Languages in 2020 | Edureka
Edureka!
 
PDF
Top 5 Trending Business Intelligence Tools | Edureka
Edureka!
 
PDF
Tableau Tutorial for Data Science | Edureka
Edureka!
 
PDF
Python Programming Tutorial | Edureka
Edureka!
 
PDF
Top 5 PMP Certifications | Edureka
Edureka!
 
PDF
Top Maven Interview Questions in 2020 | Edureka
Edureka!
 
PDF
Linux Mint Tutorial | Edureka
Edureka!
 
PDF
How to Deploy Java Web App in AWS| Edureka
Edureka!
 
PDF
Importance of Digital Marketing | Edureka
Edureka!
 
PDF
RPA in 2020 | Edureka
Edureka!
 
PDF
Email Notifications in Jenkins | Edureka
Edureka!
 
PDF
EA Algorithm in Machine Learning | Edureka
Edureka!
 
PDF
Cognitive AI Tutorial | Edureka
Edureka!
 
PDF
AWS Cloud Practitioner Tutorial | Edureka
Edureka!
 
PDF
Blue Prism Top Interview Questions | Edureka
Edureka!
 
PDF
Big Data on AWS Tutorial | Edureka
Edureka!
 
PDF
A star algorithm | A* Algorithm in Artificial Intelligence | Edureka
Edureka!
 
PDF
Kubernetes Installation on Ubuntu | Edureka
Edureka!
 
PDF
Introduction to DevOps | Edureka
Edureka!
 
What to learn during the 21 days Lockdown | Edureka
Edureka!
 
Top 10 Dying Programming Languages in 2020 | Edureka
Edureka!
 
Top 5 Trending Business Intelligence Tools | Edureka
Edureka!
 
Tableau Tutorial for Data Science | Edureka
Edureka!
 
Python Programming Tutorial | Edureka
Edureka!
 
Top 5 PMP Certifications | Edureka
Edureka!
 
Top Maven Interview Questions in 2020 | Edureka
Edureka!
 
Linux Mint Tutorial | Edureka
Edureka!
 
How to Deploy Java Web App in AWS| Edureka
Edureka!
 
Importance of Digital Marketing | Edureka
Edureka!
 
RPA in 2020 | Edureka
Edureka!
 
Email Notifications in Jenkins | Edureka
Edureka!
 
EA Algorithm in Machine Learning | Edureka
Edureka!
 
Cognitive AI Tutorial | Edureka
Edureka!
 
AWS Cloud Practitioner Tutorial | Edureka
Edureka!
 
Blue Prism Top Interview Questions | Edureka
Edureka!
 
Big Data on AWS Tutorial | Edureka
Edureka!
 
A star algorithm | A* Algorithm in Artificial Intelligence | Edureka
Edureka!
 
Kubernetes Installation on Ubuntu | Edureka
Edureka!
 
Introduction to DevOps | Edureka
Edureka!
 

Recently uploaded (20)

PDF
UiPath Agentic AI ile Akıllı Otomasyonun Yeni Çağı
UiPathCommunity
 
PDF
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
 
PDF
My Journey from CAD to BIM: A True Underdog Story
Safe Software
 
PDF
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Priyanka Aash
 
PDF
Redefining Work in the Age of AI - What to expect? How to prepare? Why it mat...
Malinda Kapuruge
 
PDF
Enhancing Environmental Monitoring with Real-Time Data Integration: Leveragin...
Safe Software
 
PDF
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
Edge AI and Vision Alliance
 
PDF
Optimizing the trajectory of a wheel loader working in short loading cycles
Reno Filla
 
PDF
5 Things to Consider When Deploying AI in Your Enterprise
Safe Software
 
PDF
“Scaling i.MX Applications Processors’ Native Edge AI with Discrete AI Accele...
Edge AI and Vision Alliance
 
PPTX
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
PDF
Kubernetes - Architecture & Components.pdf
geethak285
 
PPTX
Enabling the Digital Artisan – keynote at ICOCI 2025
Alan Dix
 
PDF
Unlocking FME Flow’s Potential: Architecture Design for Modern Enterprises
Safe Software
 
PPTX
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
PDF
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
PDF
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
PDF
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
yosra Saidani
 
PDF
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
PDF
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 
UiPath Agentic AI ile Akıllı Otomasyonun Yeni Çağı
UiPathCommunity
 
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
 
My Journey from CAD to BIM: A True Underdog Story
Safe Software
 
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Priyanka Aash
 
Redefining Work in the Age of AI - What to expect? How to prepare? Why it mat...
Malinda Kapuruge
 
Enhancing Environmental Monitoring with Real-Time Data Integration: Leveragin...
Safe Software
 
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
Edge AI and Vision Alliance
 
Optimizing the trajectory of a wheel loader working in short loading cycles
Reno Filla
 
5 Things to Consider When Deploying AI in Your Enterprise
Safe Software
 
“Scaling i.MX Applications Processors’ Native Edge AI with Discrete AI Accele...
Edge AI and Vision Alliance
 
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
Kubernetes - Architecture & Components.pdf
geethak285
 
Enabling the Digital Artisan – keynote at ICOCI 2025
Alan Dix
 
Unlocking FME Flow’s Potential: Architecture Design for Modern Enterprises
Safe Software
 
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
yosra Saidani
 
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 

Web Development with HTML5, CSS3 & JavaScript

  • 1. View HTML5 + CSS3 + JavaScript course details at http://www.edureka.co/front-end-web-development For Queries during the session and class recording: Post on Twitter @edurekaIN: #askEdureka Post on Facebook /edurekaIN For more details please contact us: US : 1800 275 9730 (toll free) INDIA : +91 88808 62004 Email Us : sales@edureka.co web development With HTML5, CSS3 and JavaScript www.edureka.co/front-end-web-development
  • 2. Slide 2 www.edureka.co/front-end-web-development www.edureka.co/front-end-web-development Objectives At the end of this module, you will be able to:  Importance of Web Development  Web Designer Vs. Web Developer  Front-end and Back-end Web Development  HTML, CSS and JavaScript - An Overview  JavaScript Frameworks - jQuery and AngularJS  Advanced Web Development Topics
  • 3. Slide 3 www.edureka.co/front-end-web-development Importance of Web Development  The Internet is ubiquitous • Accessible through mobile and desktop • Customers/users need to find you/your business • Builds trust in your organization and improves your reputation • Your website is your first round-the-clock sales person!  The Website • Creates first impression of your business • Create it to suit the needs of your target audience • Reflects your expertise and reputation • Can bring business from any part of the world! • Call to Action – Encourage the users to give you business  You need Web Development skills to create a Website!
  • 4. Slide 4 www.edureka.co/front-end-web-development Web Designer Vs. Web Developer  A Web Designer • Designs the look and feel of a website (creative side of website) • Decides the layout, fonts, color, images and overall branding • Creates the visual mock-up of the website • Rarely does the development of a website! • A Right-brained (Creative) Person  A Web Developer • Brings the website mock-up to life on the Internet (development side of website) • Develops the website and hosts on a web server • Has Web Development Skills: HTML, CSS, JavaScript, PHP, Perl, Python, Java, Ruby • A Left-brained (Logical) Person  Gain Web Development skills to become a Web Developer!
  • 5. Slide 5 www.edureka.co/front-end-web-development Web Developer Vs. Web Designer Courtesy: www.smashingmagazine.com
  • 6. Slide 6 www.edureka.co/front-end-web-development Front End and Back End Web Development  Front End Web Development • Defined components on the page with HTML • Make them look pleasing with CSS • Enable interactivity with JavaScript • Enhance productivity with use of frameworks  Back End Web Development • Create the page components and content dynamically on the web server • Send the HTML + CSS + JavaScript to web browser (used by a human user) • Generate pages by programming in Java, JavaScript, PHP, Perl, Python, Ruby • Aim to achieve fast response times to end users  Front End Web Development is the focus of this webinar!
  • 7. Slide 7 www.edureka.co/front-end-web-development HTML, CSS, and JavaScript – An Overview  HTML • Hypertext Markup Language • Structure of Page  JavaScript • Interactivity with User • Dynamic Updates in a Web Page  CSS • Cascading Style Sheets • Presentation/Styling
  • 8. Slide 8 www.edureka.co/front-end-web-development Hypertext - Origins  HyperText • Text with references (hyperlinks) to other text  “Hyper” - meaning • Greek Origin: “over”, “beyond”  First Idea • Vannevar Bush, USA, in 1945
  • 9. Slide 9 www.edureka.co/front-end-web-development A Simple HTML5 Page  Save the following code in a test.html file <!DOCTYPE html> <html> <head> <title>This is a Edureka Course</title> </head> <body> <p>Welcome to HTML5, CSS3 and JavaScript!</p> </body> </html>
  • 10. Slide 10 www.edureka.co/front-end-web-development Hosting a Web Site  A Web Site • Serves one or more HTML Pages Default Page: index.html, index.php  Served / Hosted by a Web Server • HTTP Web Server httpd, apache2, Ngnix, inetmgr.exe - Internet Information Server (Microsoft’s) • Web Application Server Apache Tomcat (Open Source), IBM WebSphere (Licensed)  Technologies • HTML, HTTP, TCP/IP Protocols • Operating Systems: Linux, Windows, MacOS
  • 11. Slide 11 www.edureka.co/front-end-web-development HTML Page  HTML (Web) Page / Document • User Interface for the Web (site or application) • A plain text file – human readable • Transported on HTTP - HyperText Transfer Protocol  Page Types • Static – ready-made pages with fixed page content File Extension: .html, .htm • Dynamic – generated on the fly with varying page content Generated on the Web Server Interspersed with JavaScript, PHP, JSP, ASP File Extensions: .js, .php, .jsp, .asp, .aspx
  • 12. Slide 12 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd. CSS - Introduction  Cascading Style Sheet • Describes the look and formatting of a page • Used for Changing Presentation and Styling • Can apply to a mark-up language  HTML, XHTML, XML, SVG  Separates Content from Presentation  Properties (Attributes) Styled • Layout, Font (Typography), Color, Background • Box Properties: Border, Margin, Padding • Lists, Tables
  • 13. Slide 13 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd. CSS Syntax (Contd./-)  Style Selector • The HTML elements to which the Style rule should be applied • It is a match expression • Specified as:  Element’s tag name  h1, p, label - case insensitive  Value of Element’s attribute  id, class - Case Sensitive  Element’s placement in the Document tree  Child element is nested within Parent  A Sibling element is at the same nesting level
  • 14. Slide 14 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd. CSS Syntax (Contd./-)  CSS Declaration Block • List of Declarations • Enclosed in curly braces { . . . } • Declaration  property : value(s) ; • property and value(s) are pre-defined • Property name is unique • Property value – Specified in multiple formats  keywords (words) or mnemonics (in combination with some symbols like: #, /)  numerical, hexadecimal, or a combination  some values may have units of measure
  • 15. Slide 15 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd. New CSS3 Selectors  New CSS3 Structural Pseudo-Class Selectors • E:first-of-type – Selects the first element of type E for its parent li:first-of-type { color: red; } • E:last-of-type - Selects the last element of type E for its parent li:last-of-type { color: yellow; } • E:only-child - Selects if E is only the child of its parent li:only-child { color: blue; } • E:nth-child(n) - Selects nth child of the element E li:nth-child(3) { color: yellow; } • E:nth-last-child(n) - Selects nth last child of the element E li:nth-last-child(2) { color: red; }
  • 16. Slide 16 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd. CSS3 – 2D Transforms  Transformation • Change of position, shape and size of an element  CSS3 Transforms • 2-D: Two Dimensions • 3-D: Three Dimensions (not covered in this course)  Transform Operations • move, scale, spin, stretch and turn elements
  • 17. Slide 17 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd. CSS3 – 2D Transforms (Contd./-)  Specified with transform attribute • Translation – Movement along X-axis and Y-axis transform: translate( 50px, 100px ); • Rotation – in clock-wise direction transform: rotate( 5deg ); • Scaling – increase/decrease size along width and height transform: scale( 2, 2 ); • Skewing – tilting (turning) in X-axis and Y-axis directions transform: skew( 10deg, 5deg);
  • 18. Slide 18 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd. CSS3 Transitions  Changing from one style to another (on an event)  CSS property on which the transition effect has to take place  Time Duration over which transition has to take place (smoothly)  Specified in seconds (s) or milliseconds (ms) p { width: 100px; } p:hover { width: 200px; transition: width 2s; }  Transition starts on events  Events: hover, active, checked, focus, enabled, disabled  @media queries, and JavaScript  Specify multiple transitions sets with a comma p { width: 200px; height: 100px; } p:hover { width: 400px; height: 200px; transition: width 2s, height 5s; }
  • 19. Slide 19 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd. JavaScript – An Introduction  Mocha, later renamed as LiveScript - Developed by Netscape  Based on ECMAScript 5.1 (Ver. 6.0 is finalized in mid 2015)  LiveScript  JavaScript (due to Java popularity)  Scripting Language for Web Browsers • Dynamically Typed • Interpreted by JavaScript Engine  Can not Do (for Security Reasons) • Unlimited reading/writing of files from client machine’s file system • Writing to the files on the Server • Can not close a window that was not opened by it • Can not read from a web page served by another web server  Microsoft’s version - JScript
  • 20. Slide 20 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd. Document Object Model (DOM) (Contd./-)  Structure and Style of a Page, Access / Update Content  DOM + JavaScript = Dynamic HTML (on client-side)  What JavaScript can do with DOM?  Change an HTML Element  Change an attribute of an HTML Element  Change the CSS style of an HTML Element  Remove an existing HTML element or its attributes  Add new a HTML Element or a new attribute to an Element  React to an event associated with an HTML Element  Create a new event listener and associate with an HTML Element
  • 21. Slide 21 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd. HTML DOM Methods  DOM Methods – Finding HTML Elements • getElementById() Method  Gets the HTML Element with specified ID • getElementsByClassName() Method  Gets the HTML Elements with specified class name document.getElementsByClassName("middlePara")[0].innerHTML = "Welcome to Edureka!"; document.getElementsByClassName("middlePara")[1].innerHTML = "This is HTML5, CSS3 and JavaScript Course!"; • getElementsByTagName() method  Gets the HTML Elements with specified element tag document.getElementsByTagName("p")[0].innerHTML = "Welcome to Edureka!"; document.getElementsByTagName("p")[1].innerHTML = "This is HTML5, CSS3 and JavaScript Course!";
  • 22. Slide 22 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd. jQuery - Introduction  jQuery Core – a Cross-Platform JavaScript Library • Simplifies client-side JavaScript scripting for a web page • It is FREE and Open Source • Used by about 6,000 most visited websites • It uses the familiar HTML DOM model  Latest Versions • Version 1.11.3 - has support for IE 6/7/8 • Version 2.1.4 - has NO support for IE 6/7/8 • Development Version  For use during development of the website • Minified Version  For use in production (live / online) use of website
  • 23. Slide 23 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd. jQuery - Introduction  Why use jQuery? • JavaScript Framework • Separates HTML and JavaScript in a web page • Eliminates cross-browser incompatibilities • Simple/Short, Clean and Easy to read, write and understand  What jQuery can do? • Can Select Elements  Has Selectors are similar to CSS Selectors • Can Manipulate the Selected Elements • Can Modify the Style of the Selected Elements • Supports Events, Effects and Animations • Supports JSON Parsing and Ajax (Asynchronous JavaScript + XML)
  • 24. Slide 24 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd. jQuery Basics  Download the latest version • From jquery.com website  Reference it in HTML file • Host it on your Web Server and Use it with <script> tag <script src="jquery-2.1.3.js"></script> • Point to a Public Web Server and Use it with <script> tag  Google CDN Server (recommended) CDN – Content Delivery Network <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>  Microsoft CDN Server <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"> </script>  MaxCDN CDN Server (moved from MediaTemple, before that Amazon) <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> • Do not put the jQuery code in the <script> tag that loads jQuery library
  • 25. Slide 25 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd. AngularJS - Introduction  Developed by Google  Based on MVC Pattern – on Front-End (Browser) side • Model – Sourcing and Managing Data • Controller – Application Logic – Decides what/when to display • View – Presentation of Data – How (Where) to display the data  In AngularJS • Model  Represents current state of the application  Stored in Object Properties • View  Displays the data in the Page’s DOM • Controller  Manages the relationship between the Model and the View (JavaScript Code) • Data Binding Concept  Map parts of UI to a JavaScript Object’s properties  Sync between them happens automatically
  • 26. Slide 26 www.edureka.co/front-end-web-development© Copyright 2015 – Abheri Technologies Pvt. Ltd. Advanced Web Programming Topics  HTML Canvas, WebGL, SVG  HTML5 Geolocation API  HTML5 Drag and Drop API  HTML5 Web Storage API  HTML5 Web Workers  HTML5 Server-sent Events
  • 27. Slide 27 www.edureka.co/front-end-web-development Job trends for Full Stack Web Developer
  • 28. Slide 28 www.edureka.co/front-end-web-development  Module 6 » CSS3  Module 7 » Java Script- Part 1  Module 8 » Java Script- Part 2  Module 9 » jQuery and AngularJS  Module 10 » Advanced Web Programming  Module 1 » HTML Part-1  Module 2 » HTML Part-2  Module 3 » CSS  Module 4 » HTML5  Module 5 » HTML5 Forms, Audio and Video Front End Web Development - Course Topics
  • 29. Slide 29 www.edureka.co/front-end-web-development Disclaimer Criteria and guidelines mentioned in this presentation may change. Please visit our website for latest and additional information on Front End Web Development course.