Learn by Doing - HTML & CSS

Presentation for Learn by Doing - HTML & CSS, presented first at 804RVA. https://www.meetup.com/804RVA/events/240642685/

Transcript

2. • 32 years old • Working with HTML for 20 years • Working with CSS for 9 years • Professionally building websites for 15 years; javascript applications for 5 years • Currently working as a developer at Painless1099 working with React About Me @joeyfigaro
4. • Stands for Hyper Text Markup Language • Defines the structure/skeleton of a document/website • Basically had no standards, policies, or rules in place until W3C authored a proposal for HTML ~3.2 • HTML 5 won against XHTML 2 and is the latest specification HTML History
5. google.com
6. Tag
7. Attribute
8. Attribute Value
9. HTML Recap • Tag • Describes the ‘pieces’ or elements of a document • Attribute • Describes a property of a given element (name, src, href) • Attribute Value • Describes the value of a given property for a given element
10. HTML Useful / Commonly Used Tags • div, p • ol / ul / li • img • a • h1, h2, h3, h4, h5, h6 * all tags use angle brackets
11. • div, p • ol / ul / li • img • a • h1, h2, h3, h4, h5, h6 HTML Useful / Commonly Used Tags * all tags use angle brackets - <p>Hi! I’m a paragraph</p>
12. Useful Resources http://bit.ly/lbd-taglist Tags Master List http://bit.ly/lbd-attributelist Attributes Master List
14. • Before CSS, all styling happened via tag attributes CSS Brief History
15. • Before CSS, all styling happened via tag attributes CSS Brief History <p font=“Arial” color=“red” size=“20”>omg this is awful</p>
16. • Before CSS, all styling happened via tag attributes • First specification completed in 1996, but it took browsers 3 years to fully adopt CSS Brief History
17. • Before CSS, all styling happened via tag attributes • First specification completed in 1996, but it took browsers 3 years to fully adopt • There was already software that converted powerpoint files into Compact Slide Shows and used the .css file extension. This caused some servers to serve newer CSS files as compact slide shows. CSS Brief History
18. • Before CSS, all styling happened via tag attributes • First specification completed in 1996, but it took browsers 3 years to fully adopt • There was already software that converted powerpoint files into Compact Slide Shows and used the .css file extension. This caused some servers to serve newer CSS files as compact slide shows. • Achieving consistency across browsers was still difficult, even as late as 2014. It’s a little better now. CSS Brief History
19. CSS Vocabulary
20. Selectors CSS Vocabulary
21. Selectors CSS Vocabulary Any element with an ID of “header" Any element with a class of “subscription”
22. Selectors Any element with an ID of “header" Any element with a class of “subscription” CSS Vocabulary
23. Property CSS Vocabulary
24. Property Value CSS Vocabulary
25. Opening Curly Brace CSS Vocabulary
26. Closing Curly Brace CSS Vocabulary
27. Rule CSS Vocabulary
28. CSS Vocabulary Recap • Selector • Identifies the targeted element(s) for applying a set of properties • Property • Much like attributes in HTML • Value • Describes the value for a given property • Rule • Begins at the selector and ends at the ending curly brace; includes all properties and values • Opening/Closing Curly Brace • Wrap your list of properties
30. CSS Selectors • Universal
31. • Universal CSS Selectors
32. • Universal • ID CSS Selectors
33. • Universal • ID CSS Selectors
34. • Universal • ID • Class CSS Selectors
35. • Universal • ID • Class CSS Selectors
36. • Universal • ID • Class • Descendant Combinator CSS Selectors
37. • Universal • ID • Class • Descendant Combinator CSS Selectors
38. • Universal • ID • Class • Descendant Combinator • Adjacent Sibling CSS Selectors
39. • Universal • ID • Class • Descendant Combinator • Adjacent Sibling CSS Selectors
40. • Universal • ID • Class • Descendant Combinator • Adjacent Sibling CSS Selectors • Attribute
41. • Universal • ID • Class • Descendant Combinator • Adjacent Sibling CSS Selectors • Attribute
42. • Universal • ID • Class • Descendant Combinator • Adjacent Sibling CSS Selectors • Attribute • Pseudo-class/Pseudo-selector
43. • Universal • ID • Class • Descendant Combinator • Adjacent Sibling CSS Selectors • Attribute • Pseudo-class/Pseudo-selector
44. • Universal • ID • Class • Descendant Combinator • Adjacent Sibling CSS Selectors • Attribute • Pseudo-class
45. Useful Resources http://bit.ly/ldb-selectors Selectors Master List