I finally started the FreeCodeCamp curriculum today, beginning with HTML5/CSS.
I’m pretty proficient in both so it was a welcome refresher. I completed that section of the course in 2-3 hours, although they estimated 5. It included 68 mini-lessons or challenges, as they’re referred to in the curriculum. I watched Love & Hip Hop ATL and Black Ink Crew through most of it and when I got towards the color portion near the end I buckled down to complete it. It’s possible that I could’ve completed it in shorter time if I wasn’t distracted by reality TV and twitter. I’m sure other lessons won’t be nearly as easy.
Anyway, back to the curriculum…
It was helpful to re-learn some concepts. For example, I know how to use an <a> tag, but I forgot it was called an anchor element or that the attribute “href” is short for hyperlink reference. Once you’re past the beginners phase, these things are taken for granted.
Over the weekend I was asked to explain a Python program I created and I knew how I did it but wasn’t able to articulate to my peers in the HearMeCode class so I’m more cognizant of that now. For many of us, we work our way through problems in our heads but knowing how to explain how we solved it or arrived at a conclusion is a great skill for trouble-shooting and teaching others.
I also enjoyed the forms & input type exercises. I’ve created forms plenty of times but over the years I’ve relied heavily on WordPress templates & focused more on styling the form & input elements. I never committed certain form & input attributes to memory, knowing that a quick search through w3schools.com would provide me with anything I needed, if I ever needed it.
Other concepts that were covered included:
- CSS padding/margin: Padding refers to the space between the element’s actual content and the border. Margin refers to the space between an element and other elements around it. The box model image below is a visual aid I often refer back to.
- CSS IDs/classes: the general rule is that IDs are unique, used with one element tag within the document and classes are more “reusable” and can be applied to a variety of element tags.
- CSS inheritance: in-line styling eats <ID eats <class
These are a few of my bookmarked resources that I’ve referenced over the years when I needed a reminder of how a certain property or value interacts with elements, etc.
Things I actually learned for the first time!
- How “!important” works and why it would be used. I’ve seen it in stylesheets before. It’s a way to override other CSS declarations. In the example given during the course, we applied a color to an element via an ID, a class, and in-line styling. In the stylesheet we included “!important” next to the class property and that overrides all other declarations (in-line, any other classes, and the ID).
- Hexadecimal digits and RGB values. Now I’m not completely clueless as to how they work. I took a basic design course my freshman year in college and with years of using Photoshop I’m comfy around them. I always use hexadecimal values in my projects, never RGB values. I’ll need to look into this more, just for personal “need to know” reasons.
Looking forward to working through Bootstrap & jQuery which I’ve never used!