How do you get the most out of tutorials, courses, and other coding resources?

As someone who teaches in tech, I am always interested in learning ways that educational material can be improved. Part of that is understanding how people are currently using the material at their disposal. So let's talk about how you are using your coding courses, tutorials, blog posts, and everything else out there.

Sidenote: I have written about this a little more here, but I'm positive I am missing all sorts of things others are doing so I'm creating this #discuss post to hear what is working for you!

Here are some ideas to get the conversation starts:

How do you practice what you are learning?

Do you just code along with the tutorial?

Do you create your own app afterwards?

Do you do the entire tutorial first, then create an app, or build an app that is different from the tutorial using it as a guide?

How often do you reference the same resource?

I am possibly at an odd extreme here; not only will I reference some blog posts and tutorials more than once, but I'll even find myself referencing articles that I wrote because I forget things after not using them long enough.

How often do you find yourself reusing resources?

Do you bookmark the great ones? How do you organize your collection of tutorials?

What courses or tutorials do something awesome that allows you to learn more easily?

For instance, a really small detail in the React tutorials is the highlights on changed lines: https://reactjs.org/tutorial/tutorial.html#passing-data-through-props

It is subtle, but goes a long way in making it clearer what changed.

Or another awesome idea is having a mentor. Sites like Exercism.io do this, but it is incredibly hard to scale.

Everything from themed courses (eg Rails for Zombies) or learning through a game - I want to hear what has made your learning experience better and how.

How do you learn to go beyond the tutorial?

One of the biggest complaints against tutorials and courses that hold your hand is that you aren't "learning to code on your own." How do you escape this position and learn to go beyond what is taught in a tutorial?

Do you add new features to whatever you build in the tutorial?

Do you try implementing the same feature using different libraries or approaches?

Comments

[Benjamin Faught]

Hi Jon,

I find myself trying to appy all of the methods you have described. An additional thing I'm doing now to solidify what I'm learning is to create my own comment-quizzes and then do those quizzes a couple of times a week.

for example, here is a comment-quiz about JS fundamentals

// I created this quiz after watching... 'Javascript Language Fundamentals' section of Brad Traversy's Modern Javascript Udemy course

// Variables **********************************************************************

// name 3 keywords for initializing and declaring a variable?

// which 2 JS variable keywords are block scoped?

// declare a variable but don't initialize a value.

// assign the initialized variable a value.

// which type of JS variable must be both declared and initialized at the same time?

// JS variables can contain what?

// JS variables connot start with what?

// Multi-word-vars. Give an example of Comel case, Underscore, and Pascal case.  which should you in JS?

// when using const in JS, are mutatable data structures such as arrays and abjects, still mutatable?

// Data-Types ************************************************************************

// Name the six primitive data types in JS

// (true or false) Null is an intentional empty value?

// (true or false) Undefined is variable that has not been assigned a value?

// (true or false) arrays, Object Literals, Functions, and Dates are considered Reference Data Types?

// what can be used to find out a variable's type?

// Type conversion *******************************************************************

// Use the String function to convert a number, boolean, date, and an array to a string

// Use the toString method to convert a number to a string

// Use the Number function to convert a string-number, both booleans, and a word string to a number

// (true or false) NaN is a value that means not a number?

// (true or false) NaN is what is output when a value can't be converted to a number?

// besides the Number() function, show 2 more ways to convert to a number, using the functions parseInt() and parseFloat()

// (true or false) the toFixed method can be used to add decimal places to a number?

// Type coersion *******************************************************************

// (true or false) type coersion is when JS automatically does type conversion on a value. this can be unwanted, so you need to be alert to this possibility when coding?

// The Math Object *****************************************************************

// use the following methods on the Math object to generate results.

// Math.round()
// Math.ceil()
// Math.floor()
// Math.sqrt()
// Math.abs()
// Math.pow()
// Math.min()
// Math.max()
// Math.random()

// String methods & Concatenation ******************************************************

// give an example of string concatenation

// append 2 string variables using the += (addition assignment operator) which means x = x + y

// give an example of escaping characters

// use the following methods and properties on strings

// length
// concat()
// toUpperCase()
// toLowerCase()
// get character using []
// indexOf()
// lastIndexof()  (this comes from the end of the string)
// charAt()
// Get last character of a string by using charAt(string.length -1)
// substring(0, 4)
// slice(0, 4)  slice works with strings and arrays... with slice you can use negative numbers and it will begin at the back of the string or array
// split() split will turn the string into an array. you can split on any character including spaces.
// replace()
// includes()  check if the string or char exists inside of a string. returns true or false

// Template Literals *****************************************************************

// take the following data and input it as an unordered list in html (do this using string concatenation and template literals)

// name: John
// age: 30
// job: Web Developer
// city: Miami

// output an expression using template literals
// output an function using template literals
// output conditional or 'if statement' using template literals. You must use ternary operator syntax or wrap the 'if statement in a called anonymous function

// ex. ternary-operator: `${age > 30 ? 'Over 30' : 'Under 30'}

// ex. invoked anon function if-statement:
// const age = 30
// let html = `
//     ${
//       (age => {
//         if(age > 30) {
//           return 'Over 30'
//         } else {
//           return 'Under 30'
//         }
//       })()
//     }
//   `
// document.body.innerHTML = html

// Arrays and Array Methods *************************************************************

/* ~~~~~~~~~~~~ examples
ex. const numbers = [43,56,13,81,61]
ex. const numbers2 = new Array(22,45,33,17,12)
ex. numbers.length
ex. Array.isArray(numbers)
ex. numbers[3]
ex. numbers[2] = 100
ex numbers.indexOf(61)
ex. numbers.push(250)
ex. numbers.unshift(120)
ex. numbers.pop()
ex. numbers.shift()
ex. numbers.splice(1,1)
ex. numbers.reverse()
ex. numbers.concat(numbers2)
ex. fruit.sort()
ex. numbers.sort()
ex. numbers.sort(function (x, y){
  return x - y
})
ex. numbers.sort(function (x, y){
  return y - x
})
ex. finds the 1st number under 50
function under50(num) {
  return num < 50
}
numbers.find(under50)
ex. finds the 1st number over 50
function overr50(num) {
  return num > 50
}
numbers.find(over50)
~~~~~~~~~~~~~~~~~~~~~~~~~ */

// create an array using an array literal:

// create an array using an array constructor:

// Create some arrays with numbers, strings, mixed data types:

// Get array length:

// Check if is array:

// Get single value:

// Insert into array:

// Find index of value:

// ------MUTATING ARRAYS----------

// Add onto to end:

// Add onto the front:

// Take off from end:

// Take off from front:

// Splice values:

// Reverse:

// Concatenate array:

// ------Sorting arrays------

// string array, sorts by alpha:

// num array, sorts by first number:

// use the "compare function" for least to greatest:

// use the "compare function" for least to greatest:

// Find: find the 1st number under 50

// Find: find the 1st number over 50

// Object Literals *****************************************************************

// Create an object literal containing the following property-types: string, number, array, abject, function

// Get a specific value from each property using dot-notation. give an example of bracket-notation:

// Create a method on the object that uses the this keyword:

// Create an array of object literals:

// Dates and Times ******************************************************************

// If Statements and Comparison operators *******************************************

// Create example if, if/else, and else if statements with the following...
// Equal To: ==
// Not Equal To: !=
// Equal to value and Type: ===
// Not Equal to value and Type: !==
// Check to see if variable undefined: typeof varName !== 'undefined'
// Greater or Less than:

// Else if:

// Logical Operators:
// AND &&
// OR ||

// Shorthand:
// TERNARY OPERATOR: ? (if), : (else)

// if/else Without Braces:

// Switch Statements ******************************************************************

// Create a switch statement with several cases:

// Functions, function Declarations and function Expressions **************************

// Function Declarations example:

// function with parameters & multiple parameters:

// default values for parameters example:

// function expression example:

// named function expression:

// Immediately Invoked Function Expressions - IIFEs:

// IIFE with params:

// TRUE or False, in modules, IIFEs can provide private methods and properties, by keeping everything scoped to that module?

// Property Methods... Create a method within an object:

// Create a method on an object from outside the object:

// General Loops ************************************************************************

// create a general for loop:

// for loop with a condition inside that uses the continue keyword:

// for loop with a condition inside that uses the break keyword:

// create a while loop:

// true or false, a do-while loop will run it's first iteration regardless of the conditional?

// create a do while loop:

// use a for loop to iterate through an array: hint: array.length

// use forEach() to loop through an array:

// use forEach() to loop through an array, using the index & array keywork as a parameter in the callback:

// use map() to loop through an existing array of objects, and create an new array from one of the properties of that object:

// create a for in loop on an object literal (print out both the key and value):

I have found that first you figure out a good pattern for the way you learn best, and after that it comes down to 2 factors, DISCIPLINE and staying MOTIVATED.

Discipline and motivation are 2 things that sometimes go well for me, and other times I struggle. I personally bounce between "I'm doing well" and "I know I'm slacking", on a regular basis. I believe everyone does. They key is consistency, which is not so easy to maintain.

For inspiration, I will end this post with this quote:

[Puleta]

wow I will use your quiz if you don't mind 😊

[Benjamin Faught]

That's just fine. Here is the same quiz answered, so you can compare.
Github Gist

[Liz Lam]

One of the problems I've had was completing tutorial/courses. I started writing notes and posting them on Instagram which I wrote about in this blog:
dev.to/grepliz/a-review-of-javascr...

Writing notes have helped make the content stick better for me. I have frequently gone back to tutorials as a reference too.

I tend to want to code along with the tutorial but sometimes I just need a quick overview. I also like coding my own side/learning projects.

[Jon Calhoun]

Any ideas what makes completing hard? It sounds like you get a good start and notes are also a great idea, so I'm wondering if you lose interest or if you get to a point where you feel like you know enough to do what you set out to do so the tutorial gets the back seat.

[Liz Lam]

I think it's a little bit of both. I also think it was from starting too many things at once. So I kind of a have a new rule that (unless it's for work specifically), I will only do 1 tutorial series/course at a time.

[Jon Calhoun]

Makes sense, and probably a good rule to consider :)

[⧉ infominer]

Good question! One that to me is a full time concern.

When learning a new subject, i always start by collecting links.

Once i have a nice collection thats hard to sort through, then i put that link collection in a new github repository, like the beginning of an awesome list.

Then i turn those lists into pages that i continually reference and update.

A good matured example of this is my work around learning github pages, with a ton of related info, that is continually growing to become more pages:

infominer.id/web-work/github-pages...
infominer.id/web-work/github-pages...
infominer.id/web-work/static-site-...

So the more i learn the easier it is for me to remember and/or share with others.

As you said, there are always details that need to be brought to attn, and i can copy sections over w the link as necessary.

Its an easy, fairly passive, form of content creation that is just part of my workflow now.

[Jon Calhoun]

This is a nice way of making notes that are easy to reference in the future. Thanks for sharing!