Recommended
More Related Content
What's hot
What's hot (20)
Similar to HYF - Class 01 - HTML And CSS
Similar to HYF - Class 01 - HTML And CSS (20)
Recently uploaded
Recently uploaded (20)
HYF - Class 01 - HTML And CSS
- 1. FooCoding Hack Your Future Class 1 28-04-2019
- 2. HTML & CSS
- 3. Introduction of Mentors 3 Software Developer Garima Framework Developer And a really bad Painter Ishaan Puniani Work Ex.: 5 years Work Ex.: 10 years
- 4. Agenda 4 Introduction HTML, CSS & JS in brief Introduction to HTML HTML Elements & Attributes HTML Headings & Paragraph HTML Link, Images & Lists Semantic Element CSS How to use CSS CSS Syntax CSS Selectors ARIA How to use ARIA ARIA Syntax ARIA Example
- 6. HTML HyperText Markup Language Structure of Page 6
- 8. Java Script Interactivity with user Dynamic updates in a web page 8
- 10. Elements & Attributes 10 <element> … </element> Start Tag Content EndTag <element attribute = “value"> Name Value
- 11. Headings & Paragraph 11 Headings are defined with the <h1> to <h6> tags <h1>Heading 1</h1> Main Heading <h2>Heading 2</h2> . <h3>Heading 3</h3> . <h4>Heading 4</h4> . <h5>Heading 5</h5> . <h6>Heading 6</h6> Less imp Paragraph is defined with the <p> <p>Welcome Everyone in our 1st Class</p> Line break is defined with <br> tag
- 12. Links & Images 12 Link is hyperlink, which is defined with <a> tags. Image defined with <img> tag <a href="https://www.wikipedia.org/">Visit Wikipedia</a> URL Link text <img src=“hello.jpg" alt=“Greeting"> <img src=”hello.jpg" alt=”Greeting" style="width:200px;height:400px;">
- 13. Lists 13 Unordered List • HTML • CSS •Java Script It start with <ul> tag. Each list item is defined with <li> tag <ol> <li>HTML</li> <li>CSS</li> </ol> Ordered List 1. HTML 2. CSS 3. Java Script It start with <ol> tag. <ul> <li>HTML</li> <li>CSS</li> </ul> <ol type=”a" > <li>HTML</li> <li>CSS</li> </ol>
- 14. Block & Inline Elements 14 Block Inline <div> <span> <header> <strong> <footer> <b>, <i> <form> <br> <section> <a>
- 15. Semantic Elements 15 Semantic Elements <form> <header>, <footer> <table> <article> <section> <nav>
- 16. Forms 16 HTML Forms are used to select different kinds of user input
- 17. Form & Input Elements 17 <form> element defines a form, used for user input. <form> . <input type="text“> . </form> form elements <input> element can be displayed in many ways, which depends on type attribute. types text password radio checkbox
- 19. CSS 19
- 20. How to use CSS? 20 3 Ways to insert CSS <head> <link rel="stylesheet" href="styles.css"> </head> External style sheet Internal style sheet Inline style sheet <head> <style> h1 {color: red;} p {font-size: 15px;} </style> </head> <h1 style="color:red;">Hello</h1>
- 21. CSS Syntax 21
- 24. ARIA 24
- 26. ARIA Syntax 26
- 27. ARIA Example 27
- 28. Week 1 Homework 28 Visit Week 1 Homework: foocoding_HTML-CSS Find Class1 demonstration here: https://github.com/ishaan-puniani/hyf- foocafe/tree/master/Week-01
- 29. 29