Recommended
More Related Content
Similar to lecture0.pdf
Similar to lecture0.pdf (20)
Recently uploaded
Recently uploaded (20)
lecture0.pdf
- 1. Web Programming with Python and JavaScript
- 4. Git
- 5. Python
- 6. Django
- 8. JavaScript
- 12. HTML and CSS
- 13. HTML
- 14. <!DOCTYPE html> <html lang="en"> <head> <title>Hello!</title> </head> <body> Hello, world! </body> </html>
- 15. <!DOCTYPE html> <html lang="en"> <head> <title>Hello!</title> </head> <body> Hello, world! </body> </html>
- 16. <!DOCTYPE html> <html lang="en"> <head> <title>Hello!</title> </head> <body> Hello, world! </body> </html>
- 17. <!DOCTYPE html> <html lang="en"> <head> <title>Hello!</title> </head> <body> Hello, world! </body> </html>
- 18. <!DOCTYPE html> <html lang="en"> <head> <title>Hello!</title> </head> <body> Hello, world! </body> </html>
- 19. <!DOCTYPE html> <html lang="en"> <head> <title>Hello!</title> </head> <body> Hello, world! </body> </html>
- 20. <!DOCTYPE html> <html lang="en"> <head> <title>Hello!</title> </head> <body> Hello, world! </body> </html>
- 21. <!DOCTYPE html> <html lang="en"> <head> <title>Hello!</title> </head> <body> Hello, world! </body> </html>
- 22. Document Object Model <!DOCTYPE html> <html lang="en"> <head> <title>Hello!</title> </head> <body> Hello, world! </body> </html> html head body title Hello, world! Hello!
- 23. Common HTML Tags •<h1>, <h2>, ..., <h6> •<ol>, <ul> •<img> •<a> •<table> •<form> •...
- 24. CSS
- 25. Common CSS Properties • color • text-align • width, height • margin, padding • font-family, font-size, font-weight • border • ...
- 26. Identifying Elements • div • span • id • class
- 27. Specificity 1. inline 2. id 3. class 4. type
- 29. Specificity <div id="foo"> Hello! </div> div { color: blue; } #foo { color: red; } Hello!
- 30. Specificity <div id="foo"> Hello! </div> #foo { color: red; } div { color: blue; } Hello!
- 31. CSS Selectors a, b Multiple Element Selector a b Descendant Selector a > b Child Selector a + b Adjacent Sibling Selector [a=b] Attribute Selector a:b Pseudoclass Selector a::b Pseudoelement Selector
- 33. Responsive Design • viewport • Media Queries • Flexbox • Grids
- 34. <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 35. Viewport a
- 36. Viewport a
- 37. Media Queries • Media Types: print, screen, ... • Media Features: height, width, orientation, ...
- 38. Flexbox 1 2 3 4 5 6 1 2 3 4 5 6
- 39. Flexbox 1 2 3 4 5 6 1 2 3 4 5 6
- 40. Flexbox 1 2 3 4 5 6 1 2 3 4 5 6
- 41. Flexbox 1 2 3 4 5 6 1 2 3 4 5 6
- 42. Flexbox 1 2 3 4 5 6 1 2 3 4 5 6
- 43. Flexbox 1 2 3 4 5 6 1 2 3 4 5 6
- 44. Bootstrap
- 46. Sass
- 47. Web Programming with Python and JavaScript