How I Learned Front-end Web Development For Free In 5 Days
Last week, I set myself the challenge to become an intermediate Front-end developer in just 5 days. I’ve just hit the half way mark — and this is the first in a two-part series to document how I’ve done. My hope is that this experiment might inspire more people to learn to code and become an example of just how fast it can be done.
THE BACKGROUND
This is not my first learning experiment. 10 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.
Along the way, I’ve learned effective learning strategies, many of which contradict the widely-agreed model of how to learn something new, some even spurring debate at Ivy League universities.
I’m currently working as EIR to a London-based VC called Downing Ventures, while building some products on the side as Product and Design Lead. I’m able to devote nearly all my time on this experiment for the entire week.
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
10 years ago, I learned French to conversational fluency in 17 days using a programme combining many hacks and quirky techniques. Could analogous techniques be applied to learn front-end development? So far, it looks like they can.
My language learning techniques included listening to Michel Thomas mp3s (audio/visual instruction), staying in a French speaking country (immersion), reading children’s books and listening to French music (benchmarking), writing essays on myself and learning filler works (confidence building hacks), and writing out verb tables (memorisation).
Each has an analogue in front-end coding:
- Tutorial videos on Youtube
- Getting involved on a development sprint (immersion)
- Speaking to other developers for feedback and workflow advice
- In-depth benchmarking of my favourite sites with the dev console
- CSS elements cheat sheet memorisation
So this has been the blueprint for my learning strategies.
WHAT I’VE DONE SO FAR
I’m 48hours in and here is what’s done.
- I committed to the front end stories in the sprint of one of my side projects. Specially, I’m building two pages, a landing page and a more detailed product page.
- Right at the start, I started a basic project (just two text files with HTML and CSS) early on 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 in context.
- I’ve set up and been to 3 lunches / dinners with experienced coders where we’ve talked about workflow.
- 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 are crazy enough to follow in my footsteps, you can use the same materials.
YOUTUBE VIDEOS
While I didn’t necessarily intent to spend so much time, and go so wide and deep with tutorial videos, 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.
This stands in contrast to what most people recommend — learning the bare essentials and getting stuck in. If you’re the kind of person that learns slowly, that might be best. However, if you’re the person that gets concepts really quickly then I feel you’re better off going deep faster. Plus, it’s only been two days of Youtube… not that much in context.
To be able to consume such a huge volume of material in so little time I’ve had to watch all videos at 2X speed. I’m very used to this as a podcast / audiobook addict and I massively recommend including this in your learning routine since it doubles your productivity. You can start at 1.25 or 1.5X to start with if 2X is too fast.
Also, I write out 2–3 lines of notes on the key concepts I learn from each video. I doubt I’ll read any of what I’ve written again, which is fine as I do this mainly for consolidation and memory.
So without further ado, here are all the videos I’ve watched in the last 48 hours. (Brace yourself.)
- 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 posset that when people say they want to program, they really mean they want to learn web development. This was exactly what happened to me.
That said, this playlist ended up giving me a much better idea 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 and even better playlist is coming up shortly. No harm in repeating though.
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. I put Bootstrap in perspective as just one option (albeit the most popular option) for building Front-end fast, but there are alternatives.
4. Derek Banas tutorials (3 videos)
Searching for more Bootstrap instruction and I stumbled on Derek Banal’s videos. I instantly loved his style — very intense examples one after the after 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 start, this is really 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 highly recommended as 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 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 multiple explanations. Here 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 really amplified productivity. My previous 1–2 experience with HTML and CSS was painfully clunky and tedious, so I’m 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 were using the Chrome Developer Console to debug their code. I figured I should learn more about this — these videos were good enough to get the basics, and reenforced 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 note 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 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 that 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 walk-throughs 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. The workflow is the key. As a newby, I’m constantly thinking — is this the right way to approach it. This videos give you a starting point. Now I’m ready to start with confidence.
Videos I haven’t included here
There are a coupon of dozen video I omitted since I didn’t complete them or they weren’t any good. I also watched 10 or so other ones 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 this 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 5 minutes. But I’m really glad that I went broad at the start.