Recommended
More Related Content
Similar to Web Day-01.pptx
Similar to Web Day-01.pptx (20)
More from GDSCIIITDHARWAD
Recently uploaded
Recently uploaded (20)
Web Day-01.pptx
- 2. Command Line
- 3. HTML
- 4. CSSH
- 5. JavaScript
- 7. DRY KI SS Don’t Repeat Yourself Keep It Short and Simple
- 8. VUE JS
- 9. H
- 10. Git Github
- 11. HTML H
- 12. <!Doctype html> <html lang=”en”> <head> <title>Hello!</title> <head> <body> <h1>Hello World!</h1> </body> </head> </html>
- 13. <!Doctype html> <html lang=”en”> <head> <title>Hello!</title> </head> <body> <h1>Hello World!</h1> </body> </html>
- 14. <!Doctype html> <html lang=”en”> <head> <title>Hello!</title> <head> <body> <h1>Hello World!</h1> </body> </html>
- 15. <!Doctype html> <html lang=”en”> <head> <title>Hello!</title> </head> <body> <h1>Hello World!</h1> </body> </html>
- 16. <!Doctype html> <html lang=”en”> <head> <title>Hello!</title> <head> <body> <h1>Hello World!</h1> </body> </html>
- 17. <!Doctype html> <html lang=”en”> <head> <title>Hello!</title> <head> <body> <h1>Hello World!</h1> </body> </html>
- 18. HeadingsH
- 19. LISTSH
- 20. LinksH
- 21. IMAGE
- 22. FORMSH
- 23. Tables
- 24. Other Tags Element Description <meta> This element represents Metadata that cannot be represented by other HTML meta-related elements, like base, link, script, style or title <div> This element is the generic container for flow content <nav> This element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. <section> This element represents a generic standalone section of a document, which doesn’t have a more specific semantic element to represent it. Common examples of section are navigation menus, tables of contents,etc. <footer> This element typically contains information about the author of the section, copyright data or links to related documents.
- 25. EmmetH
- 26. Live ServerH
- 27. Developer Tools
- 28. CSS H
- 29. color The color of the text text-align Where elements are placed on the page background-color Can be set to any color width In pixels or percent of a page height In pixels or percent of a page padding How much space should be left inside an element. margin How much space should be left font-family Type of font for text on page font-size In pixels border Size type(solid dashed,etc) color Property Description Property Description
- 30. Tables H
- 31. Inline styling > id > class > element typeH
- 33. Flexbox
- 34. Media Queries
- 35. Challenge
- 36. CSS Animations
- 37. opacity 0.5ms ease-out 0.5s transition-property transition duration transition-timing function transition delay transition:
- 38. div{ animation: name_of_animation 2s infinite; } @keyframes name_of_animation{ 0%{ font-size: 10px; } 100%{ font-size: 40px; } }
- 39. Challenge
- 40. JavaScript
- 41. ● Variables ● alert() ● Query Selectors ● DOM Manipulation ● Template Literals
- 43. Visual Appeal Our Individual HTML and JavaScript files become more readable. Access among HTML files Now we can have multiple HTML files that all share the same JavaScript. Now Collaboration We can now easily have one person work on the JavaScript while another works on HTML Importing We are able to import JavaScript Libraries that other people have already written. For Eg. Bootstrap has their own JS library you can include to make your site more interactive.
- 44. HTML
- 45. <!Doctype html> <html lang=”en”> <head> <title>Hello!</title> <head> <body> <h1>Hello World!</h1> </body> </head> </html>
- 46. <h1>This is a heading</h1> <h2>This is a heading</h2> <a href=”#”>Click here</a> <input type=’text’ name=’’ placeholder>Click here</input> <form> </form> <ul> <li>Item 1</li> <li> Item 2<li> <li>Item 3</li> <ol> <li> Item 1</li> <li> Item 2</li> </ol> </ul>
- 47. EmmetH
- 48. CSSH
- 49. color The color of the text text-align Where elements are placed on the page background-color Can be set to any color width In pixels or percent of a page height In pixels or percent of a page padding How much space should be left inside an element. margin How much space should be left font-family Type of font for text on page font-size In pixels border Size type(solid dashed,etc) color Property Description Property Description
- 51. Inline styling > id > class > element typeH
- 56. Flexbox
- 60. CSS Animations
- 61. opacity 0.5ms ease-out 0.5s transition-property transition duration transition-timing function transition delay transition:
- 62. JavaScript
- 63. ● Variables ● alert() ● Query Selectors ● DOM Manipulation ● Template Literals