One of my favorite features of my site and one of my most popular code demos on CodePen, is my CSS sliding caption reveal, so I thought I’d write a post about it. I’ve seen these types of features a lot on websites, where you have a gallery of some sort and when you hover over the image, there’s an overlay that fades or slides in with a description and/or link. Personally, I think like this type of feature and think it’s pretty cool, so I coded my own version of it. Read More
I recently started a new front end developer position, and we have these weekly challenges, which I think is pretty awesome, but I thought this would be a great chance to share some of the new techniques that I learn. This past week’s challenge was to create a background pattern using only CSS gradients, and being able to use it on various colored backgrounds. Let’s just get right to it…
The pattern we want to make is in horizontal a zig zag with a vertical line on the edge. Now, this isn’t something you can’t just jump in to right away and start coding, it requires a little bit of thought/planning before executing the code. Read More
As a front end developer, I believe you should be learning something new almost everyday to better yourself at your craft, or at least give yourself a better understanding of what it is you’re actually doing/coding. Sure, you may know that a float will push some content/image to the left or the right, but are you truly understanding what the meaning of your code is and what it is doing or how it is affecting other elements on your page? I will openly admit, I haven’t always known exactly what it’s doing and why, but I know it works so I don’t bother trying to dig any deeper. I’m sure many are guilty of this. Read More
The relationship between an element’s width and padding has always been quite annoying in my opinion. You’re off coding your awesome grid, all of your widths measure up to 100%, and you’re looking great. Then, you add some padding in and the whole thing breaks! Here is how the current box model works with padding…
I’ve seen/heard of a lot of people who have struggled getting the fluid grid down. In my opinion, the key to creating a solid grid system is by just keeping it simple. There’s really no secret fancy CSS technique that allows you to create a grid. There’s a couple of rules I always follow that make my life a million times easier when coding gird..