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)

Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
bethanygfair
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student
Abhishekchauhan863165
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
Gil Fink
 
Build a Website Using HTML + CSS
Build a Website Using HTML + CSSBuild a Website Using HTML + CSS
Build a Website Using HTML + CSS
Anna Cook (she/her)
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
TurnToTech
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
html-css
html-csshtml-css
html-css
Dhirendra Chauhan
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
Jacob Nelson
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Amit Tyagi
 
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-development
Global Media Insight
 
javaScript.ppt
javaScript.pptjavaScript.ppt
javaScript.ppt
sentayehu
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web Development
Randy Connolly
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
joilrahat
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
Oleksii Prohonnyi
 
Css Ppt
Css PptCss Ppt
Css Ppt
Hema Prasanth
 
CSS
CSSCSS
CSS
People Strategists
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
Shashank Skills Academy
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
bethanygfair
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student
Abhishekchauhan863165
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
Gil Fink
 
Build a Website Using HTML + CSS
Build a Website Using HTML + CSSBuild a Website Using HTML + CSS
Build a Website Using HTML + CSS
Anna Cook (she/her)
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
TurnToTech
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
Jacob Nelson
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Amit Tyagi
 
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-development
Global Media Insight
 
javaScript.ppt
javaScript.pptjavaScript.ppt
javaScript.ppt
sentayehu
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web Development
Randy Connolly
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
joilrahat
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
Oleksii Prohonnyi
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 

Viewers also liked (20)

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

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

webdevelopment_6132030-lva1-app6891.pptx
webdevelopment_6132030-lva1-app6891.pptxwebdevelopment_6132030-lva1-app6891.pptx
webdevelopment_6132030-lva1-app6891.pptx
lekhacce
 
Introduction to HTML .pptx
Introduction to HTML               .pptxIntroduction to HTML               .pptx
Introduction to HTML .pptx
lekhacce
 
A Work Day Of A Web Developer
A Work Day Of A Web DeveloperA Work Day Of A Web Developer
A Work Day Of A Web Developer
Edureka!
 
Introduction to HTML language Web design.pptx
Introduction to HTML language Web design.pptxIntroduction to HTML language Web design.pptx
Introduction to HTML language Web design.pptx
lekhacce
 
25444215.pptx
25444215.pptx25444215.pptx
25444215.pptx
YashMittal302244
 
web development
web developmentweb development
web development
ABHISHEKJHA176786
 
025444215.pptx
025444215.pptx025444215.pptx
025444215.pptx
RiyaJenner1
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
silvers5
 
web development
web developmentweb development
web development
RamanDeep876641
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
Daryll Chu
 
HTML5_elementos nuevos integrados ahora
HTML5_elementos  nuevos integrados ahoraHTML5_elementos  nuevos integrados ahora
HTML5_elementos nuevos integrados ahora
mano21161
 
E learning website
E  learning websiteE  learning website
E learning website
Rishabh Gupta
 
Web Desing.pptx
Web Desing.pptxWeb Desing.pptx
Web Desing.pptx
SiamSarker2
 
Prashant_Shukla-UI
Prashant_Shukla-UIPrashant_Shukla-UI
Prashant_Shukla-UI
Prashant Shukla
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
Thomas Carney
 
jayesh-16
jayesh-16jayesh-16
jayesh-16
jayesh sutariya
 
Presentation on web page development.pptx
Presentation on web page development.pptxPresentation on web page development.pptx
Presentation on web page development.pptx
Smrity Das
 
Full download Responsive Web Design with HTML5 and CSS3 Second Edition Ben Fr...
Full download Responsive Web Design with HTML5 and CSS3 Second Edition Ben Fr...Full download Responsive Web Design with HTML5 and CSS3 Second Edition Ben Fr...
Full download Responsive Web Design with HTML5 and CSS3 Second Edition Ben Fr...
deveykypri6
 
Resume
ResumeResume
Resume
Satendra Kasana
 
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Asish Padhy
 
webdevelopment_6132030-lva1-app6891.pptx
webdevelopment_6132030-lva1-app6891.pptxwebdevelopment_6132030-lva1-app6891.pptx
webdevelopment_6132030-lva1-app6891.pptx
lekhacce
 
Introduction to HTML .pptx
Introduction to HTML               .pptxIntroduction to HTML               .pptx
Introduction to HTML .pptx
lekhacce
 
A Work Day Of A Web Developer
A Work Day Of A Web DeveloperA Work Day Of A Web Developer
A Work Day Of A Web Developer
Edureka!
 
Introduction to HTML language Web design.pptx
Introduction to HTML language Web design.pptxIntroduction to HTML language Web design.pptx
Introduction to HTML language Web design.pptx
lekhacce
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
silvers5
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
Daryll Chu
 
HTML5_elementos nuevos integrados ahora
HTML5_elementos  nuevos integrados ahoraHTML5_elementos  nuevos integrados ahora
HTML5_elementos nuevos integrados ahora
mano21161
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
Thomas Carney
 
Presentation on web page development.pptx
Presentation on web page development.pptxPresentation on web page development.pptx
Presentation on web page development.pptx
Smrity Das
 
Full download Responsive Web Design with HTML5 and CSS3 Second Edition Ben Fr...
Full download Responsive Web Design with HTML5 and CSS3 Second Edition Ben Fr...Full download Responsive Web Design with HTML5 and CSS3 Second Edition Ben Fr...
Full download Responsive Web Design with HTML5 and CSS3 Second Edition Ben Fr...
deveykypri6
 
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Asish Padhy
 
Ad

More from Edureka! (20)

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

Recently uploaded (20)

Introducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and ARIntroducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and AR
Safe Software
 
UiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build PipelinesUiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build Pipelines
UiPathCommunity
 
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Aaryan Kansari
 
Evaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical ContentEvaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical Content
Paul Groth
 
Palo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity FoundationPalo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity Foundation
VICTOR MAESTRE RAMIREZ
 
New Ways to Reduce Database Costs with ScyllaDB
New Ways to Reduce Database Costs with ScyllaDBNew Ways to Reduce Database Costs with ScyllaDB
New Ways to Reduce Database Costs with ScyllaDB
ScyllaDB
 
Contributing to WordPress With & Without Code.pptx
Contributing to WordPress With & Without Code.pptxContributing to WordPress With & Without Code.pptx
Contributing to WordPress With & Without Code.pptx
Patrick Lumumba
 
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 ADr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr. Jimmy Schwarzkopf
 
Let’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack CommunityLet’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack Community
SanjeetMishra29
 
Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Lorenzo Miniero
 
Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)
Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)
Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)
Peter Bittner
 
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath InsightsUiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPathCommunity
 
Microsoft Build 2025 takeaways in one presentation
Microsoft Build 2025 takeaways in one presentationMicrosoft Build 2025 takeaways in one presentation
Microsoft Build 2025 takeaways in one presentation
Digitalmara
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptxECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
Jasper Oosterveld
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
Droidal: AI Agents Revolutionizing Healthcare
Droidal: AI Agents Revolutionizing HealthcareDroidal: AI Agents Revolutionizing Healthcare
Droidal: AI Agents Revolutionizing Healthcare
Droidal LLC
 
Co-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using ProvenanceCo-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using Provenance
Paul Groth
 
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk TechniciansOffshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
john823664
 
Introducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and ARIntroducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and AR
Safe Software
 
UiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build PipelinesUiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build Pipelines
UiPathCommunity
 
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Aaryan Kansari
 
Evaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical ContentEvaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical Content
Paul Groth
 
Palo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity FoundationPalo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity Foundation
VICTOR MAESTRE RAMIREZ
 
New Ways to Reduce Database Costs with ScyllaDB
New Ways to Reduce Database Costs with ScyllaDBNew Ways to Reduce Database Costs with ScyllaDB
New Ways to Reduce Database Costs with ScyllaDB
ScyllaDB
 
Contributing to WordPress With & Without Code.pptx
Contributing to WordPress With & Without Code.pptxContributing to WordPress With & Without Code.pptx
Contributing to WordPress With & Without Code.pptx
Patrick Lumumba
 
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 ADr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr. Jimmy Schwarzkopf
 
Let’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack CommunityLet’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack Community
SanjeetMishra29
 
Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Lorenzo Miniero
 
Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)
Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)
Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)
Peter Bittner
 
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath InsightsUiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPathCommunity
 
Microsoft Build 2025 takeaways in one presentation
Microsoft Build 2025 takeaways in one presentationMicrosoft Build 2025 takeaways in one presentation
Microsoft Build 2025 takeaways in one presentation
Digitalmara
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptxECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
Jasper Oosterveld
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
Droidal: AI Agents Revolutionizing Healthcare
Droidal: AI Agents Revolutionizing HealthcareDroidal: AI Agents Revolutionizing Healthcare
Droidal: AI Agents Revolutionizing Healthcare
Droidal LLC
 
Co-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using ProvenanceCo-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using Provenance
Paul Groth
 
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk TechniciansOffshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
john823664
 

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.