For any task at hand, it helps to have the right tools for it. While you can code in a simple text editor, it is best to use an editor that is more suited for writing code. We use Sublime Text 3 in the course, but you can use any editor you prefer like Visual Studio Code, Atom, WebStorm, etc. We also recommend you install the Google Chrome Browser.
In computer programming, comments are annotations in the source code of a computer program that are added with the purpose of making the source code easier for humans to understand, and are generally ignored by compilers and interpreters. You should add useful comments to your code to explain what the code does to make it easier for another programmer (or your future self) to go through the code and understand what it's doing and how it works.
In programming, a variable is a storage location paired with an associated symbolic name, used to store information to be referenced and manipulated in a computer program. You can think of variables as containers that hold information. Their sole purpose is to label and store data in memory, which can then be used throughout your program.
Concatenation (or concat for short) is a way of combining the text of two strings together into a variable. Watch the example in this video—as it's much easier to understand when you see it in action.
In programming, a function is a named section of a program that performs a specific task. A function groups together one or more program statements that perform some operation(s) and optionally return a value.
Often a computer program must make choices on which way to proceed. Conditional statements are features of a programming language which perform different computations or actions depending on whether a specified boolean condition evaluates to true or false.
One thing you can be sure of when coding: you will encounter bugs. Let's learn how to deal with them. In this lesson, we look at various tools available to help us in debugging our code. You will learn how to log out messages to your browser's console and how to use the Developer Tools available in your browser to inspect and identify issues in your code.
Let's look at what we're doing this week. This week, we'll learn how to manipulate the DOM (don't worry, you'll soon find out what that is). We'll learn this while working on a GIF search engine. By the end of the week, you'll be well acquainted with these terms: innerHTML, querySelector, getElementById, addEventListener, DOM manipulation, keyCode, AJAX, JSON.parse, forEach, API documentation.
DOM stands for Document Object Model. The DOM is (more or less) what we call the HTML once it all loads in your web page. It is the data representation of the objects that comprise the structure and content of a document on the web. Watch the video to see it in action.
querySelector lets us grab HTML elements from the DOM. It returns the first Element within the document that matches the specified selector or group of selectors. If no matches are found, null is returned. querySelector() only returns the first element that matches the specified selectors. If you want to get all matches, use the querySelectorAll() method instead.
The addEventListener() method attaches an event handler to a specified element. It can be used to listen for when a user clicks on an element, when a user is typing, when the page fully loads, and much, much, more.
Let's keep grabbing things with the querySelector(). We had previously used querySelector with an element selector. In this lesson, we'll use a class selector instead.
getElementById() and getElementsByClassName() are similar to our friend querySelector(). getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique in a page, they are a useful way to quickly get access to a specific element. An ID should be unique within a page, however, if a page has more than one element with the specified ID, then getElementById() returns the first element that matches. If no elements with the specified ID exist, it returns null.
Time to put your knowledge to the test. The lesson starts off with a challenge for you. Try to solve it yourself before continuing with the video which walks you through a solution.
You'll be given another challenge. Again, try to work through it on your own before watching the solution.
Loops offer a quick and easy way to do something repeatedly until a certain condition is met. They can be used to execute a block of code a number of times.
The setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires. Watch on as we use it to animate the appearance of cats on the page.
We finally get started on our GIF Search Engine. You'll download a template project and start building from there. The first task is to grab the user's input from the HTML Search Bar. Let's jump right in!
Using the which event property we can tell if the user pressed the keys down. Actually, we can even "listen" to see what specific keys they are typing. Let's make the NSA proud! This is 'merica goddammit and I'll listen in if I want to!
We use forEach() to loop through the images that we are getting from the API and then add each image to the DOM. When we are done, you'll have a grid of GIFs on your page after a successful search request.
In this lesson, we look at more Array methods (push, pop, shift and reverse) that we can use to search and play with our data. The push() method adds new items to the end of an array and returns the new length. The pop() method removes the last element from an array and returns that element. The shift() method removes the first element from an array and returns that removed element. The reverse() method reverses an array in place.
Let's review forEach and compare it to Map. These are both great tools for looping through data. forEach() executes a provided function once for each array element while map() creates a new array with the results of calling a provided function on every element in the calling array. They both do almost the same thing, but the major difference is that forEach() affects and changes our original Array, whereas map() returns an entirely new Array—thus leaving the original array unchanged.
Let's dive into Google Charts! Google Charts enables you to easily and quickly add interactive charts to your webpage. It has a wide variety of charts available designed to address a wide array of data visualization needs. In this lesson, we take a look at its documentation to explore what it can do and then use it to create some charts.
Let's get down to work with tabletop.js. We start off by installing it, then we add some data to a spreadsheet and then set up Tabletop so that it can pull data from that data source. The lesson ends with a challenge for you to print out this data to the page.
In this lesson, we'll loop through the data from Tabletop.js, parse each entry and print it to the page.
In order to earn your One Month HTML Certification you must complete all the homework assignments and submit them for grading.
Adding images is quick and easy. Watch on as we make our Party Tips page more interesting by adding some images to it.
Welcome to this code review and refactoring session. We'll go through a student's project, answer some questions she had, review the code and improve it a bit. In the video, we touch on the URL query string, clean up the code, and hook up the click event to the API.
This week we'll build a SoundCloud music app using the SoundCloud API. Along the way, we'll learn about objects, anonymous functions, Promises, classList, localStorage, and more.
In this video, we talk plan of attack. How do we get started? It is usually better to plan out a project before you start working on it. In this lesson, we go through the initial project template which gives you a static prototype of the music app we'll build. We also outline the steps we need to take to create the app and then divide the whole project into smaller, more manageable tasks.
We start by going through the SoundCloud documentation to find out how to use the API. As a developer, you should get comfortable reading documentation as you will be doing plenty of that in your coding career. We then connect our app to the API and start getting some data back after sending requests to the SoundCloud server.
In this project, we make use of objects to better organize our code. But why would we do this? Why use objects, when we could just as easily keep using functions? Well, three words: Encapsulation, Inheritance and Namespacing. Watch on to find out what these mean and why you should care.
We refactor our code and wrap it in an object. Of course, we could wrap all our code in multiple functions, but after writing 10,000 lines of code you might be able to imagine how this could get sloppy. So instead, we'll use an object. In this lesson, we'll show you how!
We use the forEach() loop to loop through each object in the API, creating a card for each track. We then change the cards from using static content to using dynamic content grabbed from the API.
Let's go back to the SoundCloud API so we can get some music playing with embed. We look through the SoundCloud documentation to find out how to embed the SoundCloud player onto our webpage.
We've added the SoundCloud player to our app, but now we need it to play the tracks that we select. Let's add an eventListener to our "Add to Playlist" button so that when the button is clicked for a particular track, the track will be added to a playlist and the SoundCloud player will start playing it.
The app is just about done, but it could use some improvements. Right now, we can play selected tracks and add tracks to a playlist, but when we refresh the page, we lose our playlist data. In this lesson, we'll preserve the playlist data by using localStorage to save the data in the user's browser.