Musings

The thoughts of one young developer

Starting HTML & CSS

Part 2 of my front-end development crash course.

Starting HTML and CSS

Welcome to my series on learning web development! I created this crash course series to help teach a group of mostly designers at my school about web development, especially on the front-end. This is the second lesson, the first that involves programming. You can check out the first post here.

If you want to follow around messing with code on your own, sites like JSFiddle are great for tinkering.

The Why and What Behind Web Development

Part 1 of my front-end development crash course.

Welcome to my series on learning web development! I created this crash course series to help teach a group of mostly designers at my school about web development, especially on the front-end. This week we were displaced from our usual area and had to meet in a restaurant nearby instead so we don’t have any video and the audio quality isn’t great. Regardless, I hope you enjoy this post!

Regardless of what you do professionally or are studying, the two main things that I want you to get from this whole course is a better understanding of what it means to program and what is possible using code (but specifically using web technology with an emphasis on the front-end).

Personal Studies

As humans, we want people to perceive us in the best possible way. With modern tools, particularly social media, we allow others to view small preapproved glimpses of our lives. This is the way things should be – we should have control and security over the things we post. But, like everything that affects our lives, there are consequences we don’t necessarily see when the change first occurs.

Increasingly people focus on getting the right combination of imagery and words to present a glimpse of an experience to others rather than enjoying the full experience for themselves.

Definition vs Description

This is dedicated to my friend who has been supportive of me for years. As Psalms 139 says, you are fearfully and wonderfully made. Please take what I say to heart.


I don’t care much about what describes you. I really don’t the majority of the time. And yet, I would love to get to know you better and discuss with you because I love doing so with everyone I meet.

How can this be? Isn’t caring about who a person is necessary for good conversation?

Absolutely! People, yourself included, are fascinating and unique and I care a whole lot about you. Going a step further, I love you as God does.

How can you care for me but not about what describes me?

Because I care much more about what defines you than what describes you. That which defines you influences all of the decisions you make, which lead to descriptions of you. Descriptions can change, definitions cannot without it becoming something entirely different.

The Ultimate Wearable

It’s obvious: we want to enhance the way we interact with the world. Everything from virtual reality to smart watches show this trend. This isn’t a new desire, of course, but we are now on the verge of making new ways of interaction possible.

Today I’ll focus on what I’m most excited about in this new world that is soon to come: the ever growing internet of things and our interaction with it through wearable technology. Both seek to expand our human umwelt, allowing for new and better interactions with the world that surrounds us.

An Introduction to Web Animation

I’ve written a lot about animations, from choosing the appropriate method to limiting browser reflow, but have never made a any basic tutorial because I haven’t had much reason to. But now I see that it could be useful to get people started down the right track.

I highly recommend checking out my post on beginning web development if you’re at all interested in learning how to program for the web. It should be quite useful to you!

Throughout this tutorial I’ll be writing code in the post itself, but I am also making the assumption that you’ll follow along in a separate window using JSFiddle, a web compiler of sorts. I also assume you know a tiny bit of HTML and CSS, but if you don’t you should still be able to follow along. It’d be best to make sure you’re using a modern browser as well so we don’t have to worry as much about browser prefixes.

Please branch off from the tutorial to test out things! That’s a great way to learn exactly what’s going on.

Let’s get started!

How to Learn Anything

I’ve learned there is one surefire way to become good at practically anything:

Surround yourself with people who are better than you and material that is beyond your understanding — the more advanced the better.

This is not something new to you; you know it well, even if you don’t think so. We all know how to become better at something, but we’re lazy. So, today I hope to provide reasons to not be lazy about it.

There is no better teacher than experience.

Why I Still Contribute to Stack Overflow

I’m still a relative newcomer to the programming and web development world. I started actively doing web stuff including programming and design around the time I started using StackOverflow, 22 months ago at the time of writing this.

StackOverflow helped me get my base foundation doing web stuff when I didn’t have a teacher around to guide me (which, looking back, I’m thankful for). I thought of things differently then and was unaware of techniques that I know now. Having people answer specific questions I had and getting help applying them to my situation helped me understand the thought behind the concept as well as reduced the time it took to find the answers myself.

StackOverflow was a big part in landing my first internship and

Proper Usage of the Picture Element

Aside: This question was originally asked on WebDesign.StackExchange.com, a private beta that ended up being deleted on October 6th, 2014.

I know how to use the <img> element, but I’ve been hearing things about the upcoming <picture> element to be used for responsive images. The articles I’ve read on the subject are kind of mixed up about the usage of the <picture> element and I’d like to get some clarification.

How is the <picture> element different from the <img> element? Should I always use it instead of the <img> element given that I want all of my sites to be responsive?