Web Design

/Web Design

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-03-17T20:17:56-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-02-18T23:20:37-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-02-18T23:15:23-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-02-09T13:13:51-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-02-09T12:51:27-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-01-29T21:21:27-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-03-17T20:02:32-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-01-28T14:24:12-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-02-09T12:00:15-04:00

How to autoplay a video using HTML 5 in Chrome


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-01-17T16:27:06-04:00

How to apply CSS to XML


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-01-17T16:12:48-04:00

How to create a database using phpMyAdmin and XAMPP


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 XAMPP2018-12-22T17:12:44-04:00

What does the DOCTYPE do in HTML?


What is the DOCTYPE?  When coding in HTML you will see this really weird looking line up there at the top.  It usually looks like this: <!DOCTYPE html> Simply enough, this line tells the browser what version of HTML is being used to create the website.  Back in the day, with HTML4, DOCTYPES were really long lines of text that were almost impossible to remember because they looked like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> and <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> and <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Depending on if you wanted the language to be [...]

What does the DOCTYPE do in HTML?2018-12-16T13:19:04-04:00

How To Run External JavaScript After the HTML Has Loaded


When using JavaScript, sometimes you will run into errors because the external code being used is placed above the HTML it is calling/manipulating.  For this example, we have a HTML file that looks like this: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Run JavaScript After HTML Loads</title> <script src="external.js"></script> </head> <body> <div id="changeMe"></div> </body> </html> In that code we can see that it's calling an external JavaScript file called external.js that has this code in it: document.getElementById("changeMe").innerHTML = "I've been changed!"; This is going out to the div with the id of changeMe and is going to switch out the text to [...]

How To Run External JavaScript After the HTML Has Loaded2018-12-03T10:44:12-04:00

JavaScript console.log vs console.dir


So what is the difference between console.log and console.dir in JavaScript?  Well, let's take a look!  If we were to take this code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>console.log vs console.dir</title> </head> <body> <script> console.log("Why, hello!"); console.dir("Why, hello!"); </script> </body> </html> then put it in a text editor, then run it in a browser we would get a blank page.  That is because when we use these commands, they are only viewable in the console itself.  So to see what these commands actually do we need to right-click the page in Chrome or Firefox and choose the inspect option then the [...]

JavaScript console.log vs console.dir2018-11-24T19:39:05-04:00

How To Center Content in a Div Horizontally and Vertically


This little snippet of code will show you how to center content in a div horizontally and vertically using HTML and CSS.  This, in the past, used to be semi-difficult.  Now, using CSS flexbox display property, it's actually quite easy.  First, we'll create a simple HTML skeleton with a div that has a class called "centerMe" inside the body tag: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Center Content Horizontally and Vertically</title> </head> <body> <div class="centerMe"> I will be centered in the div horizontally and vertically </div> </body> </html> Now that we have the starting HTML, we can add the CSS inside [...]

How To Center Content in a Div Horizontally and Vertically2018-11-20T00:16:24-04:00

innerHTML vs textContent – The Difference Between These JavaScript Properties


innerHTML vs. textContent, what is the difference between these JavaScript properties and which one should you use?  They do the same thing, right?  No, they actually do not.  The difference between the .innerHTML and .textContent properties is all about the HTML my friends!  textContent renders text and only text, and innerHTML renders text with any HTML applied to it.  To illustrate, here's a quick example you can try in your chosen text editor (just copy and paste it in if you want): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>innerHTML vs textContent</title> </head> <body> <h2>textContent:</h2> <!--Div that will hold the textContent text--> [...]

innerHTML vs textContent – The Difference Between These JavaScript Properties2018-11-12T11:19:38-04:00

HTML5 Basics – How to create a basic HTML5 document


Video of this tutorial: Hello everyone!  In this post today I'll be showing how to create a basic HTML file using my favorite text editor Brackets.  Brackets is great because it's free, cross-platform, and has some really nice features when using HTML5.  Here is what their home page looks like:   Click here to download Brackets The first thing you'll want to do is download and install Brackets or whatever editor you want to use.  If you really wanted to, you could use good ol' Notepad in Windows and that would work fine.  Once it's finished installing, open it [...]

HTML5 Basics – How to create a basic HTML5 document2018-11-12T11:17:10-04:00

RGB vs CMYK–Which should I use?


Having taught and worked with Adobe Photoshop for many years, I get asked many basic but good questions about it by new users. One has to do with color, and the color systems we use in a picture. There are several that Photoshop can use, but the two most common are RGB and CMYK. The question: Which is best? The fundamental difference between the two is, RGB is meant for use on screen, and CMYK for print. The terms used to describe how they work are “additive primaries” and “subtractive primaries”, which refer to how these systems show white. For RGB, [...]

RGB vs CMYK–Which should I use?2017-08-01T18:18:44-04:00

HTML: A Brief History


Long ago in the far off land of Switzerland something very interesting began, and Al Gore wasn’t there. 1989 Tim Berners-Lee proposes an Internet based hypertext system for sharing documents between disparate operating systems while working as a contractor at CERN (European Organization for Nuclear Research). If you’re interested CERN is derived from Conseil Européen pour la Recherche Nucléaire. 1991 The first publicly available description of HTML. It consisted of 18 elements greatly influenced by SGML (Standard Generalized Markup Language). 1993 First proposal of HTML as a specification to the IETF (Internet Engineering Task Force). At the same time Dave Raggett [...]

HTML: A Brief History2016-12-30T12:14:23-04:00

The HTML q Tag


Somewhere in the neighborhood of 18 to 20 years ago I sat down one weekend with a book, a computer, and a few images and put together my first basic website. It was about artists from the Impressionist movement and was not anything to brag about with one exception, I built it myself, using Notepad. That was the era of HTML 3.2 moving toward HTML 4.0. Netscape was my browser of choice and most pages used tables for layout. A lot has changed in the following years but one thing remains…most people don’t know that HTML has a q tag to [...]

The HTML q Tag2016-10-31T16:06:10-04:00

HTML5 Form Date Attribute


Getting corporate America to make the move to HTML5 seemed to take longer than any other transition we’ve seen in the past. In part I’m sure due to the long development process. From first working draft in January of 2008 to stable recommendation in October of 2014, that’s almost 7 years. There are many compelling reasons to make the change but the one we will focus on today deals with forms and an easier way of inputting a date. Early on the primary means of capturing a date was supplying a simple textbox and a visual example of the formatting. It [...]

HTML5 Form Date Attribute2016-10-31T12:18:30-04:00

Styling the Humble Checkbox Using CSS


The checkbox has been a staple in the world of HTML forms since day one and for the most part has remained unchanged. HTML 4 introduced the label tag which can be associated with a checkbox using an id attribute in the checkbox and the for attribute within the label. That way you don’t have to click directly on the checkbox, simply clicking the label will select or deselect it. If the checkbox looks any different today compared to 20+ years ago it’s only because the browser renders it that way. A typical form with several checkboxes would look like this: [...]

Styling the Humble Checkbox Using CSS2016-10-29T22:46:49-04:00

CSS Clearfix: Three Lines and a Breakdown


Occasionally the learning curve in web design can be gentle. Other times it’s a sharp right angle and once in a while it’s just a nasty hair-pin curve. How you perceive these curves is just that, your perception. You know, this morning you feel as sharp as a tack and late in the afternoon you feel as dull as a butter knife. Clearing floated elements has been one of those butter knife curves for me. True confession time…it hasn’t been a gentle or sharp curve, it’s a I know it works so I haven’t devoted brain time to understand it curve. [...]

CSS Clearfix: Three Lines and a Breakdown2016-09-30T00:37:06-04:00

A Printer Friendly Version


“You’ve seen them before: links that say “click here for printer-friendly version” or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup. That means somebody (or a script) had to take the original document and convert it to a stripped-down version that’s more suitable for print output. Maybe that somebody was even you.”1 The endnote, if you take the time to read it, will tell you the article this references was written in 2002. Fourteen years later and we [...]

A Printer Friendly Version2016-07-28T12:23:10-04:00

Using a CSS Reset


One of the frustrations designers have been feeling for some time now stems from web design by committee, or design via theme. Many web sites today are WordPress sites with a theme and some content. Just add words and you have an instant site. Then comes the task of modifying the site and trying to make heads or tails of the built-in CSS. Have fun! And we won’t talk about accidently removing content that hoses the database that breaks the site…Arg! But I digress. Sometimes that frustration can come from the browser itself. Did you know that your browser, user-agent, has [...]

Using a CSS Reset2016-05-31T18:48:44-04:00

Is It Time for a New Browser?


       When it comes to the topic of web browsers one phrase comes to mind, oh how the mighty have fallen. In the 23 years since the release of Mosaic, “the world’s first popular browser”, we have seen several major contenders rise to the top. In 1994 the same people that developed Mosaic started a company named Netscape and released Netscape Navigator. Its growth was phenomenal as the popularity of the web was just taking off. Microsoft jumped on the band wagon in 1995 with Internet Explorer. During these early years Netscape dominated with as much as 90% of [...]

Is It Time for a New Browser?2016-04-30T14:15:23-04:00

How to Create Multiple Columns Using CSS3


https://youtu.be/Gln5rpqZAck In this CSS3 tutorial, you'll learn how to create multiple columns using CSS3. You'll see how to use the column-width, column-gap and column-count properties to make long blocks of text readable and responsive to your user's preferred resolution. Visit our CSS3 Training page for more information on our CSS Training Classes.

How to Create Multiple Columns Using CSS32016-04-30T12:55:37-04:00

CSS3 Multiple Columns


Doing a basic web page text layout using more than one column has been much more of a chore than it ever should have been. In the early days of web design almost everything was built using tables. Actually tables inside tables inside tables. Along comes HTML 4.0 with its companion CSS but we still continued using tables. Why, because our browsers weren’t compliant. It should have been easy because CSS introduced the float property. Take two div tags and float them side by side and we have the basic design concept of two columns. Eventually browsers did embrace CSS and [...]

CSS3 Multiple Columns2016-04-28T20:09:11-04:00

Cropping Images with CSS


There are times when you want to focus on a specific area of a photograph but don’t need a separate, cropped version of the picture. CSS offers an approach that will maintain the complete, original image but allow you to crop, mask, or clip your picture. Let’s begin with a simple example. This page includes a full-size image of a young lady sipping a cold beverage on a beautiful spring day. […]

Cropping Images with CSS2016-03-29T12:09:30-04:00