Last Updated: February 25, 2016
·
2.498K
· maxbrockman453

Useful HTML/CSS links

Max Brockman's Code Fellows UX Dev Journey

Super Useful links for Front End Web Development!

I've been in Code Fellow's Front-End UX Developer accelerator for a couple weeks now, and some of the most useful info I've learned is a vast library of really great websites that talk about web design. This is a really short list right now, but I will be updating this as frequently as possible. ALSO I would love for anyone reading this to add a link to something they've found useful in the comments section. Just put it up there, because you never know how much you can help someone in a bind. ~Max

<ul><li><a href="http://learn.shayhowe.com/">A practical guide to HTML and CSS</a> is written by Shay Howe. It's a great starting point for anyone who wants to know where they stand on their coding skillz.</li>
<li><a href="http://daneden.github.io/animate.css/" target="blank">Animate.css</a> is a great page that shows you the code for the animations that you want using only CSS.</li>
<li><a href="http://caniuse.com/" target="
blank">CanIuse.com</a> is a fantastic resource that uses JSON files that are constantly updated in order to show you which browsers and their versions support your HTML/CSS features.</li>
<li><a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flex-Box</a> is the solution to all of your CSS positioning problems. Can I please just make header with some elements that are responsive to size and are easy to center? Now you can.</li>
<li><a href="http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048">30 CSS Selectors you must memorize</a> is an incredibly useful list of advanced CSS selectors that you can use to make your layout infinitely sexier and well written.</li>
<li><a href="http://css-tricks.com/" target="blank">CSS-Tricks</a> is a really useful and constantly updated page about CSS...tricks...</li>
<li><a href="http://csswizardry.com/" target="
blank">CSS Wizardry</a> Harry Roberts is a big player in the front-end world. Look what he has to say. It's probably important.</li>
<li><a href="http://pumpula.net/p/apps/css-vocabulary/">CSS Vocabulary<a/> Uses awesome tech to highlight all the vocab of selectors you could possibly need. This is an AWESOME tool.</li>

<li><a href="http://css-tricks.com/dom/">Document Object Model or the DOM, what's that?</a> This is Chris Coyier's nice explanation of what the DOM actually is.</li>
<li><a href="http://media.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf" target="blank">HTML5 Cheat Sheet</a> list of html5 tags. Could be very useful for writing semantically correct HTML.</li>
<li><a href="http://gsnedders.html5.org/outliner/">HTML5 Outliner</a> is a tool that you paste your HTML into and it breaks it down into a reader generated outline. This is a great tool for judging how <strong>semantically</strong> correct your HTML actually is!</li>
<li><a href="http://learnlayout.com/">LearnLayout.com</a> teaches you the deceptively difficult world of using CSS for layout. Go through the 19 steps 19 times, then you should be ok.</li>
<li><a href="http://lab.maltewassermann.com/viewport-resizer/" target="
blank">Resizer</a> is an awesome tool created by <a href="https://twitter.com/maltewassermann" target="blank">Malte Wassermann</a> to show adjustable screen sizes. This lends its self to responsive web design nicely.</li>
<li><a href="http://css-tricks.com/responsive-data-tables/" target="
blank">Responsive Tables</a> a css-tricks article on creating responsive tables that look great on mobile and comp.</li>
<li><a href="http://smacss.com/">Scalable and Modular Architecture for CSS</a> is an approach to web development written by Jonathan Snook. It's a quick read that's worth it.</li>
<li><a href="http://screensiz.es/phone" target="blank">Screen Sizes</a> a list of screen sizes for every relevant device out there!</li>
<li><a href="http://csslint.net/" target="
blank">CSS Lint</a> is an awesome tool for cleaning up your CSS. Redundancy is the enemy here. We're learning to completely utilize our code for efficiency and readability for both human and machine.</li>
<li><a href="http://sassmeister.com/">Sass Meister</a> is a project that our fearless leader <a href="https://twitter.com/anotheruiguy">Dale Sande</a> is a major part of. Very valuable tool if your using Sass to write CSS.</li>
</ul>