eee Mae alos edureka! ie | WEB DEVELOPMENT WITH HTMLS, CSS3 AND JAVASCRIPT View HTMLS + CSS3 + JavaScript course details at For more details please contact us: For Queries during the session and class recording: US: 1800 275 9730 (toll free) Post an Twitter @edurekalN ti INDIA: +91 88808 62004 Post on Facebook Email Us: sales@eObjectives edureka! At the end of this module, you will be able to: -» Importance of Web Development —+ Web Designer Vs. Web Developer i ~» Frontend and Back-end Web Development >» HTML, CSS:and JavaScript - An Overview > JavaScript Frameworks - jQuery and AngularS + Advanced Web Development Topics Slide 2 ‘www edureka.co/front-end-web-devetopmentImportance of Web Development edureka! ee Se « 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 3 www. edureka.co/front-end-web-developmentWeb Designer Vs. Web Developer edureka! «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 4 ‘www edureka.co/front-end-web-devetopmentWeb Developer Vs. Web Designer edureka! ieelPl= DESIGN Slide 5 ‘www edureka.co/front-end-web-devetopmentFront End and Back End Web Development edurekal! « 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 6 ‘www edureka.co/front-end-web-devetopmentHTML, CSS, and JavaScript — An Overview edureka! «HTML f + Hypertext Markup Language + Structure of Page: « JavaScript + Interactivity with User + Dynamic Updates in a Web Page *CSS * Cascading Style Sheets « Presentation/Styling Slide 7 ‘www edureka.co/front-end-web-devetopmentHypertext - Origins edureka! = HyperText * Text with references (hyperlinks) to other text » “Hyper” - meaning + Greek Origin: “over”, “beyond” «First Idea + Vannevar Bush, USA, in 1945 Slide 8 ‘ywww.edureka.co/front-end-web-developmentA Simple HTMLS5 Page edureka! «Save the following code in a test.html file

Welcome to HTML5, CSS3 and JavaScript!

Slide 9 ‘www edureka.co/front-end-web-devetopmentHosting a Web Site edureka! +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 10 ‘www edureka.co/front-end-web-devetopmentHTML Page edureka! * 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 11 ‘www edureka.co/front-end-web-developmentCSS - Introduction edureka! — » 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 a4 ‘ ive ‘ww edureia.coyfront-end-web-development,CSS Syntax (Contd./-) edureka! « Style Selector + The HTML elements to which the Style rule should be applied + Ikis a match expression + Specified as: » Element's tag name + hie; label - case insensitive > Value of Elements attribute @ iM, class = Case Sensitive > Element’s placement in the Document tree © Child element is nested within Parent + A Sibling efement is-at the same nesting level ‘wn edureka.coyfront-end-web-developmenCSS Syntax (Contd./-) edureka! + CSS Declaration Block + List of Declarations + Enclosed in curly braces {...} + Declaration > property ¢ value(s) j * property and value(s) are pre-defined * Property name is unique + Property value - Specified in multiple formats > keywords (words) or mnemenics (in combination with some symbols like: #, /) > numerical, hexadecimal, or a combination > some values may have units of measure ‘ww edureia.coyfront-end-web-developmentNew CSS3 Selectors edureka! + New CSS3 Structural Pseudo-Class Selectors B + Evfirst-of-type — Selects the first element of type E for its parent li:first-of-type { color: red; } 8 + E:last-oftype - Selects the last element of type E for its parent li:last-of-type { color: yellow; } g. E:only-child - Selects if E is only the child of its parent li:only-child { color: blue; } 8. E:nthh-child(n) - Selects nth child of the element & li:nth-child(3) { color: yellow; } 8 + E:nth-last-child(n) - Selects nth last child of the element E li:nth-last-child(2) { color: red; } ed _wwn edureia.coyfront-end-web-developmenCSS3 — 2D Transforms edureka! — « 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 ‘Stide 16 print “www edureks.co/front-end-web-developmentCSS3 — 2D Transforms (Contd./-) edureka! — « Specified with transform attribute + Translation — Movement along X-axis and Y-axis transform: translate( 50px, 100px }; + Rotation — in clock-wise direction transform: rotate( Sdeg ); * 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) ; “ww edureia.coyfront-end-web-developmenCSS3 Transitions edureka! —= = 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; } pshover { width: 200px; transition: width 2s; } = ‘Transition starts on events (= Events; hever, active, checked, focus, enabled, disabled © @media queries, ond JavaScript > Specify multiple transitions sets with a comma p { width: 200px; height: 100px; } pihover { width: 400px; height: 200px; transition: width 2s, height 5s; } ‘tite 19 _ _wwn edureia.coyfront-end-web-developmentJavaScript — An Introduction edurekal! — « Mocha, later renamed as LiveScript - Developed by Netscape + Based on ECMAScript 5.1 (Ver. 6.0 is finalized in mid 2015) = biveScript > 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 @ window that was not opened by it + Can not read from a web page served by another web server + Microsoft's version - JScript ‘Stite 19 — “www edureka.coyfront-end-web-develogmentDocument Object Model (DOM) —(Contd./-) edureka! » 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 “wwn edureia.coyfront-end-web-developmenHTML DOM Methods edureka! — * DOM Methods — Finding HTML Elements + getElementByld() Method > Gets the HTML Element with specified ID + getElementsByClassName() Method > Gets the HTML Elements with specified class name document .getElementsByClassName ("middiePara") [Q].inneriiTML = “Welcome te Edureka!"; document. getElement sByClassName ("middlePara")[1].inner#TML = "This is HTMLS, CSS3 and JavaScript Course!"; » getElementsByTagName() method > Gets the HTML Elements with specified element tag document .getflementsByTagName("p") [0] .innerfiTML = “Welcome to Edureka document.getElementsByTagName ("p") [1].innerHTML = "This is HTMLS, €883 and JavaScript Course!"; “www edureka.coyfront-end-web-developmentjQuery - Introduction edureka! — » 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 + Tt 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 “ww edureia.coyfront-end-web-developmentjQuery - Introduction edureka! — = Why use jQuery? * JavaScript Framework + Separates HTML and |oyoo-) >! ina 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) ‘Ste 23 “ytight 2015 — Abheri Techalog “wn edureia.coyfront-end-web-developmentjQuery Basics edureka! 0 ee » Download the latest version + From jquery.com website » Reference it in HTML file + Host it on your Web Server and Use it with 14+ Do not put the jQuery code in the