Category: Module 1

OK, so it's time to create a homepage that doesn't look like it was made by a seven year old and you have found a nice looking bootstrap theme that you would like to use for the job. There are a few tricks that can really smooth out this process.

Open the folder and open the index.html file inside of the folder with your browser to make sure that you like it. If there is no index.html file open something else. If you like it, rename it to index.html.

Return to your mysite folder and rename the current index.html file to something like old_index.html. There may be something in that file that you will need later.

Return to the home folder (the theme folder) and drag it's index.html file into the mysite folder. Open it with chrome again. This time it should look terrible because you have broken all of the links to css files, javascript files, and images if there are any.

Re-establish those links. For example, it is highly likely that one of your css links reads something like<link href="css/bootstrap.min.css" rel="stylesheet">. Change it to read<link href="home/css/bootstrap.min.css" rel="stylesheet">.

Do the same for all of the css files and any javascript files as well.<script src="js/jquery.js"></script> should change to<script src="home/js/jquery.js"></script>. If one of your css or javascript files is linked to another site,<link href="http://font-awesome.com/css/font-awesome.min.css" rel="stylesheet" type="text/css"> for example, don't worry about it. It's fine.

Unless the theme comes with images that you want to keep, you should be done. If so, link those images the same way as you linked the js and css files. Test it with your browser. If everything looks as it should, you are ready to build a great looking home page!

Icon fonts are simply fonts you display on your webpage just like any other font. The difference is icon fonts have symbols as characters instead of the traditional ABC alphabet you’re used to.

Using icon fonts can be pretty great for a couple of reasons. First of all, websites love them because they load a ton faster than linked pictures, speeding up overall loading times. They can also be styled with CSS just like any other font can. You can quickly and easily change the size and color, even add drop shadows or gradients if you’re feeling fancy. All the symbols in icon fonts are also vector graphics, which means you don’t have to worry about losing any quality as you size them up and down. They’re even supported in all browsers. So your site can maintain it’s cohesive design even in Internet Explorer!

However, using icon fonts isn’t the best choice for every graphic your page might contain. They’re generally pretty simple, so any complex graphics you have in mind will still have to rely on linked image files. Despite this limitation, icon fonts are a great resource for situations needing to display information in a simple and quick way.

There’s two hugely popular sets of icon fonts commonly used today - Font Awesome and IcoMoon. The two differ in how they’re added to your code, and both have their advantages and disadvantages for various situations.Before we get started, go ahead and create a new HTML document with the basic generic structure and name it “iconfonts.html."

FONTAWESOME

With a name like Font Awesome, there’s a lot expected from this first icon font. No worries, however, Font Awesome certainly lives up to its inflated name.

There’s a few ways to install Font Awesome and use it on your site, but today we’re going to go with the one of the easiest routes by linking directly to the file online.

To use Font Awesome icons, you have to place them within a <span> or an <i> element. You must then assign them two classes depending on how you want them to look. The first class you will assign will be the fa-class. The second will be the name of the icon you want to use. For example, if I wanted to add a camera icon to my page, the resulting code would look something like this:<i class="fa fa-camera">

Go ahead and add that line of code to your HTML document and check out the camera icon in your browser. Pretty awesome, right? For a complete list of all available icons and their tags, you can check out:

http://fortawesome.github.io/Font-Awesome/icons/

That’s Cool, but How Can I Customize These Icons?

Font Awesome has included a ton of different ways to customize the icons already in the CSS file you just downloaded. One easy way to begin is by making the icons larger by adding “fa-lg” to the icon’s tag. Your camera icon’s tag will now look something like this: <i class="fa fa-camera fa-lg"></i>

As you can see, that made the icon a bit bigger, but not by much. To really customize the icon’s size, you can substitute the “lg” with a number from 1 to 5 plus x. So, for example, if I wanted my camera icon even bigger, the code would now look like: <i class="fa fa-camera fa-5x"></i>

That’s the biggest you can get the icon using Font Awesome’s built in CSS, but of course you can create your own CSS and continue to increase the camera’s size if you wish.

Another cool trick included in Font Awesome is the ability to stack icons. For example, if I wanted to use the icon for Apple, but I wanted it to be in a circle, I could simply stack the two on top of each other using “fa-stack”. Delete the code that calls for the camera icon and replace it with the following:

Now you have the Apple logo inside a circle, and it can be made clickable or kept purely decorative.

One final benefit to Font Awesome is the built in animation feature. This is used mostly for the loading icons, but with a little imagination it can be implemented almost anywhere. To utilize this cool feature, you simply have to add either “fa-spin” or “fa-pulse” to your icon’s class. “fa-spin” will cause the icon to endlessly rotate, while “fa-pulse” will rotate with 8 separate steps. To check it out, delete the apple logo we just stacked, and add the necessary code to call the icon “fa-spin” twice- once to make it spin and once to see it pulse.

If you’re having trouble, your finished code should look pretty close to this:

The resulting effect is pretty cool looking, plus it doesn’t slow down the page’s loading time like alternative animation methods would.

ICOMOON

IcoMoon is available in both a free and premium version. In addition, IcoMoon provides an online app that allows you to curate your own selection of icons to download from over 3500 different options! We’re going to be working with the free pack already curated for us, but be sure to keep the huge icon repository in mind for any future projects. You can also import your own icons to create your own icon font if you really want to customize things. Follow this link and download the free version of the default pack:

https://icomoon.io/#icons-icomoon

Despite being a free pack, the download gives you 450 icons in a myriad of different formats for any need you may ever have for icons. You even get individualized eps files for every single icon so you can edit them even further in your choice of graphics program. Most importantly for us, however, is the font format of IcoMoon and it’s accompanying HTML file reference page.

What You Have to Know to Use IcoMoon

Since IcoMoon is downloaded as an actual icon font, you have to make sure your document links to the correct folder to use it. You can do this by adding the following code in the same place you’d link to any other font.

However, lucky for you, the font comes with its own stylesheet inside the demo-files folder. So go ahead and open that up and take a look at the code. Make sure you link to the new stylesheet from your original html document.

Let’s call some icons.

Like Font Awesome, Icomoon requires you to place it inside a span element. In addition to the required span element, you also have to assign a class so IcoMoon knows which icon to call. You can find the names of each icon in the reference.html document that downloaded with the font. Directly under the place where the css document calls the font, you will see a span class already created named icon. Go check that out and try to call an icon in your document.

If you’re having trouble, first be sure you deleted the line calling for the FontAwesome stylesheet. If you’re still having trouble, this is what your code should look like to call the pencil icon:

<span class="icon icon-pencil"></span>

These icons can be manipulated in the same ways as FontAwesome, so basically you’re limited only by your imagination.

1Now that you have dipped your toe into the CSS side of web development, you should be gaining an understanding of just how powerful CSS can be in making your site look how you want. One of the first things you learned was how to create simple squares and rectangles using div tags and the background-color attribute. While rectangles and squares are fundamentally useful in website creation, CSS can be further manipulated to render almost any shape. So with that, let’s take it a step further by using our existing CSS knowledge to transform your div boxes into any shape your heart desires.

The Square Gets an Upgrade.

To begin, head over to free.mynmi.net to download css_shapes.zip, unzip it and, as always, move the unzipped folder (new_shapes) into the mysite folder. Inside you will find two files, newshapes.css and newshapes.html Open newshapes.html with Brackets and you should see that it is already linked to newshapes.css. Now click on newshapes.css and take a look at the first div id listed, which is for “#square.”

Obviously, this is just a simple square, something you’re already familiar with. So go back to your HTML file and add in the code to make the square appear. Remember that the use of a hashtag creates an id rule (as opposed to a class which is designated with a dot), so your code should look similar to this:

<div id="square"></div>
<br><br>

The line breaks using the <br> tag serve to make the shapes easier for you to see once we begin to add other shapes. If you’re not careful and deliberate with your spacing, your custom shapes could end up all jumbled together.

Head back to your CSS file and take a look at the next div tag entitled “#parallelogram.” If you’re not already familiar with the shape of a parallelogram, it’s essentially just a slanted version of a square. We achieve this slanted with a CSS property called transform: skew. The transform property can be used to visually transform your elements in various ways, but for the purposes of our parallelogram, we will be focusing on skew. Skew makes it possible to stretch your element horizontally, and uses degrees to determine just how strong the effect will be.

Before adding the HTML to see the shape, take a look at the CSS. You’ll see the following two lines of code that you may or may not have already seen before:

-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);

The purpose of these two lines is to make the skew effect look the same across different internet browsers. The “moz-transform” targets the type of CSS recognized by Mozilla Firefox. The webkit focuses on browsers such as Chrome. It’s important to include both properties in your CSS to insure that your elements stay consistent across browsers.

Go back to your HTML file and call the div id for your parallelogram. Experiment with varying degrees to change the intensity, and see just how skewed the shape can become. Another thing that’s important to note with shapes that skew horizontally is the page’s padding or margin. If you’re not careful the shape can go outside of the body area. To see what I mean, scroll to the bottom of the CSS document and delete “body { margin: 50px; }” Go view your page and see what happened. Not pretty right? That’s why it’s important to be cognizant of how each element is interacting with the page.

Your Average Square is More Useful than you Think.

Now that you understand some of the ways you can manipulate a simple square to skew in a more interesting way, we’re going to move through the next two shapes pretty quickly. On your HTML document, call the div id’s for both “round” and “circle.” Looking at them on your web page, would you believe that the steps to create both of these styles are incredibly similar? They both utilize the border-radius property in varying intensities.

The border-radius property is essentially a way to round out the corners on your squares. The trick is being able to choose exactly how this property is applied. For rounded edges, just specify a pixel amount. The higher the pixel amount, the more rounded the square will be.

To create a perfectly round circle element, it’s often easier to move away from designating specific pixel numbers and instead take advantage of CSS’s ability to recognize percentages. Setting your border radius to 50% is an easy way to create a circle without doing any math or trying to guess pixels. This isn’t a fail-safe way to create circles however. Just like with everything, sometimes you’ll need to invest some time in trial and error to get it just right.

What if we Half a Square, Then What Happens??

Triangles. Triangles are what happen. To create the triangle shape, you must become familiar with the different ways to manipulate the border property. To form a triangle, you essentially want a box with zero width or height. The actual height of the triangle is determined by the width of the border.

Go back and look at your CSS file under “#triangle”. You’ll see the left and right borders are actually transparent, and that the width and height are indeed zero. The border property is broken up into border-left, border-right and border-bottom to individually manipulate each side. Notice the border-bottom property is the only one with a specified color. This determines the way the triangle faces. Go add the div ID necessary to see this triangle, and you’ll notice that ours is facing upwards. Swap the color and transparency from the border-bottom property to the border-right and see what happens. The triangle points in a different direction. The pixel amount specified will control the overall size of each leg your triangle.

This may seem like some kind of CSS voodoo but there is actually a straightforward explanation; although it can be hard to wrap your head around it and it's hard to explain. To see an explanatory animation, click here.

Compound Shapes

Not only can CSS be manipulated to create nearly any shape, but those shapes can be put together to create even more interesting compositions. To see what I mean, visit http://species-in-pieces.com/ to see an amazing example of animals created using only CSS.

We won’t be doing anything quite that advanced yet, but we will be putting the shapes we’ve learned in this lesson to use and create a talk bubble using only CSS. If you think about it, a talk bubble is essentially just a square with rounded corners and a sideways triangle put together. We can use those two simple elements to create a fun compound shape you can easily find use for in your web development projects.

To begin, go into the same newshapes.CSS file and add the selector for #talkbubble. Add the necessary properties to create a rectangle with the width of 120px and the height of 80px, and make the corners rounded by 10px. When you’re done, your CSS should look like this:

After that, add the properties necessary to create a triangle with it’s point facing the left. Make the top border 13px, the right border 26px, and the bottom border 13px, and close the tag. The finished CSS should look like this:

At this point, you may be wondering how we’re going to have different properties for the same selector. That’s where the “:before” tag comes in. The before tag allows you to add elements to different selections without needing extra HTML. The pseudo element isn’t actually in the DOM, but it will function as if it is.Go back and add the HTML necessary to call your new selector, and take a look at your new CSS only talk bubble!

Crystal Peterson took 4110 online in Summer 2015. She produced this lesson for an independent study at NMI.↩

If a picture is worth a thousand words, think how many words an animation is worth.↩

Those of you who (like me) purchased a westhost.com domain name and account early last week, face a problem. Westhost changed to a new account management system that, for some reason, changed your IP address (a set of numbers that directs a browser to your domain). I just fixed my IP problem and now you can benefit from my experience.

If you are having problems, visit chi.westhost.com

Login with information provide by Westhost. They should have provided you with two sets of login credentials. You want the one that prompts you to login with your uga email address as the username.

Once you login, you probably will be prompted to change your password. You will have to enter in the old password first, and then enter the new password twice. If you are prompted to change the Cpanel password, I suggest that you use the same password for Cpanel as well.

Get the Correct IP address. The first thing we need is the correct IP address. To get that, click the Shared Hosting symbol as shown below.

Now click your domain name. As you can see below, my domain is newmediacookbook.com.

Click the Cpanel tab as show here. If you don't see the cpanel tab and see some kind of error message instead, wait a few minutes and try again. If all else fails, try the IP address: 208.131.154.32 . There is a good chance that IP address is the correct one.

On the left side of your cpanel click Expand Stats.

Take a look at those expanded stats. Keep looking until you find an entry titled Shared IP Address. Copy that IP address. That's the one that you want.

Click the Back Arrow at the upper left corner of your browser to return the chi.westhost.com. Now click on the globe symbol shown at right. As your mouse rolls over the globe the word "domains" should popup.

Next, click on the name of your domain.

Click the DNS tab as shown below.

Click "Show Advanced DNS Options.

The first Advanced DNS option to appear is A (Host) which "POINTS TO" an IP address that, for some reason, is wrong.

Edit A (host) by clicking on the pencil icon.

Replace the current POINTS TO ip address with the one that you copied earlier.

You're done! Wait an hour or so to test and see if things are working properly. BTW, you may have more success if you try with a different browser.

The textbook for this course is free, but you are required to provide your own web host. This is actually good news because knowing how to set up and use a web hosting account is a useful skill to bring away from this class and it's cheap. We have found two very affordable options for web hosting that charge approximately $12.00 for a domain name and the first year of hosting. Plus, as the owner of a hosting account and domain name, you do not have to worry that someone else will delete your hard work from their server, and can easily steer people to your website.

Hosting Options

The best deal at present seems to be good old Godaddy. But do NOT go to the godaddy.com website or YOU WON'T FIND THE DEAL. You must first do a Google search for ‘Godaddy hosting’ to get to the right place for the deal. If you simply visit the Godaddy website you won't find the right set of options. The page you come to should look like the screenshot below. Choose the economy option unless you want to host more than one domain name.

Once you find your way to the payment page, make SURE that you see a blurb about Linux Hosting with cPanel as shown below and the the total charge is just twelve dollars and change. Whatever you do, DO NOT remove either the hosting or domain name options.

Adobe Brackets is the free code editor that we suggest you use for this course. We are very impressed with Brackets and think that you will be too. To start this lesson, open Brackets.

Features

Extensions! This is a wonderful feature of Brackets that keeps getting better. There is a very active community of open source contributors who constantly provide new extensions that increase Bracket's range and efficiency. One of my favorites is html skeleton, which generates all of the basic elements of a webpage whenever you click it's button. In other words, it saves you a LOT of typing! To enable html skeleton:

Click File and select Extension Manager and then click the available tab as shown below. Search for html skeleton and install it.

While you are in extension, explore additional extensions. You may find something you like.

Now that you have enabled the Skeleton extension let's put it to work.

Create a new file (Command N or File New).

Click the Skeleton Icon on the right side of the Brackets window. A new window will pop up. Under elements, check the box for Full HTML Skeleton and click Done. At this point, pretty much everything you need for starting an HTML file should be inside of your new file.

Type "Hello World" between the <body> and </body> tags and save the file as hello.html inside of the mysite folder that you created in the previous lesson (unless you're just looking at this lesson as a refresher).

File location and integration. Web page production requires you to add links to lots of separate files; image files, css files, javascript files, etc. Brackets can help you to find those files. To enable this feature you must

Open the mysite folder from the File menu by selecting File and then Open Folder.

At this point Brackets should show you all of the files and folders that are inside of the mysite folder. In particular you should see hello.html and index.html.

Open the index.html file Start entering a link (just after the <body> tag) as in<a href=" and connect to hello.html.
. All you have to do is browse to the hello.html, select it and then finish off the rest of the link Check out this dramatic! ten second video to see the process in action.

Use a similar process for integrating images into your webpage. For example, as soon as you enter <img src=" Brackets will, once again, display a list of files and folders. To select a file, simply click on it's name. At this point, you probably don't have any images to insert, so just remember how for now. Also, to select a folder that is outside of the folder you are working in, enter ../ (that's right, dot dot forward slash).

Live Preview.Whenever you want to see what a webpage REALLY looks like, select Live Preview from the File menu. Even better, if you exercised the 'open folder' option that was mentioned earlier, the live preview will automatically update as you make changes to the document in Brackets. For example, if you change a font size, background color, add additional text, etc. to a document with Brackets, the live preview version in the browser should demo those changes as you make them. BTW, live preview only works with Google Chrome.

Color Picker. Yes, Brackets has a built in color picker that allows you to easily set or change a font or background color. To activate the color picker:

Open style.css (from the previous lesson), and find the background-color rule that you created for the body class( background-color: #F00 or something of the sort).

Right-click on the color and select "Quick Edit" to activate the color picker. Pick your color and close the picker.

BTW, as you begin to enter a color for a new rule another, lesser, color picker may appear that prompts you to select a 'named' color such as aliceblue or aqua. I would advise that you ignore this option and simply type any hex color beginning with the # sign, and then 'quick edit' it. You will have many more color options with this procedure. I usually opt for #000 (three is actually enough to kick things off) because it is easy to remember.

Adobe Edge, another system of web fonts is available via Brackets, the text editor you are using in this course. To get started with Adobe Edge, open a css file with Brackets or create a new css file, go to File - Extension Manager, and activate the Adobe Edge Web Fonts extension.

Once you have installed the extension, create a new class in the css file and type {font-family: " (be sure and add the quotation mark) At this point a little window should appear. Choose "browse webfonts", find your way to a font that you like, and double-click it. At that point the name of the font should appear after font-family: as in font-family: adamina . Add a semicolon and a closing bracket. When you are done, everything should match the example below.

font-family: "adamina";

Connect to the font source.

Like Google fonts, Adobe Edge fonts are sourced online, but getting that source is very easy. After you add the font, and while you are inside of the css file, you should be able to see a font icon like this on the right side of the Brackets window in the same location as the extensions. Click the icon and a window will appear with a script source that will provide everything that you will need from the edgefonts website (see below for example). Copy the information and paste it below the <title></title> tags inside of the HTML document (not the css file) that is using the new font.

At this point all you have to do is apply the class or id that you assigned the new font family to.