Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Programming WTF: HTML & CSS

Programming WTF: HTML & CSS

Teaching HTML & CSS to people who never saw code before.

6497e10d8345ce6fee06048127196d6b?s=128

Fernando Mendes

April 14, 2016
Tweet

Transcript

  1. Programming wat the f*ck!?

  2. FRANCISCO RIBEIRO MARTINHO ARAGÃO PAULO CARDOSO martinhoaragao.me FERNANDO MENDES @fribmendes

    @frmendes @FranciscoRibeiro @pcardosolei
  3. HTML

  4. HTML Hyper Text Markup Language

  5. HTML Hyper Text Markup Language

  6. HTML Hyper Text Markup Language Not really programming™. Sorry :(

  7. None
  8. <html> </html> <!DOCTYPE html>

  9. <html> </html> <!DOCTYPE html> Tags remember those, we’re going to

    use them a lot
  10. HTML head body

  11. <html> </html> <!DOCTYPE html> <head> </head> <body> </body>

  12. <html> </html> <!DOCTYPE html> <head> </head> <body> </body>

  13. <html> </html> <!DOCTYPE html> <head> </head> <body> </body> Language Language

  14. <html> </html> <!DOCTYPE html> <head> </head> <body> </body> Language Title

    Language
  15. <html> </html> <!DOCTYPE html> <head> </head> <body> </body> Language Title

    Language Author
  16. <html> </html> <!DOCTYPE html> <head> </head> <body> </body> Language Title

    Language Author Info Links Style
  17. <html> </html> <!DOCTYPE html> <head> </head> <body> </body> Language Title

    Language Author Info Links Style Metadata
  18. TITLE <title>My first webpage</title> Sets the page’s title

  19. <meta charset="utf-8"/> Meta-information META

  20. <meta charset="utf-8"/> Meta-information your first self-closing tag! META

  21. META <meta name="author" content="CeSIUM"/> More Meta-information Search engines say “thank

    you”
  22. <link rel="icon" href="favicon.ico"/> Adds cool stuff to the webpage LINK

  23. <link rel="icon" href="favicon.ico"/> Adds cool stuff to the webpage LINK

  24. <html> </html> <!DOCTYPE html> <head> </head> <body> </body>

  25. <html> </html> <!DOCTYPE html> <head> </head> <body> </body>

  26. <html> </html> <!DOCTYPE html> <head> </head> <body> </body>

  27. <html> </html> <!DOCTYPE html> <head> </head> <body> </body>

  28. <html> </html> <!DOCTYPE html> <head> </head> <body> </body> pretty much

    everything
  29. SHOWTIME

  30. EX 1

  31. 1. Create a directory with an index.html file. All code

    goes here. 2. Add the DOCTYPE and html tags. 3. Add the head and the body tags. 4. Set the title to “My first webpage”. 5. Add a tag that tells us you’re the author. 6. Use ‘utf-8’ as the charset. 7. Write something in the body. EX 1
  32. 1. Create a directory with an index.html file. All code

    goes here. 2. Add the DOCTYPE and html tags. 3. Add the head and the body tags. 4. Set the title to “My first webpage”. 5. Add a tag that tells us you’re the author. 6. Use ‘utf-8’ as the charset. 7. Write something in the body. Tips: 1. Drag the file to your browser to open it. 2. Go slow and refresh when you add something new! 3. The favicon is here: http://bit.ly/1qmRtbB You’ll need it! :) 4. Check mdn if you need to know what’s inside a tag:
 https://developer.mozilla.org 5. Call for us and ask us questions! We love attention! EX 1
  33. <!DOCTYPE html> <html> <head> <title>My first webpage</title> <meta charset="utf-8"/> <meta

    name="author" content="CeSIUM"/> <link rel="icon" href="favicon.ico"/> </head> <body> Hello, world! </body> </html> EX 1
  34. Think of MS Word’s title <h1>This is a heading</h1> HEADINGS

  35. Think of MS Word’s subtitle <h1>This is a heading</h1> <h2>This

    is also a heading</h2> HEADINGS
  36. <h1>This is a heading</h1> <h2>This is also a heading</h2> <h3>And

    this</h3> Uh… Does anyone know if MS Word has subsubtitles? HEADINGS
  37. <h6>It’s headings all the way down!</h6> … <h1>This is a

    heading</h1> <h2>This is also a heading</h2> <h3>And this</h3> HEADINGS
  38. <p>This is a paragraph</p> PARAGRAPHS

  39. <p>This is a paragraph</p> <p> This is also a paragraph

    </p> PARAGRAPHS
  40. <p>This is a paragraph</p> <p> This is also a paragraph

    </p> But this isn’t. Try to do this! Add the previous code to your index.html file PARAGRAPHS
  41. ANCHORS <a href=“http://cesium.di.uminho.pt”>Our website!</a> You may know them as “links”

  42. <a href=“http://cesium.di.uminho.pt”>Our website!</a> meet attributes! Attributes add invisible information for

    some tags to work. ANCHORS
  43. LISTS <ol> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol> <ul>

    <li>An Item</li> <li>Another Item</li> <li>Also an Item</li> </ul> Lists can be ordered or unordered
  44. 1. First Item 2. Second Item 3. Third Item •

    An Item • Another Item • Also an Item Lists can be ordered or unordered LISTS
  45. <ol> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol> <ul> <li>An

    Item</li> <li>Another Item</li> <li>Also an Item</li> </ul> “Main” tag tells us the list type List is only visible when we add list items: <li> LISTS
  46. EX 2

  47. 1. Add a heading to index.html. Make it about your

    personal webpage. 2. Create an unordered list. 3. Each list item should be a (smaller) heading and a paragraph. 4. Make it so that each heading is inside an anchor. EX 2
  48. <body> <h1>CeSIUM</h1> <ul> <li> <a href=“#”><h2>Meet CeSIUM!</h2></a> <p>We’re a friendly

    bunch!</p> </li> <li> <a href=“#”><h2>We love what we do</h2></a> <p>Which is basically play XBox all day…</p> </li> </ul> </body> EX 2
  49. IMAGES <img src=“img/profile.png“/> We don’t need to add any content

    to an image. So, it’s a self-closing tag! Source can also be a URL
  50. DIV <div><p>We can add more content here!</p></div> Divs are containers.

    They keep a bunch of elements together as group. Also, they’re usually just boxes.
  51. DIV

  52. Wait, what? Nothing changed DIV

  53. <div style=“border: 1px solid black”> <p>We can add more content

    here!</p> </div> Don’t mind this, it’s just CSS. We’ll deal with that later. DIV
  54. DIV

  55. EX 3

  56. 1. Wrap the body content in a div. Don’t forget

    to indent! 2. Before the div you just added, create a another. 3. Add an image and a small bio inside this new div.
 Remember you can use a URL for the image source! EX 3
  57. <body> <div> <img src=“img/logo.png”/> <p>CeSIUM: Awesome since 1995</p> </div> <div>

    <h1>CeSIUM</h1> <ul> <li> <a href=“#”><h2>Meet CeSIUM!</h2></a> <p>We’re a friendly bunch!</p> </li> <!—- And so on… —-> </ul> </div> </body> EX 3
  58. So far… Think of HTML like the blueprint of a

    house… We have everything in place but it isn’t very pretty, is it?
  59. CSS

  60. CSS Cascading Style Sheets

  61. CSS Cascading Style Sheets

  62. <link rel="stylesheet" href="css/style.css"/> Add this to the head Also, create

    this file and directory LINK
  63. SYNTAX selector { attribute: value; }

  64. selector { attribute: value; } Make every paragraph red and

    with a 16 pixel size p { color: red; font-size: 16px; } SYNTAX
  65. SELECTORS div { ... } Element selector Applies style to

    every element of kind <div> Applies to me! </div> <p> Not to me! </p>
  66. SELECTORS #id { ... } Id selector Applies style to

    that particular element <div id=“myDiv”> Applies to me! </div> <div> Not to me! </div> div { ... } Element selector Applies style to every element of kind <div> Applies to me! </div> <p> Not to me! </p>
  67. SELECTORS .red { ... } Class selector Applies style to

    every element of class <div class=“red”> Applies to me! </div> <p class=“red”> And to me! </p> #myDiv { ... } Id selector Applies style to that particular element <div id=“myDiv”> Applies to me! </div> <div> Not to me! </div> div { ... } Element selector Applies style to every element of kind <div> Applies to me! </div> <p> Not to me! </p>
  68. TEXT p { font-family: ‘Open Sans’, sans-serif; font-size: 16px; }

    Tries the first one. If the font isn’t available goes to the next
  69. IMG img { height: 150px; width: 150px; } Usually one

    is enough to keep the aspect ratio
  70. EX 4

  71. 1. Remember the divs we added? Add a class called

    info to the first one
 and a class called content to the second one. 2. Add an id to the image. Name it whatever you want,
 but make it suggestive enough for everyone to understand! 3. Change the font-family of every paragraph to ‘Open Sans’. 4. Do the same for every heading (remember we have h1 and h2),
 but set it to ‘Oswald’ instead! Make them 30px and 24px respectively. 5. Make the img have a width of 150px. Tips: 1. Google Fonts is a great source of awesome fonts!
 Both Oswald and Open Sans can be found there. 2. Add the fonts to your collection. 3. Add the resulting link tag to your index.html file EX 4
  72. <body> <div class=“info”> <img id=“logo” src=“img/logo.png”/> <p>CeSIUM: Awesome since 1995</p>

    </div> <div class=“content”> <h1>CeSIUM</h1> <ul> <li> <a href=“#”><h2>Meet CeSIUM!</h2></a> <p>We’re a friendly bunch!</p> </li> <!—- And so on… —-> </ul> </div> </body> EX 4
  73. p { font-family: 'Open Sans', sans-serif; } h1, h2 {

    font-family: 'Oswald', sans-serif; } h1 { font-size: 30px; } h2 { font-size: 24px; } #logo { width: 150px; } body { /* Small trick to have simple * browser compatibility */ margin: 0; padding: 0; } EX 4
  74. SELECTORS II .content p { ... } <div class=“content”> <p>

    Applies to me! </p> </div> <p> Not to me! </p>
  75. .content div p { ... } Element selector <div class=“content”>

    <div> <p> Applies to me! </p> </div> <p> Not to me! </p> </div> SELECTORS II
  76. .content a:hover { ... } <div class=“content”> <a> Applies to

    me! But only when the cursor is on top of me! </a> </div> SELECTORS II
  77. p { font-style: italic; text-decoration: underline; } TEXT II

  78. a { font-weight: bold; text-decoration: none; } TEXT II

  79. a { color: red; } TEXT II

  80. a { color: rgb(244, 67, 54); } TEXT II

  81. a { color: #F44336; } TEXT II

  82. EX 5

  83. 1. Make the paragraphs inside .info italic. 2. Make the

    heading inside .content underlined 3. Have the anchors inside the list turn #0288D1. Remove their underline.
 When hovered turn them #29B6F6. EX 5
  84. .info p { font-style: italic; } .content h1 { text-decoration:

    underline; } .content ul li a { color: #0288D1; text-decoration: none; } .content ul li a:hover { color: #29B6F6; } EX 5
  85. MARGIN

  86. div { /* So we can see the result*/ border:

    1px solid black; margin: 10px; } MARGIN
  87. MARGIN

  88. div { border: 1px solid black; margin: 10px 20px; }

    MARGIN
  89. div { border: 1px solid black; margin: 10px 20px 5px

    15px; } MARGIN
  90. div { border: 1px solid black; margin-top: 10px; /* ...

    */ } MARGIN
  91. div { border: 1px solid black; margin: 10px; padding: 10px;

    } PADDING
  92. PADDING

  93. div { width: 30%; display: inline-block; } Display

  94. Display

  95. EX 6

  96. 1. Put the .info div inline, with a width of

    250px.
 Vertical margin should be 20px and horizontal should be 10px. 2. Do the same for the .content div but don’t limit its width. EX 6
  97. 1. Put the .info div inline, with a width of

    250px.
 Vertical margin should be 20px and horizontal should be 10px. 2. Do the same for the .content div but don’t limit its width. .info { display: inline-block; margin: 10px 20px; width: 250px; } .content { display: inline-block; margin: 10px 20px; } EX 6
  98. OTHER TAGS .content { display: inline-block; margin: 10px 20px; }

  99. .content { display: inline-block; margin: 10px 20px; vertical-align: top; }

    OTHER TAGS
  100. OTHER TAGS

  101. .content ul { list-style-type: none; } OTHER TAGS

  102. OTHER TAGS

  103. EX 7

  104. 1. Wrap the current content of the body inside a

    div. 2. Add a div before the newly created one.
 Keep it empty and add a class of hero-container. 3. Add a width of 100%, height of 250px and separate it from the other div.
 The distance should be 25px. EX 7
  105. <body> <div class="hero-container"></div> <div> <div class=“info”> <!—- ... —-> </div>

    </div> </body> .hero-container { width: 100%; height: 250px; margin-bottom: 25px; } EX 7
  106. BACKGROUND .hero-container { background-color: #333333; }

  107. .hero-container { background-image: url(../img/hero.png); } We are telling the CSS

    file where to look for the image Don’t forget to create this directory and file BACKGROUND
  108. BACKGROUND

  109. .hero-container { background-size: cover; background-position: center; } BACKGROUND

  110. BACKGROUND

  111. Programming wat the f*ck!?