html css best practices
TRANSCRIPT
![Page 1: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/1.jpg)
HTML & CSSBest Practices
Presenter: Đặng Minh Tuấnaka. ohisee
from: hoctudau.com
![Page 2: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/2.jpg)
About Presenter - Who am I?
Fullname: Đặng Minh Tuấn
Worked for:• 2010: HocTuDau.com - http://hoctudau.com/• 2008 - 2010: Aprotrain Aptech - http://www.aptech-news.com/• 2008: NAISCORP - http://socbay.com/• 2003 - 2008: Many IT Companies
Trained HTML, CSS in:• NAISCORP - http://socbay.com/ • Vietsoftware International - http://www.vsi-international.com/ • VNEXT - http://vnext.vn/ • VietNamBiz - http://www.vietnambiz.com/• Hanoi PHP Day 2008, 2009, 2010
Programming:• Clientside
o HTMLo CSSo Javascript
• Serversideo PHPo MySQL
http://hoctudau.com/slides/html-css-best-practices/
![Page 3: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/3.jpg)
About HTML, CSS - What is this?
If a browser is a worker and a web page is a house
then contents are bricks, HTML elements are divisions, and CSS is paint.
http://hoctudau.com/slides/html-css-best-practices/
![Page 4: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/4.jpg)
About HTML, CSS - How and Who?
How they grow up?
Who has been "playing" with them?• Web Designer > CSSer > Javascripter > Serversider
o http://hoctudau.com/slides/web-pro
http://hoctudau.com/slides/html-css-best-practices/
![Page 5: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/5.jpg)
About this Presentation - It is ...
... for one who• know what is HTML, CSS• and has been working with
HTML, CSS daily and want to make better code
... not for one who• don't know or don't care
about HTML, CSS• or still working with HTML,
CSS (and may get thing done) but don't want to make better code
http://hoctudau.com/slides/html-css-best-practices/
![Page 6: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/6.jpg)
About this Presentation - legends
Wrong = Something you should not do in almost cases. Acceptable = Something you should not do in some cases Right = Something you should do in almost cases.
http://hoctudau.com/slides/html-css-best-practices/
![Page 7: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/7.jpg)
10 Rules of Ss
– Skinable– Sensible– Simple– Semantic– Speed– Standard– Safe– Structural– Study– Smart
About this Presentation - structure
http://hoctudau.com/slides/html-css-best-practices/
![Page 8: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/8.jpg)
Ready?
![Page 9: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/9.jpg)
1. Skinable
![Page 10: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/10.jpg)
Skinable - definition
Skinable = Changeable and Flexible Skin (Style)
http://hoctudau.com/slides/html-css-best-practices/
![Page 11: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/11.jpg)
Skinable - examples
Wrong<h1><u><i>Heading</i></u></h1>
Right<style>h1 { font-style: italic; text-decoration: underline;}</style><h1>Heading</h1>
http://hoctudau.com/slides/html-css-best-practices/
![Page 12: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/12.jpg)
Skinable - examples
Wrong<p> <img src="image.jpg" align="left"> Hoctudau.com ...</p>
Right<style>.thumbnail { float: left;}</style><p><img src="image.jpg" class="thumbnail"> Hoctudau.com ...</p>
http://hoctudau.com/slides/html-css-best-practices/
![Page 13: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/13.jpg)
Skinable - examples
Wrong<table> <tr> <td bgcolor=red width=500 height=50 colspan=2> ... </td> </tr> <tr> <td bgcolor=red width=100 height=300> ... </td> <td bgcolor=red width=400 height=300> ... </td> </tr> <tr> <td bgcolor=red width=500 height=50 colspan=2> ... </td> </tr></table>
Right<link rel="stylesheet" href="style.css"><div id="header"><div id="sidebar"><div id="content"><div id="footer">
http://hoctudau.com/slides/html-css-best-practices/
![Page 14: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/14.jpg)
Skinable - examples
Wrong<ul style="padding-left: 5px" >
Right CSS (styles.css)#menu { padding-left: 5px;} HTML (index.php) <ul id="menu">
http://hoctudau.com/slides/html-css-best-practices/
![Page 15: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/15.jpg)
Skinable - best practices
• Separate Data (Structure) from Style (Presentation) and Behavior (Themeable)o Don't use HTML/XHTML Deprecated Tags and Attributes and
avoid presentational Tags. Use CSS instead http://www.tutorialspoint.com/html/html_deprecated_tags.htm Link Note: <center> can be replaced by : margin: 0 auto;
width: ... and text-align: ... • Take a (careful) look at: CSS Zen garden -
http://www.csszengarden.com/o One HTML Structure create Many Beautiful and different
Interfaces by using many different CSS files. • TEAM NOTE:
o Train this rule first!
http://hoctudau.com/slides/html-css-best-practices/
![Page 16: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/16.jpg)
2. Sensible
![Page 17: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/17.jpg)
Sensible - definition
Sensible = understandable• Somebody need to understand your code• You need to understand ... your code after a long time
http://hoctudau.com/slides/html-css-best-practices/
![Page 18: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/18.jpg)
Sensible - examples
Wrong<div id="xxx"><p class="abc"><div id="middle-left-and-then-a-little-lower">
Right<div id="header"><div id="left_column"> <div id="sidebar"><p class="first"><p class="intro"><div class="section">
http://hoctudau.com/slides/html-css-best-practices/
![Page 19: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/19.jpg)
Sensible - best practices
• Give id and class right spelling and understandable names.• Know some kinds of naming -
http://sixrevisions.com/css/css-tips/css-tip-2-structural-naming-convention-in-css/o Prefer structural name: describe what elements are
header sidebar
o to styling (presentational) name: describe how element look like right_column red_link
• Comment (in HTML, CSS) when neededo to explain the reason (why?)
• TEAM NOTE:o Build a Naming Convention for common Web UI elements
http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html
http://hoctudau.com/slides/html-css-best-practices/
![Page 20: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/20.jpg)
3. Simple
![Page 21: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/21.jpg)
Simple - definition
Simpler = Shorter• Less code to type• Less code to read • Less data to send
http://hoctudau.com/slides/html-css-best-practices/
![Page 22: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/22.jpg)
Simple - examples
Wrong<ul> <li class="active_menu_item" <li class="menu_item"> <li class="menu_item"> <li class="menu_item"> <li class="menu_item"> <li class="menu_item"> <li class="menu_item"></ul>
Right<ul id="menu"> <li class="active"> <li> <li> <li> <li> <li> <li></ul>
http://hoctudau.com/slides/html-css-best-practices/
![Page 23: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/23.jpg)
Simple - examples
Wrong<div> <div> <div> <h1> <div>heading</div><br></h1> <div> <div> paragraph<br> <div> paragraph </div> <br><br> </div> </div> </div> </div></div>
Right<div> <h1>heading</h1> <p> paragraph </p> <p> paragraph </p> </div>
http://hoctudau.com/slides/html-css-best-practices/
![Page 24: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/24.jpg)
Simple - best practices
• Naming short enough to keep it sensible• Good CSS skills enough to:
o know how to use CSS Selector http://www.w3.org/TR/CSS2/selector.html
html selector id selector class selector descendant selector
o avoid classitis o use CSS Shorthando keep as little as nested elements as possible. o know how to solve issues by adding more CSS instead of HTML
• TEAM NOTE:o require and train better CSS skill for team membero train this rule
http://hoctudau.com/slides/html-css-best-practices/
![Page 25: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/25.jpg)
4. Semantic
![Page 26: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/26.jpg)
Semantic - definition
Semantic= Software can understand your code. so your web is accessible for all people. = Search engine can understand your code so your web has better SEO
Warning:Semantic is sometimes not simple!
http://hoctudau.com/slides/html-css-best-practices/
![Page 27: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/27.jpg)
Semantic - examples
Wrong<div class="heading1"><div class="heading2"> <div class="paragraph">
Right<h1><h2><p>
Right (but complex or not good supported) <abbr class="dtstart" title="2001-01-15T14:00:00+06:00">2</abbr>-<abbr class="dtend" title="2001-01-15T16:00:00+06:00">4</abbr><section>
Acceptable <p>2-4pm</p><div class="section">
http://hoctudau.com/slides/html-css-best-practices/
![Page 28: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/28.jpg)
Semantic - best practices
• Use Right Tags for Right Jobs. Don't misuse any element. Don't create a tag soup.o div (divitis?)o table (tableless layout?)o ul, li (divless?)
• Learn elements semantico HTML References
http://www.w3schools.com/html5/html5_reference.asp o Semantically styling breadcrumbs
http://kumpunen.com/?p=125o Learn some others' data formart Microformat, Microdata,
RDF, etc.,• TEAM NOTE:
o Build a Common Semantic List
http://hoctudau.com/slides/html-css-best-practices/
![Page 29: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/29.jpg)
5. Speed
![Page 30: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/30.jpg)
Speed for the Web
Faster= Users load your web faster= Users feel more comfortable= Your web can satisfy more users
What affect web speed?• Request time• Server processing time• Data Transfer time• Web Rendering time• Client processing time
Warning: Faster is not always better
http://hoctudau.com/slides/html-css-best-practices/
![Page 31: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/31.jpg)
Speed - examples
Wrong* {margin: 0;padding: 0;}
Right:use a good CSS reset file
http://hoctudau.com/slides/html-css-best-practices/
![Page 32: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/32.jpg)
Speed - best practices
Learn how the browser request and render your web• Web Performance Best Practices — http://code.google.com/
speed/page-speed/docs/rules_intro.html• Best Practices for Speeding Up Your Web Site -
http://developer.yahoo.com/performance/rules.html • Some Tools - http://code.google.com/speed/tools.html• TEAM NOTE:
o Hire a Clientside Ninja
Note: Speed has its cost• Learning about performances is hard• Implement what you learn is even harder• "Speedy" code is usually complex
http://hoctudau.com/slides/html-css-best-practices/
![Page 33: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/33.jpg)
6. Standard
![Page 34: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/34.jpg)
Standard - definition
http://en.wikipedia.org/wiki/Web_standardsWeb standards is a general term for the formal standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods
http://www.w3.org/ Create & develope Web Standards
http://www.webstandards.org/
Fighting for Web Standards
http://w3schools.com/Teach
http://hoctudau.com/slides/html-css-best-practices/
![Page 35: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/35.jpg)
Standard - examples
Wrong<div><p>example paragraph</div></p>
Right<div><p>example paragraph</p></div>
http://hoctudau.com/slides/html-css-best-practices/
![Page 36: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/36.jpg)
Standard - best practices
• Read the Specificationo World Wide Web Consortium (W3C) - http://www.w3.org/o Learn DTD - http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
• Learn about the mission of fighting for standardo http://www.webstandards.org/about/mission/
• Know how to use online and offline validatoro online HTML, XHTML validator - http://validator.w3.org/o online CSS validator - http://jigsaw.w3.org/css-validator/o Firefox Addon HTML validator - https://addons.mozilla.org/en-
US/firefox/addon/249/• TEAM NOTE:
o Validation is a must in training progress.
Good News:Browsers are more and more supporting Web Standards
http://hoctudau.com/slides/html-css-best-practices/
Bad News:Good things (?) can break standards
![Page 37: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/37.jpg)
7. Safe
![Page 38: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/38.jpg)
Safe (fallback) - definition
Everything can be in trouble but If we care enough, troubles can become less troubles or become good chances!
http://hoctudau.com/slides/html-css-best-practices/
![Page 39: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/39.jpg)
Safe Fallback - examples
Wrong<img src="hoctudau.png" />
#header {background: url(header.png);color: white;}
Right<img src="hoctudau.png" alt="hoctudau.com" title="hoctudau.com" />
#header {background: black url(header.png);color: white;}
http://hoctudau.com/slides/html-css-best-practices/
![Page 40: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/40.jpg)
Safe Fallback - best practices
• Follow Web Standardo use alt in img element
• Think about the failureso image doesn't work?o CSS doesn't work? Some CSS rules don't work?o JS doesn't work? Some JS functions don't work?o frame, iframe don't work?o Flash doesn't work?
• Bulletproofo Ebook: Bulletproof Web Design: Improving flexibility and
protecting against worst-case scenarios with XHTML and CSS • TEAM NOTE:
o train this rule.
http://hoctudau.com/slides/html-css-best-practices/
![Page 41: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/41.jpg)
8. Structural
![Page 42: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/42.jpg)
Structural - definition
Structural = good organized
http://hoctudau.com/slides/html-css-best-practices/
![Page 43: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/43.jpg)
Structural - examples
Wrong (development phase)style.cssjohn.css
Right (development phase)reset.cssdebug.csslayout.css
http://hoctudau.com/slides/html-css-best-practices/
![Page 44: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/44.jpg)
Structural - best practices
• Separate 2 phases: development and deployment (production)o minified, combined css (js) files in deployment phase
• Separate 2 types of files structure in development phaseo top down
debug.css reset.css layout.css typo.css
o bottom up reset.css layout.css menu.css - menu_debug.css infobox.css - infobox_debug.css
• TEAM NOTE:o Study: OOCSS and CSS Frameworkso Build a CSS Libary
http://hoctudau.com/slides/html-css-best-practices/
![Page 45: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/45.jpg)
9. Study
![Page 46: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/46.jpg)
Study - definition
Study = Explore, Seach, Ask, Learn, Store, Bookmark, Remember by Heart
http://hoctudau.com/slides/html-css-best-practices/
![Page 47: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/47.jpg)
Study - examples
Rightgoogle: IE6 common bug• http://www.virtuosimedia.com/tutorials/ultimate-ie6-
cheatsheet-how-to-fix-25-internet-explorer-6-bugs
http://hoctudau.com/slides/html-css-best-practices/
![Page 48: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/48.jpg)
Study - best practices
• Learn when and how to googleo Learn Englisho Learn to generalize (expand) and specialize (restric)
search results double text vs IE6 double text vs IE6 common bugs
• Bookmark useful linko http://jhop.me/ie8-bugs
• Read useful Webs and Blogso http://www.smashingmagazine.com/
• TEAM NOTE:o share bookmark and experience between team member
http://hoctudau.com/slides/html-css-best-practices/
![Page 49: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/49.jpg)
10. Smart
![Page 50: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/50.jpg)
Smart - definition
Smart people follow the targets, not the rules!Sometimes we should break the rules!
Warning:We have to learn to follow the rules before learning to break them!
http://hoctudau.com/slides/html-css-best-practices/
![Page 51: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/51.jpg)
Smart - examples
WrongTry to make a perfect quality web when lacking of resources
RightThink about what you want, but do what you can.Sometimes you should make an art, but sometimes you need money first.
http://hoctudau.com/slides/html-css-best-practices/
![Page 52: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/52.jpg)
Smart - best practices• Thinking about your target before thinking about the other
ruleso Sometimes you have to break some rules to follow other
(more important) rules "kill" speed to "save" simple or "kill" simple to "save" speed kill "semantic" to save "simple" and "time"
• When needed, you can use anythingo Table Layout
Softwares: Dreamweaver, Photoshop o HTML Frameworks
Baker Ebook Framework o HTML Generator, Editor
Zen Coding (not Zend)o CSS Frameworks
YUI, Blue Prints, 960gs o CSS Generators
SASS, LESS
• TEAM NOTE: Look ahead and prepare for future
http://hoctudau.com/slides/html-css-best-practices/
![Page 53: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/53.jpg)
Want to learn more?
Google: CSS best practices• Be a CSS Team Player: CSS Best Practices for Team-Based Development
o http://msdn.microsoft.com/en-us/scriptjunkie/ff679957.aspx • 9 CSS Best Practices You Need to Know
o http://fwebde.com/css/css-best-practices/ • 30 CSS Best Practices for Beginners
o http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/
Google: HTML best practices • 20 HTML Best Practices You Should Follow
o http://sixrevisions.com/web-standards/20-html-best-practices-you-should-follow/
Note again: Follow your targets and apply others' rules smartly
![Page 54: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/54.jpg)
Good HTML, CSS Showcases
• Deliver WOW Through Service o http://about.zappos.com/our-unique-culture/zappos-core-values/deliver-
wow-through-service• Chris Shiflett: Blog
o http://shiflett.org/blog• Webkit CSS Transformers Top Trumps
o http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html• CSS Media Queries Sidebar
o http://css-tricks.com/examples/MediaQueriesSidebar/• The Official Site of Bill Gates - The Gates Notes
o http://www.thegatesnotes.com/Default.aspx• About | Mozilla Messaging
o http://www.mozillamessaging.com/en-US/about/• Simon Collison | Colly | The Celebrated Miscellany
o http://colly.com/• World Wide Web Consortium (W3C)
o http://www.w3.org/
![Page 55: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/55.jpg)
Good HTML, CSS Showcases
Web Applications• Wordpress• VBB 4.x
![Page 56: HTML CSS Best Practices](https://reader033.vdocuments.site/reader033/viewer/2022052304/5591a0ab1a28aba7268b464d/html5/thumbnails/56.jpg)
The End
Q&A
Sponsored by HocTuDau.com
Avarage Score of HTML, CSS Code of some famous websites in Rule of Ss Scale?
This slide is available online at:http://hoctudau.com/slides/html-css-best-practices/