I've wanted to learn to code web apps.
Why? Always
start with why!
Well, mainly to be able to create
interactive Explainers. But also having been intrigued by companies like Basecamp who through their apps are able to solve meaningful problems and have positive impact on people's lives, inside of the companies or out.
The best way to learn, is to code an app,
they say. Or better a few.
So you'd like to learn to code for the web too, do I hear you ask? And you are a beginner?
Right, well, it takes time and effort, but it is definitely doable. The hardest thing is to start, set a direction and define a clear goal to reach.
Let me tell you what I did, and you may take some inspiration from that. I have to say I didn't start from a complete scratch this time - I've tried to learn to code a couple of times before. But I've always considered myself to be a beginner, so I believe you can do these courses even without having any prior knowledge.
- I got my first intro into coding in high school, learning Pascal and HTML with CSS (that was around 2009). No meaningful stuff worth mentioning came out of that, though.
- But I kept dabbling into the area, so at the end of university I did some frontend stuff for an ERP system and learned a bit of C# that was used on the backend. I still didn't feel I was savvy enough to create a whole app, so I decided to change that.
These are the articles I read, videos I watched and courses I took online:
- CSS course. If you don't feel up to it, read first tutorials on mdn and do a few exercises.
- overview "dinosaurs" articles by Peter Jang are awesome
- Jen Simmons' CSS videos and her site are great as well
- Comparing frontend approaches article series by Peter Jang shows you frontend libraries and frameworks
- Javascript "dictionary"
- Javascript comprehensive course on Udemy by Jonas Schmedtmann takes you pretty far. Jonas explains theory there, which really helps, believe it or not.
- and then you are ready to take Fullstack Open course by people from the Department of Computer Science at the University of Helsinki. It is very comprehensive, explains concepts nicely, builds your knowledge step by step. It can take a lot of time to work on it, but it pays off tremendously. You will learn React version with hooks, Axios, Node.js, Express, MongoDB, Mongoose, pushing to Heroku and MongoDB cloud called Atlas, Redux, CSS with React, Typescript, testing with Jest and Cypress, GraphQL, CI / CD development pipeline, React Native for mobile apps, Docker, Redis, PostgreSQL and more. Pretty hefty, don't you think?
- learning modern static site generator (JAM stack) like next.js or gatsby makes a good investment. (this site uses next.js, which is a hybrid React framework)
- if you are into svg, check out this course by Sarah Drasner on frontendmasters. I picked up anime.js instead of GreenSock.
- d3 course by Shirley Wu introduces the essential pieces to take up the library
- here Shirley explaines the design process behind coming up with a vizualization
- learn how to integrate React and d3 here
- get creative and learn canvas, webGL and threeJS by Matt DesLauriers
- and if you want to seriously develop and design great functioning apps, watch Ryan Singer's videos, read his articles and book Shape Up
Other helpful and inspiring resources:
One thing to keep in mind while learning - don't focus on the current technologies. Sure, you have to choose tools to do a job for you, but they are just tools, that are changing rapidly in today's environment. Rather understand the principles behind them, in which context they are used, where not to use a particular tool and why, what are the alternatives. Maggie Appleton summarizes it well here.
And then practice. Practice away! A bit every day. Doing and studying, sword and book, the old masters of kungfu said.
Lastly, what do you wanna do with your skills? To which purpose do you want to direct them? Why did you set out on this learning journey in the first place? What's the point of all that work? Don't forget the meaning of it all...