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