After deciding to teach myself how to code websites I bought a book on the subject, quickly read through it and dove into the codecademy tuturials. Soon after finishing that I bought another book, started the JavaScript track, and began my JavaScript journey. Six months later after finally grasping the basics of JavaScript and jQuery (including solving the common fizzbuzz test) I decided to go back and work on my html and css skills since I was not yet confident in being able to build anything yet. All this has lead me to the famous question that everyone seems to ask; "So I finished codecademy. Now What?"

No Hand Holding!

The obvious but not so obvious next step is to build something with these new found skills without the hand holding that a lot of tutorials provide. I read somewhere in an article that a great way to boost your confidence and skill set for a beginner like me is to take the plunge and recreate simple sites. So thats what I did, and it worked out pretty well.

What I Learned

The CSS Box Model

I definitely became very familiar with how to use the css box model to my advantage during this little project. I understood the box model before, but I never really experimented with how to use it until now. My 'aha moment' with css came by constantly tweeking the css code to style each element based on the box model to my liking. The quote below may enlighten you as it did me.

According to the box model concept, every element on a page is a rectangular box and may have width, height, padding, borders, and margins.

That's worth repeating: Every element on the page is a rectangular box.

Here's a pic of the css box model. For some strange reason everyone on the internet loves cats. If you're not one of those people, here's another.

Bootstrap

When I started this small project I decided that I would recreate the website from scratch with vanilla CSS. After completing the header I soon realized that I would need a grid and I didn't wanna make one from scratch. Why reinvent the wheel when there's several perfectly good wheels lying around? One of them being Bootsrap.

At first learning bootstrap was very confusing. I would go to the website, read all this stuff, and still not know how to apply it to my website. This was frustrating. My 'aha moment' came after learning how to use the grid. If your a beginner like me and trying to learn bootstrap, I would advise you to learn how to apply their grid first. Once you learn that little trick everything else will fall in place. Figuring that out, to me, was similar to learning how to use layers in an image editor for the first time. After that, using other components of bootstrap will be that much easier. You'll even know how to use other css frameworks. I'm currently interested in the Gumby framework and will consider using it for my next project.

You can learn the basics of how to use Bootstrap here.

TIPS

Chrome Developer Tools

I think I had a pretty good grasp on html and css before hand. But I now have a better understanding and a sense of mastery over certain concepts that I know I didn't have before. I also had to figure out other stuff like text size, white space, colors and little things like that along the way. For that I turned to Chrome Developer Tools (CDT).

I was pretty familiar with the console but as far as using it for inspecting css elements that part was knew to me. I didn't care about that I just dove in clicked around and it turned out to be a huge help.

ColorZilla

Another tool I came across is a chrome extension called ColorZilla that I used as a color picker/eye dropper thingy to figure out what hex colors the particular website I was recreating used. You can also use CDT to do this but this way was faster/easier.

Conclusion

In conclusion I had a lot of fun doing this little project. There's still some little things I left out like tool tips for links and such but to be honest I got kinda bored towards the end of it. Completing even one site recreation will boost your confidence a lot. Next time I plan on trying out a another css framework. I've also been learning git/github so I'm excited to use those tools as well on my next assignment.

I learned all this just from recreating one website. Imagine how much more you could learn and how much faster you would be after building 10 or 20 or 180!


4,384 0 5