I've created a completely new volume of demos and practice exercises for anyone looking to pick up the basics of programming in the context of JavaScript. In a field increasingly dominated by AI code generation, it is essential to have a firm grasp on the fundamentals in order to plan ahead, compose crystal-clear prompts, and recognize errors and poorly-formed code. The only way to build muscle is to exercise it, and learning programming is no different!
Important
You need to deepen your problem-solving skills and core understanding of syntax and code composition independently before you can integrate AI tools in your workflow and become a more efficient developer. My learning resources are designed to do just that!
- FORK it to your own GitHub account
- COPY the link from your new repo on GitHub
- CLONE it to your local machine. Example:
git clone https://github.com/YourUsername/javascript-fundamentals
If you want to update your forked repository from my parent repository when I add or change things to mine in the future, there are instructions below this section.
It will go much easier if you don't ever change the code in main. Instead, do the following:
- From
main, use the commandgit checkout -b new-branch-nameto create your own branch for practicing (example:functions-practice). - Practice as much as you'd like in your new branch, making commits as you add code.
- When you are ready to work on something different in another new branch, use the command
git checkout mainto return tomainand then you can repeat the two steps above.
Warning
I am still adding new content regularly, so you will likely have to sync your forked repo with mine in order to pull that content into your own.
Set the upstream link:
- On your local machine, make sure you are in the correct directory in the terminal.
- Use the command
git remote add upstream https://github.com/CodeWithCarrie/javascript-fundamentals
You now have a direct link to my original repo!
Use the command git remote -v to verify that you have linked to both origin (your forked repo) and upstream (my original repo)
Update your repo anytime I make changes in the future:
- On your local machine, make sure you are in the correct directory in the terminal.
- If you have any uncommitted changes, stage and commit them.
- Make sure you are in the branch you wish to update (e.g.
main) - Use the command
git fetch upstreamso your local repo has knowledge of changes I made in my repo - Use the command
git rebase upstream/mainto sync your repo
Check to see which branches you already have:
- You can use the command
git branchanytime to see what local branches you have - The command
git branch -rwill show you branches that exist on GitHub (after you've fetched that knowledge)
Each topic will have at least one set of starter code and solution code corresponding to a video on the @CodeWithCarrie YouTube channel, and most topics will include hands-on practice exercises as well. Use the links in the tables below for quick peeks at the code. You can fork your own copy of this repository for practice on your local machine. While individual links are available below for each video, you can also start with the full playlist.
Tip
I recommend working through the demos and exercises in the sequence shown below.
Go forth and learn!
This particular collection of coding exercises focuses solely on JavaScript (occasionally with the readline-sync dependency installed via npm). In my demo videos, I briefly demonstrate Git best practices to impress upon you the importance of making regular commits.
Note
Make sure you have npm and Node.js installed before continuing with any of the exercises below.
| Topics | Code | Videos | Length |
|---|---|---|---|
| Printing to the Console | printing-to-the-console | Demo | 6:29 |
| Declaring & Initializing Variables | declaring-variables | Demo | 6:49 |
| Assigning Data Types | data-types | Demo | 7:16 |
| Order of Code Execution | code-execution | Demo | 4:17 |
| Naming Variables | naming-variables | Demo | 4:03 |
| Data Type Conversion: Strings | data-type-conversion | Demo | 6:36 |
| Data Type Conversion: Numbers | data-type-conversion | Demo | 7:26 |
| Data Type Conversion: Booleans | data-type-conversion | Demo | 6:52 |
| Data Type Conversion: Type Coercion | data-type-conversion | Demo | 7:49 |
| Template Literals | template-literals | Demo | 7:37 |
| Constants | constants | Demo | 4:27 |
| Capturing User Input with readline-sync | user-input | Demo | 11:08 |
| TOTAL | 1:20:4 |
| Topics | Code | Videos | Length |
|---|---|---|---|
| Basic Boolean Expressions | basic-boolean-expressions | Demo | 6:32 |
| Compound Boolean Expressions | compound-boolean-expressions | Demo | 5:20 |
| Basic Conditional Statements | basic-conditionals | Demo | 11:11 |
| Nested Conditional Statements | nested-conditionals | Demo | 7:55 |
| Ternary Expressions | ternary-expressions | Demo | 5:19 |
| TOTAL | 36:17 |
| Topics | Code | Videos | Length |
|---|---|---|---|
| Debugging Syntax and Runtime Errors | syntax-errors | Demo | 6:48 |
| Debugging Logic Errors | logic-errors | Demo | 4:02 |
| Exception Handling: Try/Catch/Finally | exception-handling | Demo | 6:39 |
| TOTAL | 17:29 |
| Topics | Code | Videos | Length |
|---|---|---|---|
| String Length, Indexing, and Bracket Notation | length-indexing-notation | Demo | 5:34 |
| Common String Methods: Searching Strings | string-methods-search | Demo | 4:36 |
| Common String Methods: Transforming Strings | string-methods-transform | Demo | 4:11 |
| Common String Methods: Retrieving Substrings | string-methods-retrieve | Demo | 5:03 |
| Method Chaining | method-chaining | Demo | 4:14 |
| TOTAL | 23:38 |
| Topics | Code | Videos | Length |
|---|---|---|---|
| Introduction to Arrays | arrays-intro | Demo | 6:14 |
| Creating Arrays of n Length | creating-n-length | Demo | 4:52 |
| Array Length, Indexing, and Bracket Notation | length-indexing-notation | Demo | 4:31 |
| Common Array Methods: Adding & Removing Elements | array-methods-add-remove | Demo | 4:04 |
| Common Array Methods: Querying & Accessing Elements | array-methods-query-access | Demo | 3:51 |
| Common Array Methods: Combining & Extracting Elements | array-methods-combine-extract | Demo | 4:59 |
| Common Array Methods: Sorting & Reversing Elements | array-methods-sort-reverse | Demo | 2:56 |
| Converting Between Strings & Arrays | array-string-conversion | Demo | 5:46 |
| Multi-Dimensional Arrays | multi-dimensional-arrays | Demo | 6:01 |
| Destructuring Arrays | destructuring-arrays | Demo | 4:41 |
| TOTAL | 43:14 |
| Topics | Code | Videos | Length |
|---|---|---|---|
| For Loops | for-loops | Coming soon! | |
| For-Of Loops | for-of-loops | Coming soon! | |
| While Loops | while-loops | Coming soon! | |
| Do-While Loops | do-while-loops | Coming soon! | |
| Nested Loops | nested-loops | Coming soon! | |
| Problem-Solving with Loops | problem-solving-with-loops | Coming soon! | |
| TOTAL |
| Topics | Code | Videos | Length |
|---|---|---|---|
| Introduction to Functions | functions-intro | Demo | 6:08 |
| Function Input & Output | input-output | Demo | 10:04 |
| Variable Scope | variable-scope | Demo | 6:13 |
| Procedural Recursion | recursion-procedural | Demo | 9:50 |
| Reductive Recursion | recursion-reductive | Demo | 4:51 |
| Helper Functions | helper-functions | Demo | 7:53 |
| Interactive Programming with Functions | Coming soon! | Coming soon! | |
| TOTAL |
| Topics | Code | Videos | Length |
|---|---|---|---|
| Introduction to Objects | objects-intro | Demo | 5:42 |
| Accessing & Modifying Object Properties | accessing-modifying-properties | Demo | 6:21 |
| The Math Module & The Spread Operator | math-module | Demo | 7:24 |
| Object Methods & Context | object-methods | Demo | 8:07 |
| Complex Objects & Mutation | complex-objects | Demo | 8:31 |
| Looping Over Key/Value Pairs | looping-over-key-value-pairs | Coming soon! | |
| Looping Over Arrays of Objects | looping-over-arrays-of-objects | Coming soon! | |
| Destructuring Objects | destructuring-objects | Demo | 4:42 |
| TOTAL |
| Topics | Code | Videos | Length |
|---|---|---|---|
| Arrow Function Syntax | arrow-syntax | Demo | 6:42 |
| Anonymous Functions | anonymous-functions | Demo | 6:23 |
| Higher-Order Functions | higher-order-functions | Demo | 8:47 |
| Special Array Methods: Looping & Mapping | looping-mapping | Demo | 4:44 |
| Special Array Methods: Querying | querying | Demo | 4:42 |
| Special Array Methods: Reducing | reducing | Demo | 5:16 |
| Special Array Methods: Advanced Sorting | advanced-sorting | Demo | 5:40 |
| TOTAL | 40:34 |
Front End Engineer and Lead Instructor at LaunchCode