Web design can often be taught in a way that doesn't engage the student, it's often the case that the student is following along building a website that they have no interest in, and although they want to learn, they find it difficult to find motivation knowing the end result is going to be something they're likely to forget all about and never try to improve on. It was apparent to me that there needed to be a project that has a twist, an exciting outcome, a potential for prosperity and student improvement and that's how I came to write this course on how to make money at the same time.
By following this project you will learn the fundamentals of Web Design, skills that are constantly improved throughout the course and skills that you can reproduce time and time again on both new and existing projects. We will be learning from a blank page, no fancy software, not relying on content management systems, everything from the ground up. Giving you the power to build your own websites from scratch.
In the beginning of the course you will start by picking up the basics of HTML and CSS, we'll then go on to implement these skills in a modern and stylish manner, eventually building a complete bespoke, responsive and quite frankly very nice website.
The project that we'll be working on is an information based site for the city of Orlando, we'll be advising tourists on what to do, where to go and how to travel, providing them with a great place to sit view what Orlando has to offer. Here's the bit you've been waiting to hear, how do we make money online? well we will be linking up to major Airlines, ticket distributors and more to provide them with customers from our website. If those customers go on to purchase say a flight or a set of tickets we'll be in for a tasty commission that will land straight in our bank account. How will we know if anyone has bought tickets/flights/more?? We'll be tracking it all from our 3rd party dashboard!
A double whammy! Web design and how to make money online, of course you can also make even more money from your new found web design skills by building other peoples websites, you could even start your own business building websites that make money... for other people. The possibilities are endless.
I look forward to seeing you on the course!
Introducing the course, a break down of how web design and making money online will be taught.
A text editor is used to write our code, we use a common free tool called sublime text.
Every page needs a standard html layout for us to enter in what we want to see on the page
HTML elements are the little bits and pieces that go into the main body of our html page
Blocks help us split up the page into different sections, this makes it a lot easier to create a nice design that links uo well with the stylesheet
The way we link to other pages is crucial through out this project, learning how to make money through commission based practices very much depends on your ability to use links.
The head is a very important part of the website, it allows us to link up to many different pages to make our website come alive.
Classes are a way of linking up to the stylesheet, if we have a style set under a class name we can call upon that class whenever we want to use the specific styling
ID's work in the same way as classes, it's just a different way of labeling them and keeping things simple.
A quick multi choice on how we use classes
Bootstrap was created by the guys at twitter, it gives us a framework in which a bunch of styles and HTML structures are already set up, making it amazingly easy to create great looking websites. Without it we would be stuck designing the website for a lot longer! Which isn't good when we want to get things up and running with a speedy revenue stream.
The grid system is the scaffold of bootstrap, it's fantastically easy to use once you get the hang of it.
There's lots of different things we can use out of bootstrap head over to their website and look at all the different classes we can use.
This lecture goes over the how we can actually make money online through providing a nice website. It will give you an overview of the project and how we set up a money making website.
We'll be using some code bootstrap has already laid out for us, it's incredibly simple to operate like this.
The big background images you see on modern websites look really cool, we're going to show you how you get the image to sit behind the text to give your website that modern feel.
This might be a tricky one, but it's one we've got to cover. When we use the bootstrap column structure we usually operate over 12 columns which spans the width of the page, but what happens if we don't want to span the width of the page, but still want to use the column system for styling. Well we have to use bootstrap nesting. In this one we tell bootstrap, look we want to continue to use your row and column system of 12 columns, but we don't want it to span the width of the page, we want it to rather span a a smaller width, the width we choose it to span in this video is 9 columns wide.
We can grab an interactive map from google and drop it into our website using a few easy steps.
Duplicated content is simply content that is seen more than once on the web. Google doesn't like to see this, so lets keep the content original!
Joining up the website so you can get from one page to another is pretty much crucial.
This is where the money making fun begins. Learn the logistics of making money online.
Learn where to find the links you need to hook your website up to the companies that are going to pay you.
Affiliate window is one option that will be considered for our link generation.
Commission Junction is the second company we're going to consider for link generation, Commission junction is probably the biggest in the USA.
This lecture is pretty important if you want to make sure you're going to get paid. We're going to show you how to hook up the paying companies to your money making website.
Of course you're going to want to know if your links are performing and you're going to want to see your commissions coming in, in this one we run through the reporting tools in affiliate window. These tools are also available in commission junction, just navigate to reports to see what's coming in and how many clicks you're getting.
Re-using code we've already written can be a life saver as far as time is concerned. It will make building sites so much easier later on down the line.
The twitter share button allows people who are visiting your site to share it with their friends, the share button will be placed within your code, it's super easy to use!
Social icons are present on a lot of the websites you see today, if you decide to do a facebook, twitter etc for your webpage you're going to want to link up to those accounts by allowing people to click on the icons and get taken straight there.
Getting your own website means getting a domain name, the bit in the top URL bar. Your very own www.
Hosting is what allows your website to run on a server, it's just a fancy word for a computer that you're never going to see, which runs 24/7 and holds hundereds/thousands/millions of websites. (or at least it will in your case)
We need to hook up your website address to your server, following the steps it's nice and easy but don't panic if it doesn't happen right away! These things take time to get up and running after you've clicked the button. Lots of things are going on in the background that we don't need to know about! We just know things are happening on the web that make take a little while.
Filezilla is a cool free tool we use to load our files up onto the server.
File transfer from your computer to the server is simple, when you want to make alterations to your site you're going to have to bring those files back down from the server, modify them, then re-upload. It's really easy, we'll show you how.
A sitemap just makes it easy for google to scan your site, in a few simple clicks we can get one on your server.
Google will probably find your website on it's own, it's clever like that! But we're going to make sure it finds you right away.