About Dave KiddThis author has not yet filled in any details.
So far Dave Kidd has created 30 blog entries.
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. [...]
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
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> [...]
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]