Skip to content

CodePlusPixel/javascript-fundamentals

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

143 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Code with Carrie logo

JavaScript Fundamentals: Logic & Syntax

Code examples (with demo videos!) and extra practice exercises for new learners

badge linking to CodeWithCarrie's website JavaScript npm


Welcome!

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!


HOW TO FORK AND CLONE

CREATE YOUR OWN COPY

  1. FORK it to your own GitHub account
  2. COPY the link from your new repo on GitHub
  3. CLONE it to your local machine. Example:

git clone https://github.com/YourUsername/javascript-fundamentals

PRACTICE IN YOUR OWN BRANCHES

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:

  1. From main, use the command git checkout -b new-branch-name to create your own branch for practicing (example: functions-practice).
  2. Practice as much as you'd like in your new branch, making commits as you add code.
  3. When you are ready to work on something different in another new branch, use the command git checkout main to return to main and then you can repeat the two steps above.

HOW TO UPDATE YOUR REPO AFTER I'VE UPDATED MINE

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:

  1. On your local machine, make sure you are in the correct directory in the terminal.
  2. 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:

  1. On your local machine, make sure you are in the correct directory in the terminal.
  2. If you have any uncommitted changes, stage and commit them.
  3. Make sure you are in the branch you wish to update (e.g. main)
  4. Use the command git fetch upstream so your local repo has knowledge of changes I made in my repo
  5. Use the command git rebase upstream/main to sync your repo

Check to see which branches you already have:

  1. You can use the command git branch anytime to see what local branches you have
  2. The command git branch -r will show you branches that exist on GitHub (after you've fetched that knowledge)

DEMOS & PRACTICE EXERCISES

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!


SETUP

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.


1 - Basic Syntax

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

2 - Conditionals

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

3 - Errors & Debugging

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

4 - Strings

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

5 - Arrays

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

6 - Loops

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

7 - Function Basics

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

8 - Objects

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

9 - More on Functions

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

ABOUT THE AUTHOR

Caroline "Carrie" Jones

Front End Engineer and Lead Instructor at LaunchCode

@Carolista - CodeWithCarrie.com - LinkedIn

About

Examples and exercises for Code with Carrie tutorial collection: JavaScript Fundamentals

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • JavaScript 100.0%