Learn Front-End Development in Five Weeks
I created and lead a five-week workshop to teach my colleagues the basics of front-end development. It covered HTML, CSS, Javascript, jQuery, and hosting.
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.
THE WORKSHOP
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 Four — Javascript Basics
I found this week to be the most difficult lesson to plan. Javascript can be used for so many things! It’s probably the most dynamic area of front end development, with a new Javascript framework coming out seemingly every month or so. What was the “core” function of Javascript? What did a beginning need to understand about the language?
I decided I’d focus on DOM manipulation: a simple show/hide feature on our photo album. Javascript can do so much, but at the end of the day, it’s differentiator is manipulating stuff on the web page in real time.
I didn’t want to bog everyone down with vanilla Javascript, but I felt it was important to review. I didn’t want my students thinking that all Javascript was jQuery, but I figured jQuery would be a way easier way to pick up the major concepts.
The compromise I struck was to show them a vanilla Javascript approach to the hide/show feature, and then the jQuery version. This would highlight the differences between the language and the framework, while moving the students towards learning the core concepts first, not the syntax of vanilla Javascript.
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.
Key take-aways:
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.
Want more?
In The Web Performance Handbook, you will learn the core concepts of web performance, the tools you need to build performant websites, and how to make good performance part of your team’s workflow.
Build better web apps, increase conversion times, and charge your clients more by using what you learn in The Web Performance Handbook.
