How to Learn Front-end Coding for Free

Last week, I set myself the challenge to become an intermediate front-end developer in just five days. This is how I did it.

This is not my first learning experiment. Ten years ago, I challenged myself to learn French in 17 days and succeeded. Since then, I’ve taken entire degree programs online (as well as a couple of Graduate programs offline), learned more languages, and started several companies.

I couldn’t have done this without developing effective learning strategies, many of which contradict the widely-agreed model of how to learn something new. Some of them have even spurred debate at Ivy League universities.

Although I’ve had a lot of exposure to technical teams, I’m starting with only high-level technical concepts and virtually no practical knowledge.

Language learning as an analogue

I learned French to conversational fluency using a programme combining many hacks and quirky techniques. Could I use analogous techniques to learn front-end development? So far, it looks like I can.

My language learning techniques included:

• Audio/visual instruction — listening to Michel Thomas’ mp3s
• Immersion — staying in a French-speaking country
• Benchmarking — reading familiar children’s books in French and listening to French music
• Confidence-building hacks — writing essays on myself and learning filler words
• Memorisation — writing out verb tables

Each has an analogue in front-end coding:

• Watching tutorial videos on Youtube
• Immersing myself in a development sprint
• Benchmarking my favourite sites with the dev console
• Speaking to other developers for feedback and workflow advice
• Memorising CSS elements cheat-sheets

This has been the blueprint for my learning strategies.

The progress so far

I’m 48 hours in and here’s where I am:

1. I committed to the front end stories in the sprint of one of my side projects. Specifically, I’m building two pages: a landing page and a more detailed product page.
2. Right at the beginning, I started a basic project (just two text files with HTML and CSS) and spent about an hour plodding through some HTML for the landing page. As it turns out, I will throw the whole thing out and start again, but it put all the videos I’ve watched into context.
3. I’ve been to three lunches/dinners with experienced coders, where we talked about workflow.
4. The lion’s share of my time thus far has been dedicated to tutorial videos and code walkthroughs on Youtube. Honestly, it’s been one of the most intense learning experiences of my life, which I’ll share with you in detail, so if you’re crazy enough to follow in my footsteps, you can use the same materials.

YouTube Videos

While I didn’t necessarily intend to spend so much time with tutorial videos — or go so wide and deep with them — I’m incredibly glad that I did. It’s given me exposure to a lot of concepts and technologies early on, and I would highly recommend this.

It stands in stark contrast to what most people recommend, which is to learn the bare essentials and get stuck in. If you learn slowly, that might be best, but if you grasp concepts quickly, then I feel you’re better off going deep faster. Plus, it’s only been two days of Youtube . . . which isn’t much, in context.

To consume such a huge volume of material in so little time, I’ve had to watch all videos at double speed. I’m very used to this as a podcast/audiobook addict and I recommend using it in your learning routine, since it doubles your productivity. You can start at 1.25x or 1.5x to start with, if 2x is too fast.

Also, I write out two or three lines of notes on the key concepts I learn from each video. I doubt I’ll read any of what I’ve written again, but that’s fine because I do it mainly for consolidation and memory.

So without further ado, here are the videos I’ve watched in the last 48 hours (brace yourself).

1. Intro to Django Web Development (12 videos)

As I’m already somewhat familiar with Python, I thought Django (Python’s web framework) would be the natural place to start. In retrospect, I think it’s a much better idea to start with HTML, CSS, and Javascript. In fact, I’d posit that when people say they want to program, they really mean they want to learn web development. Which is exactly what happened to me.

That said, this playlist ended up giving me a much better idea of how back-ends like Django (and rails) generate HTML. If you’ve already learned Python, this isn’t a bad place to start, purely for context.

2. Bootstrap Tutorial for Beginners (14 videos)

My dev team told me to learn Bootstrap. So this was the first playlist I found. It’s pretty good, though an even better playlist is coming up shortly. But there’s no harm in repeating.

3. UIkit web framework (10 videos)

UIkit was mentioned in passing in one of the Bootstrap videos above. I was curious, so I ended up watching this intro to UIkit playlist. It put Bootstrap in perspective as just one option (albeit the most popular one) for building front-end fast, but there are alternatives.

4. Derek Banas tutorials (3 videos)

Searching for more Bootstrap instruction, I stumbled on Derek Banas’ videos. I instantly loved his style — very intense examples, one after the other, that illustrate all the different elements and possibilities in each framework. Drawing an analogy with learning a language, these cover the ‘verb’ tables.

5. learnCode Academy (1 video)

This is when things got really, really interesting. This channel is the gold standard of coding videos, and this intro video gave me a great overview of all the different areas I needed to know to become a developer.

If you are planning to teach yourself to code, this is the best place to start.

Note: here is the mind-map described in the video — a terrific resource.

6. Web Development Tutorial for Beginners (29 videos)

This playlist is simply brilliant and the best place to learn web development that I’ve ever found. While I’m including my full journey for completeness, I’d recommend this playlist as your core material. It includes HTML, CSS, Bootstrap, FTP, Javascript, Github, JQuery, Live Reload, Grunt, and a bunch more.

7. Javascript Tutorial For Beginners (10–12 videos since some in the playlist above)

At this point, I was addicted. Even at 2x speed, the last playlist was pretty gruelling, but I felt very motivated to jump straight into more Javascript. This playlist includes traversing the DOM and modular Javascript concepts.

8. What is ‘This’ in Javascript (4 video)

Once the Javascript tutorial started getting into modular concepts, I realised I didn’t really understand the ‘this’ concept. So I searched around for explanations and these are the videos I used to grasp this slippery concept.

9. Front-end Workflow (12 videos)

At this point, I started to realise that there were tools that could amplify productivity. My previous experience with HTML and CSS was painfully clunky and tedious, so I was extremely happy to learn about this up-front. I definitely plan to use Jade or Emmet, and SASS from Day One.

10. Using Chrome Developer Tools (6 videos)

Many of the videos use the Chrome Developer Console to debug their code. I figured I should learn more about this, and these videos were good enough to get the basics, and reinforce other concepts like GET and POST requests.

11. CSS Flexbox Essentials (2 videos)

I had lunch with the CTO of one of my previous startups, who gave me some stellar advice. One thing I wrote down was ‘learn Flexbox’ and I’m very, very glad I did. It seems like a really intuitive way to deal with spacing and stretching elements. There is a follow-on video to this, which I watched as well.

I have to say that I’m also a big fan of the DevTips channel, who produced this video. They’ve influenced a lot of the workflow and practical techniques I’m using on my first project.

12. Front-end Example Projects (9 videos)

This is a compilation of walkthroughs of creating real sites, step-by-step. Having been through all the basic and intermediate concepts, they’ve been a great way to consolidate the ideas and reveal a professional workflow model. And the workflow is the key. As a newby, I’m constantly thinking about whether I’m approaching something in the right way. These videos give you a starting point.

Videos I haven’t included here

There are a couple of dozen videos that I’ve omitted, since I didn’t complete them or they weren’t any good. I also watched 10 or so other videos on the learnCode.academy YouTube channel going over the basics of Node.js, Angular.js, React.js, Vagrant and Docker, but I have little recall of them now and I’ve decided against using any Javascript frameworks in my first projects.

In total, I’ve watched over 125 coding videos in 48 hours and I do feel like Neo in The Matrix, when he learns martial arts in five minutes. But I’m so glad that I went broad at the start.

Next Steps

Now it’s time to get stuck into building some actual web pages. I have a tough target which is spurring me on. So enough of Medium and back to Sublime Text.

This article was originally published in The Founder Coach. Sign up here to receive my latest practical articles and how-to guides for founders, investors and startups.

About the author

I’m Dave and I run CEO coaching programs for Series A+ tech founders. Over the last 10 years, I’ve co-founded three VC-backed tech companies, invested in dozens of early-stage startups as a VC and Angel investor, and mentored hundreds of startups as a Lead Mentor for Google. For information about CEO coaching and communications courses, visit Dave-Bailey.com.