2. Introduction
2004 Now
Ngee Ann Polytechnic (Singapore)
School of InfoComm Technology
Graduated
National Service
Junior Web Developer
(COMPANEDIA)
Web Developer
(Global Yellow Pages)
150 Projects
(Wordpress,
Ecommerce, PHP)
Director
(Web Kaki)
160 Projects
(Wordpress, Ecommerce, PHP)
Web Development Manager
(User Experience Researchers)
Regional and Government Projects
(Singapore, China, Japan)
Chief Technology Officer
(iPrima Media)
4. Table of Content
<topics>
<item>Introduction to Frontend Web Development</item>
<item>HTML5</item>
<item>CSS3</item>
<item>Javascript</item>
<item>jQuery</item>
<item>Why be a web developer?</item>
</topics>
5. Introduction to Frontend Web Development
• History
• Architecture of a Web Application
• What does it do?
• What does it comprises of?
6. • [Definition]
Frontend web development is the practice of
producing HTML, CSS and JavaScript for a website or Web
Application so that a user can see and interact with them directly.
Introduction to Frontend Web Development
7. History
• In the year 1980, Tim Berners-Lee (Physicist, CERN) prototyped a system,
ENQUIRE, for researchers at CERN to use and share documents
• In the year 1989- 1990, using ENQUIRE as the basis, Berners-Lee specified
HTML and wrote the browser and server software
• HTML tags first public mention in the year 1991
• 18 tags for initial mark up language
• Over years, many specifications and change occurred
• 28 October 2014, HTML5 was released as a stable recommendation across the
World-Wide Web
8. Terminologies
• CERN - European Organization for Nuclear Research
• HTML – Hyper Text Markup Language
• Browser – A computer application used to serve the internet
• Server – A computer machine and application to host information and disseminate
data
• 18 Tags of HTML - <a>, <address>, Base Address, <dd>,
<dir>, <dl>, <dt>, <h1>,…<h6>, <hp1>,…<hp6>,
<isindex>, <li>, <listing>,<menu>, <nextid>, <p>,
<plaintext>, <title>, <ul>
14. HTML Attributes
• id => specifies a unique id for an element
• class => specifies equal styles for elements with the same class name
• src => specifies a URL for an image
• alt => specifies alternative text to be used, when an image cannot be displayed.
• style=> specifies an inline CSS style for an element
• title => specifies extra information about an element (displayed as a tool tip)
<img id=“image-1” class=“img-1” src=“path/to/img” alt=“Image” title=“Image”
style=“width:250px;” />
21. CSS - Explanation
• CSS = Cascading Style Sheet
• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all
at once
• External stylesheets are stored in CSS files
22. CSS - Syntax
• CSS code is typically kept in a style sheet (a .css file) that is separate from
your .html file
• CSS Syntax:
23. CSS - Syntax
• Each declaration includes a CSS property name and a value, separated by a
colon.
• A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.
p {
text-align: center;
color: red;
}
24. CSS - Measurement
• Unit of measurements:
• px = pixels [defines a measurement in screen pixel]
• pt = point [defines a measurement in points. A point is defined as 1/72nd of an inch]
• vh = 1% of viewport height [defines a measure in relation to your browser viewport]
• vw = 1% of viewport width [defines a measure in relation to your browser viewport]
25. CSS - Example
id selector=>
#center {
text-align: center;
color: red;
}
34. What do we need to do?
• Inside the <head></head>
• Embed the required .css into your html file
• Use <link rel="stylesheet" type="text/css"
href=“style.css" />
• And now you can use it!
• Question: What is href?
Answer: The URL path of the file
51. Let’s add some interesting things
• Visually good but what’s next?
• Users interaction with the browser
• Clicking, Hovering, Press and hold, Drag and drop
52.
53. JavaScript
• 1. HTML to define the content of web pages
• 2. CSS to specify the layout of web pages
• 3. JavaScript to program the behavior of web pages
54. JavaScript – What can it do?
• JavaScript Can Change HTML Content
• JavaScript Can Change HTML Attributes
• JavaScript Can Change HTML Styles (CSS)
• JavaScript Can Hide HTML Elements
• JavaScript Can Show HTML Elements
55. JavaScript – How to use it
• Add <script></script> to your <head> or <body>
• Add code inside the <script> tag
• Interact with your web page
57. JavaScript - Example
• Change HTML content
• add this code
document.getElementById("demo").innerHTML
= "I am Iron Man!”;
58.
59.
60.
61. jQuery
• jQuery is a fast, small, and feature-rich JavaScript library.
• It makes things like HTML document traversal and manipulation, event
handling, animation, and Ajax much simpler with an easy-to-use API that
works across a multitude of browsers.
• With a combination of versatility and extensibility, jQuery has changed the
way that millions of people write JavaScript.
62. • jQuery takes a lot of common tasks that require many lines of JavaScript code to
accomplish, and wraps them into methods that you can call with a single line of
code.
• Many of the biggest companies on the Web use jQuery, such as:
• Google
• Microsoft
• IBM
• Netflix
• So learn your jQuery!
64. Why learn web development
• Web Developers Have Good Job Prospects
• Pay is rising
• The internet is everywhere
• The field is expanding
• It's Flexible
65. Web Developers Have Good Job
Prospects
• Businesses are under pressure to offer top-notch websites with e-commerce,
communication and publishing capabilities
• Recruiters simply can’t find the Web developers they need to build them
• The supply is just nowhere near demand
• Startup Founders need to have tech background to talk to programmers and
ask the right questions
66. Pay is Rising
“As demand outpaces supply, the salaries of even inexperienced Web developers are rising.
Will Kelly, Dallas recruiting director for IT staffing firm Modis, has seen professionals with
as little as three years of experience receive offers of $90,000. “Supply and demand keeps
pushing salaries up,” he says. “Someone who can deliver is going to get good money.” Between
2014 and 2015, Web developer salaries will rise 6.5%, according to the salary survey”
published by recruiter Robert Half Technology.
67. The Internet is Everywhere
• Web has become ubiquitous
• Work will be used by people around the world as they hunt for information,
conduct transactions of almost every sort, and communicate with friends,
family, and business contacts through social media.
68. The Field is Expanding
• Companies think about their websites today, they think about mobile
technology and social media at the same time.
• Increasing use of smartphones, tablets, Internet TV, and even wearable
technology needs to be taken into account by development teams when
websites are designed and built.
69. It’s Flexible
• Front end, the back end, the mobile Web, content management systems and
e-commerce etc…
• New tools are making it easier to evolve your skills. By using Node.js, for
instance, JavaScript developers can more easily apply their talents to back-
end projects.
“If you like solving problems, software development can be really rewarding.”
70. Quote
Everything is achievable through technology. …Technology holds
infinite possibilities for mankind…Soon, technology will effect the way
you live your life everyday. No more tedious work. Leaving more time
for leisure activities and enjoying the sweet life.
- Howard Stark