Part 5: Practical Web Development w/ HTML & CSS

Presented by

Setting up a Development Environment

  • One of the more important unspoken prerequisites for any development is a good programming environment. This is especially the case for web development.
  • Set up a text editor or IDE that makes your development life easier
  • For projects, set up a directory structure that makes project managements (adding and removing stuff) sane. HTML5 Boilerplate has a good default layout for files.
  • Re-use boilerplate code from other environments.

Choosing an IDE

  • You're going to want an IDE/editor with:
    • HTML/CSS syntax highlighting
    • HTML/CSS autocomplete/indentation
    • Code generation for basic templates
    • Code generation for CSS prefixes
  • For general ease of use, I recommend:
    1. Sublime Text 2
    2. (For Windows Users): Notepad++
    3. (For Mac Users): Textmate
  • For power users:
    1. Vim
    2. Emacs

Some best practices with Project file layout

  1. In general, an ideal file layout separates different file types into different directories minus some exceptions:
    • index.html must be in the top directory of the project
  2. Some tips and common practices:
    • CSS files should go into a css directory
    • Javascript files should go into a js directory
    • Resources such as images, fonts, etc. goes into res with subdirectories of img, fonts, etc
    • Optionally put all of the above in a static folder because they don't change.
  3. Other HTML files should go in directories related to the purpose. For example, the HTML for the nav could go in nav

Tools for generating/downloading boilerplate code

  1. Do use frameworks/libraries for generating code
  2. Initializr - Gives you HTML5 Boilerplate, JS Modernizr, CSS Bootstrap
  3. BearCSS - helps you build stylesheets based on your HTML files
  4. CSS3 Generator - Lets you play with and generate CSS3 code.

HTML: Best Practices

  1. Give a damn about your code; you're going to have to read it later.
  2. Use comments to split off different sections in a long HTML file. An HTML comment looks like:
    <!-- This is single line
    and multiline commenting.
    -->
  3. Nest your tags with 2-4 spaces or a tab for formatting purposes.
    <html>
      <head>
        <title>Website Title</title>
      </head>
    </html>

HTML: Tags

  1. Be careful to always close tags. You can set your IDE up to autocomplete tags for you.
  2. Try not to close self-closing tags like <img>; the behavior is undefined
  3. Only use <table> tags to hold inherently tabular data.
  4. DO use the more semantic HTML5 tags like <nav>. It might end up just being a <div>, but it's easier to understand the layout.
  5. DO NOT try to memorize all the tags and their attributes. Just look it up.

HTML: Attributes

  1. Do decorate your HTML with relevant attributes
    <img src="brokenlink" alt="Funny image" title="Funny image">
  2. Do NOT use inline styling, write an external css file
    <div style="background: #2d6cc0; border: 2px solid #333; padding: 15px; margin: 15px;">
      This is pretty nasty
    </div>
  3. Always use class and id attributes when possible
    <span id="primaryText defaultDetails" class="detail">
      Easy to find.
    </span>
    

HTML: General Guidelines

  1. Be consistent in the types of containers and elements used. This leads to easy extension of pages.
  2. Always include a full doctype and html wrapper. Browsers are smart enough to figure it out, but don't rely on that.
  3. If you want a objective score of your use of HTML/5, use The W3C HTML validator
  4. Practice how you play. Don't start writing hacked up HTML because it'll stink up your codebase.

CSS: Best Practices

  1. Make CSS selectors clear and distinct. Try to avoid repeating rule code across multiple selectors
  2. Thoroughly comment your source to explain what you're trying to do
  3. When in doubt, try your rules in the browser or in some playground environment like CodePen
  4. Test your design on multiple browsers; the output differences might surprise you
  5. When using CSS3 rules, be sure to use vendor prefixes. If you're in doubt, generate them with prefixMyCSS

Accounting for browser differences

  1. Every browser has its own implementation of certain CSS rules and some rules don't work on certain browsers. When in doubt, reference Can I Use to find out the support for certain rules.
  2. Consider using a normalize.css or reset.css to make all browsers use similar default css rules (include above your main.css)
  3. Use a framework that comes with support for multiple browsers

Considering Responsive Design

  1. For fluid layout and responsive designs, consider place where you can use percentage-based sizes instead of pixels
  2. To test your current design on multiple device viewports, use tools like The Responsinator and Screenqueri.es
  3. Use frameworks that focus on responsiveness and mobile compatibility like Foundation by Zurb and Twitter Bootstrap

General Guidelines

  1. If you need multiple selectors that share similar rules, prefer combining them with commas
  2. Prefer explicit versus implicit in rules
    #selector {
      /* Slightly unclear */
      padding: 15px 10px;
    }
    vs.
    #selector {
      /* Extremely obvious */
      padding: 15px 15px 10px 10px;
    }
  3. Rules should be a succinct as possible:
    #selector {
      /* Only wanted to change left margin */
      margin-left: 5px;
    }

Design tips

  1. Sketch it out first
  2. Consider using wireframes like Moqups
  3. StealCopy popular patterns:
    1. Pattern Tap
    2. Forrst
    3. Designer News
    4. Behance
    5. Dribbble
  4. Do iterative design. Ship a design everyday

Font icons

Questions?