Developing A New Skill Set

Phew! The first week at HackerYou’s 9 week front-end development bootcamp has come to a close — and man, did we learn a lot!

I was first introduced to the world of .html a couple of years ago when I was thrown into an email marketing position. All of my code was based on tables and inline styling — I knew nothing of divs, css or floats. This week taught me I have a lot of bad habits to break!

Our first project was to create a one-page-site using all the new .html and .css tricks we learned this week. After perusing Dribbble and Behance for inspiration, I came across this site:

Child Care Food Program — Website made by Leap

I loved the simple yet bold colour palette, but I was especially drawn to the neat scrolling effect. I thought it would be relatively easy to emulate, after all, we had just gone over fixed backgrounds in class.

fixed background + transparent image = dream website

So easy, right?! Sure, but there were still a few things that I needed to learn about — mainly, z-index.

Check out the CodePen here!

I’ve shared the CodePen if you want to try it out for yourself! The important thing to remember is to set the elements inside the header to a z-index of 0, and then wrap everything else in your body in a div (mine is class “above”) — give this a position of “relative”.

You can also see it out live on my site.

Looking forward to another week of learning!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.