JavaScript Webpage Workout - Introduction

It is very common to finish a beginning JavaScript course and still feel like you’re not quite sure how all the concepts and syntax fit into the whole creative coding experience.

Loops—and there are several of them (the for loop, the for-of loop, the for-in loop, the while loop, plus iterators like forEach, map, filter, etc.)—are very powerful tools.

for (let i = 0; i <= 100; i++) {	
    console.log(i);
}

They facilitate websites all the time but how exactly will I use them to display or change a webpage?

Arrays and Objects make organizational sense!

const cities = [“Rio de Janeiro”, “New Delhi”, “Abu Dhabi”, “Berlin”, “Taipei”];

const person = {
  firstName: "Mahatma",
  lastName: "Gandhi",
  born: 1869,
  died: 1948,
  nationality: "Indian"
};

But, again, without seeing how they fit within the context of making a webpage or game or a useful online utility, they just remain as coding concepts stuck in a book, classroom, or an exercise disconnected from the real world where websites make use of them all the time. But how exactly?

You might be thinking, “They say JavaScript is the programming language of the internet but I haven’t experienced it yet! I’m drowning in exercises to remember syntax and console logging everything!”

Enter this blog. I clearly remember feeling the power of JavaScript when I learned to change and control a webpage (not with CSS) with code! You know, the kind of code that programmers in hoodies with dark glasses use. The power (and joy!) of being able to write some code then watch the screen change is the same feeling I want you to have. I want you to be able to realize what you imagine on a webpage or what your clients want. If somebody says, I want you to make a feature article about New York city and I want to see graphics changing while I scroll through the article. If I hover over this paragraph, I want a modal window to pop-open and give the reader more information. When the user clicks this image, I want this audio clip to play.

This blog will focus on that goal. If this is what you want with JavaScript, then proceed with confidence and get ready for lots of practice.

LEVEL OF THIS COURSE

• These lessons assume you are NOT a beginner with web development and programming.
• It will be more comfortable learning JavaScript if you are not struggling with the basics of HTML and CSS while you do these lessons. You can take free courses at Codecademy.
• It will also be helpful if you have a beginner’s knowledge of programming. That could mean, at the very least, you completed a beginning-level course in JavaScript (or another language) at an online school. You should have learned about and have written variables, functions, loops, conditional statements, arrays, objects, etc. You don’t need to be great at programming but some exposure will help you.
• This course is a WORKOUT that means lots of repetition and practice is built into the course. Anytime you think “This again?!” then prove to yourself you can do it by finishing the exercise (you should be quick at it if you’ve really mastered it!) then extending the exercise with your own creativity.

Now let’s get started with Lesson 1 so I can introduce you to my pet CAMEL in the next post.