Hex All Around Day 4



Today, I chose a colored theme. Mainly because I’m sick and everything seems gray so best way to brighten up my day is a colored project [or so I thought…].

Hexadecimal! If you ever used a photo editing tool, you’ll know what I’m talking about. I remember the first time I tried photoshop, and clicking on the colored pallet and seeing these random letters and numbers making up a number. It seemed like magic to me. Then I learned about the math behind it [still seems like magic, because math is as close as you’ll get to being a wizard] Anywho, I planned today to be more of a design challenge as well as using something new. I decided to incorporate jQuery [for practicing purposes as well as easily accessing the DOM elements]. As always, the logic was simple [mainly due to the fact I practiced programming a lot]. The design on the other hand was… how to put it properly, I can’t find a better word than ‘shit’ does describe how it felt like. Lets back up for a minute.

for the first time, I actually planned out the design, I fired up Illustrator and started thinking. And here’s what I came up with. It’s extremely simple or what the hipsters would say minimal. The idea was to add small pixel boxes inside of the ‘H’ and have them change colors. It seemed like a cool idea to me.

However, I keep forgetting that using software is way easier than coding it manually ._. I can’t simply drag the <div> tag around with my ouse to position it, I have to use measuring units.  Regardless, I started structuring my document.

You could say it was a bit frustrating [I lied it was so frustrating] My temper started out as tolerant and reaching this stage

Okay cool, they’re aligning properly, but damn those are A LOT of <div> tags

okay now is when my mood reached the annoyed level but we’re getting there

but there is that space on the right side of the ‘H’ and their connecting edge. I chose to ignore it for now, and fix it later. I was too excited to try out the colors. and here’s where I excel, <writing logic is my jam yo!/>

I wrote the logic, was too darn excited to check out the result. I couldn’t wait to hit refresh to check it out [refresh hit!]

ummm wait. Why is the space even bigger now? And darn it, it’s too fast, it would cause a person either to have a headache or I don’t know I’m no doctor. Anyways, I tried every CSS property in the book to fix this issue, yet with no prevail. I nearly gave up. But a cup of tea can turn any mood around. I decided to compromise. If this design doesn’t work, try a different approach. So I decided to switch it up. Have the black background change colors while the ‘H’ being a solid color. So I get to work, and well, not my first choice, but it’s better than nothing.

Did you notice I fixed the timing issue with the first one? Now, here’s where I fuck up again… Just yesterday, I was gloating about a mobile-first approach. Yet, here I am doing the mistake again of designing for desktop… Anywho, I start doing my good old friend media query again. everything was cool until I reached the screen size 950px where it no longer wants to work :’( as you can see from the gif it stops at 1050px



This is weird because I added all the different screen sizes!

But no Athoug we won’t give you the satisfaction of responsiveness. [sigh] And that’s the point where I say screw you! When I try mobile devices, it works weird then adjusts itself. Look

I’m not happy with it. But I guess you’re bound to have some days where you don’t feel your best, and I guess this is mine 🙁

You can check it out here. Tell me your honest opinion what do you think? [I love criticism when it’s constructive]. But you know what’s the best thing in this project? my file naming approach

I guess that is it for today.

Happy coding 🙂

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *