Skip to main content

Class 3, Preparation: Practice Learning Vue.js Independently

In class, we discussed strategies for learning new technology on your own, independently:

Tutorials

Tutorials feel very useful, but limit information retention and transferability. You may be able to follow along with a tutorial, but you'll likely struggle to apply what you learned in a new context.

That being said, they can be a good first step to get your "toes wet" when trying something for the first time. After that, you're better off using the strategies below.

Examples

Because humans are natural pattern matchers, examples can be a great way to learn new technology.

However, they can be limiting if you only look or read them without actively experimenting with them. You may be able to recognize patterns in the examples you see, but you'll likely struggle to apply what you learned in a new context.

A proven (and research-backed) way to learn from examples is to "complete them" by removing key parts and trying to fill them in yourself. (This is known in the educational literature as "worked examples" and "completion problems" and they are one of the most effective learning techniques known.)

Documentation

The reference documentation for a technology is often the most complete and up-to-date source of information. But simply reading it is unlikely to help you learn it. As with the examples, you'll need to find a way to practice using the information you find in the documentation.

Using the documentation in combination with the other strategies below is often an effective way to learn it independently.

Ask ChatGPT

Interactive tutoring systems, like ChatGPT, are a promising way to learn. However, the technology comes with many of the same limitations as tutorials. Simply asking ChatGPT to "teach you" a new technology is unlikely to help you learn it because you'll likely just be passively receiving information. This often feels very productive, but it is unlikely to lead to long-term learning. This is known as the "illusion of mastery" in the educational literature. The idea being that you'll often feel that you "understand" what interactive tutor is telling you, but when you try to apply it yourself later, you'll struggle.

That being said, ChatGPT can be a great tool to help you learn if you use it to find ways to practice using the technology. A good way to do this is to ask ChatGPT to generate small coding challenges or projects that you can work on. This combines the best of the strategies above: tutorials, examples, and documentation! Just remember that you have to go beyond simply reading its responses and thinking that you understand something means that you can also do it yourself.

Exploration & Experimentation

Humans naturally learn by trying something and failing. Trying and failing, and then trying again is how all learning works. This is known as "exploratory learning" in the educational literature, and it is one of the most effective ways to learn new technology.

Use the approaches above, like tutorials, examples, documentation, and ChatGPT to get started, but then dive in and start playing around with the technology. Try things. See what works. See what doesn't. Learn from your failures and iterate.

You likely feel that this is inefficient or not productive. Again, this is the "illusion of mastery". We often think that when something feels easy or productive, we are learning well. But the opposite is often true. When something feels hard, frustrating, or inefficient, that is often when the most learning is happening.

Practice Learning Vue.js Independently​

Using a combination of some or all of the strategies above, explore Vue.js on your own and use your Homework 1 repository to modify the existing code in any way that helps you learn Vue.js.

For example, you may try and create a new component, respond to an event, pass data into a component, emit an event from a component, etc.

For completion credit, you need to make a good faith effort to explore Vue.js by modifying the code in your Homework 1 repository. I am not asking you to code an entire app or even a working prototype. Simply modify the existing code in support of learning Vue.js on your independently. (Trivial non-Vue.js modifications, like changing CSS styling, or HTML content, or only changing one or two lines of JavaScript is likely insufficient for demonstrating a "good faith effort".)

Vue.js Resources:

Submission​

Stage, commit, and push your changes to your Homework 1 repository in GitHub.

Then complete the submission form for "prep3".

If you aren't sure how to do this, refer back to the Homework 1 instructions for submission.

note

So long as you have previously submitted your Homework 1, your changes will not in any way affect your grade for Homework 1.

Grading​

Completion

Last updated on