O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

HTML(5) and CSS(3) for beginners - I

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Basics of HTML 5 for Beginners
Basics of HTML 5 for Beginners
Carregando em…3
×

Confira estes a seguir

1 de 31 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Anúncio

Semelhante a HTML(5) and CSS(3) for beginners - I (20)

Mais recentes (20)

Anúncio

HTML(5) and CSS(3) for beginners - I

  1. 1. Welcome!
  2. 2. About Me • • • • • Founder SNTMNT! Product guy! Jack of all trades vincentleeuwen[at]gmail.com! @vincentleeuwen
  3. 3. About you • • Who are you?! What is your goal for today?
  4. 4. Client vs Server side
  5. 5. Client vs Server side
  6. 6. Text Editor www.sublimetext.com/2
  7. 7. Basic Page Structure • • • • HTML <html>! Page Header <head>! Page Title <title>! Page Body <body>
  8. 8. Basic Page Elements • • • Headers <h1>! Paragraphs <p>! Lists <ul> / <ol> & <li> <ul> ! ! <li>…</li>! ! <li>…</li>! </ul>
  9. 9. Don’t forget to close tags! <html> </html>
  10. 10. Some More Basic Elements • • Links <a href=“”>! Images <img src=“” />
  11. 11. Basic Element Styling • • • • • Empty line <br/>! Filled line <hr/>! Bold <b>! Italic <i>! Underline <u>
  12. 12. Nested Elements <a href=“www.google.com”>! ! <p>First paragraph</p>! ! <p>Second pagragraph</p>! </a>! ! => Link your image to Google! !
  13. 13. What went wrong? <a href=“www.google.com”>! <a href=“http://google.com”>! ! Always use http:// in links!!
  14. 14. Advanced Element Styling <p style=“…”>! • • • • font-family: Helvetica; ! font-size: 38px;! color: green;! background: yellow; You can assign styles to ANY element! (h1-h6 / p / div / a / li) !
  15. 15. Exercise => Make your title blue and font type helvetica! => Make all elements on the page blue!
  16. 16. Advanced Styling: DIVs <div style=“…”> </div>! • • • • height: 200px; ! width: 200px;! color: green;! background: yellow;
  17. 17. Exercise => Make our national flag naming colours using 3 DIVs (100 x 400)!
  18. 18. Element ID and Element Class • • • Don’t Repeat Yourself! IDs #MyFirstID {}! Class .MyFirstClass {} You can assign classes and IDs to ANY element! (h1-h6 / p / div / a / li) !
  19. 19. Exercise => Make a German flag using a DIV class ( .flagpart {} ) that can be scaled by changing the class.!
  20. 20. Some final DIVs styles .[yourdivname] {A:B; C:D;}! • • • • • margin: 20px 0 0 0;! padding-top: 30px;! padding-left: -20px;! border: 3px solid green;! background: url(“…”) [repeat / no-repeat];
  21. 21. Exercise => Push the flag colours a bit from the border using padding! => Load your profile image in the lowest div with a repeat.!
  22. 22. Cascading Style Sheets <link href="style.css" rel="stylesheet"> • • • .css files capture style tags like classes and IDs! Style across html files! If there are several files, the lowest one has priority in case of conflicts
  23. 23. Exercise => Move all styles currently in the style tag to a new file called style.css. !
  24. 24. Build your own profile page
  25. 25. CSS cheat sheet • • • • • • Make a background div .bg {} that has a fixed height of 400px and set background-size: cover; ! Style .bg with background: url(“”) no-repeat; as the image http://static.sntmnt.com/workshop/img1.jpg! Make a container div that has a width: 960px; and margin: 0 auto 0 auto;! Give the profile image a class with negative top margin and a white solid border of 5px.! Get lorem ipsum content from http://www.lipsum.com/ or write it yourself :)! Get the links horizontal by giving the li {} element ! display: inline; and ul {} a list-style-type:none;
  26. 26. Some useful links • • • • • Codedacemy (codecacemy.com)! W3Schools (w3schools.com)! Bootstrap (getbootstrap.com)! SubtlePatterns (subtlepatterns.com)! StackOverflow (stackoverflow.com)
  27. 27. Want more ??? • • • Launch a Landing Page over coffee! Next week Saturday, 14th December! Hosted by Dwight Gunning (@dwightgunning) passiontree.com/workshop/launch-a-landing-page/

×