HTML & CSS Best Practices

As presented to the students at Startup Institute Boston 2015.

Transcript

1. HTML and CSS Best Practices June 10, 2015 & June 13, 2015 http://www.kevingottuso.com/better-together/
2. Hi! I’m Paul Demers @demersdesigns / demersdesigns.com cantina.co
3. History of HTML • “Information Management: A Proposal” in 1989 • First website put online in 1990 • World Wide Web software released in 1993 • Let’s check it out! [1] • History from CERN Sir Tim Berners-Lee
4. HTML5 - The Basics • October 2014 - Finalized • Modern and semantic tags that better describe what they contain <section><article><header><footer> • Support for multimedia <audio><video> • Make the code more readable by humans and browsers alike • Add support for accessibility - ARIA roles, Landmarks, and more.
6. <figure></figure> <nav></nav> <nav></nav> <footer></footer> <section></section> <article></article> <header></header> <aside></aside> <aside></aside> <aside></aside> <header></header>
7. HTML5 Tags - <section> • Thematic grouping of content • Generally contains a heading <h1> - <h6> • Can have multiple sections on the page
8. HTML5 Tags - <article> • Self-contained, reusable, and distributable • Think newspaper article that can be read in context with other articles, ripped out and read independently. • Can contain a <header> and <footer> • Should contain identifying headings <h1> - <h6>
9. HTML5 Tags - <header> • A group of introductory or navigational aids • Can contain headers, but can also contain a site’s logo/branding • Can be a child of a <section> or can be the child of an <article>.
10. HTML5 Tags - <footer> • Generally serves as a container for author information or other article documentation. • Can contain site copyright information • May contain secondary navigational links or links to other sites related to the current document.
11. HTML5 Tags - <nav> • Serves as a container to navigational links • Can have a navigational structure for pages within the site or links to external sites. • Can be the child of <section>, <header>, <footer>, or other tags.
12. HTML5 Tags - <aside> • Container for information loosely related to the main content. • Sidebar or insert containing items like author info, related links, advertisements. • Generally, the main content wouldn’t be unreadable or understandable without the <aside> content.
13. History of CSS • First developed as a proposal by Håkon Wium Lie & Burt Bos • Allows stylesheets to be linked on multiple pages • CSS1 released in 1996, CSS2 released in 1998 • CSS3 earliest drafts in 1999 Håkon Wium Lie & Burt Bos
14. Why is CSS Important? • Styling, layout, and design of pages in a consistent way • Visual representation of the hierarchy outlined in the HTML • Separation of concerns. Content is displayed in HTML and styled using CSS. • It’s FUN!
15. CSS Don’ts • Don’t use a hammer when a screwdriver will do. • Avoid using ID’s for styling • Don’t use !important • Name things based on what they do, not how they look
16. CSS Dos • Think in terms of modules and components
17. CSS Dos • Lay out your code in an organized and predictable manner • Be consistent and decide about spaces vs. tabs and how many to indent.
18. CSS3 - The Basics • Breaks up the standard into modules • Adds a number of styling novelties previously only possible with images • Adds new layout mechanisms • All modules are in various states of standardization.
20. CSS3 Fun! • Box-shadow: Add a drop-shadow around an element • Text-shadow: Add a shadow behind text. • Border-radius: Round corners of an element • Font-face: Use fonts that are not the default web- safe fonts • Transition: Animate the values of properties.
21. Browser Prefixes • CSS3 properties are relatively new • Not supported in a uniform manner across browsers • Some tags need browser specific prefixes in order to work • -webkit for Safari and Chrome, -moz for Firefox, and -ms for microsoft
22. Browser Prefixes • Use AutoPrefixer or other tools so you don’t need to write the prefixes by hand. • Reference caniuse to make sure there is support for your browser
23. Let’s Do This! • caniuse - Check browser support for CSS3 and other emerging tech • Autoprefixer - Don’t write browser prefixes by hand. • Sass, Less, Stylus - Write programatic code that compiles out to plain CSS • Grunt & Gulp - Compile CSS, Livereload, etc. • Codepen! - A front-end dev playground • Read blogs! Read Twitter!
24. Let’s Do This! • CSS Tricks • Smashing Magazine • A List Apart • CSS Weekly Newsletter • Web Design Weekly • Codepen CSS3 Demos
25. Questions?