Take your first steps into the ever expanding, exciting, well paid world of web development. Learn how to build fast loading, responsive websites on your computer with no coding skills required. This course will take you a step by step guide of where to find, download and use free software resources that will enable you to build some awesome websites. We also cover how to upload the finished websites to a live hosting provider. Web design is a high demand skill and is still growing. This isn't a HTML5 or CSS3 coding course, but we will be demonstrating some easy code tweaks. The sites that you build after taking this course should sell to potential customers for a minimum of $1000 each. Start today and earn income by building awesome websites.
Introduction to the course - Explaining a little about the instructor, what you will learn and what you will need to complete this course.
Downloadable files to help you get what you need to follow along with this course, including links to source websites, easily insert-able code snippets and image resources
This video covers the many resources that we will be downloading for this course, including stock photo sites, free graphic software resources, bootstrap resource sites, and how we will go about using them
How to search for and find some awesome bootstrap templates and download the files needed to build our complete website
Navigate to some great stock photo sites, where we can get great free stock photos for our website. Learn how to download them and what sort of license we need to check for to use them for free
In this video we download an awesome free graphics program for editing our images, and a free text editor needed to edit our website HTML and CSS files.
Answer some Image quiz questions
Here we start digging into our website, we will be showing how to create, edit and customize our downloaded images, then insert them into our website slideshow
In this video we create a new logo with our graphics software, then cover how to insert the new logo into our website header.
Here we start to work on the hero section, learning how to edit and change the slide show captions to our customers needs, and how to edit the slide show call to action button.
In this video we work on the about section with our text editor. Adding the text, font awesome icons, and images that we want to use for our new website. We also cover how to edit and customize the animated progress bars.
Working on the services section, we add and edit icons, insert our custom text into information boxes.We also show how to change the section background image to one that we select.
Moving on to the team or staff section, we add the team photos to our website, insert custom text information and titles. We then go over how to add and delete social media icons, and how to add the linls needed to direct them to the required social media sites.
Here we work on the portfolio section, adding custom images and image overlays. We show how to add and remove image overlay external links and pop out light box links. We also show how to edit the image picker to enable selection of different photo groups .
In this video we learn how to edit the rotating client carousel section, covering adding custom customer images and testimonial text. We also cover adding external links and highlighted text below the images.
In this video we work on the blog section, we add our own images, insert our custom text to 'read more' information boxes. We then cover how to edit and customize the pop out full blog entry, showing also how to troubleshoot image size issues.
Here we start working on the contact form. Learn how to edit the contact form input fields and placeholder text, add our address and contact details. We also show how to change the text on the submit button.
In this video we go over how to edit the contact php file. This file needed to enable the sending of our contact form to our email address once the website is uploaded to a live hosting server. We also add a custom background image to the contact section.
In this video we show how to give our site a browser identity by adding a favicon icon. We also cover where to insert keywords, and where to enter description text to enable site discovery and information when the site is crawled by a search engine.
Here we add some custom code that will add a back to the top icon to our site. Adding this great feature will really enhance the user experience for any people that come to the site on a mobile device.
Here we have reached the point where we are happy with the design of our new website. In this video we learn how to upload our finished website to a live server at our hosting provider. After uploading we check the site and test that we can send and receive emails from our contact email form .
Welcome to the "What if?" section. We have covered a lot by this point in the course. Here is a bonus section that covers a few scenarios that may arise when customizing a site for a customer, and how to tackle them. Warning for the faint hearted, we are going to do some coding in this section. Don't worry I have made it very easy to follow. I know you can do it!
What if your customer wants a custom size logo? If you change the size of the logo, suddenly things can look out of alignment. In this video we learn how to correct this issue if it happens.
What if out website colors don't match our logo? If your customer sends you their company logo, and you find that the colors don't match the highlight colors you have used on your site. We show how to check the exact color, and then how to easily implement that color into your website.
What if we need to turn a one page scrolling website into a multi page website? So you have the perfect site that you want to use for a customer, but it is a one page scrolling site. your customer wants a multi page site with separate pages for each section. No problem, here we start working on converting a singe page to a multi page site. It's easier than you may think!
More about editing our multi page website. In this video we continue working on our multi page site conversion, turning our single page scrolling website into a five page website with updates menu and links.
Download these files to help follow along with the next video - They contain a css file and an columns.html file. These files will enable you to add extra multiple columns of text and images to your site with ease.
What if I want to add extra columns of text and images to my site? Here we show how to add additional columns of text and images to our website, using the provided file downloads in the previous lecture.
In this video we go through the steps needed to add a full width google map to your Bootstrap website. We show you how to get the map code, create your api key and insert it into your site.
Thank you for taking this course, I hope you have enjoyed it as well as learning some valuable new skills. I wish you all possible success with your new website building. Please look out for more courses about taking it to the next level from me, I will look forward to working with you in the future!
With over 25 years experience in the I.T. industry, Jamie has huge experience in many different fields. Originally from England, Jamie moved to the US in 2007 working for an I.T. company in Tennessee. Now a free lance web developer specializing in Wordpress, HTML5, CSS3, Joomla and Bootstrap, Jamie also has his own I.T. company near Knoxville in Tennessee, and is keen to pass his skills on to the ever growing web development world.