└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # HTML & CSS Resources 2 | 3 | --- 4 | 5 | ## Introduction 6 | 7 | * [Codecademy Web Fundamentals](http://www.codecademy.com/tracks/web) 8 | * [30 Days to learn HTML and CSS](http://freecourses.tutsplus.com/30-days-to-learn-html-and-css/) 9 | * [CSS Guidelines from Harry Roberts](https://github.com/csswizardry/CSS-Guidelines) 10 | * [A Beginner's Guide to HTML & CSS](http://learn.shayhowe.com/html-css/) 11 | * [treehouse Websites](http://teamtreehouse.com/library/websites) 12 | * [Dash Tutorials](https://dash.generalassemb.ly/) 13 | * [OOCSS](http://oocss.org/) 14 | * [Web Standards, CSS, HTML, Javascript](http://www.yellowshoe.com.au/standards/) 15 | * [An introduction to HTML5, CSS3 and responsive design](http://www.developerdrive.com/2013/03/an-introduction-to-html5-css3-and-responsive-design/) 16 | * [Things you may not have known about HTML & CSS](http://www.red-team-design.com/things-you-may-not-have-known-about-html-css) 17 | * [Learning principles for improving your CSS](http://tympanus.net/codrops/2012/11/20/learning-principles-for-improving-your-css/) 18 | * [CSS Architecture](http://engineering.appfolio.com/2012/11/16/css-architecture/) 19 | * [A Beginner’s Guide to Leaner CSS](http://designshack.net/articles/css/a-beginners-guide-to-leaner-css/) 20 | 21 | --- 22 | 23 | ## CSS 24 | 25 | * [Troubleshooting CSS](http://tympanus.net/codrops/2013/07/17/troubleshooting-css/) 26 | * [OOCSS](http://oocss.org/) 27 | * [Defensive HTML and CSS](http://www.webdesignerdepot.com/2013/04/defensive-html-and-css) 28 | * [4 ways to create CSS that's modular and scalable](http://www.creativebloq.com/css3/create-modular-and-scalable-css-9134351) 29 | * [Writing efficient CSS selectors](http://csswizardry.com/2011/09/writing-efficient-css-selectors/) 30 | * [A Detailed Look at the z-index CSS Property](http://www.impressivewebs.com/a-detailed-look-at-the-z-index-css-property/) 31 | * [What the Heck Is CSS Specificity?](http://designshack.net/articles/css/what-the-heck-is-css-specificity/) 32 | * [CSS Architectures: New Best Practices](http://www.sitepoint.com/css-architectures-new-best-practices/) 33 | * [The worst Css practices](http://www.creativebloq.com/css3/worst-css-practices-7133791) 34 | * [Semantic CSS With Intelligent Selectors](http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/) 35 | * [CSS Positioning 101](http://alistapart.com/article/css-positioning-101) 36 | * [Write less, do more: CSS Style](http://speckyboy.com/2013/01/07/write-less-do-more-css-style/) 37 | * [OOCSS and RWD](http://andrewhathaway.net/posts/oocss-and-rwd) 38 | * [3 Must-Learn CSS Techniques for Perfect Web Typography](http://designshack.net/articles/css/3-must-learn-css-techniques-for-perfect-web-typography/) 39 | * [Code Smells in CSS](http://csswizardry.com/2012/11/code-smells-in-css/) 40 | * [CSS Tehniques you couldn't live without](http://coding.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/) 41 | * [5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours](http://designshack.net/articles/css/5-steps-to-drastically-improve-your-css-knowledge-in-24-hours/) 42 | 43 | --- 44 | 45 | ## HTML 46 | 47 | * [About HTML semantics and front-end architecture](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/) 48 | * [Using semantic HTML](http://www.adobe.com/devnet/html5/articles/semantic-markup.html) 49 | * [Best practices for efficient HTML5 coding](http://www.catswhocode.com/blog/best-practices-for-efficient-html5-coding) 50 | * [Top 10 HTML5 Resources](http://www.creativebloq.com/10-top-html5-resources-413919) 51 | * [Designing an HTML Newsletter that stands out](http://designshack.net/articles/business-articles/simple-tips-for-designing-a-newsletter-template-that-stands-out/) 52 | * [Create a Contact Form in HTML5](http://www.1stwebdesigner.com/css/create-contact-form-in-html5-css/) 53 | * [HTML5 forms introduction and new attributes](http://html5doctor.com/html5-forms-introduction-and-new-attributes/) 54 | * [What is HTML5 Capable of, Features, and Resources](http://www.1stwebdesigner.com/design/html5-introduction/) 55 | 56 | --- 57 | 58 | ## IE 59 | 60 | * [9 Most Common IE Bugs and How to Fix Them](http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/) 61 | * [Browser Specific CSS Hacks](http://css-tricks.com/snippets/css/browser-specific-hacks/) 62 | 63 | --- 64 | 65 | ## PSD to HTML 66 | 67 | * [A very detailed PSD to HTML Conversion](http://www.1stwebdesigner.com/css/convert-1st-ideas-psd-to-html/) 68 | * [Landing Page Conversion](http://www.1stwebdesigner.com/css/psd-html-landing-page-tutorial/) 69 | * [43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation](http://www.1stwebdesigner.com/tutorials/43-psd-to-xhtml-css-tutorials-creating-web-layouts-and-navigation/) 70 | * [20+ Best Tutorials to Convert Psd to Html/CSS](http://dzineblog.com/2009/04/tutorials-psd-to-html.html) 71 | 72 | --- 73 | 74 | ## Responsive Design 75 | 76 | * [Responsive Web Design by Ethan Marcotte](http://alistapart.com/article/responsive-web-design) 77 | * [A Responsive Web Design Process](http://heliom.ca/blog/posts/a-responsive-web-design-process) 78 | * [Top 25 Responsive Design Tools](http://www.creativebloq.com/top-25-responsive-design-tools-8134180) 79 | * [Responsive Resources(Huge)](http://bradfrost.github.io/this-is-responsive/resources.html) 80 | * [Creating a Mobile-First Responsive Web Design](http://www.html5rocks.com/en/mobile/responsivedesign/) 81 | * [Useful Resources and Tools](http://www.onextrapixel.com/2012/06/13/really-useful-resources-and-tools-for-responsive-web-design/) 82 | * [Media Queries Tutorial](http://www.1stwebdesigner.com/css/media-queries-tutorial-convert-burnstudio-responsive-website/) 83 | * [Build a Responsive, Mobile-Friendly Website from Scratch: Getting Mobile](http://www.sitepoint.com/build-a-responsive-mobile-friendly-website-from-scratch-getting-mobile/) 84 | * [Create A Responsive, Mobile-First WordPress Theme](http://wp.smashingmagazine.com/2012/06/28/create-responsive-mobile-first-wordpress-theme/) 85 | * [Building a better Responsive Website](http://mobile.smashingmagazine.com/2013/03/05/building-a-better-responsive-website/) 86 | * [Notes to an Agency Starting Their First Responsive Web Project](http://css-tricks.com/notes-agency-starting-their-first-responsive-web-project/) 87 | 88 | --- 89 | 90 | ## Editor 91 | 92 | * [Improve Workflow in Sublime Text 2](https://tutsplus.com/course/improve-workflow-in-sublime-text-2/) 93 | * [Perfect Workflow in Sublime Text 2](http://net.tutsplus.com/articles/news/perfect-workflow-in-sublime-text-free-course/) 94 | 95 | --- 96 | 97 | ## Tools 98 | 99 | * [Codepen](http://codepen.io/) 100 | * [Spritepad](http://spritepad.wearekiss.com/) 101 | * [Layerstyle for generating css code](http://layerstyles.org/builder.html) 102 | * [CSS3 Generator](http://css3generator.com/) 103 | * [Colorzilla Gradient Generator](http://www.colorzilla.com/gradient-editor/) 104 | * [CSS Lint for debugging CSS](http://csslint.net/) 105 | * [Tiny PNG](http://tinypng.org/) 106 | * [Custom Checkboxes with CSS](http://csscheckbox.com/) 107 | * [CSS TV](http://css.tv/) 108 | 109 | --- 110 | 111 | ## Frameworks & Component Librarys 112 | 113 | * [Cardinal](http://cardinalcss.com/) 114 | * [Semantic UI](http://semantic-ui.com/) 115 | * [Magin CSS Animations](http://www.minimamente.com/magic-css3-animations/) 116 | * [HTML Kickstart](http://www.99lime.com/elements/) 117 | * [Furatto](http://icalialabs.github.io/furatto/index.html) 118 | * [UI Kit](http://www.getuikit.com/) 119 | * [UI Box](http://www.uibox.in/) 120 | * [Fireshell](http://getfireshell.com/) 121 | * [Kraken](http://cferdinandi.github.io/kraken/) 122 | 123 | --- 124 | 125 | ## E-mail templates 126 | 127 | * [Premailer](http://premailer.dialect.ca/) 128 | * [Ink](http://zurb.com/ink/) 129 | * [HTML E-mail Boilerplate](http://htmlemailboilerplate.com/) 130 | * [Create Responsive E-mails](http://www.getresponse.com/features/responsive-email-design.html) 131 | * [Antwort](http://internations.github.io/antwort/) 132 | 133 | --- 134 | 135 | ## Other resources 136 | 137 | * [Huge List of Frontend Development Tools](https://github.com/codylindley/frontend-tools) 138 | * [Front-end performance for web designers and front-end developers](http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/) 139 | 140 | --- 141 | --------------------------------------------------------------------------------