Learn Front-End Development in Five Weeks
I’m sharing the entire workshop here (download here) so that other developers help share what they know with the people they work with.
Look like a rockstar and share the basics of front-end development with your team.
Lately, I’ve been thinking about how to embrace a “sharing culture” at the office. I could fill up an entire article with outlining why I think creating an open culture that shares knowledge, successes, and failures is good thing.
I love learning new things. the people I work with love learning new things. The easiest way to learn is from the people you’re surrounded with every day. So, why not share what you know with anyone who will listen?
For now, I’ll just leave it at that.
I volunteered to give a presentation on front-end development. The level of interest surprised me. The first presentation grew into a workshop (spread over several weeks). People were hungry to learn new skills.
PRODUCTIZING A WORKSHOP
A workshop is a product. Even if it’s given away for free, it‘s’ still a product. So, just like any product, I wanted to validate it quickly with as little investment as possible.
I sent out a two-question survey to a massive email list of all my colleagues. I wanted to gauge their interest, and their background knowledge.
It took about ten minutes to create the survey using Google Forms and the email that went out with it. Within another 30 minutes, feedback came pouring in: It turns out about twenty people wanted to learn a basic understanding of “front end” development.
CHOOSING AN AUDIENCE
After soliciting feedback, I made the decision to sway this workshop to the beginner. I knew there was a group of folks with programming backgrounds who would be interested in learning more complex systems, tools, and best-practices, but I didn’t want to exclude the folks that had no development experience.
I figured, if I started with an “Introductory Level” course and assumed no previous knowledge, everyone could join, and I’d be able to expand on it in the future with a “Intermediate Level” course aimed at some of the more complex subjects.
I started with a rough outline, and a plan to share the course via Github. I split the workshop into five discrete subjects complete with lecture and sample code (all available ahead of time via Github).
If people missed a session, they could jump right back in by grabbing the previous week’s code and starting from there.
I decided we’d build a single page “Photo Album” consisting of HTML, CSS and JS. Each week would get us closer to our end goal, which I teased them with in week one.
A “Photo Album” was a strategic choice; we needed to all build the same thing, more-or-less, so it’s be easier to troubleshoot and lesson plan for, but I also wanted to build something customizable so the students would get excited about putting their own stamp on it.
This “Photo Album” would have a rigid structure, but be open to the color, font and content choices of each developer. So long as each student got excited about what their building, I didn’t care if they featured photos from their summer vacation, or pet fish, or simply used stock images.
Week One — HTML Basics
Week one focused on the basics of HTML; the fundamental building block of front end development. Since this track was aimed at absolute beginners, I assumed no previous knowledge of any programming what-so-ever.
I split HTML into two main categories:
- Page structure — How to build a basic web page in a way that browsers will understand (html, head, & body tags)
- Common tags — How to write content in HTML (headlines, paragraphs, & links)
Folks Are Busy
Running an hour-long workshop over five weeks is a big ask of people. People get busy, they get sick, they travel, they forget… In order to combat this, I shared the entire course (lecture notes and sample code) with everyone via Github throughout the workshop.
If someone missed week two, they could catch up on their own with those resources or ask for my help. All anyone who wanted to join in mid-way through needed was the previous weeks code sample.
Week Two — CSS Basics
By the end of week one, the class had created a static HTML page including the photos for their photo album. Week two is when things start to take shape. By introducing the basic of CSS, the class started to style their page.
I broke CSS into two main groups:
- Layout — How to control height, width and position of elements
- Text — How to style your text
I know this is a gross simplification. I wanted to focus on small, easy wins for students. I figured these were the two kind of CSS that would provide the greatest bang for their buck. There’s no reason to dive deep into pseudo-selectors or flex box right out of the gate.
Week Three — Intermediate CSS
Now that we covered both HTML & CSS, it was time to build on that understanding. I wanted to get my student thinking like a front-end developer. I wanted them to imagine a design, a layout, or a text style they wanted to see on the page, and then figure out the HTML and the CSS that was needed in order to create that.
In week three we reviewed some more complex CSS concepts like background images and media queries while re-iterating the specificity and targeting concepts that were introduced in week two.
Week Five— Hosting
No coding this week. Instead, I thought it’d be fun to show the students how to host their own website. That way they could show their work to family, friends and strangers.
Taking a step back, I think it’s fair to say the workshop can only teach “so much” technical expertise. It’s not realistic to think that someone could become a billable front-end resource after five weeks of training. However, they could continue to learn and build on what they got out of the workshop if I gave them good reason to.
By hosting their own work, students take ownership of what they’ve created. Hopefully they get a little excited by the prospect of sharing something they’ve built. Hopefully, they’ll want to continue learning, in search of future excitement.
Showing is better than telling.
Concepts like the DOM or the <head> tag are effectively explained by showing examples of websites students use daily. One brief example can be better than an endless amount description since the concept might be totally foreign to the student.
Get into code immediately.
In the first week, I tried to do as little lecture as I possibly could, and instead focused on explaining things in greater detail during a live-coding session. I wanted to get everyone excited to be building something of their own, on their own. I learn best by doing, so I wanted to embrace that idea as quickly as I could.