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