Book Released! Learn Swift 3.0 by Mammoth Interactive

Have you always wanted to create your own iOS app? Mammoth Interactive has written a new book just for you: Learn Swift 3.0.

Even if you have never coded before, you can learn how to use Xcode. The practical examples in Learn Swift 3.0 explain key topics in app development, including the following:

Variables – A crucial part of your code as a developer is variables. This book covers the common types of variables, including integers, strings, and Booleans. As well, you will learn how to create your own type for when Xcode’s are just not enough for your program.

Functions – If you want your application to function, you need functions! Functions are blocks of code that execute tasks. You will learn how to set up a function and make it perform a task. As well, you will learn how to include if statements and for in loops in functions. What are if statements and for in loops? Read Learn Swift 3.0 to find out! There are chapters on them, too.

Statements and Loops – Did you know you can test the value of an object using a switch statement?  Also, you can perform the same function on multiple items with just one while loop! This book covers those and other ways to control the flow of your code so that your app functions in exactly the way you want.

Learn Swift 3.0 is a beginner’s guide to the Swift 3.0 programming language. Swift 3.0 is a powerful, intuitive interface with which you can design incredible apps.

With this book, you will learn how to experiment with Xcode using Swift 3.0’s user-friendly Playground. As such, you will learn the foundations of making an app, and your first one will be up-and-running in no time!

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