background preloader

Cheat Sheet (html tool)

Cheat Sheet (html tool)
Download cheat sheet as printable PDF A5 Syntax Child: > nav>ul>li Sibling: + div+p+bq Climb-up: ^ div+div>p>span+em^bq div+div>p>span+em^^bq Grouping: () div>(header>ul>li*2>a)+footer>p (div>dl>(dt+dd)*3)+footer>p Multiplication: * ul>li*5 Item numbering: $ ul>li.item$*5 h$[title=item$]{Header $}*3 <h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3> ul>li.item$$$*5 ul>li.item$@-*5 ul>li.item$@3*5 ID and CLASS attributes #header .title form#search.wide p.class1.class2.class3 Custom attributes p[title="Hello world"] td[rowspan=2 colspan=3 title] [a='value1' b="value2"] Text: {} a{Click me} <a href="">Click me</a> p>{Click }+a{here}+{ to continue} <p>Click <a href="">here</a> to continue</p> Implicit tag names .class em>.class ul>.class table>.row>.col All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo>. Alias of html:5 <! a a:link a:mail abbr acronym, acr base basefont br frame hr bdo bdo:r bdo:l col link link:css link:print link:favicon link:touch link:rss link:atom meta meta:utf img c

https://docs.emmet.io/cheat-sheet/

Related:  original541029jcf_egun_onCode / Web DevelopmentSublime Text 3EMMET (ex Zen Coding)

jQuery Cheat Sheet Selectors Basics Hierarchy Basic Filters Set Up Persistence with DevTools Workspaces   Set up persistent authoring in Chrome DevTools so you can both see your changes immediatedly and save those changes to disk. Chrome DevTools lets you change elements and styles on a web page and see your changes immediately. By default, refresh the browser and the changes go away unless you've manually copied and pasted them to an external editor.

Learning SASS: A Beginner's Guide to SASS Writing a lot of CSS can be overwhelming that is why learning SASS and LESS can make any web developer and designer’s life much easier. For a beginner, you might find it fine but as time goes by and your CSS skills are improving. You begin to wonder if there is a way so that you don’t need to repeat a lot of CSS codes in your style sheet. The good news is, there is one! Thanks to the CSS pre – processor, it’s now possible to write concise CSS codes without repeating each of them again and again.

Serving your resume over curl like a badass · a flash of light and a distant boom I thought it would be an appropriate use of time to make my resume viewable on the command line. Requirements Optional Regular expressions for finding text This documentation is archived and is not being maintained. You can perform sophisticated find and replace operations in Microsoft Expression Web by using regular expressions. Regular expressions are useful when you do not know the exact text or code you are looking for, or when you are looking for all occurrences of strings of text or code with one or more similarities. A regular expression is a pattern of text that describes one or more variations of text or code that you want to find. A regular expression consists of specific characters — for example, the letters "a" through "z" — and special characters that describe the pattern of text — for example, an asterisk (*).

Just Enough Angular for Designers - One Hungry Mind The Intro I recently gave a talk at ngVegas 2015 called Turn Your Designers Into Deathstars with Angular where I make the case that we need to make designers first class citizens in AngularJS. UPDATE: A huge shoutout to my designer buddy Jordan Stoddard for hand drawing all of the sweet graphics for this post! A major portion of this talk was focused on teaching “just enough” Angular so that a designer could get started. I wanted to dedicate an entire blog post to covering these concepts so that someone new to Angular or someone with a strong design background would have a resource to help them get started. I posted six exercises at the link below that I would encourage anyone new to Angular to go through.

10 Impressive JavaScript Animation Frameworks Complex and slick JavaScript-based animation has been made easier with the emergence of frameworks and libraries that give developers the ability to create stunning and eye-grabbing animation and transition effects that make it easy these complex tasks. In this article, you will read about the top 10 JavaScript-based animation frameworks and libraries that will enable you to create engaging and captivating user experiences. 1. $fx $fx is a compact and lightweight JavaScript animation library which extends native JavaScript DOM methods with its own animation methods and functions. Its small file size (weighing in at only 3.7 KB), hassle-free implementation, and low learning curve makes $fx a powerful option for adding eye-popping animation effects to your web projects.

The Joel Test: 12 Steps to Better Code by Joel Spolsky Wednesday, August 09, 2000 Have you ever heard of SEMA? It's a fairly esoteric system for measuring how good a software team is.

Related:  CSS/Sass/LessWeb