background preloader

Cheat Sheet

Cheat Sheet
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

Related:  Code / Web Development

Set Up Persistence with DevTools Workspaces   Set up persistent authoring in Chrome DevTools so you can both see your changes immediately 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. A Collection of Separator Styles A collection of separator styles for horizontally dividing sections on a website. The dividers are created using several techniques, including styling pseudo-elements, using gradients and inserting SVG graphics with responsiveness in mind. View demo Download source Today we’d like to share some separator styles with you.

“Right click and save as” needs to go away For a long time it has been standard practice to ask visitors to “right click and save as” when downloading a file that the browser itself is capable of rendering, but where doing so is not desirable. One reason for doing this is to spare people from the annoying experience of accidentally clicking a link to a 25 MB PDF, which subsequently launches a browser plugin that of course crashes while trying to download and display the file. From a UX perspective though, adding instructions on how to click a link is not optimal, and feels like a hack. Not to mention that lots of people are literally afraid of the right mouse button. My mother is anyway. Luckily there’s a correct way of doing this now, though it hasn’t seen widespread adoption yet:

Bootstrap 4 Cheat Sheet justify-content-*-between justify-content-between <div class="d-flex justify-content-between"><div class="p-2">Flex item 1</div><div class="p-2">Flex item 2</div><div class="p-2">Flex item 3</div></div><! OpenClassroom Full courses. Short Videos. Free for everyone. Learn the fundamentals of human-computer interaction and design thinking, with an emphasis on mobile web applications. 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 Stitches - An HTML5 sprite sheet generator Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers.

WAI-ARIA Overview Quick links: WAI-ARIA, User Agent Implementation Guide, FAQ See also FAQ: What is the current status of WAI-ARIA development? Introduction

Related:  meztliIDE's