☁ Learning resources for HTML, CSS, and Javascript

I have been chatting with @meaganvigus a little about programming stuff and we made a short list of resources for learning to program web applications. I thought I’d share them here too, if you have any other recommendations please feel free.

(If you’d like to start a topic about non-web-native programming such as Python, R, etc, please feel free to do so in another topic.)

General

The Mozilla Developer Network, or MDN as it is usually called, is the best resource for up-to-date information on web standards. The link below is a front page for total beginners:

There is a lot there; don’t let it overwhelm you. My suggestion if you want to learn about web development for linguistics from scratch is to start with HTML, then learn a little CSS, and then finally try out a little Javascript. (I’m also working on sort of “curriculum” which will be hosted here at some point. Hours in the day, etc.)

FreeCodeCamp is a really great resource for beginners, because it has online exercises that you can work through, graded levels and topics, and it’s totally free.

This site is really about more than just CSS, although that’s the focus.

In particular, try this newcomer-friendly guide:

HTML

Again, MDN is a good place to start here:

CSS

CSS is a language for taking structured documents in HTML and defining how they should be presented in devices It’s kind of amazing: you can make the same document appear differently in a phone or on a desktop, for instance. Recent developments in CSS include “layout modules” called “Flexbox” and “Grid”. They are AMAZING and so much easier than the old ways, so be sure to poke around and see what you can find out about those.

CSS Grid

This is a free video course on CSS Grid, a great place to get into that once you know the basics of CSS:

MDN again:

These two are games for learning two important (and new-ish) CSS systems:

CSS Flexbox

CSS Grid

Javascript

One tricky thing about learning Javascript (the programming language built into web browsers) is that there is so MUCH documentation on it. And the language has changed considerably over the years. Quite frankly, it used to be a horrible language, but it’s becoming quite nice as it has been improved. The challenge for a newcomer is to try to filter through the old, out-of-date information that comes up when you search from the new, up-to-date information that you really want. There’s no simple answer here, but here are a few resources that are hopefully some combination of up-to-date and approachable:

Another “almanac” style site, with a lot of examples.

If you like more of a narrative, book-style introduction, this book is fantastic.
It’s free online and you can try out the examples as your read. The examples are interesting. The print version of the book is really nice too.

https://eloquentjavascript.net/

Not cheap ($69.50, gulp), but recommended: this video course from Wes Bos:

He does video courses and steps you through things in detail. There is also a community around his videos; I haven’t used those myself but my understanding is that they are very active and responsive.

Okay, that’s a start. I may update this topic in the future if I can think of anything else.

There’s a whole discussion to be had about why linguists should bother with this stuff at all, I hope we can get into that too. My own opinion is that the web platform is our best technological bet as a field, but without some familiarity with what the “web platform” is, it’s hard to appreciate what it can do for us. I hope we can keep talking about this! Please give it a try! It’s fun!

(Also, knowing web development is a very employable skill.)

3 Likes

This is awesome you guys. Thank you so much for compiling and sharing these very valuable resources.

1 Like

You’re welcome Hilaria!