Frontend programming project/lesson for backend programmer

August 4, 2019 4:55 AM

Seeking a lesson/project/tutorial where I can learn frontend programming while/via making something. Not too picky about language as long as it's not ridiculously outdated.

My work is backend programming, but I want to stop being totally at sea when it comes to the frontend side of things.

Since I already do plenty of programming I don't need explanations of basic concepts (like functions, objects, etc), beyond learning language-specific syntax and quirks. I probably do need explanations of basic concepts like... rendering? I don't know, whatever basic frontend concepts aren't universal to programming in general.

I already know html and very, very basic css. I have read a lot of eloquent javascript without actually doing the exercises (I know, I know).

At this point I want to actually get my hands dirty making something. Ideally something at least mildly useful, like a personal website? Is there any online course/tutorial that would walk me through that?

posted by Cozybee to Computers & Internet (3 answers total)

The question isn't is there, but which one? There are gazillions of tutorials, it's the quality that will be variable.

You'll want to get familiar with Javascript. Between nodejs and the dozens of front end frameworks, it's taken over the world (sigh...) As a backend-programmer (what language(s)?) i'm assuming you're used to object oriented design patterns. Javascript's prototypal inheritance model will probably trip you up a bit at first if you're not used to it.

For front-end specific work I'd personally find a good React tutorial - I'll recommend Level Up Tutorials and Wes Bos's tutorials because I like the podcast these two guys do (Syntax) but there are a ton out there and I haven't kept up with what's new over the last few months. Wes also has a build 30 things in 30 days tutorial you might like: JavaScript30.com
posted by cgg at 8:51 AM on August 4, 2019 [1 favorite]

Pull out your banking data with Yodlee and make a budget visualization app.
posted by oceanjesse at 8:51 AM on August 4, 2019

I think it would help if there was a clearer idea what you wanted to learn. You could spend a lot of time getting to grips with modern HTML and CSS (and Sass), including responsive layouts, browser compatibility, accessibility, upcoming new features (e.g. grids)... without touching any JavaScript. At the other end of the spectrum is learning how to use something like React which is a different prospect entirely.

In between would be learning more HTML and CSS and enough JavaScript to (progressively) add features that a particular project might require, without touching big JS frameworks.

Re your suggestion of making a personal website, it might be worth looking at using a static site generator (like Hugo, but there are many) so that you don’t get tempted into fiddling with backend stuff, decide what you’d like to have on your site, and... start trying to make it.

For other projects, you could look at free APIs (such as this list) for ideas - when I’ve taught students, pulling stuff in from elsewhere makes learning JS more interesting. E.g. Use DarkSky’s weather API and Google Maps’ address-to-location API to generate a weather forecast for the user’s location.
posted by fabius at 10:48 AM on August 4, 2019 [3 favorites]