Additional WebDev Resources

I can haz MOAR WebDev pls?
Tags:
Categories:

  3 minute read  

FunWebDev 3rd ed.

Some of the book’s linked resources may be found also on github: https://github.com/funwebdev-3rd-ed/projects-start

HTML

  1. Dr. Kirkpatrick has some nifty short demos/exercises
    1. try the "select module" and subsequently "select exercise" buttons
  2. MDN's Learn web development 🔥
  3. Codecademy's HTML: Codecademy has some really good resources, many of the intro web courses are $FR.EE 🤑

CSS

  1. Dr. Kirkpatrick has some nifty short demos/exercises
    1. try the "select module" and subsequently "select exercise" buttons
  2. Codecademy's CSS
  3. specificity
    1. CSS Tricks on Specificity
    2. MDN: Specificity
    3. ⚔️ Specificity Wars
    4. Specificity Calculator
  4. Practice your CSS Selectors with CSS Diner
  5. Practice Flexbox with Flexbox Froggy
  6. Practice justify vs align in flexbox with Flexercise the Stevens
    1. y'allllll this thing needs work, wasn't great when I ripped off Dr. Johnson in the first place 😅, and hasn't aged gracefully. pull requests welcome 😆
  7. CSS Tricks's nice visual guide to flexbox
  8. CSS Tricks's nice visual guide to CSS Grid

Javascript

  1. Dr. Kirkpatrick has some nifty short demos/exercises
    1. try the "select module" and subsequently "select exercise" buttons
  2. Codecademy back at it again with Javascript
  3. CodingBatJS
  4. JS Challenger

Design and Style

  1. Color Palettes

Accessibility (“a11y”)

  1. You'll never guess who I link first!
  2. Color Contrast Checker
    1. Checking that text color has sufficient contrast from the background color
    2. Checking that (hyper)link ("anchor") color has sufficient contrast from non-link text color

More

  1. Dr. Kirkpatrick has some nifty short demos/exercises
    1. try the "select module" and subsequently "select exercise" buttons
  2. What happens when... - an attempt to answer the age-old interview question What happens when you type google.com into your browser's address box and press enter?
  3. Dr. Chris Johnson may be annoyed with me, but the first 1/3  ("Content and Style") of this short "e-book" he put together is also helpful for our course
  4. https://jsbin.com/ can be useful for sharing short samples/examples to test your understanding or to ask for help figuring out a bug
  5. "MPJ" (Mattias Peter Johansson) one of very few "celebrities" I like. 🚨Head's up: he makes use of expletives on occasion
    1. FunFunFunction (his youtube channel account's ) content is all around great!
    2. Specifically, for the most precisely relevant content to topics in our class, I can recommend:
      1. var, let, const
      2. arrow functions
      3. destructuring
      4. Object creation in JS (list)
        1. bind and this shows: some of the strangeness of scope in js (By default this is bound to the scope where a function is called, not where it was defined 😱.)
        2. Examples of bind and this: shows more of the same ^
        3. the rest of the object creation list is sort of beyond scope for our course
      5. Functional Programming in JS (list)
        1. videos 1-4 might be useful reviews of things related to the built-in array functions like map and reduce.
        2. video 8 on Promises will be relevant to the topics we will cover on asynchronous execution and interacting with (3rd-party) APIs
        3. the 9th video (labeled "Functors - FunFunFunction #10") onward in this list are beyond the scope of our course