Confessions of a Beginner
This post will take you about 4 minutes to read.
This week I put a new coat of paint on my personal website - hotdogsandeggs.com.
I wrote the code from scratch for the first time. It’s effective not elegant. I’m sure there are things I could simplify or improve. If you recognize something that could be better, please let me know @cjgallo.
I’m a beginner. And this is what I learned writing the code on my own.
It’s Not Scary
HTML is just going around with a label maker and throwing labels on everything.
Jessica Hische is a designer. And she preaches how you must learn the tools to make the things you want to make. HTML is not scary or intimidating. You just throw a label on things.
It’s true.
Rasheed Wallace. Shaq. Muggsy Bogues. Randolph Childress. These are not just great basketball players. But the labels I used when creating the site. They live in a CSS file titled, you guessed it, Tim Duncan.
This is proof that you just throw labels on everything. This makes it easier for me to understand how CSS and HTML work together. Plus, it creates a comfortable feeling because you can name things what you want.
It’s not scary.
Rip Something Off
Jim Cloudal believes you should find something you like and rip it off.
This is unorthodox advice. But it teaches you how things you like that are made and how you can re-create them.
Thanks to Jim, I ripped off his typography on Cloudal Partners. The headlines and sub-headings have an old-school feel of a newspaper. With thousands of fonts available today, it’s refreshing what you can do with times new roman.
The letter spacing is really what makes this typography so beautiful. It’s easy to read and catches your eye. I’ve used it on the homepage, my blog, and another project.
Another design I sought to rip off was from Frank Chimero. He uses a grid layout of to showcase his talks. The full-width squares or boxes was something that I really wanted to learn how to make.
After toying with re-creating Frank’s design, I realized the squares were not something that was necessary for me. I have four things I want someone to know when they visit hotdogsandeggs.com.
- What hot dogs and eggs is
- I share what I know on my blog - blog.hotdogsandeggs.com
- They can find inspiration from my project - people.hotdogsandeggs.com
- And who I am - a short bio
Instead of squares I split the site into these four sections using the full-width design that mirrors Frank’s design. It’s a class titled shaq that includes these styles:
max-width: none;
margin: 0;
padding: 0;
There is nothing wrong with ripping something off to help you learn. As Frank states on his site, “Be nice. Give credit. Share, don’t steal.”
Email is a Great Way to Learn
Lots of people want to kill email or declare it’s dying. It’s simply not true. As Alex Madrigal describes, email is “the cockroach of the Internet.”
It’s not going anywhere.
Writing an HTML email is different. It’s based on a lot of old standards and there is a lot that you cannot do. But you can use inline styles. This means the CSS is written in combination with the HTML.
It can be exhausting, but I find it to be a great way to learn.
Jason Rodriguez delivers a great explanation of how to write and design an HTML email. He describes why HTML sucks:
It’s like getting into a time machine and stepping out into a hellish ’90s world of table-based layouts, inline styles, non-semantic markup, and client-specific hacks.
With the annoyances of writing code for email comes lots of opportunity to learn. For example, using Salted - a responsive template from Jason and Litmus - I discovered ways to build bulletproof buttons.
As a beginner, I thought a fancy button must always be an image. Since lots of email clients strip images, the bulletproof button approach makes a lot of sense when writing an HTML email.
Using CSS instead, I discovered how to make beautiful buttons without using an image. You will find the same types of buttons on my site that you will in the Salted email template.
After reading through an example of the Salted template, you also find it’s easy to digest information too. This design inspired me to re-create something similar for my site. Four sections with clear calls to action and easy to digest language.
Yes, writing an HTML email is a pain. But it forces you to understand how code works and why you should use specific approaches in certain situations.
It’s an awesome way to learn.
So What’s Next?
Learning to code is not easy. But it’s so rewarding when you build something that makes you proud.
There’s a ton more for me to learn. And I can’t wait.