Close

How to Parse XML With SimpleXML and PHP

In this PHP tutorial, you’ll learn how to parse XML using SimpleXML and PHP.

Watch the tutorial below:

Links mentioned in the video:

Get the source code for this video as a supporting listener of the John Morris Show on Patreon

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

October 22, 2015

What To Do When You Run Out of Blog Post Ideas

You’ve likely heard me harp on the importance of content for your online business; whether your selling information products, providing a service or shipping physical products.

If you haven’t started your blog and aren’t producing content regularly, you basically don’t exist online.

But most bloggers are in a  constant fight to consistently come up blog post ideas.

Well, instead of racking your brain every week (or day) trying to figure out what you’re going to write about, use these tips to ensure you always have fresh ideas for relevant content that will impact your audience.

1. Create an Editorial Calendar

This is likely a piece of advice you’ve heard 100 times, know you need to do but never actually do. That was me anyway. And, the result is my content creation was incredibly inconsistent.

Then, I got the opportunity to build Michael Hyatt’s Platform University membership site and get a behind-the-scenes look at how a professional did it.

And, there was no debate about the editorial calendar. It’s just what they did… for both they’re public-facing blog and the membership content.

It was a real eye-opener.

If you want to be a pro blogger (and get paid like one) you have to act like one.

I’m, of course, still notoriously scatter-brained but my editorial calendar makes sure I’m producing content consistently instead of in bursts every few months.

Here’s the simple way to do it:

  • Decide on your content “silos” and schedule. I do a Periscope Q&A every Tuesday, a written article every Wednesday and video tutorial every Thursday.
  • Decide on your topics a year out. Sit down one weekend and decide on the titles of each “silo” of content for each week for one year out. This alleviates the stress of having to come up with ideas on the fly.
  • Give yourself a 3-month lag. Create 3 months worth of content in advance so you have some lag time. You can even schedule the posts in WordPress in advance so they go out right on schedule.

It’s hard to describe how much a relief this is once you get it accomplished. Immediately all the stress of trying to figure out what to write fades and you can actually enjoy blogging again.

2. Leverage Idea Starters

Speaking of deciding on topics… this is probably the hardest part for most bloggers. I know I struggled with it quite a bit. My big thing was getting too cute with titles and then not really knowing what I wanted to write about when it came time to crank it out.

Proven idea starters help with this.

And, I’ve seen the best of the best in blogging do this. In fact, I used one for this blog post. See if you can spot it in this list:

  1. Essential _____ For _____. E.g. Essential Ingredients For The Perfect Casserole.
  2. The Future Of _____. E.g. The Future of Blogging.
  3. How I Went From _____ To _____. E.g. How I Went From Extremely Shy To A Popular YouTub-er
  4. Top 10. E.g. Top 10 Mistakes New Bloggers Make.
  5. Checklists. E.g. My Blog Post Essentials Checklist.
  6. What to Do When _____. E.g. What To Do When Your Car Breaks Down.
  7. 7 Steps To _____. E.g. 7 Steps to Consistently Writing Engaging Blog Posts.
  8. 5 Skills Every _____ Should Know. E.g. 5 Skills Every Web Developer Should Know.
  9. Tools For _____. E.g. Tools For Eliminating Distraction For At-Home Workers.
  10. Find Time For _____. E.g. How to Find Time For Writing Blog Posts.

Of course, this is just a small sample. The way to gather these is to pay attention to the titles that grab YOUR attention, write them down and then see how you can turn them into a formula like this.

Not only will you continually build a list of blog post idea starters, but you’ll know they get people’s attention because they got yours.

3. Read… A LOT

Most of my ideas for blog posts are sparked by something else I read or watched online. As I read it, it sparks some sort of idea that I think is important for my audience.

It could be that I completely agree and want to share the wisdom…

Or, it could be that I vehemently disagree and I want to “set the record straight”…

It could be that I see a way to improve or advance the idea or skill being discussed…

Regardless, I firmly believe that in order to be a good writer/content creator you need to be an avid reader/consumer.

The best bloggers I know consume a ton of content themselves.

There are exceptions (like Gary Vaynerchuk) but they’re rare… and generally speaking it’s the exceptions that make the rule.

So, make sure you’re consuming plenty of content related to your niche. It will give you the fuel to formulate your own thoughts and ideas that can then serve your audience.

Getting Over the Hump

Of course, for most bloggers the idea of coming up with a year’s worth of blog post titles seems overwhelming.

That’s okay… start small.

Decide on your content “silos” and brainstorm your 3-month lag first. You’ll likely find that once you get going it’s easy to keep going and that whole year may just find its way into your editorial calendar.

Besides, if you don’t… you’re going to be faced with that same dread the next time you know you need to write a blog post but have no idea what you want to write about.

October 21, 2015

[Periscope] How to Learn Object-Oriented Programming in PHP

In this week’s WebDev Q&A, I answer questions on:

  • There is so much to learn and it’s changing all the time, how do I know where to focus and what to choose to pursue?
  • How do I learn object-oriented programming?
  • How can one tell if I am good enough?
  • I’ve learned HTML and CSS, how do I make the transition into learn PHP, MySQL and Javascript?
  • I’m learning how to work with databases, what all do I need to learn?

Watch below:

Links mentioned in the video:

 

If you get value from this video, please consider sharing it with another developer or group who could benefit from it.

October 21, 2015

How to Start a Blog In 15 Minutes Or Less

As a freelance web developer or designer (or any online business owner really), you need to be consistently creating content on  your blog. Why?

Blog content is how you get your name out there and get the attention of potential clients. It’s how you show those potential clients you know what you’re doing. And, it’s how you get potential clients to trust you enough in advance to hire you.

Every single one of my clients has come as a result of the content I produce on my blog. In fact, my entire business is driven by my blog content. Without it, I’d have nothing.

But, let’s assume you know that (or at least are now convinced of it)… how do you set your blog up? Well, I’m going to show you how to start your blog in 20 minutes or less in this post.

Step #1: Let’s Start With The Basics

You’ll need to decide on a domain name if you don’t already have one. I strongly recommend using some variation of your name unless you already have a clearly established brand name.

Especially, if you’re starting from scratch. That’s because your approach, the kind of content you create, etc will likely shift as you blog more.

If you lock yourself into a set brand name, those shifts can cause the domain name to not make sense anymore and it puts you in a tough spot.

For example, I used to have the domain: LearnPHP.co. Pretty great name. But, it stopped making sense as I moved into teaching other languages, teaching freelancing and more general online business info.

I was forced to “re-brand” my work and all the work I’d done building up that brand and domain was mostly lost.

If you put it all under your name (e.g. johnmorrisonline.com) you can shift what you’re doing without worrying about undermining your brand.

Also, as a freelancer it’s almost always (99.999999%) better to brand you and your name than trying to build a brand from scratch.

People buy from people… and it’ll be much easier to market you then some brand name you make up.

Of course, if you already have your domain that’s no problem. I’ll show you how to use it. But, it is easier and cheaper if you don’t have one yet.

Step #2: Get a Web Host

Once you’ve decided what your domain name is going to be (or you already have one) you’ll need to get a web host. This is where your web site “lives” on the internet.

Specifically, it’s a computer you rent that will store your blog’s files in a way where they can be accessed by everyone on the internet.

Technically, you could use your own computer to host your files, set up a static IP address with your ISP and serve them from your hardware.

But, you’ll almost assuredly pay much more, it’ll be much less reliable, and you’ll have no help or support if something goes wrong.

Of course, there are probably thousands of companies out there that do this but I recommend Bluehost. Here’s why:

  • Reason #1: Trust. I use WordPress on almost every site I build. And, WordPress is used by 76.5 million blogs. Interestingly, WordPress only recommends 3 web hosts and Bluehost is it’s top recommendation. If the world’s largest CMS trusts Bluehost, there’s likely a reason why.
  • Reason #2: Reliability. Bluehost’s uptime average is 99.9%. And, that’s not their number. It’s a third-party that’s been tracking them since 2005. So, you don’t have to worry about your site going down for any significant period of time.
  • Reason #3: Support. Bluehost offers 24/7 support via phone, email or chat. All their support staff is based in the U.S. So, if you have any sort of issue or question, you can get ahold of someone any time of day and get it resolved.
  • Reason #4: Affordability. You can start anywhere from 3.49 to 5.99 per month based on the plan you choose. That’s about as affordable as you’re going to find.
  • Reason #5: Limitless. Bluehost offers unlimited bandwidth, unlimited disk space, unlimited domains and unlimited email accounts. So, there’s plenty of room for you to grow without spending a bunch of extra money.

As a matter of fact, I like Bluehost so much that I became an affiliate. And, I am even offering to help publicize your blog to my audience if you join Bluehost through my affiliate link. You can read the details of that here.

Of course, most web hosts have similar programs so that’s not why I recommend them. I find they’re the best fit for the majority of website owners out there.

All right, so assuming you’re ready to get rocking with Bluehost here’s how to get your account set up and your blog installed and running.

First, you’ll want to head over the the Bluehost homepage and click on the “Get Started Now” button:

1-Homepage

Here, you’ll see the various plans Bluehost offers. I recommend the Plus Plan because it’s very affordable and boasts all the unlimited good-ness I mentioned earlier. Just hit the “Select” button on the plan you want:

2-Plans

Now, here’s where you need to specify if you have a domain already or not. If you don’t, simply enter your desired domain name in the “New Domain” box. If you do have a domain, then simply enter it in the “Transfer Domain” box.

You’ll notice the “note” in the “Transfer Domain” box says Bluehost will provide you with instructions on transferring your domain. This is a small extra step you’ll need to take if you already have a domain. But, it’s really simple and Bluehost will walk you through it:

3-Domain Registartion

Next, you’ll need to enter your contact information. Pretty standard stuff here:

4-Contact info

Then, you’ll be offered add-ons for your hosting package. Again, pretty standard offerings. SiteLock and Site Backup are two I would consider heavily.

SiteLock essentially makes sure nobody can steal your domain (I’ve had it happen) and Site Backup helps you backup and restore your site if something breaks.

I strongly recommend a service like this. If not here through Bluehost, then somewhere.

The others aren’t something I’d use… unless you have some reason you need the privacy protection. But, most people don’t and you probably already know if you do.

Once you’ve selected any add-ons, enter your billing information and continue on:

5

At this point, Bluehost has a few additional offers they’ll walk you through. Like additional domain names and such.

Generally, I don’t find that kind of thing necessary but if you wanted to snatch up all the variations of your domain name, you could. I never do. But that’s me.

Once you’re done with the payment process, you’ll see a Welcome screen like this:

7-Welcome

Click on the “Create Your Password” button and you’ll see a page where you can set your password, like this:

8-Set Password

Please, please, please use the Password Generator here and do NOT use a password that you’ve used anywhere else or that’s “easy to remember”. Speaking from experience… if you do you will get hacked at some point.

Once done setting your password, hit “Create” and you’ll be taken to the Bluehost login where you can login with your new credentials:

9-Bluehost login

Once logged in, you’ll see a welcome pop-up. Just go ahead and hit the “I Can Do It” button:

10-cPanel 1

All right, now here’s where we got to the nitty-gritty. You should now see your cPanel dashboard which looks like this:

11-cPanel-WP

What you want is the WordPress icon. Click that and we’ll install WordPress for your blogging platform. You’ll now see a page like this:

12-Wordpress

Click the “Start” button so we can start installing WordPress. It’ll first ask you what domain you’d like to install it on:

13-Choose Domain

Of course, you’ll select the domain you created (or transferred) when you created your account. You’ll then see an installing screen. Simply wait for this to finish:

14-Installation

Once finished installing, you’ll be asked to enter some basic info including your desired admin username and password.

Do NOT make your admin username “admin”. Usually your first and last name are fine or your email address.

Also, again (broken record) use a unique password that is not easy to remember. Then, hit “Install Now”:

15-WP Login

Once installed, you’ll see a completion screen like this:

16-Install Complete

Now, check your email because you’ll receive a welcome email with all your relevant WordPress login info including where you need to login at. Click the URL in the email and bookmark it. You’ll be going here a lot:

17-Mojo Email

That URL will take you to the WordPress login screen where you can login in with your WordPress credentials (in the email):

18-WordPress Login

Once logged in, you’ll be taken to the WordPress dashboard page which is now your home for creating our blog content!

19-Dashboard

Now, that’s the 15-minute setup and install. But, let me go a bit further and show you how to get rolling with your blog.

Step #3: Set Up WordPress

Here’s a very quick run-down of the things you need to know to get going with WordPress:

  • Posts. Posts are exactly what the name implies. These are your blog posts that contain your content. These are the main thing you’ll be posting. With WordPress, you simply create a new post for each piece of content and it handles all the display stuff for you.
  • Categories. Again, self-explanatory. You can create categories to help organize your content. For example, on my blog I have a “PHP” category and any posts I create related to PHP I put in that category and WordPress displays them accordingly.
  • Pages. Pages sometimes confuse people because they look an awful lot like posts. The main difference is that pages will NOT show up in your regular post listings. So, for example your homepage that lists all your posts will NOT show pages. Pages also don’t get categorized. Pages are meant for “administration” type stuff like your “Contact” page or a “Support” page.
  • Themes. Themes control the look and feel of your site. They are what control how your content is displayed. Different themes will have different colors, layouts, options and so on. It’s worth taking some time and browsing the free themes available and finding one you like.
  • Plugins. Plugins add functionality to your site. For example, a plugin like Contact Form 7 will let you add contact forms to your site. Or a plugin like WishList Member will help turn your blog into a membership site. Just don’t overdo it. Generally speaking, more plugins means more overhead. You want to keep your site lean and fast.

So, with that basic understanding let’s run through setting up WordPress so you can start blogging.

Let’s start with the general settings. On the left side of the WordPress Dashboard, click on the “Settings” tab. This will take you to the General Settings page:

wp-settings-general

Set your site title, site tagline, timezone, date format and time format. These are used in various places on both the front and back end of WordPress.

Next, click on the Settings > Permalinks tab:

wp-settings-permalink

99.9999999999% of the time you’ll select the “Post Name” option. The only time you won’t is if you know something I don’t and one of the other options is somehow better. But, you’ll already know that and you’re smarter than me so have at it.

Next, things get a bit tricky but don’t worry… I’ll walk you through it. WordPress is in the middle of this funny transition right now where theme options can potentially exist in three places.

Theme options are the settings each theme has that let you customize the look and feel of your site. Every theme has different options. Some more. Some less.

These options can show up in three places. The first (old) place is under Appearance > Theme Options. The second (old) is under its own menu (e.g. Canvas). The third (new) is under Appearance > Customize.

In the future, theme options should be housed under Appearance > Customize so check there first. If you don’t find much then look for the other two places.

That said… once you find where the options are there’s a few basic options most themes should let you customize.

The first is your logo. On my theme, it looks like this:

wp-appearance-logo

This will differ a bit based on your theme, but most should have a way for you to upload your logo. Do that. If you don’t have one… try to get one fairly soon but don’t worry because WordPress will simply display your Site Title and Tagline.

Of course, for your theme you can look through the different theme options available and play around a bit to find what you like.

Next up is your menus. This is the menu bar that displays across the top of your site. You can specify what links appear there.

To do this, we’ll need to create a couple pages to display in our menu. So, go to Pages > Add New:

wp-pages-add-new

For now, we’ll create two pages: About and Contact. You can simply just enter the title for each page and save them. You can come back and edit them later. We just need them created so we can add them to your menu.

Once those two pages are created, head over to Appearance > Menus:

wp-appearance-menus

Here, there’s a few things to look at. First, you have Menus and you have Theme Locations. On this page, you’re essentially accomplishing two things:

  1. Creating menus with your desired menu items
  2. Associating menus to theme locations

So, each theme will have different “locations” where you can add menus. Most will have a menu bar at the top which is usually the Primary Navigation Menu. But, there could be many others.

You can create multiple menus and associate different menus with different locations. So for example, you could have one menu with one set of items at the top of your blog and another menu with a different set of items in your footer.

This screen does all that.

For now, we’re worried about the Primary theme location.

wp-appearance-menus-add-item

Create a new menu and name it Primary.

Then, on the left side under “Pages” check the boxes next to “Home”, “About” and “Contact” (the two pages we just created) and select “Add to Menu”.

Then, at the bottom select the “Primary Navigation Menu” checkbox under the “Theme Locations” section.

Then, hit “Save Menu”. This will add those items to your menu and associate that menu with the primary theme location.

If you go to the front end of your site, you should now see those menu items at the top of your blog.

Now, we can move onto widgets. Go to Appearance > Widgets. This is where you can add items to the sidebar of your blog.

wp-appearance-widgets

Again, different themes will have different Sidebars where you can add widgets. However, most will have a Primary or Default sidebar.

For now, simply drag the Recent Posts and the Categories widget from the left side of the screen over to the Primary Sidebar and drop them there.

This will add these widgets to your sidebar.

Finally, click the home icon on the top left of WordPress. This will take you to the front end of your site so you can see how it looks. You should now have set up site with your menu, widgets, logo and all the basic stuff set up:

wp-visit-site

To get back to the “back end” of WordPress you can click the “Dashboard” link in the top menu bar:

wp-visit-admin

Now What?

So, that does it for the initial setup. From here you can start creating content and getting familiar with WordPress. Of course, you might be wondering what now. Here’s a few next steps you can take:

  1. Don’t forget to edit your About and Contact pages
  2. Delete the “Hello World” post WordPress comes with
  3. Create and publish your first post
  4. Browse through some themes at Appearance > Themes
  5. Browse the Plugin Repository at Plugins > Add New

If you know someone who would benefit from this post, I’d really appreciate it if you’d share it with them.

October 16, 2015

How to Create a Zebra Striped Table With Odd Even Row Colors Using PHP

In this PHP tutorial, you’ll learn how to create a zebra striped table by adding odd and even classes in a loop using PHP.

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

Get the source code for this video as a supporting listener of The John Morris Show on Patreon

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

October 14, 2015

Add Active Navigation Class to Menu Item Based on URL Using jQuery

In this jQuery tutorial, you’ll learn how to add an active class to a menu item based on the page URL using jQuery… so you can highlight that menu item. You’ll learn:

  • how use the jQuery addClass() method
  • how to get the current page’s URL path in JavaScript
  • how to split a URL in an array of parts
  • how to use the JavaScript pop() method
  • how to target an element based the value of a specified attributed using jQuery

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>About</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>Contact</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>Home</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>Keep Calm and jQuery On!</h1>
</body>
</html>

jQuery(document).ready(function($){
// Get current path and find target link
var path = window.location.pathname.split("/").pop();

// Account for home page with empty path
if ( path == '' ) {
path = 'index.php';
}

var target = $('nav a[href="'+path+'"]');
// Add active class to target link
target.addClass('active');
});

html, body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
font-size: 100%;
}

nav {
background: #000;
color: #fff;
}

nav a {
color: #fff;
text-decoration: none;
}

nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}

nav ul li {
display: inline-block;
margin-right: -5px;
}

nav ul li a {
display: block;
padding: 10px 15px;

}

nav ul li a:hover,
nav ul li a.active {
background: #555;
}

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

September 20, 2015

Set DIV Height to 100% of Its Parent Using jQuery

In this jQuery tutorial, you’ll learn how to set the height of a DIV to 100% of its parent. You’ll learn:

  • how to set variables and target selectors
  • how to get and set div height using height()
  • how to target multiple selectors at once

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<title>jQuery DIV 100% Height of Container</title>
<style>
.container {
overflow: hidden;
border: 1px solid red;
}

.left, .right {
border: 1px solid #000;
float: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
// Get the height of our container
var container_height = $('.container').height();

// Set target DIVs height to container height
$(".left, .right").height(container_height);
});
</script>
</head>
<body>
<div class="container">
<div class="left">
<p>One paragraph of text. This is the shorter div.</p>
</div>
<div class="right">
<p>Multiple</p>
<p>Paragraphs</p>
<p>Of</p>
<p>Text</p>
<p>This is the longer div.</p>
</div>
</div>
</body>
</html>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

September 11, 2015

jQuery Tutorial: How to Build a jQuery Accordion

In this jQuery tutorial, you’ll learn how to build a jQuery accordion. You’ll learn:

  • how to slideUp() and slideDown() different elements
  • how to use relative selectors to target elements in jQuery
  • how to use the click event to trigger functionality on click

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Accordion</title>
<style>
html, body {
font-size: 100%;
}

.accordion {
margin: 50px;
}

.accordion dt,
.accordion dd {
padding: 10px;
border: 1px solid #000;
}

.accordion dt a,
.accordion dd a {
display: block;
color: #000;
font-weight: bold;
}

.accordion dt {
background-color: #ccc;
}

.accordion dd {
margin: 0;
border-top-width: 0;
border-bottom-width: 0;
font-size: 1rem;
}

.accordion dd:last-of-type {
border-bottom-width: 1px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){

// Hide all panels to start
var panels = $('.accordion > dd').hide();

// Show first panel on load (optional). Remove if you want
panels.first().show();

// On click of panel title
$('.accordion > dt > a').click(function() {
var $this = $(this);

// Slide up all other panels
panels.slideUp();

//Slide down target panel
$this.parent().next().slideDown();

return false;
});
});
</script>
</head>
<body>
<dl class="accordion">
<dt><a href="">Panel 1</a></dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nisl quam, convallis ac lacus vel, mollis bibendum ante.</dd>

<dt><a href="">Panel 2</a></dt>
<dd>Suspendisse potenti. In ullamcorper posuere nibh, in pretium metus porttitor vitae. Aenean felis libero, condimentum sagittis.</dd>

<dt><a href="">Panel 3</a></dt>
<dd>Laoreet quis, auctor in orci. Ut gravida nibh vitae lorem egestas, vel commodo mi gravida. Curabitur elementum dolor id lacus.</dd>
</dl>
</body>
</html>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

September 6, 2015

Responsive Web Design: Building a Responsive Menu

In this responsive web design tutorial, you’ll learn how to build a responsive menu. You’ll learn:

  • how to target different breakpoints with media queries
  • how to write the CSS to “flip” the menu from vertical to horizontal view at those breakpoints
  • how to use jQuery to create a responsive navigation icon that toggles the mobile menu

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Navigation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
nav {
background: #000;
overflow: hidden;
}
.header {
float: left;
color: #fff;
padding: 15px;
overflow: hidden;
}
.logo {
font-size: 24px;
}
.handle {
float: right;
background: #222;
color: #fff;
border: none;
font-size: 18px;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
display: none;
}
nav a {
text-decoration: none;
color: inherit;
}
nav ul {
overflow: hidden;
color: #fff;
margin: 0;
padding: 0;
text-align: center;
transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
-ms-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
}
nav ul li {
float: right;
display: inline-block;
padding: 20px;
}
nav ul li:hover {
background-color: #222;
}
section {
box-sizing: border-box;
line-height: 1.5em;
width: 70%;
margin: 0 auto;
padding: 20px;
}
@media screen and (max-width: 767px) {
.header {
float: none;
}
nav ul {
background: #222;
max-height: 0;
width: 100%;
}
nav ul.show {
max-height: 20em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
}
.handle {
display: inline;
}
section {
width: 100%;
}
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.handle').on('click', function(){
$('nav ul').toggleClass('show');
});
});
</script>
</head>
<body>
<nav>
<div class="header">
<a class="logo">Demo</a>
<button class="handle">
<i class="fa fa-bars"></i>
</button>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section id="content">
<h1>Responsive navigation is da bomb!</h1>
<p>Mobile users around the world thank you!</p>
</section>
</body>
</html>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

August 8, 2015

Why Can’t I Get Work at Upwork But Others Can?

It boils down to how freelance sites work. They are designed to surface the best freelancers on their platforms.

That doesn’t meant you’re not good if you’re struggling to get any traction. It means if you’re new to Upwork you’re at a big disadvantage.

But, it’s also not hopeless. With the strategy I’m about to show you, you can quickly gain momentum and rise to the top where getting work is a whole lot easier.

Think of this like an “Upwork Fast-Start Guide”.

The benefit of following this formula is you virtually eliminate the advantage veteran Upwork developers have so you can:

  • Rank higher for relevant freelancer searches and get in front of more potential clients…
  • Eliminate the natural skepticism a potential client will have about your profile not being as “robust” as other developers…
  • Strategically grow your presence on the platform until you end up ranking high on the list for the biggest search terms…

Here’s why this formula works…

Imagine you’re shopping for a new computer. Let’s say you’re looking for a fast computer that can handle a lot of HD video editing.

You’ve narrowed your search down to two options.

The sales page for computer 1 reads like this:

“High powered computer that can handle the most resource-intensive tasks with ease.”

And, the sales page for computer 2 reads like this:

“A 3.2GHz Quad-Core Intel I-7 process with 16MB RAM designed specifically for editing massive HD videos with ease.”

Almost universally, people will instinctively choose the second computer because it’s messaging is aimed right at what they’re after.

This is the advantage you have as a new developer on Upwork.

Most of the well-established developers on Upwork market themselves as “generalists” and have generic profiles. They’re marketing themselves as the “high-powered computer”.

You can out-maneuveur them by marketing yourself as a specialist which will accomplish two things on Upwork:

  1. Cause you to rank higher for specific keywords because your profile is more relevant to that search
  2. Appeal to potential client’s instinct to choose the more targeted option

This is critical when you first start because you simply cannot compete with those developers based on the authority algorithms Upwork uses.

They have a longer job history, more reviews, ratings and so on.

And, they’ll continue to suck up all the work and leave none for you unless you implement this fast-start formula.

So, here’s what to do:

1. Choose Your Target

Pick a very specific niche to go after. Don’t market yourself as a “web designer”. It’s too broad and dominated by established developers.

Instead market yourself in specific terms…

  • “ajax developer”
  • “jquery developer”
  • “html and css guru”
  • “mobile website specialist”

I marketed myself as a “WishList Member Developer” who built (only) membership sites using WordPress and WishList Member.

I was able to rank in the top 3 consistently for the keywords “wishlist member” and won most of the jobs that came through for that term.

The way to do this is to think of 3-5 aspects of web development that you enjoy.

For example: jQuery, WordPress themes and AJAX forms.

Then, go on Upwork and search the job posting for related terms. I’ve found that a new job posting once every 24 hours is usually plenty of potential work to sustain what I want to make each month.

Look at the different terms and decide on the one that is the best combination of what you enjoy, volume of jobs, and potential revenue.

2. Market Yourself as a Specialist

Relevance is how you’re going to win in the beginning. So, now that you’ve chosen a targeted niche to go after you’ll want to build your profile around that niche:

  • Your title should include your main keyword (WordPress Theme Developer instead of Web Designer)
  • Your keywords should all be related to your niche
  • You should naturally sprinkle relevant keywords throughout your description
  • Your portfolio items should all be projects related to this niche
  • Any test, certifications, skills, etc… should all be relevant to the niche

Everything should point to you being an expert in this very specific area of web development.

Not only will you rank higher in searches but you’ll be more appealing to clients looking for specifically what you offer.

3. Build Your Job History

With your niche targeted and your profile set up, don’t sit back and wait for jobs to come to you. You need to start building your job history so you can gain authority like the more-established Upwork developers.

Search for job postings related to your niche and bid aggressively. At this stage, it’s not about making money… it’s about building your profile.

Here’s a quick tip…

When you bid on a job you can bid whatever price you like while keeping the price on your profile the same.

So, keep the your profile price at your ideal rate. But, in the beginning don’t be afraid to discount your rated in order to get the job when bidding on individual projects.

Just be sure to say in your proposal something like: “I’m new to Upwork and wanting to establish my credibility here so I’m willing to take this job at a 50% discount on my regular rate. Any future jobs will be at my regular rate.”

That way, if a client is really impressed with your work they know that they’ll be paying your regular rate going forward and it’s easy to transition them over.

No… not all clients will hire you again because of that.

But, many will… and regardless getting the job will help you build your authority on Upwork so eventually you no longer need to discount your fee.

As you get more work, you’ll begin to notice your profile ranking higher for relevant searches and more job invites flowing in.

At that point, you can then consider reworking your profile to target larger, more general niche if you wish.

Although, I never did because I liked working the projects I was getting.

If you follow this formula, you’ll be much more likely to have success on Upwork and get clients instead of wondering why everyone else is getting them and you aren’t.

First Steps…

We’ve covered a lot… what do you need to do to get started with this formula quickly?

I like to think up a few niches I want to target and do the searches on Upwork to see how many jobs are there.

It gives me a good indicator of the kind of volume I can expect and whether a particular niche is viable or not.

So, write down 3-5 web development niches you’re interested in, head over to Upwork and search the available jobs to see what’s available.

(Photo by: flickr.com/photos/sybrenstuvel)

August 4, 2015

jQuery Tutorial: Submit a Form and Post Data Using jQuery and AJAX

In this jQuery tutorial, you’ll learn how to submit a form, post the data and format the response using jQuery and AJAX:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<title>Get Data From a MySQL Database Using jQuery and PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Set form variable
var form = $('#search_form');

// Hijack form submit
form.submit(function(event){
// Set username variable
var username = $('#username').val();

// Check if username value set
if ( $.trim(username) != '' ) {
// Process AJAX request
$.post('process.php', {name: username}, function(data){
// Append data into #results div
$('#results').html(data);
});
}

// Prevent default form action
event.preventDefault();
});
});
</script>
</head>
<body>
<span>Search by name: </span>
<form method="POST" action="process.php" id="search_form">
<input type="text" id="username" name="name">
<input type="submit" id="submit" value="Search">
</form>
<div id="results"></div>
</body>
</html>

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');

// Check if $_POST is set
if ( empty ( $_POST['name'] ) ) {
echo "Yo! Something ain't legit!";

exit;
}
// Connec to MySQL
$mysqli = new mysqli('localhost', 'YOUR_USERNAME', 'YOUR_PASSWORD', 'YOUR_DATABASE');

// Check connection
if ( mysqli_connect_errno() ) {
echo "Can't connect: " . mysqli_connect_error();
}

$stmt = $mysqli->prepare("SELECT * FROM ajaxget WHERE name = ?");
$stmt->bind_param("s", $_POST['name']);
$stmt->execute();

$result = $stmt->get_result();

while( $row = $result->fetch_object() ) {
$rows[] = $row;
}
?>
<ul>
<?php foreach ( $rows as $row ) : ?>
<li><?php echo $row->name; ?>: <?php echo $row->favorite_food; ?></li>
<?php endforeach; ?>
</ul>

If you enjoyed this tutorial and want to keep learning, check out my free tutorial site here: https://johnsfreetuts.com

July 30, 2015

jQuery Tutorial: AJAX Load Content With No Page Refresh

Here’s how to load content into a div on click using the AJAX load method:

Here’s the code I used in the video:

<h1>About</h1>
<p>This is the about page</p>

<h1>Home</h1>
<p>This is the home page</p>

<DOCTYPE html>
<html>
<head>
<title>Load a Page With AJAX and No Refresh</title>
<style>
#nav ul {
overflow: hidden;
margin: 0;
padding: 0;
list-style-type: none;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: inline-block;
padding: 10px 15px;
}
#content {
padding: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Set trigger and container variables
var trigger = $('#nav ul li a'),
container = $('#content');

// Fire on click
trigger.on('click', function(){
// Set $this for re-use. Set target from data attribute
var $this = $(this),
target = $this.data('target');

// Load target page into container
container.load(target + '.php');

// Stop normal link behavior
return false;
});
});
</script>
</head>
<body>
<nav id="nav">
<ul>
<li><a href="#" data-target="home">Home</a></li>
<li><a href="#" data-target="about">About</a></li>
</ul>
</nav>
<div id="content">
<?php include('home.php'); ?>
</div>
</body>
</html>

If you enjoyed this tutorial and want to keep learning, check out my free tutorial site here: https://johnsfreetuts.com

July 23, 2015

Build a Grid Layout For WordPress Using WP_Query

Here’s how to build a grid layout for WordPress via shortcodes and WP_Query:

A lot of WordPress developers immediately rush to query_posts in order to create custom loops.

But, query_posts is meant for altering the main loop of a WordPress page/post (actually, it’s not even recommended for that anymore).

Using get_posts() is okay… but, if you want that real WordPress flavor using WP_Query is the way to go.

In the video above, I show you how to use WP_Query to create a custom loop inside WordPress in order to build a Pinterest-style grid layout.

Here’s the code I used in the video:

<?php
/*
Plugin Name: John Morris Grid
Plugin URI: https://johnmorrisonline.com/
Description: Demo plugin that displays posts in a grid format via shortcode
Version: 1.0.1
Author: John Morris
Author URI: https://johnmorrisonline.com
Text Domain: johnmorris-grid
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Domain Path: /lang
*/

if ( ! class_exists( 'John_Morris_Grid' ) ) {
class John_Morris_Grid {
/**
* Init
*
* Initializes the plugin
*/
public function init() {
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
add_image_size( 'jmogrid', 220, 220, true );
add_shortcode( 'jmogrid', array( $this, 'shortcode_handler' ) );
}

/**
* Enqueue Scripts and Styles
*
* Enqueues styles and scripts used throughout the plugin
*/
public function enqueue() {
wp_enqueue_style('jmogrid', plugins_url( '/css/style.css', __FILE__) );
}

/**
* Shortcode Handler
*
* Handles shortcode processing
*/
public function shortcode_handler($atts) {
$atts = shortcode_atts(
array(
'posts_per_page' => 100
), $atts, 'jmogrid'
);

return $this->grid($atts);
}

/**
* Grid Builder
*
* Builds the grid
*
* @param array $args Query argumenst passed to WP_Query
*
* @return string $html The HTML output
*/
public function grid($args) {
$grid = new WP_Query($args);

ob_start(); ?>

<div id="jmogrid">

<?php $count = 1; if ( $grid->have_posts() ) : while( $grid->have_posts() ) : $grid->the_post(); ?>
<?php
$modulus = $count % 5;

if ( $modulus == 1 ) {
$class = 'first';
} elseif ( $modulus == 0 ) {
$class = 'last';
}
?>
<div class="jmogrid-item <?php echo $class; ?>">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('jmogrid'); ?>
</a>
<?php endif; ?>
<h4>
<a href="<?php the_permalink(); ?>"><?php echo wp_trim_words(get_the_title(), 6); ?></a>
</h4>
<p class="jmogrid-meta">
<?php _e( 'Written by', 'johnmorris-grid' ); ?> <?php the_author(); ?><br />
<?php echo get_the_date( get_option( 'date_format' ) ); ?>
</p>
<p><?php echo wp_trim_words( get_the_content(), 10); ?></p>
</div>

<?php unset($class); $count++; endwhile; wp_reset_postdata(); endif; ?>

</div>

<?php return ob_get_clean();
}
}

// Instantiate Class
$JohnMorrisGrid = new John_Morris_Grid;

// Hook in
add_action( 'init', array( $JohnMorrisGrid, 'init' ) );
}

/* John Morris Grid CSS */

#jmogrid {
overflow: hidden;
clear: both;
}

.jmogrid-item {
overflow: hidden;
box-sizing: border-box;
width: 18%;
float: left;
margin: 20px 1%;
border: 1px solid #e4e4e4;
border-radius: 3px;
}

.jmogrid-item.first {
width: 19%;
margin-left: 0;
}

.jmogrid-item.last {
width: 19%;
margin-right: 0;
}

.jmogrid-item h4,
.jmogrid-item p {
margin: 0;
padding: 20px;
}

.jmogrid-item h4 {
padding-bottom: 0;
}

.jmogrid-item p {
font-size: 1.5rem;
}

p.jmogrid-meta {
font-size: 1.2rem;
color: #777;
padding-bottom:0;
padding-top: 5px;
}

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

July 16, 2015

Pure HTML and CSS Dropdown Menu

Here’s how to create a pure HTML and CSS dropdown menu:

Here’s the code I used in the video:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pure CSS Dropdown Navigation</title>
<style>
body, html {
margin: 0;
font-family: Arial, sans-serif;
font-size: 1em;
}

.navbar {
width: 100%;
background-color: #000;
height: 80px;
color: #fff;
}

.logo {
display: block;
color: #fff;
text-decoration: none;
float: left;
height: 50px;
padding: 15px 40px;
font-size: 1.5em;
line-height: 50px;
}

.navbar .nav {
margin: 0;
padding: 0;
float: left;
list-style-type: none;
}

.navbar .nav li.nav-item {
float: left;
}

.navbar .nav li.nav-item > a {
display: inline-block;
padding: 15px 20px;
height: 50px;
line-height: 50px;
color: #fff;
text-decoration: none;
}

.navbar .nav li.nav-item > a:hover {
background-color: #333;
}

.dropdown a:focus {
background-color: #333;
}

.dropdown a:focus ~ .dropdown-container {
max-height: 500px;
transition:max-height 0.5s ease-in;
-webkit-transition:max-height 0.5s ease-in;
-moz-transition:max-height 0.5s ease-in;
}

.dropdown-container {
position: absolute;
top: 80px;
max-height: 0;
overflow: hidden;
background: #000;
color: #fff;
}

.dropdown-container a {
color: #fff;
text-decoration: none;
}

.dropdown-menu {
margin: 0;
padding: 0;
list-style-type: none;
}

.dropdown-menu li a {
display: inline-block;
min-width: 200px;
padding: 15px 20px;
border-bottom: 1px solid #333;
}

.dropdown-menu li a:hover {
text-decoration: none;
background: #333;
}

.content {
padding: 40px;
}
</style>
</head>
<body>
<nav class="navbar">
<a class="logo" href="#">CSS Navigation</a>
<ul class="nav" id="primary-nav">
<li class="nav-item"><a href="">Home</a></li>
<li class="nav-item"><a href="">About</a></li>
<li class="nav-item dropdown">
<a href="#">Dropdown</a>
<div class="dropdown-container">
<div class="dropdown-inner">
<ul class="dropdown-menu">
<li class="dropdown-menu-item"><a href="#">Sub Item 1</a></li>
<li class="dropdown-menu-item"><a href="#">Sub Item 2</a></li>
<li class="dropdown-menu-item"><a href="#">Sub Item 3</a></li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
<div class="content">
<h1>Pure CSS Navigation Source Code</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus mauris risus, at fringilla ante tempor vel. Duis nec lectus velit. Morbi malesuada, nulla id imperdiet posuere, nulla diam tincidunt neque, ac facilisis lacus tellus vitae nibh. Fusce malesuada, ipsum eget luctus pulvinar, nulla neque ultrices dui, accumsan malesuada eros tortor sed nisl.</p>
<p>Phasellus imperdiet libero ipsum, sit amet facilisis leo dignissim ut. Nulla euismod, nibh nec ornare tristique, leo quam posuere metus, sed vestibulum quam odio pellentesque mi. Proin consectetur lectus non interdum congue. Fusce rhoncus suscipit laoreet. Ut elementum sit amet quam a lacinia.</p>
</div>
</body>
</html>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

July 10, 2015

The Truth About the The Complete iOS 9 and Swift Course by Rob Percival

This is my review of Rob Percival’s Complete iOS9 and Swift course on Udemy. I’m writing this review because it’s a very popular course on Udemy and a topic I know my audience is interested in… so I want to help you decide if it’s the right course for you.

Here’s my review of the course:

Overview

The Complete iOS9 and Swift course is meant to be an in-depth treatment of building iOS apps using Swift. In the course you’ll learn the following topics:

  • XCode and Interface Builder
  • Inputs, Buttons, and Reactive Interfaces
  • Apple’s New Programming Language: Swift
  • Variables, Arrays, Tables, and Loops
  • Navigation, Storage, and Live Content
  • Images, Maps and Music
  • Accelerometers and Motion Feedback
  • Core Data and JSON
  • Online Storage With Parse
  • Games and the Sprite Kit
  • Instagram and Snapchat Clones
  • App Store Submission
  • Making a Marketing Website For Your App

A comprehensive list to say the least. With that massive list of topics, the course boasts 207 lessons and 29 hours of content. You also build 18 real-world apps including Instagram, Tinder, Snapchat, Flappy Bird & Uber Clones .

Teacher

The course is taught by Rob Percival. Rob has a degree in Mathematics from Cambridge University and spent the first part of his career as a math teacher.

After building websites in his spare time for friends and family, he realized he enjoyed web development and it was a lucrative career so he gave up teaching to become a web developer full-time.

Here’s what I like about Rob’s teaching style:

  • He’s well-spoken and clear in his communication
  • As a former teacher, he can communicate complex concepts in easy-to-understand terms
  • He’s very knowledgeable regarding web development
  • He’s active in the course chat and answers questions promptly
  • He’s to the point and doesn’t drone on and on

Here’s some things I wish were better:

  • I think he speaks a bit too closely to the microphone and there are some “pops” in the audio
  • You catch some of the background mouse clicks, etc.

The audio is crisp and clear and there’s no concern about hearing what he’s saying… but after 29 hours you start to notice the few minor audio hiccups.

Who Is the Course For?

I believe this course is a great fit for developers who fall into the following categories:

  • Full-stack web developers looking to round out their complete development skills
  • Aspiring game developers looking to build apps for iOS
  • Intermediate developers who want to ensure they know everything they need to
  • You’re self-taught and looking for clear outline of what you need to learn
  • You’re just out of college and feel like you’re missing some of the in-demand skills

Who Is the Course NOT For?

I believe the course won’t be useful to developers in the following categories:

  • You’re an advanced developer looking for very advanced topics
  • You prefer written tutorials over video tutorials

Pros and Cons of the Course

Here’s a list of the pros:

  • It really is complete covering all the essential topics
  • Rob is a talented teacher who explains things well
  • Rob is entertaining and keeps you engaged throughout the lessons
  • The course is laid out intelligently
  • The video quality is excellent
  • Rob is active in the chat and answers questions
  • It has a large student base (64,754+) so you have lots of other developers to learn with

Here’s a list of the cons:

  • I wish some parts were explained with a touch more detail
  • It’s a technical topic but a few parts got a bit slow
  • A bit more detail on Swift
  • At $199, the price can be prohibitive for some (I’ve solved this)

How Do You Get the Course?

The Complete iOS9 and Swift course is available on Udemy for a fee of $199. The good news is that I’ve worked out a deal with Rob for my online audience and he’s agreed to offer you a 75% discount on the course.

If you purchase his course through my affiliate link, you’ll get the 75% discount:

Click here for the 75% discount

Full disclosure: I will (at NO cost to you) earn a small commission if you purchase the course through that link. I wouldn’t recommend the course if I didn’t believe it would truly help you. The small commission is just a side benefit.

Special Bonus

I believe strongly enough that this course will really help most up and coming web developers that I wanted to offer a special bonus with Rob’s course to help give you every reason to invest in it.

So, if you purchase the course through my affiliate link I will send you my revised Web Developer Learning Guide where I outline the order in which I would learn the various skills necessary for a web developer.

To get the bonus, follow these steps:

1. Purchase the course through my affiliate link 75% off

2. Forward your Udemy invoice to cwdc at johnmorrisonline dot com and I’ll email you the Web Developer Learning Guide PDF.

June 25, 2015

Top 10 Web Development Courses on Udemy

This is my list of the top 10 web development courses on Udemy. My reviews are based on my experience with the course and my 10+ years experience as a web developer.

I am an affiliate for Udemy, so if you choose to purchase a course using my discount links below I will (at no cost to you) earn a small commission.

But, my reviews are based purely on my objective opinion of the courses.

So, here’s my top 10:

1. Complete Web Developer Course – Build 14 Websites

This is #1 because it’s the most comprehensive web development course I’ve found on Udemy. It has 235 lectures and 18+ hours of content. It covers HTML, CSS, JavaScript, jQuery, PHP, MySQL, WordPress, APIs, Mobile Apps and more. It retails for $199, but you can get it 25% off with this coupon code.

Read My Full Review Learn More on Udemy

2. Multi Page Online Form With PHP, MySQL and Session Variables Course

This course is in my top 10 for the sheer awesome-ness of the end result. Sebastian shows you how to create a great-looking multi-page form that retains its values from page to page and stores the results in a database. It’s a very slick form and worth looking at the demo video just to see what’s possible.

Learn More on Udemy

3. The Complete iOS 9 and Swift Course: Learn by Building 15 Real-World Apps

This course comes in #3 because of the value of learning to develop iOS apps and just how comprehensive it is. Rob has a knack for these kinds of courses. This one boasts 207 lectures and over 29 hours of content and you’ll build 15 real-world apps throughout the course. It retails for $199 but get it 25% off with this coupon code.

Read My Full Review Learn More on Udemy

4. Build Websites From Scratch With HTML and CSS

This is one of the more advanced HTML and CSS courses I’ve found. What makes it great is the detail Brad goes into. If you want to really dig and master HTML and CSS at a high level, this is the course. It retails for $149 but get it 25% off with this coupon code.

Read My Full Review Learn More on Udemy

5. Learn and Understand AngularJS

This course makes the list because it really does simplify learning AngularJS and covers one of the up and coming frameworks developers will need to know going forward. Anthony is an experienced developer who’s been coding since 12 years old and explains Angular JS in a way that makes quicker to grasp and use. It retails for $99 but get it 25% off with this coupon code.

Read My Full Review Learn More on Udemy

6. WordPress Theme Development With Bootstrap

WordPress has become a must for web developers. I chose this course because it shows you how to build WordPress themes using Bootstrap which is my personal favorite combination… and is frankly about 100 times easier than starting from scratch. You’ll build a full WordPress theme in this course. It retails for $197 but get it 25% off with this coupon code.

Learn More on Udemy

7. Responsive Web Design AND Web Development with HTML5 & CSS3

Responsive web design IS web design. If you want to be a web developer, you need to know this. And with 77 lectures and over 12 hours of content this course will teach everything you need to know plus all the fancy tricks to make your responsive sites really stand out. It retails for $199 but get it 25% off with this coupon code.

Learn More on Udemy

8. The Complete Apple Watch Developer Course – Build 14 Apps

I’m and Android guy… but there’s no denying the Apple Watch is taking off. As a developer, you can tap into a huge opportunity for more clients and career opportunities by being ahead of the curve on trends like this. In this course, you’ll build 14 Apple Watch apps and master app-building for this new form factor. It retails for $199 but get it 25% off with this coupon code.

Learn More on Udemy

9. Writing Secure PHP Code

This is probably the most overlooked topic for new developers.. but the most critical. This course is great because it actually explains the different types of attacks hackers will try to make against your sites and applications then shows you how to write your code to deal with all of them. This course is a must for serious developers.

Learn More on Udemy

10. User Experience Design Fundamentals

Another fairly overlooked topic but so important. Being able to write code isn’t enough… you need to know how to design applications that people will actually use. This skill can be put you head and shoulders above other developers because so few take this serious.

Learn More on Udemy

June 20, 2015

Prevent XSS Attacks. Escape Strings in PHP

Here’s how to prevent XSS attacks by escaping output in PHP:

Here’s the code I used in the video:

<?php
function _e($string) {
echo htmlspecialchars($string, ENT_QUOTES, 'UTF-8');
//echo htmlentities($string, ENT_QUOTES, 'UTF-8');
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Escape Output</title>
</head>
<body>
<?php _e('This is a problem: <script>alert("Yikes");</script>'); ?>
</body>
</html>

What Is XSS?

XSS stands for cross-site scripting and it refers to a type of attack where a hacker injects malicious client-side code into the output of your page.

Applications that don’t escape their output are vulnerable to this type of attack.

XSS Example

A simple example is a blog comment. If not properly escaped, an attacker could enter (for example) JavaScript code into the blog comment.

That code would be stored in the database, output to the page when loaded, and because it’s not escaped… render and run.

Thus, the attacker would have the full range of JavaScript capabilities to attack you and your site visitors.

How to Prevent XSS Attacks

As illustrated in the video above, you prevent XSS attacks by escaping your output using htmlspecialchars() or htmlentities().

Both PHP functions convert problematic characters into HTML entities causing the injected code to be output harmlessly and not rendered.

htmlentities vs htmlspecialchars

Both will prevent XSS attacks. The difference is in the characters each encodes. htmlentities will encode ANY character that has an HTML entity equivalent.

htmlspecialchars ONLY encodes a small set of the most problematic characters.

It’s generally recommended to use htmlspecialchars because htmlentities can cause display problems with your text depending on what characters are being output.

Think of htmlspecialchars as a scalpel and htmlentities as a hammer. Both can solve the problem… one is just a little more precise.

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

June 18, 2015

Coupon Code for the Build Websites From Scratch With HTML and CSS Course on Udemy

The Build Websites From Scratch With HTML and CSS course on Udemy is a step-by-step look at building websites using HTML and CSS. The course covers these topics:

  • Building your first web page
  • DOCTYPE
  • Hyperlinks
  • Images
  • Tables
  • Forms
  • HTML5
  • Inline Styles
  • External Styles
  • Selectors
  • Classes and IDs
  • Inheritance
  • Pixels vs ems
  • And a bunch more

You can check out my full review of the Build Websites From Scratch With HTML and CSS course here if you still have questions. Otherwise, you can use the special link below for an 73% off coupon to the course:

[evd_link_tracker text=”Click here for the 73% off coupon code” u1base=”jmohtmlcsscoupon” url=”https://www.johnmorrisonline.com/go?id=htmlcss”]

That is an affiliate link and I will earn a small commission (at NO cost to you) when you purchase the course through that link.

June 8, 2015

The Truth About the Build Websites From Scratch With HTML and CSS Course by Brad Hussey

This is my review of Brad Hussey’s Build Websites From Scratch With HTML and CSS course on Udemy. I’m writing this review because it’s a very popular course on Udemy and a topic I know my audience is interested in… so I want to help you decide if it’s the right course for you.

Here’s my review of the course:

Overview

The Build Websites From Scratch With HTML and CSS course is meant to be an in-depth treatment of both HTML and CSS covering topics such as:

  • Building your first web page
  • DOCTYPE
  • Hyperlinks
  • Images
  • Tables
  • Forms
  • HTML5
  • Inline Styles
  • External Styles
  • Selectors
  • Classes and IDs
  • Inheritance
  • Pixels vs ems
  • And a bunch more

A comprehensive list to say the least. With that massive list of topics, the course boasts 77 lessons and 9 hours of content. You also build several HTML and CSS examples, web pages and websites along the way.

Teacher

The course is taught by Brad Hussey. Brad is a full-time web designer and developer building websites everyday for his clientele so he has a good grasp of what you really need to know to be successful.

Here’s what I like about Brad’s teaching style:

  • He speaks clearly and is easy to understand
  • He’s entertaining and keeps the lessons fun and engaging
  • He’s direct and to the point
  • He obviously knows HTML and CSS very well
  • He keeps is his lesson short so they’re easy to consume

Here’s some things I wish were better:

  • His demos are on a Mac with a Mac code editor. Not a big deal but would’ve been nice to see a PC editor too.
  • Some of the more super advanced topics aren’t covered like animations, transformations, iframes, etc.
  • He types a bit fast. 🙂

That said, I really am being picky.

Who Is the Course For?

I believe this course is a great fit for developers who fall into the following categories:

  • You’re brand new to HTML and CSS and want the fastest learning path
  • You’re an intermediate developer who needs a good refresher
  • You’re self-taught and looking for clear outline of what you need to learn
  • You’re just out of college and feel like you’re missing some of the in-demand skills

Who Is the Course NOT For?

I believe the course won’t be useful to developers in the following categories:

  • You’re an advanced developer looking for very advanced topics
  • You prefer written tutorials over video tutorials

Pros and Cons of the Course

Here’s a list of the pros:

  • It really is complete covering all the essential topics
  • Brad is a talented teacher who explains things well
  • Brad is entertaining and keeps you engaged throughout the lessons
  • The course is laid out intelligently
  • The video quality is excellent
  • Brad is active in the chat and answers questions
  • It has a large student base (39,000+) so you have lots of other developers to learn with

Here’s a list of the cons:

  • The use of the Mac editor I mentioned
  • Brad types a bit fast
  • At $149, the price can be prohibitive for some (I’ve solved this)

How Do You Get the Course?

The Build Websites From Scratch With HTML and CSS course is available on Udemy for a fee of $149. The good news is that I’ve worked out a deal with Brad for my online audience and he’s agreed to offer you a 25% discount on the course.

If you purchase his course through my affiliate link, you’ll get the 25% discount:

Click here for the 25% discount

Full disclosure: I will (at NO cost to you) earn a small commission if you purchase the course through that link. I wouldn’t recommend the course if I didn’t believe it would truly help you. The small commission is just a side benefit.

Special Bonus

I believe strongly enough that this course will really help most up and coming web developers that I wanted to offer a special bonus with Brad’s course to help give you every reason to invest in it.

So, if you purchase the course through my affiliate link I will send you my revised Web Developer Learning Guide where I outline the order in which I would learn the various skills necessary for a web developer.

To get the bonus, follow these steps:

1. Purchase the course through my affiliate link 25% off

2. Forward your Udemy invoice to cwdc at johnmorrisonline dot com and I’ll email you the Web Developer Learning Guide PDF.

June 8, 2015