How to create modern-looking websites
This was originally published on my newsletter.
Why learn CSS when I can learn other languages like Rust, Swift, or Ruby?
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!
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:
- Skillshare: Introduction to CSS
- Udacity: Intro to HTML and CSS
- A Book Apart: CSS3 for Web Designers
- Skillcrush: Learn how to become a front end developer
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!
- 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.
- 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.
- 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."
- 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!