About admin

This author has not yet filled in any details.
So far admin has created 222 blog entries.

Free Tutorial: Getting Started with Microsoft Teams


In this Microsoft Teams Tutorial, you'll learn the basics of getting started with Microsoft Teams including how to create a new team or join an existing one, how to use channels to communicate with your team and how to use chat and video calls to connect with team members. To learn more about Microsoft Teams, check out our full, one-day course: Microsoft Teams with Office 365 Training.

Free Tutorial: Getting Started with Microsoft Teams2020-04-06T13:48:25-04:00

Redirect a Webpage using JavaScript


Sometimes you might move a webpage to some other location but you still have people going to the old one.  We are able to redirect the users to the new page using JavaScript.  To do this, we would start with your basic HTML page, we'll pretend this is the old page people are still going to: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Old Page</title> </head> <body> Old Page </body> </html> Now we want to add a piece of JavaScript that will redirect the user to the new page.  To do that we need to add script tags either in the [...]

Redirect a Webpage using JavaScript2019-10-21T21:35:44-04:00

How to create a class in HTML and CSS


In CSS you need to be able to select something on the HTML page to be able to style it.  Let's take this HTML page for example: <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <title></title> </head> <body> <div>Style Me</div> </body> </html> On that page, we have a <div> that we want to style.  We want to turn the text red.  To do that we need to place a class on the div tag like so: <div class="colorMe">Style Me</div> We added the class of "colorMe" to this div so now we can select it and style it.  There are many ways to [...]

How to create a class in HTML and CSS2019-10-21T21:24:17-04:00

How to create an animated hover link using CSS


CSS has come a long way since it's early days.  Adobe Flash used to be the only platform that would allow you to get motion or anything animated on a web page.  Those days are long gone. In this tutorial, we will go over how to take a <a> tag, or link, created in HTML and animate it when we hover over it.  To start off let's create our HTML page like so: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Animated Link</title> </head> <body> <a href="">Hover Me</a> </body> </html> All this does is creates a new HTML document with a [...]

How to create an animated hover link using CSS2019-10-14T00:43:53-04:00

How to use relative position in CSS


Sometimes on a webpage, you need to tweak the position of something by a little bit.  Say you have an image that needs to move over a couple of pixels or a video that needs to be shifted over.  For that, we use a CSS position property called relative. Relative positioning moves something from where it used to be originally.  If I have something in my footer down at the bottom of the page, and I relative position it, it will move from where it used to be down at the bottom in the footer.  To show this, let's create two [...]

How to use relative position in CSS2019-09-23T16:05:54-04:00

How to use position fixed in CSS


Sometimes on a webpage, you'll want a part of it to never leave the screen.  No matter how much you scroll up or down, you'll want that piece of the page to always be in the same spot.  For that, we use a CSS position property called fixed.  To have this work we will need to create the HTML first like so: <div class="fixedPosition">I am not going to move</div> <div style="height:1200px;">I make the page scroll</div> Here we have a div tag with some text inside of it.  It also has the class called "fixedPosition" which we will use later in the [...]

How to use position fixed in CSS2019-09-23T15:50:29-04:00

How to run an Angular Application on a local development server


After we've created an Angular App and have it open in our text editor we will want to see what the app looks like so we can test it.  To do that, we need to run the Angular app on our machine and we can't do that without a server.  Luckily, when we created the app, it came with a local development server already built-in. Once we are ready to view the app all we need to do is make sure, in our command prompt, that we are currently located inside of the app's folder like so:       And [...]

How to run an Angular Application on a local development server2019-09-05T14:26:42-04:00

How to open an Angular Application inside of Visual Studio Code


After you've created a new Angular app (click the link to the left to learn how), you will need to open it up in a text editor to be able to change and add things to it.  For this, I recommend Visual Studio Code.  It's a text editor created by Microsoft in partnership with Google.  You have two huge companies working together to make sure the editor works with the framework in the most efficient way possible so it does a great job with Angular. If you decide to use it, just head over to their website, download the editor and [...]

How to open an Angular Application inside of Visual Studio Code2019-09-05T14:27:54-04:00

Introduction to Excel PowerPivot Webinar


In this free Excel PowerPivot webinar, Excel Instructor Seth Bonder explains how to add PowerPivot functionality into Excel, how to create a data model and much more. To learn more about PowerPivot, or to enroll in one of our PowerPivot classes, please visit our Excel PowerPivot Course page.

Introduction to Excel PowerPivot Webinar2019-09-13T15:13:59-04:00

How to create a new Angular Application


This post will talk about how to create a new Angular Application using the Angular CLI (command-line interface).  If you don't have the Angular CLI or Node installed yet, be sure to check out how to do that here. Once we have Node and the Angular CLI installed we can create an Angular app from the command prompt.  The first thing we'll want to do is create a folder somewhere on your computer that we will put the app in.  I'll create a folder on my desktop called "angularApps":                 Now that I have [...]

How to create a new Angular Application2019-09-05T14:29:13-04:00

How to download and install the Angular Command Line Interface (CLI)


Angular is becoming a very popular JavaScript framework that allows you to create single-page applications (SPAs).  It's backed/created by Google and it's not too hard to get an app up and running.  This post will discuss what you need to install and what you need to do to get the Angular command-line interface (CLI) working so you can begin developing Angular apps. The first thing you'll need to do is go to Once you're there, download and install the "current version".  During the installation, keep all the default settings, you don't need to change anything.           [...]

How to download and install the Angular Command Line Interface (CLI)2019-09-05T14:30:18-04:00

Free Webinar: Introduction to Angular

2019-09-01T10:49:34-04:00   Angular is a TypeScript-based, open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It allows you to quickly build reactive, single-page web applications and is one of the most popular frameworks used today in application development. According to a recent StackOverflow survey, 36.9% of developers now use Angular in their work. In this free Introduction to Angular webinar, you'll learn the basics of Angular, including: What is Angular and why would you use it? Features of the Angular Framework How to Get Started with Angular How to Build a [...]

Free Webinar: Introduction to Angular2019-09-01T10:49:34-04:00

How to create a tooltip using only HTML


Sometimes websites aren't very specific.  You see something on the page but have no idea what to do with it or what it's for.  Enter tooltips!  They are helpful little windows that pop up to explain what something is on a webpage.  They usually show up when the user hovers their cursor over the item.  There are many ways to implement tooltips using CSS, JavaScript, jQuery, etc.  But there's one simple way to do it using only HTML.  Let's say we have an image on a webpage that we want to use as a button.  It looks like this:     [...]

How to create a tooltip using only HTML2019-09-05T14:40:59-04:00

How to use the console to debug in JavaScript


JavaScript is a great language.  It allows you to add all kinds of interactivity into your webpages.  However, sooner or later, we will make mistakes in our code.  The good thing is Chrome and FireFox both have JavaScript debuggers built into them so finding the general area where the code has issues isn't too hard.  Let's take this code for example: var x = "Hi"; alert(x); This code works fine, it sets up a variable called x that has the string "Hi" as a value and then alerts it to the window as a pop-up window of sorts.  However, if I [...]

How to use the console to debug in JavaScript2019-09-05T14:36:10-04:00

How to create a full screen background


In this post, we'll talk about how to create a full-screen background using CSS and HTML.  We are going to bypass all the CSS properties that exist for backgrounds to do this, so consider this a type of CSS hack (:  What we are going to do is insert an image to the page and then style it to act as a background.  So that is the first part, find the image you want to use and put it on the page like so: <img src="yourimage.jpg" class="bg" alt="Background Image"> You can use a .jpg, .png, .gif, or whatever image you want.  [...]

How to create a full screen background2019-09-05T14:41:47-04:00

How to redirect a HTML page


Sometimes in the web design world, you'll need to redirect a page.  Maybe it's because the page no longer exists, the page has been updated and moved, or it could be a page that you don't want the user to be on for very long.  There are plenty of ways to do this.  You could use a bunch of different languages like PHP or JavaScript but there's a way, in HTML, to accomplish this with the meta tag and here it is: <meta http-equiv="refresh" content="5;url=" /> Let's break this down.  It looks just like a normal meta tag but it has [...]

How to redirect a HTML page2019-09-05T14:45:00-04:00

For of vs For in JavaScript Loops


In JavaScript there are two kinds of for loops: for of and for in.  The difference can be seen when looping through arrays.  Let's take this array for example: var greetings = ["Hi","Hey","Hello"] It's just a normal array with three strings (words) in it called greetings.  If I were to apply the for in loop to it like this: for(x in greetings){ document.write(x + "<br>"); } This would print out the index positions of each value in the array.  So we'd get 0, 1, and 2 printed out to the page on their own lines.  If we wanted to pull the [...]

For of vs For in JavaScript Loops2019-09-05T14:46:28-04:00

How To Loop Through An Object In JavaScript


In JavaScript there's a way to access all the items in an object called the for in loop.  It allows you to iterate (or loop) through all the key value pairs in an object.  For example, if we had this object: var jsobj = { company: "SkillForge", course: "JavaScript", isFun: "Yes" } We would be able to get the keys and the values out of it using the for in loop.  To pull the keys out we could do this: for(x in jsobj){ document.write(x + "<br>"); } In this loop, x is a variable that will be holding all of the [...]

How To Loop Through An Object In JavaScript2019-09-05T14:48:27-04:00

How to stop a loop from inside a nested loop


There are times in JavaScript when we'll have a loop inside of another loop and we'll want to stop the outer most loop from inside the inner one.  Here is a block of code that is showing what I'm talking about: var i = 0; while(i < 3){ for(x=1; x<=10;x++){ if(x%5 == 0){ //we want to to stop the while loop here } document.write(x); } i++; } We have a for loop that is inside of a while loop and we want to be able to stop the while loop from inside the for loop.  This code prints out all the [...]

How to stop a loop from inside a nested loop2019-09-05T14:49:58-04:00

How to create a placeholder on a select dropdown in HTML


In HTML there's this nifty attribute called the placeholder.  If you were to create an input text box like this: <input type="text" placeholder="Type Here"> It would create a text box with a placeholder in it which you can see below:     The text "Type Here" will disappear when you start to type anything into the box and it will re-appear when you delete it.  It's a useful way to prompt the user to do what you want and not lose any space by doing so.  But what about drop-down menus like this?       This is the HTML code [...]

How to create a placeholder on a select dropdown in HTML2019-09-05T14:52:03-04:00

How to start a basic Vue.js page


If you want to dive into Vue.js and don't want to mess around with Node.js and other installs this post is for you. To start using Vue.js in a webpage, all you need to do is set up a CDN (content delivery network) link just like you would with jQuery. You would start with a typical HTML page: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Vue.js Page</title> </head> <body> </body> </html> Then in the head tag, add the Vue.js CDN link which came from here: <head> <meta charset="utf-8"> <title>Basic Vue.js Page</title> <script src=""></script> </head> Once you've done that, you're golden, and [...]

How to start a basic Vue.js page2019-09-05T14:54:16-04:00

The Difference Between Double and Single Quotes in PHP


In PHP, the difference between using double or single quotes is quite large unlike other languages like JavaScript.  The main difference, that I believe is most important, is you can use variables inside of double quotes in wherein single quote statements you cannot.  For example, if I have a variable set like so: $age = 22; And I wanted to use it in an echo statement I could do this with single quotes: echo 'I am ' . $age . ' years old'; That would work fine, it would print out to the page "I am 22 years old" just like [...]

The Difference Between Double and Single Quotes in PHP2019-09-05T14:56:35-04:00

How to run a function with a button click in JavaScript


In JavaScript, there are times when you need a block of code to just sit back, relax, and not run right when the page loads.  This is where JavaScript functions come in.  A function is a block of code that runs when we tell it to.  In this example, we will show how to run a function when a button is clicked.  The first thing we'll want to do is create the button and give it an id using HTML: <button id="clickMe">Run Function</button> This will create on the page a button that says "Run Function" and has an id of "clickMe".  [...]

How to run a function with a button click in JavaScript2019-09-05T15:00:08-04:00

How to get user input in JavaScript


There are times in JavaScript when you'll need to get the user's input so you can perform some sort of calculation with it.  One of the most used methods to get user input is the command document.getElementById("someId").value.  To use this you would first need a textbox on the page which we create using HTML: <input type="text" id="someId"> Once the textbox is created with the id of "someId" we can use getElementById to capture the value like so: document.getElementById("someId").value; If we walk through this whole command we see that it starts at the whole document, then it narrows into an element (or [...]

How to get user input in JavaScript2019-09-05T15:02:03-04:00

How To Use The Ternary Operator in JavaScript


In JavaScript, there is a thing called the ternary operator.  It's a fancy term for a shorthand way to write an if statement.  To compare and contrast let's take a look at the long way of creating an if statement: if(x==1){ alert("There is " + x + " apple"); }else{ alert("There are " + x + " apples"); } This example is checking the value of x and if it's 1 it will alert "There is 1 apple".  If it's not 1, it will alert, "There are 3 apples" or whatever the number is that was put in there.  Well, there's [...]

How To Use The Ternary Operator in JavaScript2019-09-05T15:03:53-04:00

How to create a JavaScript Object


In JavaScript, there is a thing called an object.  It's something that can contain a value that is equal to something else.  Those are called key/value pairs.  There's a key that is equal to some value.  It's a way that you can have a variable equal to many different items that can be used as functions, values, etc.  It gives the programmer a lot of flexibility on how they can get their job done.  The most simple way in JavaScript to create an object is like this: var jsObj = {}; We just created an empty object there that could be [...]

How to create a JavaScript Object2019-09-05T15:05:44-04:00

Substr vs Substring in JavaScript


JavaScript has some slick ways of dealing with strings (words, sentences, etc.)  There are a couple of methods in JavaScript called substr() and substring() that do similar but very different things.  Both are able to extract certain parts of a word or sentence to be used or validated.  The difference between them is substr gives a position and how many characters to extract, where substring gives a range of what characters to access.  For example, if we had this: var str = "SkillForge"; alert(str.substr(5,3)); This would return "For" because the 5  means start extracting from the 6th character, not the 5th.  Substr and substring start [...]

Substr vs Substring in JavaScript2019-09-05T15:07:38-04:00

How to Loop Through an Array in JavaScript


Video version of this post: In JavaScript, there's a helpful way to access every item that's in an Array and it's called a for in loop.  It has the functionality, by default to go through and only run however many times there are items in the array.  To take a look at this we can set up an array like so: var ninjaTurtles = ["Leo", "Ralph", "Don", "Mikey"]; Now we could use a for loop and go through it like so: for(i=0;i<ninjaTurtles.length;i++){ document.write(ninjaTurtles[i]+"<br>"); } This works and it would print out all their names to the page, but this way requires [...]

How to Loop Through an Array in JavaScript2019-09-05T15:09:28-04:00

JQuery Toggle Drop Down Effect


jQuery is a pretty amazing JavaScript library.  It allows you to do things with JavaScript that were, back in the day, pretty tough to pull off.  Today I want to show you how to do a simple toggle drop down effect using jQuery.  The first thing you'll want to do is create a basic HTML page like so: <!DOCTYPE html> <html> <head> <title>jQuery Toggle Drop Down</title> <meta charset="utf-8"> </head> <body> <p> <span id="s1"> Click to slide panel up and down </span> </p> <div id="d1"> This part slides up and down </div> </body> </html> This sets up a span and div tag that [...]

JQuery Toggle Drop Down Effect2019-09-05T15:11:56-04:00

How to use JavaScript Regular Expressions


Video of regular expressions with phone numbers: This tutorial is going to look at a JavaScript regular expression example using zip codes and break down all the pieces.  The problem I've found with regular expressions is they aren't something you can just look at and understand right away.  They use their own syntax that isn't easy to decipher so that is what makes them hard to understand. Let's take a look at an example of one so they won't be as intimidating.  Let's say we want to use a regular expression to make sure that a zip code is typed correctly.  We [...]

How to use JavaScript Regular Expressions2019-09-05T15:14:24-04:00