HTML&CSS 學習網站收藏【轉】

轉自:http://lab.linxz.de/some_url.html

html & CSS

• http://www.adobe.com/devnet/html5/articles/css3-regions.html
• http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
• http://www.maratz.com/blog/archives/2013/01/15/offsetting-an-html-element-in-a-flexible-container/
• http://www.jonathantneal.com/blog/understand-the-favicon/
• http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
• http://coding.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
• http://blendinsider.com/tutorial/blend-tutorial-part-4-create-a-flexible-layout-memory-game-2012-1-20/
• http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
• http://coding.smashingmagazine.com/2013/02/21/the-history-of-the-bem-methodology/
• http://www.netmagazine.com/features/truth-about-structuring-html5-page
• http://coding.smashingmagazine.com/2013/02/27/css-form-elements-problem
• http://coding.smashingmagazine.com/2013/02/19/using-white-space-for-readability-in-html-and-css/
• http://css-tricks.com/using-svg/
• http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
• http://alistapart.com/article/holygrail
• http://matthewjamestaylor.com/blog/centered-dropdown-menus
• http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
• http://www.red-team-design.com/horizontal-centering-using-css-fit-content-value
• http://www.webdesignermag.co.uk/features/css-style-guide-10-essential-techniques
• http://css-tricks.com/the-lengths-of-css/
• http://coding.smashingmagazine.com/2013/03/08/tips-tricks-print-style-sheets/
• http://taitems.github.com/Front-End-Development-Guidelines/
• http://www.sitepoint.com/css-architectures-principles-of-code-cleanup-2/
• http://nicolasgallagher.com/about-html-semantics-front-end-architecture
• http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/the-best-way-to-learn-css-2
• http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
• http://www.sitepoint.com/css-architectures-refactor-your-css
• http://webdesign.tutsplus.com/articles/typography-articles/taking-the-erm-out-of-ems
• http://webdesign.tutsplus.com/articles/typography-articles/taking-ems-even-further
• http://csswizardry.com/2013/05/scope-in-css
• http://www.sitepoint.com/css-architectures-refactor-your-css/
• http://www.sitepoint.com/css-architectures-scalable-and-modular-approaches/
• http://blog.kaelig.fr/post/48196348743/fifty-shades-of-bem
• http://the-pastry-box-project.net/oli-studholme/2013-june-3/
• http://flippinawesome.org/2013/06/10/loading-images-on-demand-with-pure-css

性能方面

• http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/
• http://timkadlec.com/2012/04/media-query-asset-downloading-results/
• http://calendar.perfplanet.com/2011/
• http://oli.jp/2011/ids/
• http://csslint.net/about.html
• http://www.vanseodesign.com/css/css-selector-performance/
• http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/
• http://csswizardry.com/2011/09/writing-efficient-css-selectors/
• http://wojodesign.com/10-easy-steps-to-great-website-optimization/
• http://www.scottlogic.co.uk/2010/11/css-performance-part-1/
• http://albertogasparin.it/articles/2011/06/ios-css-animations-performances/
• http://calendar.perfplanet.com/2011/beyond-bandwidth-ui-performance/
• http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/
• https://developers.google.com/speed/docs/best-practices/rendering
• http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow
• http://boagworld.com/dev/why-you-should-care-about-css-page-performance
• https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS
• http://meiert.com/en/blog/20120620/web-development-on-frameworks-testing-and-css-performance-and-maintainability
• http://css-tricks.com/efficiently-rendering-css
• http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better
• http://zoompf.com/2012/04/performance-aspects-of-googles-html-css-style-guide
• http://smacss.com/book/selectors
• http://www.waynemoir.com/notebook/css/the-top-5-mistakes-of-massive-css
• http://tjrus.com/blog/base64-vs-css-sprites-battle-for-performance
• http://www.paulund.co.uk/javascript-full-screen-api
• http://jsperf.com/css-performance-test
• http://screwlewse.com/2010/08/different-css-techniques-and-their-performance/
• http://www.thebrightlines.com/2010/07/28/css-performance-who-cares/
• http://kellegous.com/j/2013/01/26/layout-performance/
• http://coding.smashingmagazine.com/2013/01/22/css-performance-debugging-naming-conventions/
• http://blog.tumult.com/2013/02/28/transform-translate-vs-top-left
• http://alistapart.com/article/improving-ux-through-front-end-performance

javascript

• http://www.toddmotto.com/creating-jquery-style-functions-in-javascript-hasclass-addclass-removeclass-toggleclass
• http://dailyjs.com/2012/11/29/backbone-tutorial-1/
• http://superherojs.com/
• http://perfectionkills.com/global-eval-what-are-the-options/

jquery

• http://webdesignandsuch.com/12-jquery-notification-bar-options-like-the-hello-bar
• http://smashinghub.com/10-useful-jquery-lightbox-plug-ins.htm
• http://blog.teamtreehouse.com/writing-your-own-jquery-plugins
• http://flippinawesome.org/2013/05/06/5-things-you-should-stop-doing-with-jquery/

移動端

• http://sixrevisions.com/mobile/methods-mobile-websites/
• http://www.kylejlarson.com/blog/2012/iphone-5-web-design
• http://www.css3files.com/2012/09/24/ios6-brings-us-the-joy-of-two-new-css3-properties
• http://www.stephentgilbert.com/mediaqueries
• http://webdesignergeeks.com/mobile/iphone-ipad/top-10-iphone-development-blogs/
• http://mobile.smashingmagazine.com/2010/05/28/web-development-for-the-iphone-and-ipad-getting-started
• http://www.bernskiold.com/2011/02/02/tips-and-tricks-for-ios-web-development
• http://www.campaignmonitor.com/guides/mobile/optimizing-images
• http://mobile.dzone.com/articles/new-iphone-5-and-ios-6
• http://www.electriceasel.com/tips-tricks/designing-mobile-sites
• http://www.sitepoint.com/iphone-development-12-tips/
• http://blog.cloudfour.com/seven-things-i-learned-while-making-an-ipad-web-app-2
• http://uxdesign.smashingmagazine.com/2012/12/19/boost-your-mobile-e-commerce-sales-with-mobile-design-patterns/
• http://jasonweaver.name/lab/offcanvas/
• http://css3wizardry.com/2011/01/30/the-holy-grail-of-mobile-layout
• http://fireworks.smashingmagazine.com/2013/02/15/ios-prototyping-adobe-fireworks-tap-part3/
• http://fireworks.smashingmagazine.com/2013/01/25/ios-prototyping-adobe-fireworks-tap-part2/
• http://fireworks.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1/
• http://blog.mengto.com/solving-the-back-button/
• http://www.smashingmagazine.com/guidelines-for-mobile-web-development/
• http://radesign.in/design-lessons-from-gmail-web-app/
• http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/
• http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/
• http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios
• https://github.com/jtyjty99999/mobileTech
• http://www.cnblogs.com/pifoo/archive/2011/05/28/webkit-webapp.html

retina

• http://paulstamatiou.com/responsive-retina-blog-development-part-1
• http://michieldegraaf.com/post/retina-for-web-workflow/
• http://designmodo.com/responsive-retina-images
• http://www.sitepoint.com/css-techniques-for-retina-displays/
• http://paulstamatiou.com/responsive-retina-blog-design
• http://medialoot.com/blog/high-resolution-web/
• http://www.htmlcut.com/blog/retina-display-future-of-web-design-internet-overview.html
• http://www.gacikdesign.com/blog/retina-display-the-future-of-web-design-internet-overview
• http://www.bram.us/tag/retina
• https://coderwall.com/p/t/retina
• http://glue.readthedocs.org/en/latest/ratios.html
• http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4
• http://webdesign.tutsplus.com/articles/general/improving-image-quality-on-the-retina-display
• http://www.netmagazine.com/tutorials/master-css-pixels-retina-displays
• http://www.dbswebsite.com/blog/2012/07/18/retina-displays-good-for-web-design
• http://mobile.smashingmagazine.com/2010/11/17/designing-for-iphone-4-retina-display-techniques-and-workflow
• http://bjango.com/articles/designingforretina
• http://bjango.com/articles/designingforretina2
• http://www.fuelyourcreativity.com/how-to-design-for-the-retina-display
• http://css-tricks.com/snippets/css/retina-display-media-query
• http://veerle.duoh.com/design/article/exporting_retina_designs_from_photoshop_with_slicy
• http://nick-hurst.com/2012/optimising-graphics-images-for-retina-devices-mobile-website-design
• http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website
• http://www.awwwards.com/coding-for-retina-displays-with-retinajs-tutorial.html
• http://www.commonagency.com/blog/2012/05/a-tip-for-designing-for-retina-displays
• http://www.hongkiat.com/blog/mbp-retina-blurry-text
• http://designshack.net/articles/html/ready-or-not-here-comes-hd-web-design
• http://medialoot.com/blog/high-resolution-web
• http://www.grafikart.fr/tutoriels/html-css/retina-compatible-336
• http://blog.netvlies.nl/design-interactie/retina-revolution/
• http://www.boonex.com/n/making-dolphin-retina-display-ready
• http://mobile.smashingmagazine.com/2010/11/17/designing-for-iphone-4-retina-display-techniques-and-workflow
• http://realmacsoftware.com/blog/designing-for-retina
• http://johndyer.name/how-to-create-a-responsive-retina-ready-website
• http://alexthorpe.com/uncategorized/css-sprites-for-retina-display-devices/683
• http://www.uifuel.com/hd-retina-display-media-queries
• http://adaptive-images.com
• http://www.html5rocks.com/en/mobile/high-dpi/
• http://developer.apple.com/library/safari/#documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html
• http://css3.bradshawenterprises.com/blog/retina-image-replacement-for-new-ipad/
• http://weedygarden.net/2010/10/retina-display-and-css-background-images/
• http://realmacsoftware.com/blog/coding-for-retina-on-the-web
• http://www.inserthtml.com/2012/09/designing-retina-devices
• http://manyangl.es/2013/02/implementing-retina-ready-images-on-the-web
• http://designmodo.com/design-retina-displays
• http://www.zurb.com/playground/clambake
• http://www.leemunroe.com/designing-for-high-resolution-retina-displays/
• http://ivomynttinen.com/blog/a-guide-for-creating-a-better-retina-web/
• http://www.sitepoint.com/support-retina-displays
• http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/
• http://mashable.com/2013/05/22/convert-to-retina/

responsive

• http://www.kendoui.com/blogs/teamblog/posts/13-01-22/responsive_design_with_twitter_bootstrap.aspx
• http://buildmobile.com/understanding-responsive-web-design-how-to-manage-fonts/
• http://blog.cloudfour.com/responsive-design-for-apps-part-1
• http://bradfrost.github.com/this-is-responsive/resources.html

 

• http://designshack.net/articles/css/focal-point-intelligent-cropping-of-responsive-images

 

• http://blog.teamtreehouse.com/responsive-design-of-the-future-with-flexbox
• http://tobyho.com/2012/01/25/responsive-web-design
• http://www.paulund.co.uk/css3-animated-media-queries
• http://www.toddmotto.com/fluid-first-creating-a-future-proof-fluid-and-responsive-website
• http://laurakalbag.com/display-none/
• http://css-tricks.com/responsive-menu-concepts

 

• http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials
• http://www.gonzoblog.nl/2012/11/21/15-comprehensive-responsive-web-design-tutorials
• http://www.scoop.it/t/gonzodesign
• http://designshack.net/articles/css/focal-point-intelligent-cropping-of-responsive-images

 

• http://www.onextrapixel.com/2012/08/27/creating-a-css3-responsive-menu
• http://alwaystwisted.com/post.php?s=2012-05-14-create-a-responsive-mobile-first-menu
• http://www.netmagazine.com/features/five-steps-gettin-flexy-responsive-web-design
• http://andydavies.me/blog/2012/08/13/what-if-we-could-use-css-to-manipulate-html-attributes
• http://webdesign.tutsplus.com/tutorials/site-elements/a-flexible-approach-to-responsive-navigation
• http://alpha.responsivedesign.is/strategy/site-genres/web-developer-designer-agency/stuff-and-nonesense
• http://www.freshdesignweb.com/drop-down-responsive-menu-with-css3-jquery.html
• http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation
• http://www.onextrapixel.com/2012/09/20/responsive-web-development-as-a-standard-step-by-step
• http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
• http://www.hongkiat.com/blog/responsive-for-mobile-screens
• http://www.freshdesignweb.com/useful-responsive-menu-navigation-tutorials.html
• http://nickdenardis.com/2012/09/23/what-im-reading-the-responsive-edition/
• http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
• http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
• http://johanbrook.com/design/css/debugging-css-media-queries
• http://alistapart.com/article/fluid-images

 

• http://unstoppablerobotninja.com/entry/fluid-images
• http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1
• http://www.netmagazine.com/tutorials/build-responsive-site-week-typography-and-grids-part-2
• http://www.netmagazine.com/tutorials/build-responsive-site-week-images-and-video-part-3
• http://www.netmagazine.com/tutorials/build-responsive-site-week-media-queries-part-4
• http://viljamis.com/blog/2013/prototyping-responsive-typography
• http://www.netmagazine.com/tutorials/build-responsive-emails
• http://www.webappers.com/2013/03/05/the-foundation-for-responsive-design-flexibility
• http://mobile.smashingmagazine.com/2013/03/05/building-a-better-responsive-website/
• http://coding.smashingmagazine.com/2013/03/11/responsible-web-design/
• http://www.adobe.com/devnet/html5/articles/ten-things-you-need-to-know-about-responsive-design.html
• http://paulstamatiou.com/responsive-retina-blog-development-part-1
• http://paulstamatiou.com/responsive-retina-blog-development-part-2
• http://mobile.smashingmagazine.com/2013/03/18/retrofit-a-website-to-be-responsive-with-rwd-retrofit/
• http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/
• http://blog.cloudfour.com/responsive-design-for-apps-part-3/
• http://designinstruct.com/roundups/infographics-learn-responsive-web-design
• http://dbushell.com/2013/03/19/on-responsive-layout-and-grids
• http://www.scoop.it/t/gonzodesign
• http://www.templatemonster.com/infographics/responsive-web-design-interactive-guide.php
• http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
• http://blogs.adobe.com/webplatform/2013/05/06/adobe-explores-the-future-of-responsive-digital-layout-with-national-geographic-content
• http://blog.cloudfour.com/behavioral-breakpoints
• http://www.sitepoint.com/designing-experiences-for-responsive-web-sites