9COURSES
559LESSONS
NEWENROLLED
LIFETIME ACCESS TO ALL THESE 9 COURSES
Develop Responsive Websites with Bootstrap 3
$10 Value
Learn Mobile First Web Development using Bootstrap
$29 Value
Bootstrap Basics: Program Responsive Websites
$10 Value
Learn Bootstrap: Design a Custom Landing Page in Bootstrap 4
FREE
Start Now with Bootstrap 3 | Ebook Included
$54 Value
Create a Portfolio Website with HTML, CSS & Bootstrap
$39 Value
Responsive Web Design Essentials - HTML5 CSS3 Bootstrap
$10 Value
WordPress Theme Development with Bootstrap
$199 Value
HTML5 and CSS3 Fundamentals
$99 Value
Live Coaching Webinars and Online Q&A Community
Assisted Learning
DETAILS OF THE 9 COURSES IN THE BUNDLE
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
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
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!
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
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
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
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
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
- The Font Awesome icons designed by Bootstrap
- The Google Fonts
- The online favicon generator
- W3C validation service to build an error-free webpage
- 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)
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
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.
- 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.
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)
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
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
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)