May 27, 2018

How to create modern-looking websites

This was originally published on my newsletter.

I used to hate working on CSS. Coming from the JavaScript world, I saw CSS as something that designers do and that real programmers like me shouldn't mess around with. I was up on my high horse thinking that CSS wasn't worth my time when there's so much "real" work that's out there for me to do.

Why learn CSS when I can learn other languages like Rust, Swift, or Ruby?

But I was wrong. Lea Verou wrote a blog post about how people think that she can't code in JavaScript or in any other programming language just because she focuses on CSS.

Quite often people assume that because the language I focus on is CSS, I must be a web designer. Don’t get me wrong, I love visual design with a passion. I have studied it a lot over the years and I’ve worked on several design projects for clients. Heck, I even have a dribbble profile! However, if I had to pick one role, I would definitely consider myself more of a developer than a designer.

And she goes on to say that there's actually a lot of programming principles going on while writing CSS. Just because the output is visual that doesn't mean it's somehow inferior to other forms of programming!

The skills required to write good CSS code are by and large the same skills required to write good code in general. CSS code also needs to be DRY, maintainable, flexible etc. CSS might have a visual output, but is still code, just like SVG, WebGL/OpenGL or the JavaScript Canvas API. It still requires the same kind of analytical thinking that programming does. Especially these days that most people use preprocessors for their CSS, with variables, math, conditionals and loops, it’s almost starting to look like programming!

So now that I've been dealing with a lot of CSS in the recent years, let's tackle this question that I often see people ask online: How can I learn CSS and use it to make good-looking websites?

There are, of course, quite a few places on the internet where you could go and learn just that. Here are a few that I found:

But I find that my favorite way of learning it is by stealing. Dan Mall wrote a framework that he uses to teach his apprentices design in 3 steps: Imitate, remix, and invent.

Many want to be chefs but aren’t willing to be line cooks first. It’s not glamorous work, but it builds design muscles, muscles that you’ll need in order to get better and advance to the next step.

When you come across websites that you like, try imitating it. Try to figure out how something was made. You can start deconstructing something using your browser's DevTools or by finding a similar implementation on CodePen or Glitch. Ask questions. This is hard to do, but keep at it. In fact, this is quite literally how I started learning. I talked about this at length on CodePen Radio, but the gist was that I learned by basically copying code, learning on the job, and joining a community.

Here's some homework:

  • Find websites that you really admire. See if you can imitate certain elements of the website.
  • Get on Dribbble and find things that you'd like to learn.
  • Find designer friends and see if you can create their work on the browser.

It took me a super long time to get comfortable at it, and I still feel like I have a lot to learn. (Spoiler alert: there's always something to learn.)

So here's to imitating and learning!

Reading Nook

  • The first edition of Gather The People was amazing. I read this while on a 15hr train ride from Denver to Salt Lake City. I stepped out of the train feeling all giddy with excitement for creating good work and sharing that with people. I can't wait for the second edition to come out.

Gather the People from &yet on Vimeo.

  • I stumbled upon Paper Girls in a comic book store, and I'm really glad that I bought it! If you're into comic books and sci-fi, this might be right up your alley.

Image: A picture of my book haul which includes: Men Explain Things to Me, Paper Girls, Quiet, and I really didn't think this through

  • I've been reading this book called Quiet (a summary of which you can watch on TED), and it's about the power of introversion. While I was reading this book I realized that there were a lot of times in my life where I tried so much to be an extrovert only to end up being really exhausted.

Around The Web

  • We become what we behold is a 5-minute game by Nicky Case which shows how the media influences us. They also made this game called The Wisdom and/or Madness of Crowds which shows how groups of people can act smart, dumb, kind, or cruel.
  • Coding like a girl. "I can’t tell you how many people, when meeting me and hearing my profession, tell me that I look like a designer, someone in accounting, someone in marketing, anything but a programmer."

Image: "But you don't look like a programmer!"

Podcast Updates

  • We put up the website redesign details on GitHub. It has the Sketch files, screenshots, and technical plans. It will soon have actual code. Check it out!