When I develop in the web, there are plenty of times that I want to see information about where I am in the program or what is going on in the Javascript when I load the page. I use the Console to watch updates but it can be difficult to read when you have possibly hundreds of log statements.
Usually you can just use the standard console.log function:

> console.log("Some information");
Some information
or 

> console.debug("Some information");
Some information

or 

> console.info("Some information");
Some information

You also get the line number and file that the output comes from in the console.

But did you know that you can use the following:

console.clear()
console.error(object)
console.table(array)
console.warn()

Let’s say you want to clear the current console. You can place in your code, or use it within the console itself.

console.clear();

Or you can get color coded lines with the warn or error functions:

> console.warn("This is a warning");

> console.error("Error: Danger");

And if you need to display an array that and want a better layout use console.table():
> console.table(['a','b','c']);

I was talking to a friend of mine on the phone the other day and we were talking about how debugging in Chrome was sometimes frustrating. We both had some ideas on how that could have been made better for each of us.

While you can load your page, find the line of code, and add a set of breakpoints. He let me know kicking off the debugger in a certain part of your code just by adding the following line of code where you want the code to stop:

debugger;

Once this brings up the debugging window, this behaves like a breakpoint and stops execution. Now you can see the value of your variables, or you can step through the rest of your code line by line.

My next post will talk about the different kind of console logging functions that are availabole.

There are times you might want to dynamically generate elements on a page and add classes to style them. You can create elements with ids and/or classes with plain Javascript with the following commands:

var newElement = document.createElement(“div”);
//to add a class:
newElement.setAttribute(“class”, “card”);
//to add an id
newElement.setAttribute(“id”, “id_name”);
//to add it to the body:
document.body.appendChild(newElement);
// or to add it to some element:
document.getElementById(“card-box”).appendChild(newElement);

You could also create the string for an element and attach it to the content of a div.

var newElement = '<div id="id_name" class="card">Some Content</div>';
 // This will replace the contents with your new element. 
document.body.innerHTML = newElement;

I have been working to up my skills in the web development arena and have to say that The Odin Project is a great place to get started. The lesson plan directs you to not just learn the different languages required to create for the web, but also what is going on in the computer when you do things. It also gives you information about how to connect with other developers and how to progress your skills.

Some of the projects teach you to create images with a group of divs and pure CSS like this example of the Dancing Android character.

Also learning to re-create the basic display of the Google Home Page helps to learn styling techniques, using sprites and how to position objects.

Some of the best ways to learn HTML design are to take a web page that you like and try to re-create it without looking at the styling. Once you have a good approximation, see where you differed from the original.