Bootstrap (no coding) Build Bootstrap Websites the Easy Way!
4.6 (105 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,293 students enrolled

Bootstrap (no coding) Build Bootstrap Websites the Easy Way!

Bootstrap - Start your Bootstrap web design journey, learn to build fast loading, responsive bootstrap websites easily
4.6 (105 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,293 students enrolled
Created by Jamie Henry
Last updated 11/2018
English [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 18 hours on-demand video
  • 5 articles
  • 10 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build and customize, fast loading, awesome looking websites for themselves or their clients
  • Understandof how the basic bootstrap structure works
  • Source and use great stock photos with no cost.
  • Utilize awesome free software resources from the web
  • Upload a completed website to a live hosting provider
  • Inspect and live-edit the HTML and CSS of a page using the Chrome DevTools Elements panel.
  • Take on a web design project for many different types of business
  • Take the first steps to becoming a full time web designer
  • Need to have a desire to work from home and create awesome websites
  • Need to have a computer with Windows 7 or newer or Mac with recent OS
  • Need to be willing to learn some great new skills
  • Needs to have an interest in contributing to the online digital world

Take your first steps into the ever expanding, exciting, well paid world of web design and web development with Bootstrap. Learn how to build fast loading, responsive Bootstrap websites on your computer with no coding skills required. This course will give you a complete guide of where to find, and use free software that will enable you to build some awesome Bootstrap 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 find out how to build awesome Bootstrap websites the easy way.

Who this course is for:
  • Anyone that wants to work from home or start a home business
  • Creative people that are interested in starting to develop good looking websites for themselves or their customers
  • Poeple wanting to break into the well paid, exiting and ever growing world of web development
  • Anyone that has wanted to become a web designer but is put off by needing to learn to code
  • This course is not for people that want to build eCommerce websites
Course content
Expand all 76 lectures 18:05:32
+ Course Introduction
3 lectures 09:16

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

Preview 05:16
Instructor Announcement

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

Preview 03:14
+ Resources Section
4 lectures 18:45

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

Download the resources we will be using in this course

Important announcement about the bootstrap theme resource

Important announcement about the bootstrap theme reasource

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

4 - Take a look at the resources we have downloaded

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

Downloading our core Bootstrap files
+ Free Stock images and Free Text editor
2 lectures 12:29

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 stock Images

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.

Let's get some free graphics and text editing software

Answer some Image quiz questions

Test your stock images knowledge with this quiz
3 questions
+ Menu Logo and Hero section
3 lectures 25:47

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

Preview 10:22

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

Get your own logo in the game

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.

Customize our new slide show captions and buttons
+ Main Body Content
6 lectures 02:02:27

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.

Getting creative with the about section

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.

Create an engaging services section with background images

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.

Build a team section with linking social media icons

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 .

Adding images overlays to our portfolio 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.

Let's add some custom testimonials to our client section

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.

Adding information and pop out boxes to our blog
+ Get Connected
2 lectures 25:50

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.

Get connected with our working contact form

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.

Enable our contact form to work with a PHP file
A quick contact for quiz
1 question
+ Finishing Touches
2 lectures 20:04

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.

Preview 10:23

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.

Preview 09:41
+ Let's go live!
1 lecture 14:41

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 .

Time to make our site live with an FTP upload
+ What if?
10 lectures 01:27:45

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!

Introduction to the What if? section

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.

Preview 12:01

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

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

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.

What if Multi-page continued?

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.

Here are some extra files to download for multi column sections

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

What if I want to add a full width Google Map to my site
What if I want to change the font family of the template?

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!

Conclusion and final site files download
+ Bonus Section - Scratch Build A Bootstrap 4 One Page Site
43 lectures 12:28:27
Resource Links
Brackets Text Editor
Circle Images
Button Hover Effect
Inline Form
Logo and Navigation
Navigation Links
Scroll Spy
Smooth Scroll
Gradient Background
Image Hover Overlay
Image Hover Scale
Testimonial Carousel
Embed Video
Mute Embedded Video
Scrolling Text
Animated gif
Pop Up Box
Animated Counter
Full Width Video Background
Contact Form
Full Width Google Map
Font Awesome
Back To The Top
Hide Div on Scroll
Make Your Slider Responsive
Responsive Columns
Don't Stop Now
Final Site Files Download