Mixing Responsive Design and Mobile Templates

Insights into CodePen's mobile strategy.

Using SVG

There is plenty you should know.

Let’s Say FeedBurner Shuts Down…

What might happen if we lose FeedBurner.

Introverts and Extroverts

“I’m highly introverted.”

Preventing the Performance Hit from Custom Fonts

A round up of some ideas.

OMG BAD UX!!!

Ever heard of “gamification”?

Idea execution

“Then never stop.”

Sass Style Guide

Extending CSS style guides to Sass.

A Couple of Use Cases for Calc()

Going through some useful examples.

“vertical-align: not doing quite what you want since forever™”

Website Deployment: Let Us Count The Ways!

A roundup of deployment systems.

Job Titles in the Web Industry

Let's nail down the definitions.

SVG Fallbacks

Alexey Ten's acclaimed hack and other techniques.

Introducing the Mobile Editor

CodePen goes mobile.

Just Use [insert CMS here]! Or, Why I Still Love WordPress

“I wrote up a page to send people to when they tell me to change CMS’s.”

Interview Questions and Exercises About CSS

A roundup of CSS test questions.

Transformer Tabs

Responsive, functional navigation.

Analyze your HTML, CSS, and JS in CodePen

CodePen integrates HTML Inspector, CSS Lint, and JS Hint.

SVG Tabs (Using an SVG Shape as Template)

Define a shape once, use it multiple times.

Poll Results: “Sites” vs “Apps”

Most think it is a valuable distinction to make.

Grunt for People Who Think Things Like Grunt are Weird and Hard

Task automation with Grunt.

“A good rule of thumb when worrying about the performance of CSS selectors is: don’t worry too much about the performance of CSS selectors.”

“What did you get for christmas?? I got a function but I think I’m going to return it;”

What is the DOM?

Questions and answers.

“What if your whole life was just an iframe.”

International box-sizing Awareness Day

In honor of an undervalued CSS property.

Multiple Simultaneous Ajax Requests (with one callback) in jQuery

Speeding up Ajax.

CSS Gradients

Updated post on syntax, declaration, and use.

Icon System with SVG Sprites

An alternative system to icon fonts.

Flexbox Bar Navigation Demo

An educational example.

Font Size Idea: px at the Root, rem for Components, em for Text Elements

Scaling the font size at the root level.

Stripes in CSS

“Stripes are pretty easy to do in CSS these days.”

Animating SVG with CSS

Using inline SVG to animate the parts right through CSS.

Inline SVG vs Icon Fonts [CAGEMATCH]

And the winner is…

Figuring Out Responsive Images

How to master all this responsive image stuff.

“Websites of the future: still just helping people do the basic stuff people need to do.”

SVG `text` and Small, Scalable, Accessible Typographic Designs

Precise text control in a graphic with SVG.

SVG ‘use’ with External Source

Even more useful inline SVGs.

SVG ‘symbol’ a Good Choice for Icons

Why ‘symbol’ is better for icons.

SVG Is For Everybody

How SVG can help in everyday web design.

Inheriting box-sizing Probably Slightly Better Best-Practice

Improved version.

A Compendium of SVG Information

A huge pile of information about SVG.

CodePen's CSS

A guided tour.

What do you do when your design pattern breaks down?

Ways to handle a common CSS issue.

Centering in CSS: A Complete Guide

How to center things in CSS.

Glitch Effect on Text / Images / SVG

Tutorial and demo.

Design Patterns

Curated groups of design examples.

Scroll-Then-Fix Content

Tutorial and demo.

Responsive Images: If you’re just changing resolutions, use srcset

Let the browser do the work.

Datalists for Different Input Types

Using ‘datalist’ with other input types than text.

Shape Blobbing in CSS

Like mercury on a surface.

Flexbox Nav Bar with Fixed, Variable, and Take-Up-The-Rest Elements

Tutorial and demo.

Clipping and Masking in CSS

State of the art.

Relating to ‘Designing for Performance’ by Lara Hogan

Book review.

Design Considerations: Text on Images

Methods of overlaying text on images.

“I’m intentionally apolitical online because I just can’t handle the fighting. I need to save what energy I have to do useful things.”

CSS: Just Try and Do a Good Job

“I don't subscribe to any specific CSS methodologies or strict rules.”

Using the ‘base’ tag with Hosted Assets

How to clean up HTML with hosted assets on CodePen.

Fun with line-height!

Playing around with a vital typographic property.

Fade image from B&W to Color with SVG

Code and demo.

Accidental CSS Resets

Ways to shoot yourself in the foot.

Code Folding & More Settings to Customize the Editor

What's new in Codepen.

Dropdown Menus with More Forgiving Mouse Movement Paths

How to make multi-level dropdown menus less frustrating.

Strategies for Staying on Top of Web Performance

Performance as part of the development process.

Sites with High Quality Photos You Can Use for Free

A comprehensive list.

Babel Now on CodePen! Write ES6+ JavaScript (and React JSX)

CodePen now offers Babel in addition to Traceur.

A Complete Guide to Flexbox

Everything you wanted to know.

Copy & Paste & The Web

How you can make the life of your users easier.

Useful Flexbox Technique: Alignment Shifting Wrapping

Flexible alignment with ‘flex-wrap: wrap;’

The Debate Around 'Do We Even Need CSS Anymore?'

Let’s talk about all the relevant points.

PostCSS Now Supported on CodePen

A new playground for PostCSS.

The Trouble With Preprocessing Based on Future Specs

“I think calling them a postprocessor is silly at best and confusing at worst.”

The Difference Between Minification and Gzipping

Why you should use both to shrink website assets.

Scroll Drawing

Drawing a shape by scrolling down.

Office Hours

A new thing at CSS-Tricks offering live help.

Redesigned!

CodePen’s largest design update so far.

New PRO Feature: Private Collections!

CodePen introduces private collections for PRO accounts.

New Feature: A JavaScript Console!

CodePen, the frontend playground, now has a live console for debugging.

Ways You Need To Tell The Browser How To Optimize

“We’re entering an era where we have to tell the browser how to optimize for performance.”

What is the difference between CSS variables and preprocessor variables?

What they are and how they work.

My Increasing Wariness of Dogmatism

“Hardly a day goes by I don’t see a dogmatic statement about the web.”

The SVG 2 Conundrum

Why SVG 2 is at risk of never getting past Editor’s Draft status at the W3C.

CodePen Projects Is Here!

Think of it as an integrated development environment for building websites.

The Many Tools for Shape Morphing

Advantages and disadvantages of some of the options.

Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually

The power of Custom Properties.

What is the Future of Front End Web Development?

Where we are and where we are going.

Full Width Containers in Limited Width Parents

How the CSS trick works.

So you need a CSS utility library?

What they are and how to use them.

Fun with Mo.js

Playful demos of motion graphics for the web.

“Just a little reminder that it’s about 100 times more important what you build than how you build it.”

Careful Now

Let’s not screw up the web platform.

How to Build a Serverless Blog on CodePen

So much possibility with just your JavaScript chops.

The Power of Serverless for Frontend Developers

A new way to work with and pay for web servers.

CSS Basics: The Syntax That Matters & The Syntax That Doesn’t

What’s really important.

Browser Extensions I Actually Use

Chris Coyier’s favorite Chrome extensions.

Coolest Way to do Aspect Ratio Boxes

CSS demo in CodePen.

CSS Shape Editors

Firefox 62 supports the shape-outside property joining Chrome and Safari.

Updating a CSS Variable with JavaScript

A short tutorial.

“A framework doesn’t make your site fast. You do that.”

CodePen: Now with More Sidebar

Fresh user interface for the popular online code editor.