Web Development Trends & Predictions

View Front End Web Development 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 Trends and Predictions
www.edureka.co/front-end-web-development

Objectives
At the end of this module, you will be able to:
 Importance of Web Development
 Understand the role of HTML, CSS and JavaScript
 Understand Responsive Web Design – An Introduction
 Understand motion in User Interfaces
 Learn about Page Layout with Flexbox
 Understand Single Page Applications and AngularJS
 Understand Backend Web Development – PHP, NodeJS

Why do you need 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!

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
• Crates 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!

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

A Full Stack Web Developer
 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!

What is HTML, CSS, and JavaScript?
 HTML
• Hypertext Markup Language
• Structure of Page
 JavaScript
• Interactivity with User
• Dynamic Updates in a Web Page
 CSS
• Cascading Style Sheets
• Presentation/Styling

Few Modern Web Development Trends
 Responsive Web Design
 Motion (Animation) of UI Elements
 Single Page Applications and AngularJS
 Layout with Flexbox
 Backend Web Technologies – PHP Vs. NodeJS

Responsive Web Design (RWD)
 Coined by Ethan Marcotte
 Through an article in A List Apart in May 2010
 Need for RWS
 Needs 30% initial effort to get 300% benefits later!
 Consistent User Experience across mobile devices and desktop
 Simplifies the website maintenance
 Responds to the context
 Provides optimal viewing experience
 Adapts and responds to
 device orientation - portrait Vs. landscape
 screen sizes - smart phone Vs. tablet Vs. desktop
 medium - display screen Vs. print medium

Responsive Web Design (Contd.)
 Applying in Web Development
• Achieved through adaptively styling using CSS (Cascading Style Sheets)
• Using Fluid grids (for layouts)
With CSS3 Grid Layouts (browsers does not support it yet!)
• Adapting to media and orientation
With @media queries (browsers have good support!)
• Using fluid images
• Use relative units of measure, rather than absolute values
Use %, em, rem, vw, vh units for Length dimension
Not px, pt, in, cm as units for Length dimension

Motion of UI Elements
 Motion UI
• Adds life to the visual elements on the web site
• Communicates visually (about the state) to the human user
• Extends and Retains the User Attention
• Transitions and Animation of the UI Elements
• Better User Experience (UX) - more engaging and pleasing
 Applying Motion UI in Web Developments
• CSS3 Transforms on events
• CSS3 Transitions
• CSS3 Key Frame Animations

Layout with Flexbox
 Page Layout Techniques
• Using <table> tag – very bad option!
• Using <div> tag – bad option!
• Using CSS properties: float, clear - good option, but fragile!
• Using Flex box with CSS3 flex properties
 Advantages
• Consistent layout across browsers
• Flexibility and Control of the page layout
• Website is future-proof

Single Page Applications – Ajax, JSON, AngularJS
 Coined by Steve Yen in 2005
 Whole Web Application is in a Single Page
• All the user tasks are enabled in a singe web page
• Give similar experience of a Desktop application
• No interruption in the user interaction  Better User Experience
• Smoothly moves from one page to another web page – without navigating out
 Applying in Web Development
• Use of JavaScript Frameworks (most of based on MVC design pattern)
AngularJS, EmberJS, MeteorJS, ReactJS
• Use of Ajax and JSON
• Use of Web Sockets
• Use of Web Storage

Single Page Applications (Contd.)
 Practical Applications
• Page elements are dynamically loaded when needed (with Ajax calls)
Articles by LinkedIn Users
Connecting to “other users you may know” in LinkedIn
 Challenges
• Tighter coupling between front end and back end code
• Developer needs to be ‘smart’ to program it
• Not friendly to web crawlers
Use the fragment ‘#’ URLs to alleviate

Backend Web Development – PHP, NodeJS
 Writing code that runs on a Web Server / Application Server
• Dynamically generate the HTML page elements
CSS styles and JavaScript generally remains same
 Server Side Web Technologies
• Programming
Procedural Languages: Java App (runs inside Web App Server)
Scripting Languages
Traditional Scripting: PHP (runs inside HTTP Web Server), Perl, CGI
Modern Scripting: JavaScript (runs on NodeJS), Python, Ruby

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

Job trends for Full Stack Web Developer

 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

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.

Limited Period Offer
On Front End Web Development Course
To avail this offer please contact us:
US : 1800 275 9730 (toll free)
INDIA : +91 88808 62004
Email Us : sales@edureka.co
25% Off

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

Web Development Trends & Predictions

Web Development Trends & Predictions

Recommended

Recommended

More Related Content

More from Edureka!

More from Edureka! (20)

Recently uploaded

Recently uploaded (20)

Web Development Trends & Predictions

Editor's Notes