Introduction to Divs: CSS/HTML Crash Course (Free Tutorial)

Divs are an important part of every HTML page. A div is a container that can hold other HTML elements inside of it. If you are a beginner and want to learn the basics of coding, check out our FREE 30-minute intro course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Divs are used to divide HTML into different sections. The sections can then be styled using CSS. You can change different things, including font style and background color. To follow along with this tutorial, visit jsbin.com, which allows you to test your code in real time. In JS Bin, click on the HTML tab to open a blank HTML file. Feel free to rename the title “Divs!” by replacing JS Bin with Divs!

As shown in the following code, to create a div, use opening and closing div tags within the body tag.

  <div>

  </div>

You can put a variety of items in a div. For this example, let’s put a header, paragraph, and link into the div.

  <div>
    <h1>Hi there!</h1>
    <p>I'm a paragraph!</p>
    <a href="#">Test link 1</a>
  </div>

h1 is the biggest header size. The p tag creates a paragraph. The a tag creates a link. Regarding the link, the web address to which you want the list item to link goes in the quotation marks. For our example, # is a placeholder.

Furthermore, we will make two more divs.

  <div>
    <h1>Hi there!</h1>
    <p>I'm a paragraph!</p>
    <a href="#">Test link 1</a>
  </div>
  <div>
    <h3>I'm an H3</h3>
    <p>I belong to div #2</p>
  </div>
  <div>
    <h5>I am H5!!!</h5>
    <p>I'm in div 3!</p>
  </div>

Before we style the divs, we need a way to identify them. When we select a div in CSS, we need to know which div we’re targeting. If you call div like in the following CSS code, it will target every div on the page.

div {

}

For instance, to make the text color of every div yellow, code:

div {
color: yellow;
}

We usually want to be more specific than that. Therefore we can use classes to distinguish between divs. Classes are used in HTML, and then you can call the classes in CSS. They are a way of identifying specific elements on a page. Let’s assign our three divs the classes div-1, div-2, and div-3.

  <div class="div-1">
    <h1>Hi there!</h1>
    <p>I'm a paragraph!</p>
    <a href="#">Test link 1</a>
  </div>
  <div class="div-2">
    <h3>I'm an H3</h3>
    <p>I belong to div #2</p>
  </div>
  <div class="div-3">
    <h5>I am H5!!!</h5>
    <p>I'm in div 3!</p>
  </div>

Note that on an actual website with many divs, you want to name their classes more descriptively. Let’s say we want to modify only div-1. Open the CSS tab. To select the class in CSS, use the following format:

.div-1 {

}

Now we can style that div, such as add a border and change the text color and alignment.

.div-1 {
border: 1px solid black;
color: grey;
text-align: center;
}

To select and modify an item within div-1, type:

.div-1 a {
text-decoration: none;
color: lightblue;
<code}

The preceding code modifies only the a tag within div-1. Now that we’ve modified div-1, why don’t we modify div-2?

.div-2 {
font-style: italic;
border: 2px dashed black;
width: 50%;
}

In the preceding code, we changed the div’s font style to italic and border to 2px dashed black. We also set the width to be 50% of the size of the window. This is useful for responsive web design because the div width will resize as the window resizes.

For div-3, we can experiment with changing the background color and width.

.div-3 {
background-color: grey;
width: 25%
}

That was an introduction to divs in CSS and HTML. A large part of learning to code is experimentation, so play around with creating and modifying more divs. For more FREE tutorials, check out our 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Display Property: CSS/HTML Crash Course (Free Tutorial)

The topic of today’s article is the display property in CSS. It lets you customize your website to look exactly how you want it to. If you are a beginner and want to learn the basics of coding, check out our FREE 30-minute intro course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

In HTML, each element is treated like its own box. For example, if you create a div and put some paragraphs or lists in it, that container and every item in the container is its own box.

This is important to know because, when styling your page, you will want to know what the boxes are and move them around. For instance, you will want to be able to say things like “put this beside this” and “put this on a new line”. These are important properties of HTML that CSS manipulates with the display property. This is known as the CSS Box Model.

To follow along with this tutorial, visit jsbin.com, which allows you to test your code in real time. In JS Bin, click on the HTML tab to open a blank HTML file.

In the body tag, we will make three separate divs and then do some styling for the display property of those divs. A div is an empty container into which you can put items.  Let’s put one list into each div. First create a list of dogs:

  <div class="dogs">
    <ul>
      <li>Golden Retriever</li>
      <li>Labradoodle</li>
      <li>Beagle</li>
    </ul>
</div>

You don’t have to have a class, but since we are manipulating different divs, classes allow us to stylize each list separately. <ul> makes the list unordered. Below that list, create one for cats:

  <div class="cats">
    <ul>
      <li>Domestic Shorthair</li>
      <li>Calico</li>
      <li>Tabby</li>
    </ul>
</div>

Finally, let’s make a list for a navigation bar. Use a tags to insert links into the menu.

  <div class="links">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About me</a></li>
    </ul>
</div>

The web address to which you want the list item to link goes in the quotation marks. Do not forget to close your tags.

Now open the CSS tab so that you can modify the display properties. First we will target the dogs div. Because we gave it the class name “dogs”, we can target the class name to apply styling to the items within the class. To select the dogs div, code the following in CSS:

.dogs {

}

To make each element in the three lists a block box, use the display property by coding the following:

.dogs {
display: block;
}
.cats {
 display: block;
 }
 .links {
 display: block;
 }

Within the parent container, the body, each list will sit on its own line. In the Output, you won’t notice a difference because display: block is the default behavior of the types of lists we created.

However, you don’t always want to use this type of display. For instance, you may want to have the dogs and cats lists on the same line. To achieve this, use the inline-block property, which is shown in the following box of code.

.dogs {
display: inline-block;
}
.cats {
display: inline-block;
}
.links {
display: block;
}

Now the dogs and cats lists will be side by side in the Output, as long as there is enough room in the Output tab. This intelligent behavior is good for responsive web design because nowadays, a lot of traffic to sites is from mobile browsers.

There are other displays. One example is none, which makes a class disappear from the page:

.dogs {
display: none;
}
.cats {
display: inline-block;
}
.links {
display: block;
}

This comes in handy if, for instance, you use JavaScript to create a button and you want a list to appear only once a button is pressed.

Furthermore, the display inline makes elements sit on the same line as other elements without formatting them like a block:

.dogs {
display: none;
}
.cats {
display: inline-block;
}
.links {
display: block;
}

To apply inline on all three divs, use the format shown in the following code.

div * {
display:inline;
}
.dogs {
display: none;
}
.cats {
display: inline-block;
}
.links {
display: block;
}

You can use display on any CSS selector element, such as an image. A large part of learning to code is experimentation, so play around with creating more classes and IDs. For more FREE tutorials, check out our 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Classes vs IDs: CSS/HTML Crash Course (Free Tutorial)

Classes and IDs?! You may have heard of them before when referring to HTML and CSS.

If you are a beginner and want to learn the basics of coding, check out our FREE 30-minute intro course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Classes and IDs are SUPER useful because they allow us to target certain elements on a page. For instance, if you create an item, giving it a class or ID will be useful later on when you want to stylize the item, such as change its color or size.

Classes are used to give a group of items the same style. Identifiers (IDs) are more specific than classes and are also used to stylize.

To follow along with this tutorial, visit jsbin.com, which allows you to test your code in real time. In JS Bin, click on the HTML tab to open a blank HTML file.

Whenever you make a class, first make a div within the body tag:

  <div>
  </div>
 A div is a container. You can wrap a div around anything, and it is useful for styling everything within that container.

Give the div a class, and name it vegetables. It is good practice to name the class after its function or what it contains.

  <div class="vegetables">
  </div>
In the class, we will make an unordered list using the format shown in the next box of code. Give the list the items Carrots, Onions, and Broccoli.
  <div class="vegetables">
     <ul>
       <li>Carrots</li>
       <li>Onions</li>
       <li>Broccoli</li>
     </ul>
  </div>

If you wanted to make the list ordered, you would simply need to change ul to ol.

Next we will make another div containing fruits.

  <div class="fruits">
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
      <li>Watermelon</li>
    </ul>
  </div>

Now we have two unordered lists each in a different div. We also have a class for each div. Let’s see what happens when we target these classes. Open the CSS tab. To target a specific class in CSS,m type the class name with a dot in front of it. For instance:

.vegetables {

}

Any styling in here will be applicable to the div vegetables. For example, to change the color of the text “Carrots Onions Broccoli” to blue, write:

.vegetables {
color: blue;
}

Likewise, we can change the font style to something like italic, and font size to 20 pixels.

.vegetables {
color: blue;
font-style: italic;
font-size: 20px;
}

There are times when you will want to be more specific. Let’s say you have a class but there is something within the class that you want to style differently from the rest. For instance, if you want to single out Broccoli, you can put an ID on it in HTML, as shown in the following code. An ID is meant to be used for one element only.

  <div class="vegetables">
     <ul>
       <li>Carrots</li>
       <li>Onions</li>
       <li id="least-favorite">Broccoli</li>
     </ul>
  </div>

To actually change the styling of this ID, you have to select the ID and apply styling on it in CSS. Selecting an ID is a bit different from selecting a class. The following code selects the ID least-favorite:

#least-favorite {
color: red;
}

IDs override classes because IDs are more specific. For this reason, you want to use IDs sparingly because they are harder to fix later on if you have a lot of code.

From here, why don’t we add a new list item in the vegetables div that is a link? The following box of code shows how to add links in HTML.

  <div class="vegetables">
     <ul>
       <li>Carrots</li>
       <li>Onions</li>
       <li id="least-favorite">Broccoli</li>
       <li><a href="#">Test link</a></li>
     </ul>
  </div>

In place of # you would put a link to a website.

Now in our vegetables list we have a new item: Test link. You can apply styling to this, but it is in its own tag. Thus, in CSS, you can target every a tag in the vegetables div like so:

.vegetables a {
text-decoration: none;
color: purple;
}

As you can see, you can select tags within classes. You can do the same with any other div or class.

Those are the basics of classes and IDs! A large part of learning to code is experimentation, so play around with creating more classes and IDs. For more FREE tutorials, check out our 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Button Hover: CSS/HTML Crash Course (Free Tutorial)

Today we’re making a quick and easy button in HTML and CSS. We will look at some cool transitions that we can code to happen when we hover over the button!

If you are a beginner to coding, check out our FREE 30-minute beginners course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

To follow along with this tutorial, visit jsbin.com, which allows you to test your code in real time. In JS Bin, click on the HTML tab to open a blank HTML file.

The code that visitors to your website will see goes in the body of the HTML. As such, in the body tag, let’s create a button!

We can do that using the button identifier. Give the button a class. A class is something you give to an HTML element that you know you’ll want to style or do something with later. In this case, label the class “button” and name it “I am a button!”. Your line should read: <button class=”button”>I am a button!</button>.

If you go to the Output tab, you will see the button “I am a button!” with built-in styling from HTML.

You can click on the button, but it doesn’t do anything at the moment. Jump over to the CSS tab. In that file, select the button we just defined. You can do that by calling the class name we gave it. Remember that we gave it the name “button”.

To call classes in CSS, we use the following format:

.button{
}

It’s a good idea to give classes names that are descriptive to what the classes are.

Next we will do a couple of things that will change the styling of the button. The first thing we’ll learn how to do is make rounded edges for our button. In CSS, we use border-radius to achieve this. To see an example, edit your code so it looks like the following:

.button{
border-radius: 50%;
}

Instead of 50%, you can use pixels to set the roundness of your button, such as:

.button{
border-radius: 4px;
}

You will notice a shadow around the button. To delete this, write border: none;.

.button{
border-radius: 4px;
border: none;
}

Here you can also resize the button. If you resize its font, the button will expand to fit the font. The following code shows how to change the font size.

.button{
border-radius: 4px;
border: none;
font-size: 20px;
}

Another button characteristic we can adjust is padding, which refers to the space between the text and the border of the button. For instance, we can have 10 pixels like so:

.button{
border-radius: 4px;
border: none;
font-size: 20px
padding: 10px;
}

Next we can adjust the width of the button. For instance, we can make the button’s width 200 pixels by coding the following:

.button{
border-radius: 4px;
border: none;
font-size: 20px
padding: 10px;

width: 200px;
}

We can adjust the height in a similar manner. Now, when you hover over the button, it still doesn’t do anything. To modify how the button looks when you hover over it, you can use a pseudo-selector. To call a pseudo-selector, first again call the class you put onto the button earlier on a new line. Then specify hover.

.button:hover{

}

Within the curly brackets, we can code for something to happen when you hover over the button. One thing we can do is change the background color of the button:

.button:hover{
background-color: lightblue;
}

When you hover your mouse over the button, the gray inside of it changes to light blue. When you move your mouse away, the button’s color goes back to gray.

Another thing we can do is change the button’s size. For this, you can use transform in CSS. You can call several attributes on this. For instance, scale changes the button size based on the number you input. For instance, to make the button 80 percent of its original size, write:

.button:hover{
background-color: lightblue;
transform:scale(0.8)
}

If you don’t want the button to jump in size when you hover over it, you can smooth out the transition. To do so, add a transition in the initial button class.

.button{
border-radius: 4px;
border: none;
font-size: 20px
padding: 10px;

width: 200px;
transition: all 1s;
}

This means that all transitions will take one second. You can make the transition slower with 5s, or faster with .1s. A smooth standard to go with is 0.5 seconds.

Now you can change how a button looks when hovered over! Feel free to experiment with the transitions and designs of your button. For more FREE tutorials, check out our 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Touches and Moving Sprites in XCode SpriteKit: Swift Crash Course (Free Tutorial)

If you’re designing a game, you probably need your players to move around. In this article, we’ll look at the different ways of doing so in SpriteKit. Want more FREE coding lessons? You’re in luck! We have a free 30-minute beginners course: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

To start a new project, go to File > New > Project. The template we’re using today is the iOS application, which is for the iPhone and iPad. Go to iOS > Application > Game. For Device, specify iPhone. Let’s make our Product Name “Getting started with SpriteKit”. Push Next and then Create. An iPhone app set-up will appear on your screen.

In the left sidebar, open “GameScene.swift”. Delete any excess code until you’re left with this:

import SpriteKit

class GameScene: SKScene {
override func didMoveToView(view: SKView) {

}

override func touchesBegan(touches: Set, withEvent event: UIEvent?) {
/* Called when a touch begins */

for touch in touches {

}
}

override func update(curent Time: CFTimeInterval) {
/*Called before each frame is rendered */
}
}

Let’s create a sprite! On a line below import SpriteKit, declare the variable player, and make it equal to SKSpriteNode. You can use the keyword var and the following format:

var player = SKSpriteNode?()

Next, above the line override func update(currentTime: CFTimeInterval) {, create a new function named spawnPlayer.

func spawnPlayer(){

}

To give our sprite a color and a size, we also need to add the following line within that function:

player = SKSpriteNode(color: UIColor, size: CGSize)

To set the color of the sprite, below var player = SKSpriteNode?(), declare the variable playerColor. We can give it an orange color by typing the following:

var playerColor = UIColor.orangeColor()

Below that, we can also set the background color of our display by declaring the variable backgroundColorCustom and setting it equal to UIColor. For the background to be dark grey, set its Red, Green, and Blue (RGB) values to 0.2 like so:

var backgroundColorCustom = UIColor(red: 0.2, green: 0.2, blue: 0.2, alpha: 1.0)

Note that Alpha refers to transparency. Likewise, we can specify that the size of our sprite is, for instance, 50 by 50 pixels by declaring another variable:

var playerSize = CGSize(width: 50, height: 50)

Now, back within the spawnPlayer function, we must replace UIColor with playerColor, and CGSize with playerSize.

Thus our sprite has a color and dimensions. Why don’t we also give it a position? On a new line within the same function, write:

mySprite?.position

As you can see whilst typing “position”, it is a CGPoint. For this reason, we have to set the sprite’s position equal to CGPoint. Furthermore, we can set our sprite’s position inside parentheses after CGPoint. For instance, for our sprite to be positioned in the center of the screen, add onto the existing line so it looks like so:

mySprite?.position = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY
(self.frame))

If, after y: CGRectGetMidY(self.frame), you add + 200, the sprite will be positioned slightly above the center point of the screen. Remember that X refers to the horizontal axis and Y refers to the vertical axis.

But we’re not done yet! We need one more line in our function:

self.addChild(player!)

Within the override function didMoveToView, we need to reference the background color variable we created:

self.backgroundColor = backgroundColorCustom

Also, we must add a line saying spawnPlayer().

Run the simulator, and you will see an orange square appear on the display. We’ve successfully created a sprite! Next we will add code so that the square on the display moves whenever we drag and pull it with our cursor. To achieve this, first delete the override function touchesBegan.

Instead, we will have a new one called touchesMoved. In the place of the old override function, insert:

override func touchesMoved(touches: Set, withEvent event: UIEvent?) {
for touch in touches{

}
}

Also, within the curly brackets after for touch in touches, type:

let touchLocation = touch.locationInNode(self)

player?.position.x

This will allow us to add in a touch location. As you can see in the tab that pops up when you type it, touch.locationInNode is a CGPoint. This means that we can delete the let before touchLocation = touch.locationInNode(self). This allows us to create a global variable, which we can use throughout the program. We just need to create another variable where we created our other variables, such as on a line beneath var playerSize = CGSize(width: 50, height: 50). Name the new variable touchLocation.

var touchLocation = CGPoint?()

We can now set up our code so that our touch on the screen changes the position of our sprite. In the touchesMoved function, make player?.position.x equal to (touchLocation?.x)!. As well, add the line:

player?.position.y = (touchLocation?.y)!

If you run the simulator, you will be able to move the square around by clicking on it and dragging it. touchesMoved allows you to do this. On the other hand, if you don’t want to drag it and want to have it move to where you touch the display, you can use touchesBegan. Above the touchesMoved function, type override func touchesBegan, and push Enter. XCode will auto-complete the following:

override func touchesBegan(touches: Set, withEvent event: UIEvent?) {
code
}

Now cut the following code from the touchesMoved function:

for touch in touches{
touchLocation = touch.locationInNode(self)

player?.position.x = (touchLocation?.x)!
player?.position.y = (touchLocation?.y)!
}

Replace code in the touchesBegan function with that text. Likewise, you can follow the same steps to create the function touchesEnded. When you click on the display and drag your cursor, the square will move to wherever you let go of the cursor.

 

For our next example, let’s mimic a spaceship shooter game. First off, go back to having only the function touchesMoved. Also, in the spawnPlayer function, change + 200 to - 500.

Let’s say, like in a game of this kind, we want our spaceship to be able to move left and right but not up and down. We can achieve this by simply deleting this line from the touchesMoved function:

player?.position.y = (touchLocation?.y)!

When you make big games, moveThePlayer could have 20 lines of code in it. You don’t always want to put things into your override function. They’re there to set up the functionality. They’re not meant to carry all the programming weight. Instead, since we set touchLocation as a global variable, we can call a new function in order to move our sprite. Below the touchesBegan function, you can create the new function moveThePlayer:

func moveThePlayer(){

}

As well, cut the following line from touchesMoved, and paste it into your new function:

player?.position.x = (touchLocation?.x)!

Run the simulator. You will see the sprite moving left and right when you click and drag your cursor.

There you have it! Not only can you now spawn a new player, you know how to use touchesMoved, touchesBegan, and touchesEnded to make your players move like you want them to. To keep learning how to code for FREE, check out our 30-minute introductory course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes