Treehouse Day 1

At first when I looked through the Treehouse course materials, I was worried that I’d be wasting my time going through yet another “HTML/CSS” course. Admittedly, I’m not an expert at front-end design and development, but after learning HTML/CSS on Epicodus and Codecademy, how much more was there for me to learn in another intro course?

As it turns out, a ton!

Relative Paths

Guilty as charged. In the past, I’d link directly to an object with the full URL, i.e. rather than using the relative path. So if my index.html file sits at the same level as the image folder, I can just link to it with the relative path: <img src=”img/photo.jpg”>

This will  make it much easier when I want to move the site to a different directory, or publish it online.

Responsive Design

Watching the Treehouse course on designing a website was the best thing I could have done to get a stronger grasp of building mobile-first websites. With all of the blog articles floating around about responsive design and mobile-first strategies, I had completely tuned (because most of the time someone is trying to sell you something anyways: i.e. Why your business will fail without a mobile strategy – Part 24).

But the mobile approach completely makes sense. We want to start by designing the mobile version of our site first, because this is the simplest form our website will appear in. When we expand to larger screens and devices, we have more real estate to fill up, and we can expand upon our initial design.

In the past, while using a predesigned WordPress theme, or even when using a framework like Divi, I’d build a full site and have to work backwards to try to make a decent-looking mobile site. Now, even in my first course on Treehouse, I’m very pleased with the way my simple portfolio site displays responsively.

The three components (new to me) of responsive design are:

1. Fluid images (using the max-width property)

2. Fluid grid (using percentages rather than fixed units such as pixels)

3. Media queries

I found that media queries are relatively easy to use, though I find that when working with Bootstrap, I rarely have to use a media query. When I do, it’s nice that I can take advantage of the cascading nature of CSS, only making the minimum necessary rules for tablet (when changing from smart-phone) and for larger screens (when transitioning from tablets.

Website Testing

I am very interested in UI/UX, so I was pleased to learn about some different strategies that we can use to test our websites after we’re finished coding, but before they are uploaded to a live server.

Change the site colors to grayscale

By changing the color palette to only blacks and whites, we can better account for what our website might look like to someone who is colorblind. Additionally, we can examine the level of contrast between our site elements.

Flip the website upside down

By flipping the website upside down, we can check for compositional balance. Is one side heavier than the other? Does it look pleasing to the eye without focusing on the content?

Adding Blur

When we add a lot of blur, we can examine our color saturation – is one color to strong, do the colors complement each other? When we add minimal blur, we can view our site as people who experience some degree of vision impairment.

Where I’m At

I’ve finished the course on building a website, which is the first of several courses that comprise the Front End Web Development track at Treehouse. I still haven’t decided if I gravitate more towards front-end or back-end development. I love design and I’m a very creative individual, but data analysis is also a strong suit, which I think would lend itself better towards back-end theory and concepts.

I’ve started the CSS course (2nd in the front-end track) but I’d have to say it’s a strange experience so far, since the initial course spent a fair amount of time on CSS, almost all of this is review so far. I hope they cover some of the newer CSS3 elements. I’d love to learn how to make some pure CSS3 animations for fun.

It’s easy for me to get carried away and fall for the gamified method of learning, getting more points as I complete additional courses and lectures. But I’m in this for the long-haul, and I think it’s more important that I spend some time really honing my HTML and CSS skills before jumping on to Javascript or PHP.

I work for CampusPress, which specializes in multisite WordPress networks for schools and universities. We have lots of themes and plugins to choose from, and many universities have their own in-house design teams that can create custom themes. But there are a lot of schools in the middle that would like to have custom work done, but don’t have their own design team, so I’m hoping I can cross-train and start to do some custom work.

I’ve decided to start working on a sample project for CampusPress, and I’m fondly naming the theme “Ipsum University,” after the oft-used Lorem Ipsum dummy text. I’m going to wait to include any Javascript elements until I’ve worked through that part of the coursework in Treehouse.

It’s not much yet, but here’s the header:


It took me a little while to figure out how to have the link encompass the entire width and height of the nav li menu item. But it’s a much nicer look now that the link and the list item change color when hovered.

Here’s the mobile version of the header:


Right now the hamburger menu doesn’t trigger anything, but it will toggle the menu open and closed.

So, now I’m actually spending more time on the site design and less on Treehouse, but I figure this will actually help build my portfolio to be able to showcase to future employers or contractors.

In the spirit of full disclosure, Treehouse offers a discounted rate to members who get people to sign up with a special referral link. If you’re interested in a Treehouse subscription and want to join me on my quest to becoming a web developer, I’d love if you sign up with this link so we can continue this journey together!

Epicodus Day 2 and Starting Treehouse

I started my second day with Epicodus HTML and CSS training. I found it interesting that Epicodus introduced divs and spans in the context of organizing information, rather than from a design standpoint. From what I recall, Codecademy focused on the box model pretty early on in the explanation of divs, but it didn’t discuss the organizational benefits of divs.

Next, I found it helpful to review the cascading part of CSS – the properties of inheritance and specificity. I always find myself using !important in my Custom CSS panel in WordPress, usually because I can’t remember when my code will override the theme files, and when it won’t. Here are a few quick takeaways from this lesson:

CSS: Inheritance and Specificity

1. The most specific rule wins.

2. If two rules have the same specificity, the last one wins.

3. Inline styles ruin the power of CSS.

Rule number one was a good refresher for me. If I select all links and set the color property to green, but then select all links with a particular class and set the color property to blue, the second rule will override the first one, since it is more specific.

Rule number three is a good reminder that one shouldn’t use inline styles unless you absolutely have to, as the styles can be reused, and we inherently want to separate form from content – inline styles keep form and content packed tightly together in a way that is not easy to manipulate later on.

Chrome DevTools Console

I’ve used the Chrome DevTools console before, but mostly to correct errors or to examine properties of CSS on other people’s websites. One feature that I found intriguing is the ability to check and uncheck CSS properties to see how it affects the appearance of the website.

Even cooler is the ability to change the value of the property by double-clicking and typing a new value in the console. Want to see what that h1 tag would look like if it were 40px instead of 20px? Just manipulate the rule.


I had heard of Bootstrap before, but to me, it seemed like some sort of magical website building tool, “Oh, you used Bootstrap? Cool…”

In reality, Bootstrap is just a nice looking set of CSS rules that provide a framework for your website. Instead of starting from scratch, you can apply pre-created classes to your HTML elements, and you’ll have a decent looking website in a matter of minutes.

I am currently using a Bootstrap theme for WordPress called Stanley, but even with my limited experience, I already can find a number of errors with the theme. To be fair, the folks at released it for free, but I’m excited for when I can combine my HTML/CSS knowledge with PHP to create my own WordPress theme.

Media Queries

Sure, sure, it’s hammered into our heads that “this is the year for mobile.” But for the first time, I can proudly say that I understand how media queries work, and I was able to make my first demo site responsive (without any outside assistance). I still need to investigate certain parameters, such as when do we use screen? But for the most part, I am happy with my current understanding of media queries.

One question I have been wondering about is whether there are standard media queries and breakpoints that a person should use. Is there a standard break point for tablets, despite there being so many diverse sizes of tablet devices?

Websites Used – Skeleton is another CSS framework I’ll have to check out – looks nice and lightweight. Foundation is another popular CSS framework.

Moving on to Treehouse

I’m excited to have completed the HTML/CSS lessons on Epicodus. They were just the tip of the iceberg when it comes to front-end development, but they still helped me out with a ton of new ideas in the past few days. The next lesson Epicodus pointed to was getting to understand the Command Line. Unfortunately, the lesson they linked to was a paid lesson at Treehouse.

But as I started to explore Treehouse, I couldn’t believe how in-depth their tracks were. I had blasted through most of the front-end development at Codecademy and Epicodus in just a few days. Treehouse tracks are incredibly comprehensive. I started my 14-day free trial, but I’m more than willing to purchase a membership, as there is enough content to last me for years of engaging professional development.

I realized that in order to “unlock” the console lesson I wanted to learn, I should go through the sequence of front-end development. As much as I love the Epicodus lessons (and the fact that they’re free) I can’t believe how much I’m already learning from Treehouse.

Learning is learning, and whether I take a college course, learn on Codecademy, Treehouse, Code School, or Epicodus, I’m excited to document my journey.

In the spirit of full disclosure, Treehouse offers a discounted rate to members who get people to sign up with a special referral link. If you’re interested in a Treehouse subscription and want to join me on my quest to becoming a web developer, I’d love if you sign up with this link so we can continue this journey together!

Epicodus Day 1

I haven’t decided how best to group what I’m learning at Epicodus. I have no desire to replicate all of the content (they do a great job!) and the HTML and CSS content is a refresher for me.

Whenever I take a code course, I’m interested to see in the way that they lay out the information. Biased from my own experiences as a teacher, I find it interesting to see how much thought goes into the pedagogy behind teaching how to code.

At Codecademy, the approach was to teach a simple concept, and then hammer it to death through repetition of practice exercises. The repetition was a mix of good and bad. As a beginner, it was great to repeat ideas through practice. On the other hand, it didn’t help me see the bigger picture of what I was trying to accomplish (which has somewhat improved with the addition of their various activities, such as replicating the Airbnb website).

Epicodus currently is a review of my HTML/CSS knowledge, so I’m glad it’s moving at a brisk pace. But if I were a total beginner, parts of it might not make sense to me.

Here are a few things I’ve been learning from Epicodus today:

How to develop locally

I’ve been a terrible person – adding live changes to code on my WordPress sites. While it may not be a problem if I’m working on my own personal blog, adding new plugins, changing stylesheets, and updating PHP snippets on my live business site always meant taking a risk in messing up the live site for paying customers.

It’s time for me to stop being a cowboy coder. It sounds silly that I didn’t know how to develop locally on my computer, but there’s no time like the present. I’ve downloaded Sublime on my computer and have been learning about creating website files in locations relative to the index.html file.

Using Dropbox to store my project files has been a cinch. The Epicodus folks recommend using (which used to have a free plan, but now costs $4.95 per month). I decided to start a free trial, and have been impressed by how easy it is to host websites on top of Dropbox. This seems like an inexpensive solution to host future portfolio items I hope to develop.

Good Code

“Good code is code that is easy to change,” was an awesome takeaway for the day. It’s always made sense that we place our static content in HTML, and update the styling with CSS. But if you would have taken a look at my Custom CSS panels within WordPress, you would have been flabbergasted if you needed to make a small change to the code.

Since I’m committing to learning how to code properly, I’m going to focus on making my code readable  with proper indentations, sensible class names, and removing any extraneous information along the way. It might take a little bit longer to begin with, but is sure to make clients (and myself) happier in the long-run.

Alt Tags

In the past, I’ve just grouped image tags together in my head. WordPress asks for a title, caption, alt description, and description for each image inserted through the media library. I knew there was some SEO benefit for using the appropriate descriptions for each, but the alt tag never mattered much to me.

But even more important than SEO, I never realized that alt tags to describe the image to people who are blind. That’s huge! If we truly believe the internet is the great equalizer, we need to build web sites that are increasingly accessible for all people.

Websites Used Placeholder text Placeholder images (I love that a new image is used each time the page loads) Same content, different CSS Easy to deploy websites from your Dropbox



Back on track

I am a lifelong learner.

I believed it when I was a teacher, and I still believe it now. I think it’s important that we continue to learn new skills, uncover new talents, explore different cultures. It makes us better human beings, and gives us a deeper understanding of the human condition.

I spent the last six months of my teaching career learning about marketing and some basic website development. I used that to propel me into a new career with Edublogs – doing tech support, marketing, UX, and a bit of growth hacking.

Now, I’m hungry to keep learning. I’ve always wanted to learn website development, but I feel like the awkward cousin when I go to technology meetups (awkward being relative; I’m much more social than my counterparts). Sure, I feel comfortable with HTML and CSS, and I’ve taken some of the Codecademy courses, but I still haven’t uncovered where my true niche is within technology.

I’m not committing to blogging every day, or presenting the best tutorials known to man. I just need a place to crystallize my thoughts. And if others want to join me in this learning process – awesome.

As I uncover new information, it may be the most obvious points to many who have come before me. But we all start somewhere.

I came across Epicodus today, and was pumped to realize that they released all of the course content that they use with their bootcamps for free online. I’ll start with HTML/CSS, despite being more curious about PHP and Ruby.

Might I want to be a developer? Maybe. I also have an entrepreneurial hunger that needs to be satisfied. I figure that since I work with WPMU DEV, I have a great opportunity to pick up quite a bit of WordPress knowledge along the way. And with a quarter of the web using WordPress, there might be a nice niche I can carve out later on.

But enough of the dreaming for now. Let the journey continue.