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

Intro to HTML and CSS

Intro to HTML and CSS

A basic intro to HTML and CSS for a workshop at Groupon.


Mike Aparicio

July 19, 2016

More Decks by Mike Aparicio

Other Decks in Technology


  1. Intro to HTML & CSS Mike Aparicio User Interface Engineer

  2. Part I • Learn HTML basics • Create a personal

    website using only HTML Part II • Learn CSS basics • Apply CSS styles to personal website
  3. HTML What the content is (semantics) CSS What the content

    looks like (presentation) JavaScript What the content does (behavior)
  4. https://atom.io

  5. https://codepen.io https://codepen.io

  6. HTML (Hypertext Markup Language)

  7. Elements Containers for content or other elements <p>This is a

    <strong>paragraph</strong> element.</p> Attributes Define properties of an element or provide additional info <img src=“groupon.svg” alt=“Groupon”> Tags Code of an element, gives content semantic meaning <p>, </p>, <img>
  8. The DOM The Document Object Model (DOM) is a cross-platform

    and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. “Parents, Children, Descendants”
  9. HTML Guidelines • Use lowercase for tags <a href=“#”></a> •

    Use two-space indentation (soft tabs) when nesting • Close tags in the correct order <p><span>Text</span></p> • Use double quotes on attributes <img src=“#”> • <!-- Use comments liberally --> • Save files as .html
  10. Doctype • The very first line in every HTML document

    • Tells the browser how to render the page • Not part of the HTML itself • Does not have a closing tag <!DOCTYPE html>
  11. <html> • A container of containers • The “root” element

    • Contains only <head> and <body> elements
  12. <head> • Goes inside <html> element • Contains meta data

    about the document • Contains links to external dependencies • Can contain embedded CSS/JS • <title> - Title of the document, appears in browser’s title bar • <meta> - Info about the document, used by search engines • <script> - Links to or includes inline JavaScript • <style> - Links to or includes inline CSS • <link> - Links to other external files (e.g. favicons)
  13. <body> • Goes inside <html> element, below <head> • Contains

    everything that is displayed in the browser
  14. None
  15. None
  16. None
  17. Block Elements • Take up the full width of their

    parent container • Proceeding elements appear below • Can only be placed inside other block elements (except <a>) • Paragraphs <p> cannot contain other block elements
  18. https://ia.net/know-how/the-web-is-all-about-typography-period

  19. <h1> - <h6> • Define the structure and hierarchy of

    a document • Used in logical order • Use only one <h1> element per page • Consider meaning over aesthetics <h1>This is a headline</h1>
  20. <p> <p>This is a paragraph.</p> “A distinct piece of writing,

    usually dealing with a single theme and indicated by a new line, indentation, or numbering.” • Use as a container for content, not managing whitespace
  21. Lists • <ol> Ordered List (numbers) • <ul> Unordered List

    (bullets) • <li> List Item • <dl> Definition List (paired values) • <dt> Definition Term • <dd> Definition Description • Ordered and unordered lists can be nested
  22. None
  23. Inline Elements • Take up only as much room as

    needed by the content • Proceeding elements are placed adjacent to • Can be placed inside block or inline elements
  24. <a> • A for “anchor” • Links to external pages

    or other resources, or to other sections of the page • Can contain block elements • Hyperlink reference (href) attribute contains destination - can be absolute (“https://“), - relative to HTML file (“contact.html”), - or link to a section of the page (“faq.html#returns”) <a href=“https://groupon.com”>Groupon</a>
  25. <img> • Embeds an image in the document • Does

    not have a closing tag • alt attribute is required, describes image for screen readers or in cases where image doesn’t load • Use for content, not decoration • Avoid text in images • Avoid linking to external image URLs <img src=“cat.gif” alt=“Hilarious cat GIF”>
  26. <em> • Provides emphasis • Rendered as italicized • Can

    also use non-semantic <i>, but don’t <em>this text appears italicized</em>
  27. <strong> • Provides strong emphasis • Rendered as bold •

    Can also use non-semantic <b>, but don’t <strong>this text appears bold</strong>
  28. <br> • Maintains whitespace within paragraphs • Self-closing tag •

    Don’t use for managing whitespace <p>600 W. Chicago Ave.<br> Chicago, IL 60654</p>
  29. Non-Semantic Elements • Tell nothing about their contents • <div>

    - block element • <span> - inline element <div> <p>Here’s a <span>SPAN</span> inside of a DIV.</p> </div>
  30. Semantic Container Elements • Based on common classes previously used

    on divs <article> <aside> <figcaption> <figure> <footer> <header> <main> <nav> <section>
  31. Character Entities • &copy; - copyright (©) • &amp; -

    ampersand (&) • &lt; - less than (<) • &gt; - greater than (>) • &lsquo;/&rsquo; - single “curly” quotes (‘’) • &ldquo;/&rdquo; - double “curly” quotes (“”) • &mdash; - em dash (—) • &nbsp; - non-breaking space https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
  32. Personal Website

  33. Personal Website • Header • Navigation • Main Content •

    Sidebar • Footer Structure • Logo/Wordmark • About • Portfolio • Blog • Links • Contact Content
  34. http://codepen.io/peruvianidol/pen/66afdb29a3a1db3efc3192d17670c226?editors=1000

  35. HTML Cheatsheet Typography <h1>-<h6> Headings <p> Paragraph <ul> Unordered List

    (bullets) <ol> Ordered List (numbers) <li> List Item <dl> Definition List <dt> Definition Term <dd> Definition Description Inline Elements <a href=“[URL]”>Link</a> <img src=“[URL]” alt=“”> Image <em>Emphasis</em> <strong>Strong Emphasis</strong> <br> Line break Non-Semantic Elements <div> Block <span> Inline Semantic Containers <article> <aside> <figcaption> <figure> <footer> <header> <main> <nav> <section>
  36. Homework • Visit https://developer.mozilla.org/en-US/docs/Web/HTML/Element • What are some HTML elements

    we didn’t cover today? • Are they inline or block elements? • Do they have any unique attributes? • Play around with them in CodePen • Try adding some to your personal site
  37. CSS (Cascading Style Sheets)

  38. None
  39. None
  40. Selector A method of targeting HTML elements for styling Declaration

    A key/value pair defining the style for a selector Property An attribute of an element defined by a CSS selector p { color: #333333; font-size: 1rem; line-height: 1.5; }
  41. The Cascade • Browser default styles • User-defined styles •

    Author-defined styles (that’s you) - An external file, using <link href=“” rel=“stylesheet”> - In the <head> of a document, using <style> - Inline styles with an element, using the style attribute • Author !important styles • User !important styles
  42. None
  43. None
  44. None
  45. None
  46. !important • Overrides the cascade • Makes future changes difficult

    • Avoid using as much as possible
  47. None
  48. None
  49. Selectors • p - affects all paragraph elements • .tag

    - affects all elements with class=“tag” • #intro - affects all elements with id=“intro” • a[href] - affects elements with specific attributes • :visited - pseudo-selectors affect elements in certain states • Multiple selectors can be separated by commas • Selectors can be nested or combined in unique ways • Many special types of selectors exist • Selectors affect specificity http://www.w3schools.com/cssref/css_selectors.asp
  50. Inheritance • The passing down of properties from parent elements

    to their children • Not all properties are inherited • Can force properties to be inherited by using “inherit” value
  51. None
  52. None
  53. Specificity • Determines which styles “win” when more than one

    applies • Calculated in a comma-separated list - X, X, X, X, X • Element selectors have the lowest specificity (0, 0, 0, 0, 1) • Class, pseudo-class and attribute selectors (0, 0, 0, 1, 0) • ID selectors (0, 0, 1, 0, 0) • Inline styles (0, 1, 0, 0, 0) • !important has the highest specificity (1, 0, 0, 0, 0) • Multiple selectors increase specificity • We want to keep specificity as low as possible https://css-tricks.com/specifics-on-css-specificity/
  54. The Box Model • HTML elements are boxes that consist

    of content, padding, borders and margins • Defines space around and between elements • “box-sizing: border-box” normalizes width to include padding and border* • margin-top, margin-right, margin-bottom, margin-left • margin/padding: [top] [right] [bottom] [left] • margin: 1rem 1rem 1rem 1rem -> margin: 1rem • margin: 1rem auto 1rem auto -> margin: 1rem auto (centers) • border: [width] solid/dashed/dotted [color] * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
  55. without box-sizing: border-box

  56. with box-sizing: border-box

  57. Color • Can use hexadecimal, RGB(A), HSL(A), or 140 named

    values* • color - the color of an element’s text • background-color - the background color of an element • border-color - the color of an element’s border * http://www.w3schools.com/colors/colors_names.asp button { color: #ffffff; background-color #53A318: border: 1px solid #338833; }
  58. Typography • font-family - defines the font stack - ‘Open

    Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif - Browser will use first available font in stack - Multi-word fonts should be quoted - Browser default is Times New Roman • font-size - expressed in px, em, rem, %, etc. • line-height - relative to font-size (1.5), does not require a unit • text-align - horizontal alignment of text (left/right/center) • font-style, letter-spacing, word-spacing, text-decoration… http://reference.sitepoint.com/css/typography
  59. None
  60. None
  61. None
  62. None
  63. Units of Measurement • px - absolute pixel value •

    em - relative to font-size of element • rem - relative to font-size of root element (body: 16px) • % - relative to another value (width, font-size, etc.) • Convert px -> %: target % context = result • vw/vh - relative to 1% of the width/height of the viewport • width, height, min-width, max-width, min-height, max-height http://www.w3schools.com/cssref/css_units.asp
  64. CSS Guidelines • Avoid applying styles to ID selectors •

    Apply classes to elements rather than nesting selectors • Use lowercase for classes, dashes (-) rather than underscores • Make classes short and meaningful • If you must nest, never nest more than three deep • CSS should be additive - avoid overriding styles • Lowercase all hex values • Don’t use a unit when value is zero (margin: 0 vs. margin: 0px) • /* Use comments liberally */ • Save files as .css
  65. Personal Website • Change the font • Add some color

    • Adjust font sizes • Apply margins and padding to things • Check out http://www.w3schools.com/cssref/ and experiment with properties we didn’t cover • Pair with your neighbor • Ask questions!
  66. http://codepen.io/peruvianidol/pen/82dccb6eb4c80b31650fd6e88208daf6?editors=1100

  67. http://codepen.io/peruvianidol/pen/66afdb29a3a1db3efc3192d17670c226?editors=1000

  68. CSS Cheatsheet Selectors p { color: #777777; } // affects

    all <p> .intro { font-size: 150%; } // affects all w/ class=“intro” Properties color: [hex/RGB or color name]; background-color: [as above]; font-size: [value in px/em/%]; line-height: [multiple of font-size]; font-family: [comma-separated list]; text-align: [left/center/right]; margin: [top] [right] [bottom] [left]; padding: [top] [right] [bottom] [left]; border-width: [top] [right] [bottom] [left]; border-style: [solid/dashed/dotted]; border-color: [hex/RGB or color name]; border: [width] [style] [color]; http://www.w3schools.com/cssref/
  69. Resources • W3Schools (http://www.w3schools.com/) • Mozilla Developer Network (https://developer.mozilla.org/en-US/) •

    HTML & CSS Guidelines (http://codeguide.co/) • Can I Use? (http://caniuse.com/) • CSS-Tricks (https://css-tricks.com/) • Codrops (http://tympanus.net/codrops/) • CodePen Patterns (http://codepen.io/patterns/) • Google Fonts (https://www.google.com/fonts) • Gridlover (http://www.gridlover.net/try) • HTML Validator (https://validator.w3.org/)
  70. Questions? Mike Aparicio maparicio@groupon.com