Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
×
1 of 72

Curtin University Frontend Web Development

0

Share

A power point slide share with for frontend web development.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Curtin University Frontend Web Development

  1. 1. Curtin University FRONTEND WEB DEVELOPMENT 3 October 2017
  2. 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. 3. Technical Skills
  4. 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. 5. Introduction to Frontend Web Development • History • Architecture of a Web Application • What does it do? • What does it comprises of?
  6. 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. 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. 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. 9. HTML lays everything out by defining the content and flow
  10. 10. Semantic Structure <h1>Hello World</h1> Answer: Header 1
  11. 11. Semantic Structure <p>Hello World</p> Answer: Paragraph
  12. 12. Semantic Structure <br /> or <br></br> Answer: <br>
  13. 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. 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. 15. Blueprint
  16. 16. Boring?
  17. 17. Time to add some colors
  18. 18. 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
  19. 19. CSS - Syntax • CSS code is typically kept in a style sheet (a .css file) that is separate from your .html file • CSS Syntax:
  20. 20. 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; }
  21. 21. 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]
  22. 22. CSS - Example id selector=> #center { text-align: center; color: red; }
  23. 23. CSS - Example class selector => .center { text-align: center; color: red; }
  24. 24. CSS Properties • 253 different properties! • Some are used very often • Legacy from CSS 1, CSS 2, CSS 2.1 and now CSS3
  25. 25. The List of CSS
  26. 26. Total Number of CSS Properties 167
  27. 27. HTML5 + CSS3 What do you get?
  28. 28. Are you ready?
  29. 29. 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
  30. 30. Impressive
  31. 31. What other things I can build with HTML5+CSS? • Websites • Web Application • Mobile Apps • Fun Designs •Up to your imagination!
  32. 32. Let’s Try To build something fun
  33. 33. Now lets add a little CSS into it Are you ready?
  34. 34. What else can I do? • Check this out…
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. JavaScript – How to use it • Add <script></script> to your <head> or <body> • Add code inside the <script> tag • Interact with your web page
  39. 39. JavaScript - Example • Change HTML content <script> function who_am_i() { } </script>
  40. 40. JavaScript - Example • Change HTML content • add this code document.getElementById("demo").innerHTML = "I am Iron Man!”;
  41. 41. 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.
  42. 42. • 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!
  43. 43. jQuery Example • Furniture Culture • http://www.furnitureculture.com.sg/
  44. 44. Why learn web development • Web Developers Have Good Job Prospects • Pay is rising • The internet is everywhere • The field is expanding • It's Flexible
  45. 45. 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
  46. 46. 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.
  47. 47. 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.
  48. 48. 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.
  49. 49. 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.”
  50. 50. 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
  51. 51. The End Thank you

×