html-css.md

HTML & CSS

HTML is the markup language for displaying web pages and other information that can be displayed in a web browser. CSS is a language used for describing the look and formatting of HTML. Together they form the foundation of the web.

Beginning HTML & CSS

• Read HTML and CSS: Design and Build Websites
• Read A Beginner’s Guide to HTML & CSS
• Read Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with HTML5 and CSS3 for an introduction to HTML and CSS
• Complete Code Academy Web Fundamentals

You should be able to

• View source on a web page and understand it.
• Use <h1-6>, <p>, <a>, <img>, <ul>/<ol>/<li>, <div>, <span>, <dl>/<dt>/<dd>, <form>/<fieldset>/<input> semantically.
• Name classes and ids semantically.
• Use Web Inspector quickly (hint: keyboard shortcuts).
• Understand the box model.
• Understand floating and positioning.
• Style text.
• Quickly build a simple layout.

Intermediate HTML & CSS

• Read MDN's Introduction to HTML5
• Read HTML5 for Web Designers

You should be able to

• Use the new HTML5 elements <header>, <section>, <aside>, <article>, <footer> semantically.
• Understand the difference between <section> and <div>.
• Know all of the new form input types and if used how to safely degrade them to older browsers.
• Apply a box shadow, rounded corners, and text shadow.
• Use RGBa, HSL, HSLa, and opacity.
• Know transitions and animations and where to apply them.
• Know what vendor prefixes are, why they are used.
• Understand how box-sizing changes the box model.
• Know the new pseudo-selectors and know their uses.

Advanced HTML & CSS

• Follow the Sass trail map
• Read Responsive Web Design the article
• Read Responsive Web Design the book
• Visit This is Responsive for current news and links about responsive design
• Read Mobile First
• Read The Infinite Grid
• Read Put Your Content In My Pocket

You should be able to

• Build a fluid grid.
• Understand where breakpoints should be inserted into design.
• Use @media queries to provide different layouts to devices with differing widths.
• Can organize your stylesheets so that the are mobile minded.
• Understand how best to serve images to mobile and retina screens.

Ongoing Reference

• Refer to the HTML5 Spec
• Refer to CSS3.info