The first step towards becoming a code master is to become JavaScript.
- Memorize the basic language features in JS.
- Step through simple scripts exactly like the computer does.
Neither of these skills are as easy as the sound, and both of them are the foundation for everything else to come. Your end goal is to write applications large and small that provide practical solutions to real-world problems, but this is for later. You won't be able to do this until you've mastered your primary tool - the JavaScript language.
No matter how smart you are, or how good you are at what you did before learning to code, be prepared to struggle. This is totally normal. Being good at programming (or learning it quickly) are not indicators of your potential as a programmer.
Don't be discouraged! If you master these fundamentals now, you will be prepared to learn the principles of software development and real-world problem solving.
So have some patience and study hard! Dig in now, and keep at it every day. The more you take it slowly now, the faster you'll learn later.
Week 1
- Fundamental JS syntax & language features
- js script life cycle
- Using online code study & visualization tools
- Stepping through code
- connecting JS to HTML
- Pull Requests
- planning & structuring projects 1
- inspecting & debugging
Week 2
- reference types (arrays & objects)
- more about functions
- planning & structuring projects 2
- inspecting & debugging
Week 3
- deeper into operators and primitive types
- test cases
- planning & structuring projects 3
- event listeners
- inspecting & debugging
- Set aside a chapter in your notes for JavaScript language features:
- You'll want to build your own vocabulary list to keep track of new words as you come across them. One of the most common difficulties in the early stages of programming is just remembering all of the language features and vocab you come across!
- Having a complete list of everything you know, written in your own words, will be invaluable as you try to start to solve programming challenges on your own.
- Start building a collection of clear code samples & sketches that have helped you understand key concepts, we recommend trying to store them in a directory of Markdown files.
- Familiarize yourself with these JS study tools:
- PythonTutor - learn how JS carries out your instructions behind the scenes
- Parsonizer - turn any snippet into a study exercise
- chrome inspector - paste and run JS snippets from any browser tab
- linter - get helpful tips about bad habits or potential errors
- spot & shuffle - quiz yourself on JS key words and syntax
- flow vizualization - automatically visualize program logic with flow charts
- Practice whatever keeps you motivated. If you find one tutorial too easy, hard, or boring, move on! What's important is that you can predict how JS will execute simple programs, not which tutorials you complete.
Over the course of JS 1 you will complete the first phase of your cross-module project. You'll make a simple website that illustrates the connection between what a user sees, what happens "behind the scenes", and how to plan a meaningful (but super simple) user experience.
Below are some recommended resources for learning JavaScript. Take a look at each one and see what works best for you. If you find another one you like better, send it our way and we'll put it up!
What is JS?
Great online Tutorials:
- Philip Guo video series - highly recommended recommended
- FreeCodeCamp & video series (you will cover most of this in your homeworks)
- Headfirst JavaScript: PDF, GitHub - very thorough and hand-held introduction to using JS in simple websites. You will learn from this even if nothing else works.
- JavaScript for Cats - Fun website with good examples to study.
- javascript, the weird parts - advanceder video
General JS References
- Javascript.info. General Reference & tutorial for JavaScript, DOM
- MDN - your go-to reference for language features
- HYF JS fundamentals, and a quiz to see how you're doing
- Beau Teaches JS - youtube series
- air bnb style guide
- HYF git lectures
- learn git branching
- hyf lectures
- git & github - instructions for portfolio
- pull request exercise
- html
- quizzes: after hours, w3shools
- css
- quizzes: after hours, w3schools
- behind the scenes
