How I Learned Front-end

William Iehl
Dec 23, 2017 · 2 min read

Some people have asked me what it would take to get to my level in front end. I am by no mean an expert or even senior. There won’t be any stories here, just a list of the relevant steps it took me to get to the level I am now at in a curriculum fashion. All of these resources happen to be free (except for 2 books if you decide to take the red pill). If you are a complete beginner and you are consistent, count around 6 months part time and 3 month full time to go through all this.

Tools to learn and use along the way

  1. HTML, CSS and JS documentation: https://mzl.la/18PfQp3
  2. Sass: http://bit.ly/OqI5Rm
  3. BEM: http://bit.ly/2mhJrnO
  4. Github: http://bit.ly/2l3RnVA
  5. Gulp: http://bit.ly/2gI3aHL

Start with HTML and CSS

  1. Learn the basics: http://bit.ly/2DCaOgN
  2. Review it from another source: http://bit.ly/1WjwYpl
  3. Get a deeper understanding: http://bit.ly/2zn6heN

At this stage what you need is practice. Do a simple website for a friend or charity or make yourself the best portfolio you can. I made this for a friend (just the front end): http://bit.ly/2l3fPXh

Next step is JavaScript

  1. Start with this: http://bit.ly/1nWGbTp
  2. Learn some jQuery: http://bit.ly/1KdFiBy
  3. Review everything and more (skip intermediate and advanced algorithm, skip advanced projects and do half of the intermediate projects): http://bit.ly/2v55qyu
  4. Better practice: http://bit.ly/2iabdRj
  5. Take the Red pill: http://amzn.to/2pojDrq
  6. Go deeper into the rabbit hole: http://amzn.to/2D2IAdY
  7. Almost there: http://bit.ly/2kOeIta
  8. To recap: http://bit.ly/2DF39hU
  9. Test yourself: http://bit.ly/2kL4yvt

Practice it

Anything that is relevant practice will do. Build at least two real project before going further (hackathons are the best for that). Here are a few ideas from my curriculum.

  1. Finish the front end track: http://bit.ly/2v55qyu
  2. 30 days of vanilla JS: http://bit.ly/2hs97Xn
  3. Go to Hackathons every weekends

Learn a framework

  1. Learn React: http://bit.ly/2pi7Smg
  2. And React router: http://bit.ly/2l1tYnZ
  3. Read the Quick Start documentation (all of it): http://bit.ly/2zlyS4j
  4. Read create-react-app documentation (as needed): http://bit.ly/2pmBrTY
  5. Build your portfolio (make it the best you can), here is mine: http://bit.ly/2DCWhl5
  6. Read the Advanced guide documentation (all of it): http://bit.ly/2kMIa4C

Conclusion

And that’s it for now. That is where I am at as of December 2017. Hope this is helpful.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade