Startup Institute Chicago: Intro to Styling the Web

Startup Institute Chicago: Intro to Styling the Web

Slides from my class at the Startup Institute on Intro to Styling the Web

C2de752d5a220fa1295afdba0ef95ed2?s=128

Piyush Sinha

October 20, 2014
Tweet

Transcript

  1. INTRO TO 
 STYLE FOR THE WEB @ piyushsinha

  2. HI, I’M PIYUSH @ piyushsinha hello @ piyushsinha.com

  3. Previously, I led UX & Design efforts at I lead

    UX & Design efforts at
  4. UX 
 VISUAL DESIGN 
 HTML / CSS At work,

    I’m involved in
  5. STYLING THE WEB

  6. HTML CSS

  7. HTML • Hyper Text Markup Language • Markup Language •

    Used to give structure to content
  8. HTML Looks like <TagName>content</TagName> <TagName AttributeName=“Value”>content</TagName>

  9. HTML Example <H1>Intro to styling the web</H1> <a href=“http://www.startupinstitute.com”>
 StartupInstitute</a>

  10. None
  11. CSS • Cascading Style Sheets • Style sheet language •

    Used to style the appearance of content
  12. CSS Looks like selector { property : value; } Declaration

  13. CSS Example h1{
 color: #5DAAD8;
 font-size: 40px;
 text-decoration: underline;
 }

  14. None
  15. GETTING STARTED

  16. HTML • Consists of markup tags • 2 types: opening

    tags and closing tags • Opening tags are of the form <TagName>
 Closing tags are of the form </TagName> • Some tags do not require closing tags. These tags generally do not enclose any content • Opening tags can also include Attributes
  17. HTML ELEMENTS • Elements are building blocks of an HTML

    document
 
 Examples:
 <p> Content</p>
 <img />
  18. HTML ATTRIBUTES • Attributes provide more information about an element.


    
 Examples:
 href=“http://www.startupinstitute.com” • Other attributes include: 
 id, class, title and style
  19. HTML STRUCTURE <!DOCTYPE html>
 <html>
 <head>
 …
 </head>
 <body>
 …


    </body>
 </html> This structure is required 
 for every HTML document
  20. The <html> tags indicate the beginning and the end of

    the HTML document. <html> … </html> This is the document type declaration. It tells the browser what version of HTML we are using. <!DOCTYPE html>
  21. The <body> tags contain all the information that will be

    displayed on the page. <body> … </body> The content inside this tag isn’t displayed in the browser. It contains the page title, links to external files and meta data. <head> … </head>
  22. Block Elements
 These elements appear on a new line and

    occupy the width of the page
 
 Example
 header, footer, section, article, aside, div, h1, p, table, form, ul, ol, li, dl, dt, dd
  23. Inline Elements
 These elements do not begin on a new

    line. They fall into the flow of the document. They occupy only the required width on the page.
 
 Example
 span, strong, img, input, a, em, br, abbr
  24. ID’S & CLASSES • ID’s and Classes are 2 types

    of attributes that can be applied to HTML elements. • Each ID has to be unique, and is used to apply
  25. CSS Styles can be applied in 3 ways: Inline (using

    attribute style=“ ”)
 Internal (using <style>…</style> tags)
 External (using an external CSS file)
  26. REFERENCING CSS FILE • We can include an external CSS

    file by linking to it <!DOCTYPE html>
 <html>
 <head>
 <link rel=“stylesheet” href=“style.css”>
 </head>
 <body>
 …
 </body>
 </html>
  27. selector { 
 property : value; 
 property : value;


    property : value;
 } Declaration CSS Rule
 Set
  28. CSS SELECTORS • Selectors determine which element to apply styles

    to. • Selectors are of 3 types:
 Element Selectors: p { }
 ID Selectors: #quote { }
 Class Selectors: .quote{ }

  29. THE BOX MODEL Source: http://www.w3schools.com/css/box-model.gif

  30. THE BOX MODEL • The total width of an element

    should be calculated like this:
 Total element width = width + left padding + right padding + left border + right border + left margin + right margin • The total height of an element should be calculated like this:
 Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
  31. CSS FLOAT • Elements can be floated to allow other

    elements to wrap around them. • Elements can only be floated left or right.
 
 Example:
 .thumbnail { float: left; }
  32. CSS CLEAR • Elements after the floating element will flow

    around it. To avoid this, use the clear property. • The clear property specifies which side of an element, other floating elements are not allowed.
 
 Example:
 .quote { clear: both; }
  33. GOOD PRACTICES

  34. • Write standards compliant code. Use a validator. • Write

    semantic code. Help make the web accessible. • Keep your code clean and organized. Your coworkers will really appreciate it.
  35. USEFUL TOOLS

  36. ATOM

  37. GOOGLE CHROME DEVTOOLS

  38. W3SCHOOLS: HTML TAG REFERENCE

  39. W3SCHOOLS: CSS REFERENCE

  40. W3C: HTML VALIDATOR

  41. W3C: CSS VALIDATOR

  42. STYLETIL.ES

  43. THE ACCESSIBILITY PROJECT