The Essential Bootstrap Bundle

4.8 Value Rating*

Boostrap is all the rage online and why not! Learn this beautiful development skill and keep up to date with the latest version of Bootstrap. Learn from top web developer and tutors online, through this unique set of high quality courses.

$39

$19.50
13
COURSES
562
LESSONS
New
ENROLLED

LIFETIME ACCESS TO ALL THESE 13 COURSES
Develop Responsive Websites with Bootstrap 3
Develop Responsive Websites with Bootstrap 3

$10 Value

Learn Mobile First Web Development using Bootstrap
Learn Mobile First Web Development using Bootstrap

$29 Value

Bootstrap Basics Program Responsive Websites
Bootstrap Basics: Program Responsive Websites

$10 Value

Learn Bootstrap Design a Custom Landing Page in Bootstrap 4
Learn Bootstrap: Design a Custom Landing Page in Bootstrap 4

FREE

Start Now with Bootstrap 3 Ebook Included
Start Now with Bootstrap 3 | Ebook Included                                                

$54 Value

Create a Portfolio Website with HTML, CSS & Bootstrap
Create a Portfolio Website with HTML, CSS & Bootstrap                                          

$39 Value

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap
Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

$10 Value

Bootstrap 4 for Beginners - Build 5 Websites from scratch
Bootstrap 4 for Beginners - Build 5 Websites from scratch                              

$200 Value

Bootstrap 3 - Develop Responsive Websites
Bootstrap 3 - Develop Responsive Websites

$75 Value

Bootstrap 4 - Exploring New Features
Bootstrap 4 - Exploring New Features

$49.99 Value

Bootstrap 2 for Beginners - Start Developing Websites
Bootstrap 2 for Beginners - Start Developing Websites

$7 Value

WordPress Theme Development with Bootstrap
WordPress Theme Development with Bootstrap

$199 Value

HTML5 and CSS3 Fundamentals
HTML5 and CSS3 Fundamentals

$99 Value

DETAILS OF THE 13 COURSES IN THE BUNDLE
Develop Responsive Websites with Bootstrap 3

Develop Responsive Websites with Bootstrap 3

Instructor: Stone River eLearning

OverviewDescriptionAbout

Build your own responsive website using the powerful Bootstrap 3 platform.

Use the powerful platform of Bootstrap 3 to build and design your own responsive website.

In the Develop Responsive Websites with Bootstrap 3 course, we will walk you through the popular Bootstrap HTML and CSS framework.

Use the powerful platform of Bootstrap 3 to build and design your own responsive website.

In the Develop Responsive Websites with Bootstrap 3 course, we will walk you through the popular Bootstrap HTML and CSS framework. Bootstrap helps build websites that look beautiful on mobile, tablet, and desktop browsers.

Develop Responsive Websites with Bootstrap 3 covers a wide range of use cases from simple marketing websites, to web application UI’s to dynamic websites using a CSS pre-processor that builds Bootstrap on the fly.

What You Will Learn

In the course, you will learn about various stylized components of Bootstrap 3 including Navbars, Buttons, Panels, Images, Accordions, Modal dialog boxes and the like, while building two demonstration web sites. You will also learn about the underlying architecture including the layout grid, responsive techniques, typography, and utility functions for layout, hardcopy print and screen readers.

Projects

By the end of this course you will have created a beautifully designed responsive website for your portfolio. After taking the course and creating the project website, you will be able to take what you’ve learned and create virtually any other type of website on the web today.

You will also create your own custom web application UI.

Bootstrap Customization

Customization of Bootstrap is introduced in simple CSS overrides, expanded upon with 3rd-party Javascript functions (for high-resolution Retina images), and developed finally in the creation of your own Bootstrap template. You will also learn about CSS debugging techniques which are helpful in customizing Bootstrap with its CSS pre-processor language LESS. In the last two lessons, you will create a dynamic version of one of the demo websites with a NodeJS server and on-demand compiled Bootstrap LESS. Example code is provided for each lesson.

Pre-Requsites

Pre-requisites are some HTML and CSS familiarity, and basic web concepts. Javascript knowledge is helpful.

Stone River eLearning

Stone River eLearning is owned and operated by Mark Trego and his support and development staff of outstanding eLearning enthusiasts from around the world. Mark originally hails from Bismarck, North Dakota in the U.S., but now resides in the little town of Sheldon, Iowa where he lives with his wife and 3 children on a working farm just outside of town.

Mark’s passions are entrepreneurship and online learning, so it was only natural that he gravitated towards what became the Stone River family of companies. Mark received his Master’s Degree in Business Administration/Entrepreneurship from Benedictine University in Chicago. His early career found him in finance, but he really found his passion as an education technology professional, instructional designer and teacher before starting Stone River eLearning in 2011.

4  Hours

20 Lessons

Lifetime Access

Course Curriculum

Preview Course

Introduction to the Course
Introduction to Bootstrap 3 (7:11)
Getting ed with Bootstrap 3 (6:41)
The Big Picture (14:53)
Create a Marketing Website with Bootstrap 3
Overview of the Website (6:27)
The Home Page (9:27)
The Home Page Part 2 (12:05)
Debugging (7:02)
The Products Page (19:02)
The Details Page (12:40)
Customizations (16:40)
Responsive Design (12:38)
Production Notes (4:30)
Developing Web Apps with Bootstrap 3
Web App UI Overview (2:52)
Web App Navs (9:06)
Web App Details (11:45)
Theme Customization
Customization and Advanced Topics (2:46)
Creating a Custom Theme (19:59)
Dynamic Bootstrap Part 1 (19:28)
Dynamic Bootstrap Part 2 (12:51)
Conclusion
Review and Closing (4:34)

Learn Mobile First Web Development using Bootstrap

Learn Mobile First Web Development using Bootstrap

Instructor: Yoda Learning

OverviewDescriptionAbout

Create a responsive website front-end with a Do It Yourself Project, working files, code snippets and final project.

This course will help you make an amazing front-end responsive webpage. Bootstrap is very easy to learn and use, its responsive features allows you to build with mobile-first approach and design which is compatible with all browsers, devices (mobile, tablets, etc).

This course will help you make an amazing front-end responsive webpage. Bootstrap is very easy to learn and use, its responsive features allows you to build with mobile-first approach and design which is compatible with all browsers, devices (mobile, tablets, etc). By the end of the course, you will build an entire front end of the website, which you can use. The html files are made downloadable for you to have a look. But first try it yourself.

Why take this course?

Bootstrap is an open source front-end framework for creating websites and web applications. Originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter and many developers at Twitter. It makes use of HTML, CSS as well as optional JavaScript extensions. Bootstrap consists other commonly used interface elements, like buttons, labels and more. It also contains several JavaScript components in the form of JQuery plugins. Compatible with all browsers and devices like mobile, desktop, tablets. Bootstrap can be used by graphic designers, Entrepreneurs, Employees, coders, web developers, students and anyone interested in making a website quick and easy.

How much time does it take to complete the course?

This course contains of 32 lectures. These are 3 hours of video tutorials.

What am I going to get from this course?

Lifetime access to the course

Downloadable project HTML files

Create a fully functional and responsive front-end of a website.

Course Outline:

1. Introduction to Bootstrap

2. Basic concepts to get started

3. Navigation Bar

4. Carousel (commonly known as slider)

5. Coding feature sections

6. Creating About Us section

7. Creating panels, list groups, alerts and well

8. Creating parallax scrolling effect

9. Creating media and tab panels

10. Creating a sign up section

11. Creating footer

12. Creating blog for the website

13. Creating tooltip

14. Creating popover

What are the software and other requirements for the course?

A computer, basic text editor (used Sublime in the course), and having very basic knowledge of HTML and CSS.

Yoda Learning

Yoda Learning is a team of 12+ industry professionals focused on developing “Project-based”learning solutions, which enable the learners explore real world situations and thus, make the learning process engaging and practical. Our Courses on Technology includes everything including Web Development, Mobile App Development, Data Analytics and Design.

The collective work-experience of 80+ yrs. spans across multiple industries like Manufacturing, IT, Sales, Finance, Marketing, Operations, HR and functional domains such as Office suites, Mobile applications, Digital Marketing, Database Technologies, Networking).

4  Hours

35 Lessons

Lifetime Access

Course Curriculum

Preview Course

Start Here
Introduction to Bootstrap (2:56)
Getting ed with Bootstrap (3:39)
Sublime Text and Emmet Plugin (5:26)
Respond.min.js (2:32)
Basic concepts to get started
Container Row Columns (6:19)
Different Breakpoints (6:07)
Photoshop images (5:21)
Well (2:58)
Navigation Bar
Navbar 1 (5:35)
Navbar 2 (6:45)
Navbar 3 (5:13)
Carousel (commonly known as slider)
Carousel Part 1 (7:23)
Carousel Part 2 (9:19)
Coding Feature Sections
Features (5:30)
Features (5:29)
Creating about us section
About US (4:35)
Responsive Utility Class (6:22)
Creating panels, list groups, alerts & well
Panels (5:52)
Alert (10:16)
List Group (3:10)
Creating parallax scrolling effect
Testimonial parallax effect (7:29)
Creating Media and Tab Panels
Media (6:00)
TabPanel (9:04)
Blockquote and Accordion Panel
Blockquote (2:59)
Accordion Part 1 (17:16)
Accordion Part 2 (3:35)
Creating a sign up section
Newsletter (8:49)
Modal 1 (5:48)
Modal 2 (6:05)
Creating Footer
Footer (5:05)
Creating blog for the website
Blog Part 1 (1:55)
Blog Part 2 (6:04)
Blog Part 3 (1:13)
Creating tooltip
Tooltip (4:04)
Creating popover
Popover (2:56)

Bootstrap Basics Program Responsive Websites

Bootstrap Basics: Program Responsive Websites

Instructor: Brad Hussey

OverviewDescriptionAbout

Learn to hand-code your first responsive website with this popular, free and open-source framework in 3 hours.

Join Over 2,000 Very Happy Bootstrappers! Bootstrap is the most popular front-end framework on the web today, and people are going nuts over it! Why? Because it’s incredibly easy to learn, and because you can save hours of work (or hundreds of dollars in precious development time)!

Join Over 2,000 Very Happy Bootstrappers!

Bootstrap is the most popular front-end framework on the web today, and people are going nuts over it! Why? Because it’s incredibly easy to learn, and because you can save hours of work (or hundreds of dollars in precious development time)!

Taking a step-by-step approach, this course will have you learning by doing, and you will become well-acquainted with the Bootstrap framework in very little time!

Learn the Most Popular Web Design Framework Quickly and Easily

  • Responsive web design
  • Attractive sliding carousels
  • Popup & Modal windows
  • Media Queries
  • HTML Form Layout
  • Beautiful Typography
  • Increase development time by 50% or more!

Hundreds of thousands of websites are using Bootstrap to achieve beautiful, unique, and custom layouts. It’s time you learn this framework, and hit the ground running!

Boost Your Income by Learning Bootstrap

Whether you’re self employed, or work at a company — understanding how to develop website layouts with Bootstrap will save you and your company precious development time.

Self employed? Look at it this way.

Two self-employed web developers are each hired to build a small website for $1,000. Developer #1 hand codes his website and it takes him 40 hours to complete, effectively making $25/hour. Developer #2 uses Bootstrap to build his website, and it takes him 20 hours, effectively making $50/hour. Which developer do you want to be?

Work at a studio?

Bootstrap is a valuable skill. It’s fundamental that company employees keep up to date with the latest technologies. An educated employee is an incredibly valuable asset. If you prove to your company that you can build high-quality websites in record time with a framework like Bootstrap, you have negotiating power for a higher salary.

Are you an Entrepreneur?

If you’re starting a new business, but only have a shoestring budget for your new venture, do yourself a favour and learn to code your company website with Bootstrap. You’ll save yourself thousands of dollars, and be grateful you invested in yourself!

Invest in your future

With the incredibly valuable skills you will learn in this course, you will make the value of this course back 10x by completing only a single web design job! And it’s completely risk-free! If you take this course and don’t think it’s worth the value you paid — you have 30-days to get a full refund.

In 3 – 5 hours of your time, you will build a truly beautiful web page you didn’t know you had the ability to do! There is no reason why you shouldn’t start right now. Invest in your future, and join me on the other side!

Get started today by clicking “Take This Course”.

See you on the inside!

Brad Hussey
A highly skilled professional, Brad Hussey is a passionate and experienced web designer, developer, blogger and digital entrepreneur. Hailing from North Of The Wall (Yellowknife, Canada), Brad made the trek to the Wet Coast (Vancouver, Canada) to educate and equip himself with the necessary skills to become a spearhead in his trade of solving problems on the web, crafting design solutions, and speaking in code.
Brad’s determination and love for what he does has landed him in some pretty interesting places with some neat people. He’s had the privilege of working with, and providing solutions for, numerous businesses, big & small, across the Americas.
Brad builds custom websites, and provides design solutions for a wide-array of clientele at his company, Brightside Studios. He regularly blogs about passive income, living your life to the fullest, and provides premium quality web design tutorials and courses for tens of thousands of amazing people desiring to master the craft.

3  Hours

28 Lessons

Lifetime Access

Course Curriculum

Preview Course

Preparation
Welcome & What is Bootstrap 3? (1:57)
Project Walk Through (8:59)
About the Course Files (7:09)
Download the Course Files
Get your Project Going! (1:07)
Hand Coding the HTML5 Markup
Coding the General Layout & Structure (9:03)
The Navigation Bar
Coding the Navigation Bar (13:16)
Coding the Dropdown Menus (11:31)
The Sliding Carousel
Exporting the Carousel Assets from Photoshop (6:10)
Coding the Carousel (12:18)
Styling the Carousel (15:07)
The Big Callout
Coding the Callout (15:01)
Styling the Callout (5:51)
Using jQuery to display an Alert Box (6:04)
The 3-Row Feature Section
Exporting the Badge assets from Photoshop (1:33)
Coding the Feature Section (11:01)
Styling the Feature Section (1:57)
Update: A Note on Media Queries
The “Tabbable” Content
Coding the Tab Markup (14:05)
The Modal
Coding the Modal container (9:35)
Coding the Form (7:28)
Coding the Tooltip & Popover with jQuery (6:31)
The Typography Section
Coding the Typography Content (5:30)
The Course Featurettes
Coding the Thumbnails (7:52)
Styling the Thumbnails (4:25)
The Footer
Coding the Footer (4:43)
Styling the Footer (1:55)
The Take-Away
Moving Forward (2:34)

Learn Bootstrap Design a Custom Landing Page in Bootstrap 4

Learn Bootstrap: Design a Custom Landing Page in Bootstrap 4

Instructor: Adam Eubanks

OverviewDescriptionAbout

Use The Latest and Greatest Bootstrap 4 to Turn a Boring Landing Page Into a Great One, And Learn Design Tips Too!

This course will fast track you from zero to hero in web design by teaching you the wildly popular Bootstrap 4 web framework.

This course will fast track you from zero to hero in web design by teaching you the wildly popular Bootstrap 4 web framework.

Bootstrap is a wildly popular HTML, CSS, and JavaScript framework built for building and designing beautiful applications quickly that work on all devices, especially on mobile.

By learning bootstrap, you are putting yourself ahead of the tech game. You will be able to build beautiful, professional-looking websites extremely quickly.

In this course, you will discover the importance of Bootstrap, and be able to use it for what it’s best for, making websites look amazing. We will go step by step to learn how to use various features in Bootstrap 4 (some unique only to bootstrap 4). We will learn the basics and then some.

This course will give you steady ground in bootstrap, and allow for you to keep up with the technology as it evolves. This course will help take you from no bootstrap knowledge whatsoever to using it to build great websites.

The majority of this course will be spent on taking a landing page with absolutely no styling or images, and applying bootstrap to it to make it look amazing. Along the way, we will learn about how bootstrap works and what makes it so great. We will learn basic concepts in design, as well as less prominent bootstrap features.

This course will get you kick started with bootstrap and will help you make beautiful websites. We won’t just learn bootstrap, but we will also learn about web design, and key things that make sites look awesome. We will learn about what makes modern websites look so nice, and how to use bootstrap to make our websites look nice.

Overall, this course has everything you need. We will walk you through installation, show you how bootstrap is structured, show you different themes, elements, and so much more. By learning the essentials of bootstrap, this course also teaches you the do’s and don’ts of web design. Bootstrap makes web design easy and fast, two things that busy people may need in a course.

I hope that you consider purchasing this course, feel free to DM me with any questions at all.

So what are you waiting for? Let’s get started!

Who this course is for:

  • Wants to get started with Bootstrap web design quickly
  • Wants to learn how to create custom Bootstrap applications
  • Wants to master numerous features in Bootstrap 4
  • Does not want to waste time or money on a course

Adam Eubanks

I am a self taught programmer and learning enthusiast. My expertise is mainly in Artificial Intelligence, Ruby on Rails web development, Python and Linux. I hope that my courses will help students learn things that I had difficulty with in an easier and more fun way. These courses are meant to be short, sweet and quick to the point.

1:05  Hours

20 Lessons

Lifetime Access

Course Curriculum

Preview Course

Introduction
Welcome To The Course!
What We’ll Be Building (1:16)
What Is Bootstrap? (1:32)
Why Should You Learn Bootstrap? (1:15)
The 3 S’s of Design
Getting The Test Code (1:51)
Importing The CDN (2:08)
Creating The Navbar
Creating The Navbar (3:26)
Adding Social Media Links To The Navbar (3:34)
Creating the Carousel
Creating The Carousel (8:07)
Fixing The Carousel (1:48)
Finalizing The Carousel (2:30)
Cards and Columns
Introduction To Cards (1:21)
Creating Cards (5:32)
What Are Bootstrap Columns (1:43)
Using Columns on Our Site (3:09)
Finishing The Cards (4:51)
Styling The Form (6:59)
Reference Guide For The Grid System
Additional Elements
Diving Into Buttons (4:16)
Tags (2:00)
The Jumbotron (3:05)
Bootstrap Themes (2:45)
Reference Guide For This Section
Conclusion
Quiz 1: The Final Test

Start Now with Bootstrap 3 Ebook Included

Start Now with Bootstrap 3 | Ebook Included

Instructor: Sandy Ludosky

OverviewDescriptionAbout

Create a functional & responsive site with the most popular, mobile 1st framework

Let me introduce you to Bootstrap 3 : the lightweight and responsive framework for a better and faster mobile-friendly web development.

Let me introduce you to Bootstrap 3 : the lightweight and responsive framework for a better and faster mobile-friendly web development.

Lessons include:

  • Downloading and understanding the boostrap files
  • Review of the Bootstrap 3 files structure
  • Presentation and demonstration of the 12-column Grid System
  • Styling easily and quickly with Bootstrap built-in CSS classes
  • Adding functional components like navbars, responsive tables, forms…
  • Adding interactive elements with javascript plugins, like the carousel, the modal…
  • A 2-part design project featuring multiple examples of the Bootstrap 3 CSS styling and dynamic elements

Join me to learn about the open-source responsive framework Bootstrap 3.

By the end of the course, you will easily design sleek, mobile-ready websites with HTML, CSS and JavaScript.

Sandy Ludosky

My name is Sandy. I am a freelance Web Designer and Developer based out of Toronto, in Ontario, Canada.

I specialize in Front-End development with HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery.

I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few.

Also, I am keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development.

4  Hours

34 Lessons

Lifetime Access

Course Curriculum

Preview Course

Introduction to Boostrap 3
Intro (0:48)
Curriculum & Project Overview (2:37)
Files and Resources (1:10)
Getting Started with Bootstrap 3
Section Overview & Intro (0:44)
Downloading Bootstrap 3 (4:31)
The Grid System (7:12)
Grid Demos & Examples -part I (9:53)
Grid Demos & Examples -part II (11:17)
Bootstrap 101 – CSS & Components
Section Overview (0:48)
Styling with CSS – Part I (14:26)
Styling with CSS – Part II (13:37)
Styling with CSS – Part III (9:37)
Boostrap Components – Part I (14:35)
Boostrap Components – Part II (10:57)
Boostrap Components – Part III (9:53)
Bootstrap 201 – Javascript
Section Overview (0:49)
Collapse.js (8:30)
Carousel.js (6:55)
Tab.js (7:17)
Affix.js (4:12)
Project – Styling with CSS
Project Overview (0:45)
Customize the Header (13:35)
Create the Products Thumbnails (8:02)
Create the Photo Gallery (8:56)
Customize the Footer (9:44)
Responsive Utilities and Media Queries (11:53)
Project – Interactive elements & Javascript Plugins
Section Overview (1:29)
Create a Slideshow with Carousel.js (12:38)
Add a Contact Form with Modal.js (8:52)
Popover.js (7:59)
Tooltip.js (6:11)
Add Scrollspy.js to the navbar (4:29)
Supplementary resources
Last Words & Other Resources (0:32)
Quiz 1: Boostrap Quiz
Download Ebook Here

Create a Portfolio Website with HTML, CSS & Bootstrap

Create a Portfolio Website with HTML, CSS & Bootstrap

Instructor: Sandy Ludosky

OverviewDescriptionAbout

Level up your web development skills, by creating your portfolio , with this project-based video tutorial

Create your online portfolio with this project-based tutorial. And, Learn about responsive design & fast web development.

Create your online portfolio with this project-based tutorial. And, Learn about responsive design & fast web development.

Bootstrap 3 is a lightweight and responsive framework for a better and faster mobile-friendly web development.

You will learn to =

  • Effectively use the grid system to build a responsive and flexible multi-column layout
  • Showcase your artwork/portfolio items with a simple image hover effect
  • Use the FLAT UI colors palette
  • Use the inspector tool to customize the Boostrap CSS

PLUS, you will discover other resources like:

  • The Font Awesome icons designed by Bootstrap
  • The Google Fonts
  • The online favicon generator
  • W3C validation service to build an error-free webpage

– By the end of the course, you will have a better understanding of the responsive grid and the bootstrap documentation.

– By the end of the course, you will have a nice responsive one-page site that you can use as a personal page or a professional portfolio.

– By the end of the course, you will be well-versed with most of the Bootstrap built-in CSS and components. You will be ready to design sleek, mobile-ready websites with HTML and CSS

Lessons include topics like:

  • How to use the 12-column Grid System
  • Adding and customizing links and buttons
  • Using Font Awesome to easily include scalable social media icons
  • Using the pseudo-class :hover to create cool hover effects
  • HTML & CSS Cheatsheets (downloadable)
  • Master Bootstrap Cheatsheet (downloadable)

The video lessons will walk you through every process step-by-step.

Sandy Ludosky

My name is Sandy. I am a freelance Web Designer and Developer based out of Toronto, in Ontario, Canada.

I specialize in Front-End development with HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery.

I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few.

Also, I am keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development.

1:50  Hours

19 Lessons

Lifetime Access

Course Curriculum

Preview Course

Welcome!
Intro (0:53)
Guide & Instructions | PDF 0:00
Header
Navigation Bar (9:17)
Header & Banner (11:03)
Portfolio & Works Section
Layout & The Grid System
Adding Images
Image Hover Effect | Pseudo-class, CSS transition
Contact Us & Footer
Responsive Contact Form (15:18)
Social Media Icons | Font Awesome (7:47)
The Footer | Html entities (5:57)
Responsive template | Media Queries
Responsive-friendy | Ipad (7:40)
Responsive-friendy | IPhone (9:48)
BONUS Video Lessons
Navigation bar | Scrollspy.js (5:02)
Using Google Font (4:27)
Adding a Favicon (3:14)
Successfully validate your webpage with W3C validator (2:21)
Supplementary Resources
HTML Tag references | PDF
CSS cheatsheets | PDF
Bootstrap Master Cheatsheet

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

Instructor: Daniel Walter Scott

OverviewDescriptionAbout

The best course for learning the basics of HTML5 and CSS3 from scratch. Including 5 projects, perfect for beginners.

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

We will build 4 sites together…

  • a simple but elegant restaurant website.
  • a bike repair website.
  • a responsive portfolio website.
  • a Bootstrap website.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.

There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.

We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery.

You will…

  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients.
  • Learn how to create forms and to choose great fonts for your website.
  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus.
  • Setup a domain name with hosting so that your website is live on the internet for others to see.

There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.

If that all sounds a little too fancy – don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step.

Who am I?

I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.

Time to upgrade yourself?

Sign up for the course and let’s learn how to build responsive websites.

Daniel Walter Scott

Sharing is who I am, and teaching is where I am at my best, because I’ve been on both sides of that equation, and getting to deliver useful training is my meaningful way to be a part of the creative community.

I’ve spent a long time watching others learn, and teach, to refine how I work with you to be efficient, useful and, most importantly, memorable. I want you to carry what I’ve shown you into a bright future.

I have a wife (a lovely Irish girl) and kids. I have lived and worked in many places (as Kiwis tend to do) – but most of my 14+ years of creating and teaching has had one overriding theme: bringing others along for the ride as we all try to change the world with our stories, our labours of love and our art.

I’m a certified Adobe instructor (ACI) in Ireland. I’m also an Adobe Certified Expert (ACE) and have completed the Adobe Certified Associate training (ACA). And I don’t just do Adobe. Remember, media is a very broad term – digital blew out the borders, so we are all constantly learning.

I’ve been teaching for 14+ years. I come from being a media designer and content creator – so I understand exactly where you’re at now. I’ve been there. I love this stuff. Print, digital publishing, web and video. I can see how it all connects. And I can see how we can share those connections.

I built Bring Your Own Laptop in Ireland, New Zealand, Australia & online. I have a great team working with me to keep BYOL at the top of Adobe and digital media training. I understand business, I have one – so I know how important it is to get it right and make it work for you.

Daniel Walter Scott

16:50  Hours

126 Lessons

Lifetime Access

Course Curriculum

Preview Course

Getting Started
Introduction to Responsive Web Design Essentials Course (2:44)
How is this web design course structured (1:41)
What to download for the web design course (2:57)
Introduction to HTML & CSS
Creating & testing our first HTML web page (5:55)
What is HTML5 & CSS3 in web design (8:24)
What is the head vs body vs html tag in a web design page (9:01)
What is the title and description for in the head of a web page (5:54)
What code editor should I be using VS Code Sublime Dreamweaver Atom Brackets (3:39)
How to add structure to your website using Div Tags (6:26)
What is a CSS Class how do we color a background with it (9:05)
How to nested divs inside of each other in HTML & CSS (5:03)
Class Project 01 – Div Tags (5:24)
How to create a separate cascading style sheet in HTML & CSS (9:07)
Project 1 – Restaurant Website
How to create an index html & style css (12:16)
Test your website live using a Visual Studio Code extension (8:47)
How to check your code for errors in HTML using VS Code (11:01)
What is HTML5 tag header nav section article main footer (5:47)
How to add html5 structure elements to your html website (16:02)
How to color the background of a webpage using the body html tag (5:10)
How to add an images to a website using HTML what is alt (4:38)
How to center an image img in HTML using CSS (1:14)
How to change the font style size & color of h1 p in HTML CSS (14:11)
How to make a clickable link in html & change the color (8:45)
How to add a stretching background image to a website (5:38)
How make a div tag transparent using HTML & CSS in VS Code (2:36)
How to create a simple website text navigation in HTML & CSS (6:43)
How to css style more than one class tag at a time compound classes (7:02)
Class Project 02 – Footer (2:05)
Class Project 02 – Footer COMPLETE (4:48)
How to add a simple email button to a website using mailto in HTML (3:49)
How to add Google Maps to your website using embed codes (11:25)
How to put your website live on the internet with your own domain (16:50)
How to connect Visual Studio VS Code via sftp to host bluehost (11:50)
Project 2: Bike Repair Website
Setting up our new web design project & discussing our topics (3:46)
What is a CSS reset zeroing eric meyers vs normalize (15:22)
What is a min-height compared to height for a div tag (7:01)
Getting div tags onto one line using Flexbox in HTML & CSS (5:23)
Add even space between div tags using flexbox with no outside margins (4:42)
How to have 2 div tags of different sizes in the same row html css flexbox (7:12)
How to vertically center content in a html div tag using flexbox css (7:20)
Class Project 3 – Flexbox Header (2:51)
Class Project 3 – Flexbox Header COMPLETE (5:38)
How to make a full background gradient on a website CSS (10:19)
How to change the default font type color size on a website using HTML & CSS (4:19)
How to choose & install google fonts on your HTML CSS website (12:44)
What is the difference between PX & EM & REM font sizes (14:56)
Line height space between paragraphs aka space after (4:33)
When would you use an svg image instead of jpg or png in web design (7:04)
How to export svg png jpg from XD Photoshop Illustrator for website design (11:00)
Block level images verses background images in HTML & CSS (8:32)
Finishing up our cards (9:10)
How to add icons to your website using font awesome VS Code (16:31)
How to make an entire DIV container box a clickable link (9:55)
How to use box-sizing border-box from Flexbox in VS Code & web design (6:19)
How to make a colored button in VS Code using HTML CSS (7:45)
Why cant I add margin or padding to the top bottom of my a tag Inline vs block (11:08)
How to add rounded corners to a button or div tag in HTML & CSS (4:17)
How to add a css drop shadow to a website button div tags and text fonts heading (6:24)
How to backup your website while you’re building (5:00)
Reusing a button class in the navigation (3:10)
Class Project 04 – Custom Button (2:58)
Class Project 04 – Custom Button COMPLETE (5:45)
How to add a horizontal rule using HTML5 & CSS3 in VS Code (3:51)
How to make div tags wrap onto separate lines using HTML5 CSS3 Flexbox (12:14)
How to change hover color & animate my button in HTML & CSS (3:33)
How to target specific tags in HTML to apply css to using Pseudo Classes (9:31)
How to create a simple dropdown navigation menu button HTML CSS (20:04)
Adding our CSS dropdown menu to the roar bikes website (14:50)
Useful shortcuts tips tricks to speed workflow in VS Code (13:28)
How to add a large background image to a website design (9:24)
How to connect link 2 pages in HTML web design (10:42)
How to make a simple php form work on your HTML website (17:49)
Adding placeholder text and labels to website form text fields in HTML (5:46)
How to add a large multi line text box in a HTML form (2:18)
How to add check mark tick box to a HTML form (3:04)
How to add a radio button round button with dot in middle to HTML form website (6:07)
How to you make a drop down form menu for a website in HTML (5:48)
How to style form text boxes & check boxes in a website HTML (12:55)
Project 3: Responsive Portfolio Website
What does responsive website design mean (4:17)
How to change a website layout size color at different sizes using media queries (11:28)
How to test your website on a tablet or mobile phone from Visual Studio Code (6:00)
How to change the layout of a responsive website for mobile vs desktop (16:02)
How to turn things on and off for mobile tablet & desktop responsive websites (6:03)
What is pixel density responsive images pixel ratio dppx in webdesign (14:47)
How to export responsive images for website from XD Photoshop Illustrator (5:11)
How to add responsive images to website using 100% width in HTML & CSS (6:08)
How to use srcset to change images in HTML for responsive website (10:15)
How to add a css style to the first line of a p tag on a website (11:18)
How to make the header footer full width but the inside centered (5:36)
Class Project 05 – Header design (3:12)
Class Project 05 – Header design COMPLETE (6:25)
How to use a span tag or span class in HTML to change text (10:32)
How to pin the navigation to the top of a website fixed nav (3:17)
How to make a simple responsive mobile menu using CSS only (8:20)
What is Javascript vs Jquery in website web design (6:35)
How to make a burger menu 3 line mobile navigation for a website (15:11)
How to switch a menu nav from desktop to mobile phone (21:45)
Project 4: Bootstrap Yogurt Website
Overview of what Bootstrap 4 is in website design (7:57)
How to install Bootstrap 4 on a website using Visual Studio Code (6:27)
Quick overview of how the Bootstrap Grid Layout works in VS Code (10:49)
Quick overview of how Bootstrap Components works in VS Code (9:22)
Quick overview of how Bootstrap CSS Styles works in VS Code (8:20)
How to customize the default Bootstrap 4 css styles (13:51)
How to use Bootstrap Layout Grid Experiment 1 (10:20)
How to make 100% header & uneven widths in Bootstrap 4 (7:16)
How to create uneven col widths in Bootstrap 4 (7:27)
How to add padding & margins using Bootstrap 4 in VS Code (12:03)
How to change layout of Bootstrap depending on mobile or desktop (15:46)
How to turn things on & off on your website using Bootstrap 4 (5:30)
How to re-create the Bootstrap media queries in your own CSS (4:40)
How to use Google Chrome Inspect – Removing Overriding Bootstrap styles (12:40)
How to add shadows to text & boxes in Bootstrap 4 (7:06)
How to change the default Bootstrap 4 buttons size & color (6:16)
How to make images responsive stretchy in Bootstrap 4 (9:34)
How to center text & div tags in a Bootstrap 4 website (4:16)
How to customize the website navbar in bootstrap 4 (7:29)
Add your own logo to the bootstrap 4 website navigation menu (3:57)
How to change the default styles for Bootstrap 4 nav (12:12)
How to add a sticky fixed bootstrap 4 navigation to your website design (4:41)
Adding a full col image in bootstrap 4 & color the background of col (7:56)
How to add a border & rounded corners to a box in Bootstrap (4:20)
How to edit Bootstrap carousel off for mobile timing fade (5:13)
How to put Bootstrap cards on one line using card groups decks & columns (3:29)
How to add a drop shadow to a box or card in Bootstrap 4 (2:25)
How to make a div tag a giant clickable link in Bootstrap 4 (4:02)
What Next
What next in our web design essentials course (6:33)

Bootstrap 4 for Beginners - Build 5 Websites from scratch

Bootstrap 4 for Beginners - Build 5 Websites from scratch

Instructor: Laurence Svekis

OverviewDescriptionAbout

Explore Bootstrap 4 and learn how to apply layouts, use components, utilities for rapid website design and development

Current Version Bootstrap 4 Beta Beginners Guide Bootstrap

Source code and step by step guide to build 5 complete websites from scratch using the new Bootstrap 4

Current Version Bootstrap 4 Beta Beginners Guide Bootstrap

Source code and step by step guide to build 5 complete websites from scratch using the new Bootstrap 4

Learn to Build modern websites fully responsive and mobile first built rapidly using Bootstrap 4

This course uses the latest version of Bootstrap 4.0.0-beta

Learn about the Bootstrap Grid and new changes making it easier to use. Find out how to use Bootstrap 4 Navbars making them responsive. Structure content in tables, lists and cards. Make text stand out with amazing Bootstrap 4 utilities.

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only.

Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

Add in the library and then you are ready to Bring the power of Bootstrap into you web pages! Its simple and easy to use simplifying web design and development. Its all available within Bootstrap

You will be amazed at how easy it is to create modern websites using Bootstrap

This course will show you how to build website with Bootstrap Classes. Learn and see the Bootstrap components and utilities in action! Upon completion of this course you will have the knowledge to use it within you own projects. Lessons include source code, code snippets and exercises to help you learn Bootstrap quickly.

Save time without the need to use CSS or JavaScript bring in all the amazing functionality using Bootstrap classes.

Bootstrap is Full of features that are commonly used within web design and development. With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins. One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

Bootstrap has everything you need in order to develop your website really quickly without the need for styling or coding everything is pre-built ready to go within the bootstrap libraries. Take advantage of what bootstrap has to offer bootstrap is an amazing front-end framework that incorporates styling and functionality directly via the class and attributes within your elements of your HTML page HTML and websites. Building websites has never been easier to build and bootstrap makes it happen.

Learn about Bootstrap 4 find out whats new and how to apply Bootstrap to your web projects.

  • Learn how to add Bootstrap to your website
  • resources and top links are included
  • Explore how containers work
  • Add classes to make things happen
  • Media sizes and breakpoints
  • Find out about what the Bootstrap Grid is and how it works
  • Columns and row and how to structure your content
  • Use typography to make content stand out
  • List groups and more to group content
  • Custom components like Jumbotron and badges
  • Do amazing things with Buttons
  • Progress bars, alerts
  • Customize colors and fonts
  • Learn about Bootstrap tables
  • Bootstrap Cards are new see how they work
  • See how Bootstrap can enhance Forms
  • Drop-downs and grouping of elements
  • See navbar and nav items made responsive
  • Explore interactive bootstrap components like Tooltops and Popovers
  • See how modals can enhance your users experince
  • Dynamic jQuery components in action like Carousels, and more
  • Source Code and examples included

Taught by an instructor with over 18 years of web development experience ready to answer any questions you may have.

Join now and bring the awesome power of Bootstrap 4 into your web projects

Laurence Svekis

I’m here to help you learnachieve your dreams, come join me on this amazing adventure today

Google Developers Expert – GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

“I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990, and my first website in 1998. I enjoy sharing my knowledge with others and want to help you share in the wonderful opportunities that the internet provides.”

“Learning, understanding with a strong passion for education. The internet has provided us with new opportunities to expand and share knowledge.”

Want to learn more about becoming a web developer, do you want to experience the freedom that technology provides for us? Learn how to bring amazing things to life online. Technology connects us all in many ways. It opens up doors to those who embrace it and learn how to make those connections real.

“My courses are designed to help you achieve your goals, learn and update skills”

Background : An experienced web application developer, having worked on multiple enterprise level applications, hundreds of websites, business solutions and many unique and innovative web applications. Web application development areas of expertise include HTML, CSS, JavaScript, JQuery, Bootstrap, PHP and MySQL. Anything to do with web creation and digital experience. Passionate about everything to do with web application development, programming to online marketing with a strong focus on social media and SEO.

Understanding technology provides a means to better connect with users. It also opens so many doors. Knowledge is the key to success and I want to help you experience what technology has to offer. I’m passionate about web technologies, and look forward to sharing my knowledge and experience with you!”

11:50  Hours

159 Lessons

Lifetime Access

Course Curriculum

Preview Course

Introduction to Bootstrap
0 Bootstrap 4 intro (8:39)
2 What is Bootstrap introduction to Bootstrap 4 (5:45)
3 New Bootstrap 4 Features (3:35)
4 Course editor and resources overview (4:27)
5 Resources
Getting ed with Bootstrap
6 Setup Bootstrap on your computer (7:34)
7 Try out Bootstrap adding classes (3:37)
8 Bootstrap Containers to hold elements (4:09)
9 Media sizes in Bootstrap (3:16)
10 Media Size Example
Bootstraps grid
11 Bootstrap Grid columns (11:42)
12 Source Code
13 Bootstrap Column Sizing (11:15)
14 Coding Exercise
15 Grid Column Order and spacing (10:23)
16 Source Code
17 Nested Rows within Rows (5:06)
18 Source Code
Bootstrap Rapid Design
19 Typography standout text (5:02)
20 Source Code
21 List group items (8:28)
22 Source Code
23 Bootstrap responsive images (7:02)
24 Source Code
25 Bootstrap JumboTron (3:40)
26 Badges in Bootstrap (2:27)
27 Source Code
Bootstrap Buttons
28 Buttons in Bootstrap (9:06)
29 Bootstrap Button Groups (5:24)
30 Source Code
31 Button RadioButtons and checkboxes (9:15)
32 Source Code
Bootstrap Common Components and utilities
33 Bootstrap Progress bar (10:09)
34 Progress Bar Source Code
35 Font and Background color (3:50)
36 Source Code Font and Background
37 Bootstrap Utility Classes (9:28)
38 Source Code
Bootstrap structure
39 Bootstrap tables (10:36)
40 Tables source code
41 Cards in Bootstrap (4:34)
42 Card Structure and grouping (11:57)
43 Cards Source Code
44 Bootstrap Forms Grid (7:24)
45 Bootstrap 4 Form Source Code
46 Input Group Addons (8:13)
47 Form select and file input (3:06)
48 Drop down menu Bootstrap (6:22)
49 Example Code
Navigation Bootstrap component
50 Bootstrap Nav Component (9:53)
51 Bootstrap NavBar Source
51 Bootstrap Nav Source
52 Bootstrap NavBar Responsive (12:10)
53 Bootstrap NavBar Source
54 Navbar options Bootstrap (4:50)
55 Source Code
Bootstrap interactive components
56 Bootstrap Alerts (4:42)
57 Alert Source Code
58 Popover and Tooltip (5:37)
59 Source Code
60 Collapse and show elements (4:11)
61 Source Code
62 Bootstap Modals (9:43)
63 Modal Source Code
64 Bootstrap Image Carousel (9:56)
65 Source Code
Bootstrap 4 Conclusion and quick website
66 Bootstrap conclusion (4:13)
67 Section Overview (1:30)
67 Bootstrap 4 sample site
68 Bootstrap 4 Beta Changes
Rapid Web development create a quick website
single page website 1 (1:47)
1 Build a Default Bootstrap template (6:13)
2 Build responsive navbar (6:21)
3 Responsive NavBar Bootstrap 4 (8:41)
3 Source Code
4 Build 100 height Sections (8:05)
5 Build section (6:16)
6 Bootstrap Buttons Section (5:24)
7 Bootstrap 4 Cards in Action (6:40)
7 Source Code
8 Bootstrap 4 Forms (4:41)
9 Add new section with background image (4:59)
9 Source Code
10 Footer Styling Bootstrap 4 (5:03)
11 Bootstrap ScrollSpy (4:06)
12 Bonus jQuery Animate Method (10:22)
12 Source Code
Course Overview (4:22)
13 Source Code
Multiple Page Image header Bootstrap 4 website
Project Introduction (2:09)
0 multiple page website 2 (1:45)
1 Create Bootstrap template (4:22)
2 Design Website Concept and structure (7:16)
3 Setup NavBar Structure (3:09)
4 Create a Responsive Navbar Bootstrap 4 (9:29)
4 Source Code
5 Build image Background Section (11:57)
5 Source Code
6 Bootstrap 4 Footer Structure (6:33)
7 Adding Font Awesome Icons (5:43)
7 Source Code
9 Plan Home Page Design (4:48)
10 Build Home Page (10:37)
10 Source Code
14 Design Planning About Page (4:27)
15 Bootstrap List and Grid About Page (11:24)
15 Source Code
16 Plan and Design Services Page (3:07)
18 Services Page using Cards (7:00)
18 Source Code
20 Setup Contact Page Design (4:40)
21 Build Contact Form Bootstrap 4 (8:34)
21 Source Code
24 Multiple page Site Overview (3:42)
24 Resources
Build Multiple Page Website from scratch portfolio site
0 portfolio website 3 (1:54)
00 Project Introduction (2:19)
1 Quick Bootstrap Setup (7:35)
2 Setup Page Structure (2:20)
3 Build Bootstrap Responsive NavBar (11:45)
4 Source Code
5 Page Footer Structure (7:12)
6 Build Footer at Font Awesome (7:08)
6 Source Code
7 Complete WebPage Template (5:08)
8 Design Index Page Layout (4:51)
9 Setup Bootstrap 4 Grid (5:48)
10 Home Page Carousel (9:20)
10 Source Code
11 Add Call to Action Section (2:11)
12 Bootstrap 4 Cards (5:43)
13 Source Code
14 Plan About Page Design (2:06)
16 Collapse Elements Build About Page (6:23)
17 Source Code
18 Plan and Design Portfolio Page (2:00)
18 Source Code
19 Bootstrap Cards Portfolio Page (6:02)
24 Plan Contact Page (2:08)
25 Build Contact Form (10:25)
26 Source Code
27 Webpage overview and Review (2:52)
28 resources
Bootstrap Parallax Style Single Page Website
0 single page parallax website 4 (2:16)
1 Basic Bootstrap 4 Template Creation (3:20)
1 Source Code
2 Create Bootstrap NavBar (11:08)
2 Source Code
3 Header Section (6:30)
4 Build Home Section (7:56)
7 About Me Section (7:41)
9 Bootstrap Cards Grid Columns (7:55)
11 Create Contact Form Grid (7:08)
13 Footer and Tweak Page (3:13)
15 Add jQuery Animate (7:30)
17 Project Review (2:37)
17 Source Code
19 Resources
18 CSS Source Code

Bootstrap 3 - Develop Responsive Websites

Bootstrap 3 - Develop Responsive Websites

Instructor: Total Training

OverviewDescriptionAbout

Bootstrap helps build websites that look beautiful on mobile, tablet, and desktop browsers.

Bootstrap 3 – Develop Responsive Websites covers a wide range of use cases from simple marketing websites, to web application UI’s to dynamic websites using a CSS pre-processor that builds Bootstrap on the fly.

Bootstrap 3 – Develop Responsive Websites covers a wide range of use cases from simple marketing websites, to web application UI’s to dynamic websites using a CSS pre-processor that builds Bootstrap on the fly.

What You Will Learn

In the course, you will learn about various stylized components of Bootstrap 3 including Navbars, Buttons, Panels, Images, Accordions, Modal dialog boxes and the like, while building two demonstration web sites. You will also learn about the underlying architecture including the layout grid, responsive techniques, typography, and utility functions for layout, hardcopy print and screen readers.

Projects

By the end of this course you will have created a beautifully designed responsive website for your portfolio. After taking the course and creating the project website, you will be able to take what you’ve learned and create virtually any other type of website on the web today.

You will also create your own custom web application UI.

Bootstrap Customization

Customization of Bootstrap is introduced in simple CSS overrides, expanded upon with 3rd-party Javascript functions (for high-resolution Retina images), and developed finally in the creation of your own Bootstrap template. You will also learn about CSS debugging techniques which are helpful in customizing Bootstrap with its CSS pre-processor language LESS. In the last two lessons, you will create a dynamic version of one of the demo websites with a Node.js server and on-demand compiled Bootstrap LESS. Example code is provided for each lesson.

Pre-Requsites

Pre-requisites are some HTML and CSS familiarity, and basic web concepts. Javascript knowledge is helpful. The material covers Bootstrap version 3.1.1 and 3.2

Total Training

Total Training is a pioneer in innovative online training for leading creative design, digital video, office productivity software programs, and more.

Ranging from casual hobbyists to the most seasoned professionals, our users quickly learn new applications and broaden their knowledge of programs currently used. Narrated in an entertaining format by industry experts and leading authors, our video-based training titles are critical tools for anyone wanting to learn tips, techniques, and best practices from the most respected names in the business.

We currently offer affordable subscriptions to our All-Access Library, which contains hundreds of courses, thousands of clips, and project files so users can follow along.

HISTORY

Total Training was founded in 1996 to provide the highest quality instruction to users of creative software. Recognizing that printed instruction was tedious, and classroom training was hard to find and often prohibitively expensive, Brian Maffitt, Total Training CEO and President collaborated to create the first video series, Total AE. The response was overwhelming.

3:53  Hours

20 Lessons

Lifetime Access

Course Curriculum

Preview Course

Introduction to the Course
Introduction to Bootstrap 3 (7:09)
Getting Started with Bootstrap 3 (6:39)
Big Picture (14:51)
Create a Marketing Website with Bootstrap 3
Overview of the Website (6:25)
The Home Page (9:25)
The Home Page Part 2 (12:03)
Debugging (7:00)
Products page (19:00)
Detail Page (12:38)
Customizations (16:38)
Responsive Design (12:35)
Production Notes (4:29)
Developing Web Apps with Bootstrap 3
Web App UI Overview (2:51)
Web App Navs (9:04)
Web App Details (11:43)
Theme Customization
Customization and Adv Topics (2:45)
Creating a Custom Theme (19:57)
Dynamic Bootstrap 1 (19:26)
Dynamic Bootstrap 2 (12:49)
Review and Closing (4:34)

Bootstrap 4 - Exploring New Features

Bootstrap 4 - Exploring New Features

Instructor: Total Training

OverviewDescriptionAbout

This course helps professionals build familiarity with the core features & functionalities of Bootstrap 4 and learn the art of building mobile-first and respons

This Bootstrap 4 – Exploring New Features course is perfect for anyone with a basic knowledge of HTML and CSS, and will tell you everything you need to know about Bootstrap 4 in record time.

This Bootstrap 4 – Exploring New Features course is perfect for anyone with a basic knowledge of HTML and CSS, and will tell you everything you need to know about Bootstrap 4 in record time. All you need is a stable internet connection and a text editor (notepad, notepad++, sublime or atom) and you’re good to go!

You’ll start off by downloading Bootstrap 4 and creating folders, and then you’ll get straight down to exploring the new updates through practical examples. Linking files, creating the navigation bar, jumbotron and cards, and adding footer is all covered. When you’ve completed them all; you have a fully functioning, responsive website for your efforts. It really is that simple!

This course is suitable for both beginners and those already familiar with Bootstrap. Beginners can get started on the right foot with the most up to date information out there, while experienced Bootstrappers can cut to chase and learn what they need to know right from the get go. Everybody wins!

Get Up to Speed with Bootstrap’s Latest Updates

  • Design and create your own website from scratch
  • Understand the new features and functionality of the latest version
  • Implement Bootstrap 4 code
  • Learn how to create responsive websites

About Bootstrap 4

Bootstrap is the most popular HTML, CSS and JavaScript front-end web framework. It provides all the tools needed to develop responsive, mobile-first websites. It is suitable for all skill levels, works on any device and can tackle projects of all sizes. In short, it allows anyone to build and design high-impact, interactive websites… for free!

Total Training

Total Training is a pioneer in innovative online training for leading creative design, digital video, office productivity software programs, and more.

Ranging from casual hobbyists to the most seasoned professionals, our users quickly learn new applications and broaden their knowledge of programs currently used. Narrated in an entertaining format by industry experts and leading authors, our video-based training titles are critical tools for anyone wanting to learn tips, techniques, and best practices from the most respected names in the business.

We currently offer affordable subscriptions to our All-Access Library, which contains hundreds of courses, thousands of clips, and project files so users can follow along.

HISTORY

Total Training was founded in 1996 to provide the highest quality instruction to users of creative software. Recognizing that printed instruction was tedious, and classroom training was hard to find and often prohibitively expensive, Brian Maffitt, Total Training CEO and President collaborated to create the first video series, Total AE. The response was overwhelming.

1:16  Hours

11 Lessons

Lifetime Access

Course Curriculum

Preview Course

Course Introduction
IntroductionPromoSR-WHITELABEL (1:30)
Course Agenda (3:39)
Getting Started
Downloading Bootstrap4 (3:13)
CreatingFolders (9:06)
Creating a Responsive Website
LinkingFiles (11:40)
Creating NavBar (6:27)
Creating Jumbotron (12:14)
CreatingCards (7:15)
AddingFooter (5:43)
Course Conclusion
Course Conclusion (3:17)
InstallingXAMPP (8:38)

Bootstrap 2 for Beginners - Start Developing Websites

Bootstrap 2 for Beginners - Start Developing Websites

Instructor: Total Training

OverviewDescriptionAbout

Create websites easily with Bootstrap

This Bootstrap 2 for Beginners – Start Developing Websites course gives you a great overview of Bootstrap so you will understand what you can use it for. It goes into detail on how to build a site using great looking templates, and offers lots of helpful tips and tricks along the way.

This Bootstrap 2 for Beginners – Start Developing Websites course gives you a great overview of Bootstrap so you will understand what you can use it for. It goes into detail on how to build a site using great looking templates, and offers lots of helpful tips and tricks along the way.

By the time you’re done with this course, you will know enough to begin developing websites by choosing a template and customizing it for your needs or the needs of your clients.

Can I Make Money with Bootstrap?

Yes. Hundreds of thousands of web developers already use Bootstrap as their main development tool, and you can too. If you’ve ever been interested in starting your own web development company, then Bootstrap should be on your short list of tools to learn. The best part is that Bootstrap is completely free to use.

Total Training

Total Training is a pioneer in innovative online training for leading creative design, digital video, office productivity software programs, and more.

Ranging from casual hobbyists to the most seasoned professionals, our users quickly learn new applications and broaden their knowledge of programs currently used. Narrated in an entertaining format by industry experts and leading authors, our video-based training titles are critical tools for anyone wanting to learn tips, techniques, and best practices from the most respected names in the business.

We currently offer affordable subscriptions to our All-Access Library, which contains hundreds of courses, thousands of clips, and project files so users can follow along.

HISTORY

Total Training was founded in 1996 to provide the highest quality instruction to users of creative software. Recognizing that printed instruction was tedious, and classroom training was hard to find and often prohibitively expensive, Brian Maffitt, Total Training CEO and President collaborated to create the first video series, Total AE. The response was overwhelming.

1:12  Hours

8 Lessons

Lifetime Access

Course Curriculum

Preview Course

CHAPTER 1: INTRODUCTION TO TWITTER BOOTSTRAP
Introduction (2:05)
What Is Bootstrap? (3:51)
CHAPTER 2: BUILDING A WEBSITE WITH TWITTER BOOTSTRAP
Setting Up (6:01)
Navigation (8:18)
Hero Unit (5:35)
Fluid Grid System (10:44)
Glyphs (3:09)
Navigation List (3:44)

WordPress Theme Development with Bootstrap

WordPress Theme Development with Bootstrap

Instructor: Brad Hussey

OverviewDescriptionAbout

Learn how to confidently develop custom & profitable Responsive WordPress Themes.

Do you want to supercharge your HTML, CSS & PHP knowledge and learn how to turn them into a real business that can make you more money as a freelancer?

Course Updated on September 7th, 2015

Final course files, including the final WordPress theme, plus some additional resources available all in one easy download 🙂

$99

– – –

Do you want to supercharge your HTML, CSS & PHP knowledge and learn how to turn them into a real business that can make you more money as a freelancer?

Whether you’re a freelance designer, entrepreneur, employee for a company, code hobbyist, or looking for a new career — this course gives you an immensely valuable skill that will enable you to either:

Make money on the side

So you can save up for that Hawaiian vacation you’ve been wanting, help pay off your debt, your car, your mortgage, or simply just to have bonus cash laying around.

Create a full-time income

WordPress developers have options. Many developers make a generous living off of creating custom WordPress themes and selling them on websites like ThemeForest. Freelance designers and developers can also take on WordPress projects and make an extra $1,000 – $5,000+ per month.

Who Should Take This Course?

Graphic & Web Designers

Graphic designers are extremely talented, but ask them to code their designs and they’ll freeze up! This leaves them with no other choice but to hire a web developer. Any professional graphic designers knows web developers can be expensive.

If you’re a designer, learning to code your own WordPress websites can change your business entirely! Now, not only are you a great designer, but you’re a skillful developer, too! This puts you in a position tomake an extra $1,000 – $5,000 per project.

Entrepreneurs

Entrepreneurs have big dreams, and in many cases, shoestring budgets. In order to survive in the cut-throat world of the Startup company, it’s a necessity to have a world-class website. However, world-class websites come with a large price tag.

If you can learn how to build a high-quality startup website by yourself, then you’ve just saved yourself a lot of cash, tens of thousands of dollars in many cases.

Employees of a company

Any company knows the education & training of their employees is key to a thriving team.

Depending on the type of company you work for, if you understand how to code, and can develop CMS driven websites, that gives you negotiating power for a better position, or a higher salary.

Code Hobbyists

It’s fun to learn challenging new skills. Code hobbyists can add dynamic websites to their arsenal of tools to play with — you can even sell WordPress themes and plugins for cash! The possibilities are truly endless.

People Looking for a New Career

Are you out of work? Looking for a more rewarding job? Desire a career that can allow you to work almost anywhere in the world? Becoming a Web Developer might be the answer for you.

Web developers are paid well, anywhere from $33,000 to more than $105,000 per year. They get to work at amazing companies that are changing the world, or they enjoy the ability to start their own companies, become location-independent and work from home, from coffee shops, in an airplane, on the beach, or wherever they want!

Final Project Features

Throughout this entire course, you work towards building an incredibly beautiful, 100% custom website using the Bootstrap framework. The coolest part? The Bootstrap website doesn’t look anything like the Bootstrap websites you see all over the Internet. It’s a highly customized design, and the type of website layout I use when I build custom WordPress websites for my real-life clients.

The final project features:

Sexy & Modern Design

You get to work with a modern, professional quality design & layout.

Quality HTML5 & CSS3

You’ll learn how hand-craft a stunning website with valid, semantic and beautiful HTML5 & CSS3.

Easy-to-use CMS

Allow your clients to easily update their websites by converting your static websites to dynamic websites, using WordPress.

You can dramatically increase your efficiency, and supercharge your web development skills. And by doing so, you’ll effectively be able to take on more projects, charge higher rates, and make more money as a freelancer.

Why take this course?

I don’t mess around. I do this for a living, and I’m sharing you my exact process for making a comfortable living as a work-from-home web developer. There is absolutely no filler in this course, no fluff, just 100% quality content, nothing less. If you take this course, follow my lead, and take action — I guarantee you will not only love the course, but you’ll see real results; you will have the skills & confidence to take on WordPress projects for clients, charge more money, and make the value of the course back in a single project. If you hate the course (which you won’t) you have 30-days to get a 100% refund — no risk, no problem.

Stop wasting time, and come learn with me! Enroll today!

Brad Hussey
A highly skilled professional, Brad Hussey is a passionate and experienced web designer, developer, blogger and digital entrepreneur. Hailing from North Of The Wall (Yellowknife, Canada), Brad made the trek to the Wet Coast (Vancouver, Canada) to educate and equip himself with the necessary skills to become a spearhead in his trade of solving problems on the web, crafting design solutions, and speaking in code.
Brad’s determination and love for what he does has landed him in some pretty interesting places with some neat people. He’s had the privilege of working with, and providing solutions for, numerous businesses, big & small, across the Americas.
Brad builds custom websites, and provides design solutions for a wide-array of clientele at his company, Brightside Studios. He regularly blogs about passive income, living your life to the fullest, and provides premium quality web design tutorials and courses for tens of thousands of amazing people desiring to master the craft.

13  Hours

82 Lessons

Lifetime Access

Course Curriculum

Preview Course

Introduction
Welcome To The Course! You Made The Right Decision (4:31)
The (Beautiful) Final WordPress Website You Are Going To Build In This Course (8:09)
What You Need To Know About Bootstrap
What is Bootstrap? And Why Mastering It Will Save You Hundreds of Hours (5:21)
Bootstrap Pop Quiz
What You Need To Know About WordPress
What is WordPress? And Why You Should Care So Much About It (4:16)
Two Ways Building Custom WordPress Websites Will Make You More Money (10:00)
My Fear Of Building Custom WordPress Websites Cost Me $24,000 (9:08)
Static vs. Dynamic Websites, Which Is Better? (Hint: One Is Way More Valuable) (2:56)
WordPress Pop Quiz
Information Architecture
Why You Must Always Start Your Website With a Sketch (4:56)
Recommended Resources for Sketching & Wireframing Your Website (6:35)
Information Architecture Quiz
Environment Setup: Get Your Project Started
Free Download: The Bootstrap Framework (4:15)
Free Download: The Final Course Files + WordPress Theme! (5:06)
Setting Up Your Project Environment (4:38)
Bootstrap Templates: The Home Page
Code The Basic Webpage Layout (10:59)
Adding External Scripts to Your HTML Document (5:44)
Install Free Icon Fonts with FontAwesome (5:54)
Install Free Web Fonts with TypeKit & Google Fonts (6:30)
Code the Header and Navigation Sections (12:06)
Code the Hero Section (9:39)
Style the Hero Section with CSS (13:25)
Learn How To Create The Parallax Scrolling Effect in Less Than 5-Minutes (6:34)
Learn to Code a High-Converting “Opt-In” Section (7:19)
Learn How to Create a Modal Popup using Bootstrap (8:26)
Code the “Boost Your Income” Section (5:32)
Code the “Who Should Take This Course” Section (5:27)
Code the “Course Features” Section Using CSS Sprites (12:24)
Code the “Final Project” Section (7:09)
Code the Featurette Section and Embed a YouTube Video (7:13)
Code the Instructor Section (Plus BONUS Elvis Impressions!) (12:39)
Code Beautiful CSS3 Circles (10:16)
The Simple Trick to Vertically Align Your Content Within an Element (5:20)
Code the Testimonials and Learn to Turn Square Images into Circles using CSS3 (11:27)
Code the Sign Up Section (9:53)
Code the Footer (8:58)
Responsive Media Queries & General CSS Cleanup (9:17)
Bootstrap Templates: The Blog Overview
Code the Basic Markup Structure (5:53)
Code the Blog Excerpts with HTML (10:58)
Style the Blog Excerpts with CSS (15:35)
Code and Style the Sidebar & Widgets (12:29)
Bootstrap Templates: The Blog Posts
Code the Blog Post (6:22)
Code the Comments Section (16:17)
Bootstrap Templates: The Resources Page
The Importance of a Resources Page (5:10)
Code the 3-Column Layout Resources Page (15:00)
Bootstrap Templates: The Contact Page
Code the Contact Form (10:52)
WordPress Theme: Set Up
Download the Latest Version of WordPress (1:42)
Create Your “Underscores” er Theme (3:54)
Install WordPress on Your Local Machine in Under 5-Minutes (7:20)
Installing Your Underscores Theme (3:24)
Convert Your Static Header to a Dynamic Header (8:35)
Cover Your Assets (Adding Your Styles, Scripts, Fonts & Images) (10:33)
Clean Up Your Stylesheet & Modify Your CSS for WordPress (13:22)
Convert Your Static Footer to a Dynamic Footer (3:29)
Convert Your Static Templates: Home Page
Create a Home Page WordPress Template (13:20)
Code the Hero & Use “Custom Fields” for Extra Info (17:03)
Amazing Plugin: Advanced Custom Fields (4:32)
Code the “Boost Your Income” Section with Advanced Custom Fields (24:57)
Code the “Who Should Take This Course” Section with Advanced Custom Fields (8:43)
Amazing Plugin: Custom Post Types UI (3:51)
Add “Course Features” Using CPT & Advanced Custom Fields (22:15)
Add the “Project Features” with Custom Post Types UI (12:29)
Code the Instructor Section with Advanced Custom Fields (15:45)
Code the Testimonials with Custom Post Types (8:43)
Clean Your Template Using get_template_part() (17:59)
Convert Your Static Templates: Resources Page
Create a Custom Resources Template (4:02)
Add a Feature Image, and a Fallback Image (6:49)
How to Add a Resource and Display It In Your Custom Theme (16:50)
Convert Your Static Templates: The Blog
Easily Set Up Your Custom Blog Index Page (5:23)
Code Your Individual Blog Excerpts (17:17)
Code the Full Blog Post (5:33)
Style and Customize the Comments Section (5:14)
Customize the Archive Template (7:00)
Customize the Search Results Template (5:49)
Convert Your Static Templates: Contact Page
Create & Customize a Full Width Template (7:42)
Install Contact Form 7 Plugin and Add Your Custom Form (12:33)
Finalize Your WordPress Theme
Adding & Customizing Your Sidebar Widgets (9:58)
Register and Organize Your Custom WordPress Menus (10:26)
Create a Useful & Engaging 404 Page (13:55)
Launching Your WordPress Website
First, You’re Going To Need a Reliable & Affordable Web Host (7:42)
Install WordPress Like a Pro (3:45)
Install and Configure Your Custom WordPress Theme on a Live Server (11:25)
The Final Details
Track Your Visitors With Google Analytics (3:25)
You’ve Created Your Own Custom WordPress Theme! Now What? (5:25)
Bonus Lectures: Tips & Tricks
Why You Should NEVER Remove CSS Outlines (2:38)

HTML5 and CSS3 Fundamentals

HTML5 and CSS3 Fundamentals

Instructor: Stone River eLearning

OverviewDescriptionAbout

Learn responsive website design for beginners with HTML5 and CSS3

When it comes to the world of technology, staying ahead of the curve is always a challenge.

When it comes to the world of technology, staying ahead of the curve is always a challenge. In the last year one aspect of this – the world wide web – has kicked up a gear with the introduction of HTML5, the newest version of the code that makes the web tick. If you learn HTML5 along with CSS3 (the next level of web design used on all modern websites), you’ll have a recipe for success; and this course will show you how.

Create a website from scratch with HMTL5 and CSS3

  • Build a complete functioning website section by section
  • Gain a solid knowledge base of HMTL5and CSS3 for future, more complex projects
  • Control your website’s appearance, functionality and navigability
  • Discover how HTML5 and CSS3 can be used in other areas of the web
  • Learn best practice techniques for building websites and web pages

Build Like a Pro with HMTL5 and CSS3 Design

The only way to effectively learn HTML5 and CSS3 is by diving right in and building websites from the ground up. That’s exactly what this course does. Designed for complete beginners, you’ll create a complete website section by section during 35 lectures and 5 hours of content.

You’ll start by becoming familiar with HTML tags and how they’re used, followed by the use of attributes and common settings. Once you’ve got a handle on basic HTML, you’ll move on to the fun stuff: CSS. You’ll use CSS for fonts, colours, lists, navigation menus, and more, adding a new element to your website with each section. Links, layouts, tables, forms and videos are all covered too.

If you know how to use a web browser and a text editor, you’re all set up for this course already. No extra software or tools are needed, and you can choose your preferred option of each to get going. By the time you finish, you’ll know everything you need to know to create beautiful, functional, easy to use websites of any kind.

About HTML5 and CSS3

HTML5

HTML or Hyper Text Mark-up Language is the language used for presenting websites and web content. HTML5 is the latest version, made official by the World Wide Web Consortium in 2014. Having a good grasp of HTML means you’ll be able to create, present and edit a whole variety of content on the web.

CSS3

CSS (Cascading Style Sheets) essentially ‘enhances’ HTML, giving developers and users more control over how pages and content is displayed. It is responsible for creating more visually engaging web pages, applications and interfaces. CSS3 is the latest version, and has many more extended features than previous versions – although it is backwards compatible.

 

Stone River eLearning

Stone River eLearning is owned and operated by Mark Trego and his support and development staff of outstanding eLearning enthusiasts from around the world. Mark originally hails from Bismarck, North Dakota in the U.S., but now resides in the little town of Sheldon, Iowa where he lives with his wife and 3 children on a working farm just outside of town.

Mark’s passions are entrepreneurship and online learning, so it was only natural that he gravitated towards what became the Stone River family of companies. Mark received his Master’s Degree in Business Administration/Entrepreneurship from Benedictine University in Chicago. His early career found him in finance, but he really found his passion as an education technology professional, instructional designer and teacher before starting Stone River eLearning in 2011.

5  Hours

36 Lessons

Lifetime Access

Course Curriculum

Preview Course

Course Intro
Introduction (4:08)
Basic HTML
Page basics (11:32)
Text Basics (8:23)
Text Formatting (5:10)
Lists (9:08)
Image Prep (9:39)
Inserting Images (8:17)
Website Project (16:33)
CSS Basics
css basics (9:32)
Font Styles (10:00)
Colors (7:35)
List Styles (4:20)
Advanced Selectors (9:48)
Website Project (8:02)
Links
Link Basics (6:39)
In-Page links (2:38)
Link styles (4:14)
Navigation Menus (6:00)
Website Project (9:56)
Layout
Block Spacing (12:14)
Arranging the Page (8:46)
Positioning (7:32)
Website Project (20:16)
Tables
Tables (6:51)
Table Styles (9:31)
Website Project (7:40)
Forms
Form Basics (5:40)
Form Elements (7:23)
HTML5 Form Elements (12:02)
Form Styles (8:18)
Form Website Project (11:36)
Video
Video preparation
Video HTML (8:32)
Website Project (7:14)
Wrap up
Conclusion tips and resources (5:21)

$39

$19.50