Web front end development introduction to html css and javascript
2 likes864 views
This document provides an introduction to HTML, CSS, and JavaScript for building websites. It discusses how websites work by connecting clients and servers, and compares making a website to writing a book by organizing content into pages. The document then covers the basic purposes and syntax of HTML for creating page content, CSS for styling, and JavaScript for interactivity. It provides many code examples and explains common elements, properties, and methods in each language to demonstrate basic front-end web development concepts and tools.
More Related Content
What's hot (20)
Viewers also liked (17)
Similar to Web front end development introduction to html css and javascript (20)
Recently uploaded (20)
Web front end development introduction to html css and javascript
- 1. Web Front End Development Introduction to HTML, CSS, and Javascript Marc Huang
- 2. What is Website? How it works? Before we startโฆ
- 4. Client Readers (Users)Server Books (Websites) Hi, I want to read this Ok, here is the content of it Hmm, I would like to start This is the ๏ฌrst page Next page, please Ok, here you are Skip to page six Sure, no problem Go to Chapter 10 Well, you should pay some fees Alrightโฆ
- 5. Making a Website is like Writing and organising the story and chapters of a Book
- 6. Publish a Website is as well as Publish a Book
- 7. Todayโs topic โข Is not about โข Build or publish a website โข Is about โข How to make a(each) page of a website โข Tools we used for doing this โข HTML, CSS, and Javascript
- 9. HTML Hyper Text Markup Language Ref: http://www.w3schools.com/hTml/
- 10. A small HTML document
- 11. How it looks in browsers
- 12. How to create it
- 13. Elements
- 17. Single or Double Quotes
- 18. Common Elements โข <p>Paragraphs</p> โข <h1>Heading1</h1> โข <a href=โhttp://www.w3schools.comโ>W3Schools</a> โข <img src=โw3schools.jpgโ /> โข <div>Block-level</div> โข <span>Inline Block</span> โข <ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul> โข <table><tr><td>Table Cell</td></tr></table>
- 19. Block-level Elements <h1>Heading1</h1> Texts follow h1 element
- 20. <a href=โhttp://www.w3schools.comโ>W3Schools</a> Texts follow link element Inline-level Elements
- 21. Entities
- 22. Charset
- 23. CSS Cascading Style Sheets Ref: http://www.w3schools.com/css/
- 24. Why Use CSS?
- 25. Syntax
- 26. How To โข External style sheet โข Internal style sheet โข Inline style
- 27. Cascading Order
- 28. Box Model
- 29. Width & Height of an Element Note for old IE: Internet Explorer 8 and earlier versions, include padding and border in the width property. To ๏ฌx this problem, add a <!DOCTYPE html> to the HTML page.
- 30. Common Styles โข Related to Box โข Backgrounds, Display, Position, Float, Opacity โข Related to Content โข Colors, Fonts, Links, Over๏ฌow, Align โข Different formats of Box โข Lists, Tables, Forms, Imgs
- 31. Combinators โข descendant selector (space) โข div p { background-color: yellow; } โข child selector (>) โข div > p { background-color: yellow; } โข adjacent sibling selector (+) โข div + p { background-color: yellow; } โข general sibling selector (~) โข div ~ p {background-color: yellow; } http://www.w3schools.com/css/css_combinators.asp
- 32. Pseudo-Classes
- 34. Pseudo-Element
- 37. Javascript is nothing to do with Java! Ref: http://www.w3schools.com/js/
- 38. Javascript Canโฆ โข Change HTML Content โข Change HTML Attributes โข Change HTML Styles (CSS) โข Hide/Show HTML Elements โข and moreโฆ
- 39. Where To
- 40. Syntax
- 41. Data Type
- 43. Functions
- 44. Objects
- 45. Objects Cont.
- 46. Objects Cont.
- 47. Scope
- 48. Events
- 49. Strings โข var answer = โItโs alrightโ; โข var answer = โHe is called โJohnnyโโ; โข var answer = โHe is called โJohnnyโโ; โข var answer = โHe is called โJohnnyโโ; โข var answer = โHe is calledโ + โJohnnyโ;
- 50. String Methods โข var str =โThis is an example of string exampleโ; โข var sln = str.length; โข var pos = str.indexOf(โisโ); โข var lpos = str.lastIndexOf(โexampleโ); โข var spos = str.search(โisโ); //accept regular expressions โข var res = str.slice(โ22,28โ); //=โstringโ โข var res = str.substring(โ22,28โ); //=โstringโ โข var res = str.substr(โ22,6โ); //=โstringโ โข var n = str.replace(โstringโ,โintegerโ); โข var n = str.replace(/example/g, โsampleโ); // g = global match
- 51. Numbers
- 52. Dates
- 53. Arrays
- 54. Comparisons
- 55. Conditions
- 56. Switch
- 57. Loop For
- 58. Loop While
- 59. Break & Continue
- 60. Errors
- 61. JSON
- 64. Id and Class
- 65. Q & A
- 66. Thanks