Welcome to 4110e

Welcome to  online New Media Production, NMIX 4110e. This course will provide a solid foundation of technical skills that you can build upon for the rest of your career. Students in this class learn how to design and develop web sites that function effectively with multiple platforms (desktop, mobile, etc.) and are introduced to coding with JavaScript.

Online is fine, but expect to be busy

I have taught 4110e three times along with approximately 50 sections of the classroom version of this course. Based on experience (and I have a lot :), I am convinced that most students learn as much online as they would in the classroom. Many online students take our Capstone course after this one, and always seem to have a skill set comparable to their classmates.

So congratulations! You are entering into a learning experience that can be every bit as valuable as our 4-month-long, three day a week, classroom version of 4110, but it only lasts 4 weeks and you don't have to go to class!

The flip side, of course, is that we will cover a LOT of material very quickly over the next four weeks, and YOU will have to invest a lot of time each week in order to keep up. The good news is that I have also taught this course in both the 3 week Maymester format and the 4 week short session you are now entering and everything went well.  In fact, I believe that it can be easier to learn this material by working intensively over a short period instead of sporadically over a much longer period.

But all of us will have to spend a lot of time in June to make this course a success.  Here is how it is going to work.

Follow ELC

The assignments for this course are broken into 8 bi-weekly 'modules' which are listed on ELC.

  • Each bi-weekly module contains a group of workbook lessons to be completed and uploaded to your website by the end of the module’s time period.
  • Most modules also include an assigned series of short exercises from freecodecamp.org (FCC) that also should be completed by the end of the module’s time period.
  • Example:  Module 1 runs from June 5 through June 8. On June 9, I will visit your website to make sure that all assignments are posted and will  grade accordingly.
  • Each module’s lessons and FCC exercises count for 3 points. The exception is module 8 which is dedicated to the final project.  

Get ahead if you want to but don't fall behind

Some of you may feel the urge to race through all of the lessons. That is absolutely fine and I, along with our teaching assistant, will be available to help no matter what you are working on. If you fall behind, however, you are in trouble, because there is simply too much to learn. So don't do it!

Get Slack and ask for help if you need it

In this class we will all use Slack, a collaboration app which will allow you to ask and answer questions, upload files for us to inspect, etc. Each of you is required to sign up for the Slack workspace for this class and to post to the workspace at least twice, but I encourage to use Slack as frequently as you feel the need. We at the NMI have been using Slack for a few years and it is very effective tool for remote communication. It is easy to use and a great way to communicate with me, your teaching assistant, and your classmates.

Don't be shy. After all, we can't see you (on Slack anyway).

I really hope that this class will develop into an active online community this semester. There aren't that many of you and your teaching assistant and I plan to be available a LOT. Also, if someone posts a question that you know the answer to, don't be shy about answering. I LOVE students who help other students.

Zoom will be used sparingly

I am sure that most of you have used Zoom by now. I plan to hold a couple of Zoom sessions to give you an opportunity to meet your instructor(s) and classmates. Those sessions will be announced in advance and will also be voluntary. If you feel that you would benefit from a one on one Zoom session for some reason, just let us know and we will schedule one.

Have fun and relax. We've got your back.

In my experience, most students really enjoy and benefit from this course. Learning to create websites and how to code with Javascript can be a very rewarding experience, and sometimes even qualifies as fun. We are ready to help when you need us. All you have to do is put in the effort and time and everything will work out.

Syllabus, click here

Image styling

In an earlier lesson you created a webpage with images of your classmates and even gave rounded corners to the images. Now draw on your freecodecamp.org lessons and add solid, 30 pixel, with red and black borders to all of those images.

In order to apply borders to ALL of your images we are going to modify the img rule that you should have already created in your stylesheet when you gave rounded corners to the images. When style a standard html element such as img, h2, p, etc. all instances of that element in your document are automatically affected by the styling.  This exercise is VERY easy, but even so, I added a couple of hints below but to help you move along.

Hint 1:  border-width:   30px;     border-bottom-color:    red; border-top-color: black;

Hint 2: don't forget to change colors for the left and right borders as well.

When you are finished your pictures will most likely look like the one below. If you didn't set border-radius to 50% they won't be rounded however.

Form Exercise: Send Form data to YOU

To complete this assignment you will need to draw upon the homework lessons from freecodecamp.org that relate to form elements such as text fields and radio buttons. You will also need to download (and unzip) a php file named contact_me.php that will receive the output of your form and email it to you.   Here's how.

  1. To begin, download contact_me.php.zip unzip it, and move contact_me.php into your mysite folder as well.
    1. Open contact_me.php with Brackets and substitute your email address for my email address.  Ideally, use an email address other than your UGA address because UGA mail can move very slowly with form data for some reason.
    2. Modify the email subject line as well.
  2. Create a new html document named contact.html and save it into your mysite folder. Give contact.html a nice big greeting (within the <body> tags of course). Something like <h1>Contact Me </h1>
  3. Underneath the greeting, create a form that sends data via the post method to contact_me.php (as shown below).

    In our next few steps we are going to add text fields that request a visitor's first and last names, telephone, and email address. The names of the text fields that you create must match the $_post values that are set in contact_me.php on lines 37 - 43. Here is the $_post value for first_name for example:
    This may seem a little confusing, but when a user submits your form, contact_me.php will receive the information that they submit, process it and send you an email. The values that come from the form must match the $_POST values in the PHP file for everything to work properly.

  4. Now add a text field that requests a user's first name.  Like this:
    Make sure that the text field is between the form tags!
  5. Repeat the process for Last Name. Note the <br><br> tags that add line breaks between the fields.

  6. Now add email and telephone text fields, following the same model that you used for first name and last name. You can do this.
  7. Your form also needs A TEXT AREA <textarea> that requests user comments. Textarea fields are different from text fields. Here's how that should look.

  8. The last thing we need, other than a submit button, is a set of radio buttons that tracks user satisfaction on a scale from 1 to 5.

  9. Add a submit button:  <input type="submit"> underneath the radio buttons.
  10. Open your index.html file and create a link to contact.html. Now upload everything, index.html, contact.html, and contact_me.php to your server. Visit your website and test it out. If everything works properly, you should receive an email. Or I will if you forgot to change the mail_to address!


If you are really stuck, here is a link to an image of the whole contact.html file that worked successfully for me. Use this as a last resort!

4110 Site Submission Form

The form that is linked below asks for your name, the URL of your website, your freecodecamp.org public portfolio link, and something (anything!) interesting about you to share with the class. Please provide ALL of the information. Once you do, our server will add the information, to a webpage that also contains links to your classmate's sites. Later on you will upload a picture of yourself to your website which will also appear on the class website.

When you fill out the form you will receive a prompt to visit the webpage that should now display your information. When you visit the page, you probably will notice that there is an empty spot for your picture that is not yet filled. Don't worry, we will add your picture a bit later.

  1. Click here for the form.
  2. View your classmates and you!

Tips for updating your homepage with a somebody else's theme

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 (or some other) theme that you would like to use for the job.  There are a few tricks that can really smooth out this process.

  1. First, it does not have to be an actual Bootstrap theme. https://html5up.net has some really nice responsive, and FREE, themes that you may want to check out.
  2. Download the theme, unzip it, and move the theme folder into your mysite folder.
  3. Rename the theme folder something short and simple like home.
  4. 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.
  5. 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.
  6. 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.
  7. 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">.
  8. 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.
  9. 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 (by Crystal Petersen)


What Are Icon Fonts Anyways?

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."


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.

  1. First, copy and place the link below between your header tags:
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  2. 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:


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:

<span class=”fa-stack fa-lg”>
<i class=”fa fa-circle-o fa-stack-2x”></i>
<i class=”fa fa-apple fa-stack-1x”></i>

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:

<i class="fa fa-spinner fa-spin fa-4x"></i>
<i class="fa fa-spinner fa-pulse fa-4x"></i>

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


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:


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.

@font-face {
font-family: ‘icomoon’;
src: url(‘Font/IcoMoon-Free.ttf’)

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.


Css Shapes by Crystal Petersen

1)Crystal Peterson took 4110 online in Summer 2015. She produced this lesson for an independent study at NMI.Screen Shot 2015-09-10 at 1.48.15 PMNow 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>

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.

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

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:

#talkbubble {
 width: 120px;
 height: 80px;
 background: #536DFE ;
 position: relative;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 padding: 5px;

Add the corresponding HTML to newshapes.html to make sure everything’s looking correct. If it is, go back to newshapes.css and add the following at the bottom of the document:

#talkbubble:before {
 position: absolute;
 right: 100%;
 top: 26px;

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:

#talkbubble {
 width: 120px;
 height: 80px;
 background: #536DFE ;
 position: relative;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 padding: 5px;
#talkbubble:before {
 position: absolute;
 right: 100%;
 top: 26px;
 width: 0;
 height: 0;
 border-top: 13px solid transparent;
 border-right: 26px solid #536DFE ;
 border-bottom: 13px solid transparent; }

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!

References   [ + ]

1. Crystal Peterson took 4110 online in Summer 2015. She produced this lesson for an independent study at NMI.
2. If a picture is worth a thousand words, think how many words an animation is worth.

Fixing the Westhost IP Problem

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.

  1. If you are having problems, visit chi.westhost.com
  2. 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.
  3. 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.
  4. 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. Screen Shot 2015-08-26 at 2.57.10 PM 
  5. Now click your domain name. As you can see below, my domain is newmediacookbook.com.
  6. 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: .  There is a good chance that IP address is the correct one.
  7. On the left side of your cpanel click Expand Stats.
  8. 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.
  9. Click the Back Arrow at the upper left corner of your browser to return the chi.westhost.com. Now click on the globe wh1 symbol shown at right. As your mouse rolls over the globe the word "domains" should popup.
  10. Next, click on the name of your domain. wh2
  11. Click the DNS tab as shown below.wh3
  12. Click "Show Advanced DNS Options.wh4
  13. The first Advanced DNS option to appear is A (Host) which "POINTS TO" an IP address that, for some reason, is wrong.
  14. Edit A (host) by clicking on the pencil icon.wh5
  15. Replace the current POINTS TO ip address with the one that you copied earlier.
  16. 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.