Learn JavaScript in 1 Hour! Book Release

All you need is 1 Hour.

Do you want to learn the foundations of computer programming? Are you tired of being bogged down by confusing jargon and complex descriptions? We have the book for you: Learn JavaScript in 1 Hour.

Learn JavaScript in 1 Hour is an easy-to-understand introduction to JavaScript. With this book, your website will be up-and-running in no time!

Important topics in web development are shown with examples that are easy to read. If you have a Mac computer, PC, or even a mobile device, you can follow along with the book’s examples on www.jsbin.com. JSBin is an editor that allows you to see your creations in real time.

Learn JavaScript in 1 Hour covers topics including:

Functions – Finally your website can do things! It’s not just a pretty face. Learn how to enable your site to perform tasks.

Variables – Integers, doubles, floats, characters, strings: these are all different types of variables. Variables are crucial to programming because they contain data. Learn about the different types and when you should use each one.

If Statements – If you read Learn JavaScript in 1 Hour, you will reach the section on conditionals. If statements run code IF a specific condition is met. With an if statement, you can test a value, run certain code only when you want to, and prevent your site from crashing!

If you want to learn how to give a website functionality, Learn JavaScript in 1 Hour can teach you the foundations of using JavaScript. Even if you have never coded before, you can follow along. For more books on tech topics, visit our Lulu shop.

Learn CSS in 1 Hour! Book Release

1 Hour is all it takes.

Do you want to make a stunning website? Mammoth Interactive has released a book to teach you how to put that design into reality: Learn CSS in 1 Hour.

With CSS, you can design a site to look exactly how you want it. You can manipulate many aspects, from the size of text to the color scheme.

Important topics in web development are shown with examples that are easy to read. If you have a Mac computer, PC, or even a mobile device, you can follow along with the book’s examples on www.jsbin.com. JSBin is an editor that allows you to see your creations in real time.

Learn CSS in 1 Hour covers topics including:

The History of Fonts – Did you know that there are numerous types of fonts that each serve a different purpose? We dig deep into serif, sans-serif, monospace, and more! You will learn how to customize a font to meet the specific needs of every site you create.

Padding and Margins – A website is clean and minimalist when items are spaced out on the page. Learn how to separate sections of your site to make it look visually appealing.

Adding a Menu – Can’t have your website users getting lost! Learn CSS in 1 Hour teaches you how to create a menu so that users can navigate throughout the pages of your site.

If you want an introduction to web design that is easy to follow along with, this book is for you. Even if you have never coded before, you can follow along. For more books on tech topics, visit our Lulu shop.

Book Released! Learn HTML in 1 Hour

Do you have a great website idea that you want to make come to life? Meet Mammoth Interactive’s book: Learn HTML in 1 Hour.

Whether you want to learn the basics of coding or build your own website from scratch, Learn HTML in 1 Hour can teach you the foundations of coding – in only one hour. Coding is not something to be afraid of.

HTML is the foundation of the web. If you are a beginner and want to learn how to code, Learn HTML in 1 Hour is meant and built especially for you.

Important topics in web development are shown with examples that are easy to read. If you have a Mac computer, PC, or even a mobile device, you can follow along with the book’s examples on www.jsbin.com. JSBin is an editor that allows you to see your creations in real time.

If you want to brush up on the skills you learned in a tech class years ago, or even if you’ve never coded a line before, this book is for you. You will learn topics including:

Font Style – You will learn how to style the contents of your webpage so that you’re not always using the default fonts and colors – boring! Italicize, bold, and underline! You never know when the text on your site could need it.

Images and Links – Make your site visual and dynamic by adding image files that link to different areas of the web.

Lists – It is easier to read things when they are in a list (like this one). Master ordered and unordered lists to make paragraphs easier to read.

Input Tags – Communicate with your users! Create input tags and submit buttons so that site visitors can send you messages.

Learn HTML in 1 Hour provides a clear, concise introduction to web design that anyone from your great-grandmother to your little brother can follow. You can code! For more books on tech topics, visit our Lulu shop.

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