Skip to main content
Guide Collection

How to Think Like a Front-End Developer

A collection of articles along this theme.

Monthly Sponsor
Thanks, monday.com!
Article

Your Brain on Front-End Development

Part of the job of being a front-end developer is applying different techniques and technologies to pull off the desired UI and UX. Perhaps you work with a design team and implement their designs. I know when I look at a design (heck, even if I know I’m not going to be building it), my […]

Article

What makes a good front-end developer?

Defining what a front-end developer is and what they do is tough as it is. So, how do we set the bar for what makes for a good front-end developer? Here’s what a few folks have to say on the topic.

Link

A Tale of Two Buttons

Article

What We Don’t Know

There is an awful lot we don’t know about a user visiting our website. For example, almost everything. And we know less and less every day as the web gets bigger and its users more diverse. Let’s accommodate those unknowns.

Link

Getting to Know a Legacy Codebase

Article

Here’s how I recreated theory11’s login form — how would you do it?

I ran across a super cool design for a login form over on the website theory11.com. Actually, the whole site and the products they make are incredibly well designed, there’s just something about the clean and classy form that really got me. Plus, it just so happened that the CodePen Challenge that coming week was […]

Article

Building a Complex UI Animation in React, Simply

Let’s use React, styled-components, and react-flip-toolkit to make our own version of the animated navigation menu on the Stripe homepage. It’s an impressive menu with some slick animation effects and the combination of these three tools can make it relatively easy to recreate.

Article

Fitting Text to a Container

There are a number of ways to go about putting some text in a container and having it size itself to fill that container. There are different technologies we can use and different considerations to think about. Let us count the ways.

Article

Aspect Ratio Boxes

I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes. This isn’t particularly new stuff. I think the original credit goes as far back as 2009 and Thierry Koblentz’s Intrinsic Ratios and maintained popularity even for other kinds of content with articles like Uncle Dave’s Ol’ […]

Article

Centering in CSS: A Complete Guide

Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn’t that it’s difficult to do, but in that there so many different ways of doing it, depending on the situation, it’s hard to know which to reach for. So […]

Article

Flexbox Bar Navigation Demo

Someone wrote in to me asking how to create a simple bar navigation with icons. This is a pretty simple layout thing that could be accomplished loads of different ways. List items as inline-block probably makes the most sense in general. But I’ve been enjoying tinkering with flexbox, so I decided to toss it together […]

Article

CSS Basics: Fallback Font Stacks for More Robust Web Typography

In CSS, you might see a ruleset like this: html { font-family: Lato, “Lucida Grande”, Tahoma, Sans-Serif; } What the heck, right? Why don’t I just tell it what font I want to use and that’s that? The whole idea here is fallbacks.

Article

CSS Basics: Using Fallback Colors

Something you very much want to avoid in web design is unreadable text. That can happen when the background color of an element is too close or exactly the color of the text. For instance: .header { background-color: white; color: white; }

Link

Many Ways to Learn

Article

Designers These Days…

… have a good design sense and understand the fundamentals / design principals. … know all the major design software including the entire Adobe Creative Suite. … have some basic video editing skills. … know HTML, CSS, and JavaScript. … know enough about server-side languages (PHP, ASP, Ruby, Python, etc) to understand how they work, […]

icon-link icon-logo-star icon-search icon-star