A Work Day Of A Web Developer

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
A Work Day Of A Web Developer
www.edureka.co/front-end-web-development

Objectives
At the end of this module, you will be able to understand:
→ What is Front-End and Back-End Web Development
→ What a Web developer does with HTML, CSS, JavaScript
→ How to Align and Style Form Elements
→ How to Solve the Bugs

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!

A Web Developer
▪ 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!

A Normal Day Of A Web Developer

Web Developer Vs. Web Designer
Courtesy: www.smashingmagazine.com

Front 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
Front End / Client Side

▪ 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
Back End / Server side
Back 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

Hypertext - Origins
▪ HyperText
• Text with references (hyperlinks) to other text
▪ “Hyper” - meaning
• Greek Origin: “over”, “beyond”
▪ First Idea
• Vannevar Bush, USA, in 1945

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>

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

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

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

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

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

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; }

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

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);

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; }

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

Document Object Model (DOM)
▪ 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 a new 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

Activities in Developing a Web Page (with Demos)
▪ In a Web Form:
• Align the Input fields
• Center the Form elements
• Highlight an Input field when it is in focus
▪ In a Table:
• Make the Header and Footer stay at a fixed position
• Make the content in a table cell center aligned
• Table body should be scrollable only if the rows are many
▪ For an Image:
• Maintain the aspect-ratio of the images
• Align the image in the middle, vertically

A Bug in the Software?
▪ What?!! – How can a bug be there in software?
• Bugs are part of any Software Development
▪ A Bug in the Software
• any behaviour that does not match with the end user’s expectation!
• Root Cause of a Software Bug
➢ Requirement was missing (implicit requirement)
➢ Requirement was incorrectly understood/specified
➢ Programmer’s mistake, but could not be discovered by the Testing Team
▪ Catch (find) them, Fix (resolve) them!
• Fixing a bug after software is shipped is expensive!
➢ Damages Company’s and Product’s reputation!
➢ May loose a user/customer (a word may spread to other potential users)
➢ Loss of potential future product revenue!

Source of Bugs in Web Development
▪ HTML Bugs (easy to catch, easy to fix)
• Incorrect/missing mark-up element/attribute
• Incorrect placement (or nesting order) of an HTML element
▪ CSS Bugs (easy to catch, may be difficult to fix)
• Improper attribute values - Scrollable Content should not overlap header and footer
• Improper selector - The style is not getting applied!
▪ JavaScript Bugs (may be difficult to catch, may be difficult to fix)
• Exceptions due to no data validation of the user’s input
• The form is not getting saved when clicked on Submit button
▪ Bugs in the Backend Server-side Code (tough to catch, tough to fix)
• Client’s Ajax call is not hitting (reaching) the backend server
• The form data is not getting saved in the back-end DB

Debug Tools in Web Development
▪ The Web Browser
• Chrome Developer Tools
• Mozilla’s Firebug Add-on/Extension
▪ Developer Tools / Firebug
• Shows HTML elements and its nesting level
• Shows the CSS style rules with attributes and values with override status
• JavaScript source-level debugger
➢ Breakpoints
➢ Watching Variables
➢ Inspecting DOM Nodes
• Console for run-time error logging
• Network Activity Window with timing
• JavaScript Source profiling

Questions
Slide 27 www.edureka.co/front-end-web-development

A Work Day Of A Web Developer

Recommended

More Related Content

What's hot (19)

Viewers also liked (7)

Similar to A Work Day Of A Web Developer (20)

More from Edureka! (20)

Recently uploaded (20)

A Work Day Of A Web Developer