Develop Responsive Websites with Bootstrap 3

Name: Develop Responsive Websites with Bootstrap 3
Rating: 2.4 (5 reviews)

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

Created byStone River eLearning

Last updated 6/2017

English

English [Auto],

What you'll learn

To create a working responsive website
To understand web development and web application development using Bootstrap 3
To create a custom web application UI

Course content

6 sections • 21 lectures • 3h 32m total length

Introduction to Bootstrap 37:09
Download the code for this course here.
Getting Started with Bootstrap 36:39
The Big Picture14:51
Explore Bootstrap's responsive 12-column grid, key files, and core components, then learn workflow, customization options, and practical tips for building and testing a marketing web site.

Overview of the Website6:25
The Home Page9:25
The Home Page Part 212:03
Debugging7:00
The Products Page19:00
Explore building a marketing products page with Bootstrap, including collapsible panels and accordions, responsive tables, and Twitter testimonials via the media object, plus pagination, header, and navigation.
The Details Page12:38
Customizations16:38
Learn how to customize Bootstrap without editing core files by using the Bootstrap customization web form, editing Less variables, and applying local CSS to change colors, fonts, and grid columns.
Responsive Design12:36
Explore bootstrap 3 responsive design by examining the grid at breakpoints, customizing panel layouts and carousel image sizes, and enabling retina.js images for accessibility across devices.
Production Notes4:29

Web App UI Overview2:51
Bootstrap 3 web app UI basics—tab navigation, glyph icons, and modals—within a fixed, container fluid dashboard featuring a side bar, top menu, and interactive graphs with notifications.
Web App Navs9:04
Web App Details11:43
Explore bootstrap UI components, including glyph icons, buttons, progress bars, modals, alerts, and tabbed navigation. Build responsive layouts with grid and show grid for interactive web apps.

Customization and Advanced Topics2:45
Develop a custom bootstrap theme by building with the command line and compiling Less and JavaScript. Explore Less versus Sass, mixins, Express, cross-browser testing, and Ruby on Rails with Sass.
Creating a Custom Theme19:57
Compile bootstrap from its source less files and build a custom theme workflow. Add customisations in my customisations.less, import fonts, adjust variables, and merge them into a themed bootstrap distribution.
Dynamic Bootstrap Part 119:26
Explore dynamic bootstrap by building a more complete app with Express, Jayde, and Less, using reusable templates for a shared nav bar and footer, and semantic styling with bootstrap mixins.
Dynamic Bootstrap Part 212:49
Explore dynamic Bootstrap 3 workflows using Jade mixins and Less for responsive layouts, with retina image handling, source maps, deployment, and a quick SAS Rails integration.

Requirements

Basic knowledge of HTML and CSS
JavaScript knowledge is helpful

Description

Build Beautiful, Responsive Websites with Bootstrap 3

In this course, Develop Responsive Websites with Bootstrap 3, you’ll learn to harness the power of the Bootstrap 3 framework to create stunning, responsive websites that look great on mobile, tablet, and desktop browsers. Bootstrap simplifies web design, making it easier to build modern, functional websites without starting from scratch.

What You Will Learn

Throughout the course, you’ll dive into various Bootstrap 3 components like Navbars, Buttons, Panels, Accordions, Modal dialog boxes, and more, while building two demonstration websites. You’ll also explore the underlying architecture of Bootstrap, including its layout grid, responsive design techniques, typography, and utility functions. These features will help you create websites that are not only visually appealing but also functional and accessible across all devices.

Projects

By the end of the course, you’ll have built a beautifully designed, fully responsive website for your portfolio. You will also have the skills to create dynamic websites, web applications, and custom user interfaces (UI) using Bootstrap. The knowledge gained in this course will empower you to create virtually any website you encounter in today’s web development landscape.

Bootstrap Customization

The course also covers customizing Bootstrap, including simple CSS overrides, enhancing functionality with third-party JavaScript (for Retina images), and creating your own Bootstrap templates. You’ll learn useful CSS debugging techniques and explore the Bootstrap pre-processor language, LESS. In the final lessons, you’ll build a dynamic version of one of your demo websites with a Node.js server and on-demand compiled Bootstrap LESS.

Prerequisites

Some familiarity with HTML, CSS, and basic web concepts is required. Javascript knowledge is helpful, but not necessary. By the end of this course, you'll be equipped with the skills to develop responsive websites and custom UIs using Bootstrap 3.

Who this course is for:

Web developers
Web designers

Develop Responsive Websites with Bootstrap 3

What you'll learn

Explore related topics

Course content

Introduction to the Course3 lectures • 29min

Create a Marketing Website with Bootstrap 39 lectures • 1hr 40min

Developing Web Apps with Bootstrap 33 lectures • 24min

Theme Customization4 lectures • 55min

Conclusion1 lecture • 5min

Bonus Material1 lecture • 1min

Requirements

Description

Who this course is for: