Build Cool Bootstrap Websites that you can Sell (no coding)

Visit Tutorial Page ( Report)

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.

  • Course Introduction
    • Introduction to this Bootstrap learning course

      Introduction to the course - Explaining a little about the instructor, what you will learn and what you will need to complete this course.

    • Course overview from the instructor

      Here is a introduction to the instructor and information about the resources and goals of this course

  • Resources Section
    • Download the resources we will be using in 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

    • 4 - Take a look at the resources we have downloaded

      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

    • Downloading our core Bootstrap files

      How to search for and find some awesome bootstrap templates and download the files needed to build our complete website

  • Free Stock images and Free Text editor
    • Let's get some free stock Images

      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

    • Let's get some free graphics and text editing software

      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.

    • Test your stock images knowledge with this quiz

      Answer some Image quiz questions

  • Menu Logo and Hero section
    • Create our eye catching hero slide show

      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

    • Get your own logo in the game

      In this video we create a new logo with our graphics software, then cover how to insert the new logo into our website header.

    • Customize our new slide show captions and buttons

      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.

  • Main Body Content
    • Getting creative with the about section

      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.

    • Create an engaging services section with background images

      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.

    • Build a team section with linking social media icons

      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.

    • Adding images overlays to our portfolio section

      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 .

    • Let's add some custom testimonials to our client section

      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.

    • Adding information and pop out boxes to our blog

      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.

  • Get Connected
    • Get connected with our working contact form

      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.

    • Enable our contact form to work with a PHP file

      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.

    • A quick contact for quiz
  • Finishing Touches
    • Give our site identity with a custom favicon

      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.

    • Let's add a back to the top button for our viewers

      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.

  • Let's go live!
    • Time to make our site live with an FTP upload

      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 .

  • What if?
    • Introduction to the What if? section

      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 my logo is a different size or color?

      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 my site colors need to change?

      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 I want to turn this into a multi-page site?

      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

    • What if Multi-page continued?

      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.

    • Here are some extra files to download for multi column sections

      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 need to add extra columns and text to my site

      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.

    • What if I want to add a full width Google Map to my site

      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.

    • Conclusion and final site files download

      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!

Write Your Review