design two, coded

design two, coded (#design2code1)

I like to say that humans are notoriously bad at predicting the future. I’m positive I learned this in one of the many psychology classes I took during my years at university. As an extension of this, it makes sense that we are also bad at predicting what we can and cannot do.

I just did this. I thought I could code a WordPress theme in two weeks, even though I know very little about php, which is necessary to create the actual theme and even though I’m just getting a handle on the html and css.

So why did I think I could do it?

Of course, because I had already coded one theme before (the one my blog is currently using – I made it all on my own!)

So it seems reasonable that I’d be able to create another, right?

Here’s the problem. When I made my current theme, I didn’t really have a design beforehand. I found things using php that I could do (and understood) and then styled those afterward. The design came after I had figured out how to grab everything with php.  But with the design 2 + code 1 project, the designs came first. I wasn’t thinking about the types of information I knew how to get using php, and I definitely wasn’t thinking about the logistics of making my designs into real customizable themes.

I spent an entire day with my fingers woven through my hair before deciding I needed to change my scope + parameters a bit.

Here’s the new plan:

I’ll still be designing two themes in the first two weeks of the month. And I’ll still be coding one of the designs. However, instead of coding the design into a full on WordPress theme (with php), I will only be using html and css to create static pages.

This is so exciting to me.

This is something I can do + learn + get better at without getting stressed out and overwhelmed. Little steps at a time. Of course, I’ll still be sharing the things I learn along the way (because there will definitely still be learning).

I’ve started small this month and only coded a single page of design two. It’s slightly responsive, and by no means perfect (actually it’s far from perfect, but I’m still very proud of it!)

Instead of sharing something I’ve learned or sharing the process with you, I’m going to instead just send you over to the page to take a look. The page is static and doesn’t actually contain any links that go anywhere. But feel free to resize your window to see how it responds :) And remember, it’s not perfect, but I think it’s an excellent place to start :)

And mostly for my own reference, here are some things I attempted for the first time:

– sized everything in ems

– used media queries

– created the layout using flexbox

– ran the css through to add prefixes


Next Saturday I will be sharing design three with you, so stay tuned :)