![@dalibor_gogic
[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
Recommended
More Related Content
What's hot
What's hot (19)
Similar to #3 HTML & CSS [know-how]
Similar to #3 HTML & CSS [know-how] (20)
Recently uploaded
Recently uploaded (20)
#3 HTML & CSS [know-how]
- 1. Diving deep into the core of the HTML #3
- 3. Planning
- 6. File href Title /index.html / Welcome /debug.html /debug HTML debugging example /contact.html /contact Contact
- 8. <nav role="nav"> <a href="/">Home</a> <a href="/debug">Debug</a> <a href="/contact">Contact</a> </nav>
- 9. debug.html <body> <h1>HTML debugging examples</h1> <p>What causes errors in HTML? <ul> <li>Unclosed elements: If an element is <strong>not closed properly, then its effect can spread to areas you didn't intend <li>Badly nested elements: Nesting elements properly is also very important for code behaving correctly. <strong>strong <em>strong emphasised?</strong> what is this?</em> <li>Unclosed attributes: Another common source of HTML problems. Let's look at an example: <a href="https://daliborgogic.com/>link to Dalibor's homepage</a> </ul> </body>
- 12. This slide [is] intentionally left blank.
- 13. CSS
- 14. CSS is one of the core languages of the open web and is standardized across browsers according to the W3C specification.
- 15. Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG or XHTML).
- 17. css h1 { color: tomato; } h1 { color: tomato; background-color: yellow; }
- 18. css #important { color: tomato; font-weight: bold; } html <p id="important">Buy burek</p>
- 19. css .important { color: tomato; font-weight: bold; } html <p class="important">Buy burek</p>
- 20. id="♥" + #♥ { color: lime; } PASS class="♥" + .♥ { color: lime; } PASS
- 22. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head> <body></body> </html>
- 23. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="/main.css"> </head> <body></body> </html>
- 24. css .spaceArround { padding: 10px 10px 10px 10px; } .spaceArround { padding: 10px 10px; } .spaceArround { padding: 10px; }
- 28. css *, *:before, *:after { box-sizing: inherit; } html { box-sizing: border-box; }
- 32. css span { color: tomato; } html <p>Burek je samo sa <span>mesom!</span></p>
- 33. css .info { border-left: 5px solid tomato; } html <div class="info"> <p>Lorem ipsum dolor sit amet.</p> <p>Smet consectetur adipisicing elit. Vel, consequatur?</p> </div>
- 34. css .beBlock { display: block; } .beInline { display: inline; } /* Set a width and height on the element.*/ .beInlineBlock { display: inline-block; }
- 36. css .beLeft { float: left; } .beRight { float: right; } /* reset */ .beLeft, .beRight { float: none; }
- 37. css .yesMaster { /* left | right | both | none */ clear: both; }
- 38. css .card { width: 200px; height: 600px; } .card { width: 200px; Height: auto; }
- 39. css .card { /* scroll | hidden | auto | visible */ overflow: scroll; }
- 41. css .modal { position: relative; } .modalIconExit { position: absolute; top: 10px; right: 10px; }
- 42. css .eatingBurek { width: 300px; height: 300px; background-image: url("/omnom.png"); /* repeat | repeat-x | repeat-y | no-repeat */ background-repeat: no-repeat; /* cover | contain */ background-size: cover; /* top | right | bottom | left | center */ background-position: center center; }
- 43. This slide [is] intentionally left blank.
- 44. display flex? Why not