A power point slide share with for frontend web development.

1. Curtin University
FRONTEND WEB DEVELOPMENT
3 October 2017

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)

3. Technical Skills

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>

9. HTML lays everything out by defining the
content and flow

10. Semantic Structure
<h1>Hello World</h1>
Answer: Header 1

11. Semantic Structure
<p>Hello World</p>
Answer: Paragraph

12. Semantic Structure
<br /> or <br></br>
Answer: <br>

13. Semantic Structure
<img id=“image-1”
class=“img-1”
src=“path/to/img”
alt=“Image” title=“Image”
style=“width:250px;” />
Answer: HTML Attributes

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;” />

15. Blueprint

19. Boring?

20. Time to add some colors

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

26. CSS - Example
class selector =>
.center {
text-align: center;
color: red;
}

28. CSS Properties
• 253 different properties!
• Some are used very often
• Legacy from CSS 1, CSS 2, CSS 2.1 and now CSS3

29. The List of CSS

30. Total Number of CSS Properties
167

31. HTML5 + CSS3
What do you get?

32. Are you ready?

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

37. Impressive

38. What other things I can build with
HTML5+CSS?
• Websites
• Web Application
• Mobile Apps
• Fun Designs
•Up to your imagination!

39. Let’s Try
To build something fun

42. Now lets add a little CSS into it
Are you ready?

47. What else can I do?
• Check this out…

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

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

56. JavaScript - Example
• Change HTML content
<script>
function who_am_i() {
}
</script>

57. JavaScript - Example
• Change HTML content
• add this code
document.getElementById("demo").innerHTML
= "I am Iron Man!”;

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!

63. jQuery Example
• Furniture Culture
• http://www.furnitureculture.com.sg/

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

71. The End
Thank you