davek

/Dave Kidd

About Dave Kidd

This author has not yet filled in any details.
So far Dave Kidd has created 37 blog entries.

How to use relative position in CSS

2019-09-23T16:05:54-04:00

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

2019-09-23T15:50:29-04:00

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

2019-09-05T14:26:42-04:00

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

2019-09-05T14:27:54-04:00

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

How to create a new Angular Application

2019-09-05T14:29:13-04:00

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)

2019-09-05T14:30:18-04:00

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 nodejs.org 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

How to create a tooltip using only HTML

2019-09-05T14:40:59-04:00

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

2019-09-05T14:36:10-04:00

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

2019-09-05T14:41:47-04:00

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

2019-09-05T14:45:00-04:00

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=http://example.com/" /> 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

2019-09-05T14:46:28-04:00

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

2019-09-05T14:48:27-04:00

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

2019-09-05T14:49:58-04:00

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

2019-09-05T14:52:03-04:00

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

2019-09-05T14:54:16-04:00

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="https://cdn.jsdelivr.net/npm/vue"></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

2019-09-05T14:56:35-04:00

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

2019-09-05T15:00:08-04:00

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

2019-09-05T15:02:03-04:00

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

2019-09-05T15:03:53-04:00

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

2019-09-05T15:05:44-04:00

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

2019-09-05T15:07:38-04:00

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

2019-09-05T15:09:28-04:00

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

2019-09-05T15:11:56-04:00

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

2019-09-05T15:14:24-04:00

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

How to autoplay a video using HTML 5 in Chrome

2019-09-05T15:16:49-04:00

Chrome is a great browser but sometimes it has a lot of security features that end up conflicting with your code and what you're trying to do.  For example, they added a feature that won't play a video on a website if the sound is enabled.  It will block it because it doesn't want the user hearing an unwanted video.  Using the HTML5 video tag, if I were to add a video to a page that has the controls visible, autoplays, and loops the code would look like this: <video controls autoplay loop> <source src="movie.mp4" type="video/mp4"> </video> The issue with this is Chrome [...]

How to autoplay a video using HTML 5 in Chrome2019-09-05T15:16:49-04:00

How to apply CSS to XML

2019-09-05T15:20:15-04:00

Sometimes there will be times when you'll need to take a body of XML information and apply CSS styles to it.  Luckily, it's not too hard to do.  Let's say you have an XML document that looks like this (the content about the movie is not accurate): <?xml version="1.0" encoding="utf-8" standalone="yes"?> <movie> <title>Monty Python and the Holy Grail</title> <rating>PG-13</rating> <reviews> <rotten>100%</rotten> <metacritic>100%</metacritic> </reviews> <director compensation="$100,000,000">Some really funny guy</director> <boxoffice>$1,000,000,000,000</boxoffice> </movie> If I wanted to style the title, rating, director, and the other tags I would need to apply CSS to this file.  To do that you would need this line of [...]

How to apply CSS to XML2019-09-05T15:20:15-04:00

How to fade in content using HTML, CSS, and JavaScript

2019-09-05T15:22:19-04:00

Sometimes we want our content to make a cool entrance on a webpage.  Luckily, using CSS and HTML, we can do just that by easily fading something onto the page.  First thing we'll need to do is create a HTML page like so: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Select Tag</title </head> <body> <div id="fademe">Fade me in!</div> </body> </html> This is your typical HTML page that has a div with an id of fademe.  We will be fading the div in later with the text "Fade me in!".  The first thing we'll need to do is create the CSS inside the [...]

How to fade in content using HTML, CSS, and JavaScript2019-09-05T15:22:19-04:00

Create unselectable instructions in a HTML select drop down menu

2019-09-05T15:26:16-04:00

Today we are talking about how to create unselectable instructions in a HTML select drop down menu.  In HTML, when you create a drop down menu using the <select> tag, there will be times when you'll want to give the user instructions inside the menu itself but not allow them to select the instruction option.  For example, let's say we want to give the user the ability to select what shipping they want for an item they are ordering.  Our select tag would look something like this: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Select Tag</title> </head> <body> <select> <option>USPS</option> <option>UPS</option> <option>FedEx</option> [...]

Create unselectable instructions in a HTML select drop down menu2019-09-05T15:26:16-04:00

Camtasia SmartFocus Editing Dimensions Error Fix

2019-09-05T15:29:00-04:00

In Camtasia 9, there is a feature that has been around for a while called "Smart Focus."  What it tries to do is read the video and zoom in and out when Camtasia feels it's necessary.  For example, let's say you were making a screen recording about creating a new folder on your desktop.   When you right click on the screen and the menu pops up, Camtasia's SmartFocus would hopefully recognize that as a time where it needs to zoom in on the video so the user could more easily see what's on the screen. It's not perfect but if you [...]

Camtasia SmartFocus Editing Dimensions Error Fix2019-09-05T15:29:00-04:00

How to create a database using phpMyAdmin and XAMPP

2019-09-05T15:32:20-04:00

Video version of this blogpost: When working on a website that is either hosted or local on your computer, sometimes you'll need a database for it.  Back in the day, you would need to know SQL and how to run those commands in some sort of prompt.  Nowadays, we have phpMyAdmin which is a graphical user interface for SQL.  You can click, type in text boxes, and after a while, you'll have a database created along with tables, columns, user permissions, etc. To use phpMyAdmin, you'll need to either install hosting software on your computer such as XAMPP, MAMP, LAMP, or WAMP.  Or, you [...]

How to create a database using phpMyAdmin and XAMPP2019-09-05T15:32:20-04:00