Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Create an Engaging Website with Twitter Bootstrap 2.x to your Wishlist.

Add to Wishlist

Create an Engaging Website with Twitter Bootstrap 2.x

Learn to create your website with this free and open-source web design framework.
4.0 (56 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,457 students enrolled
Created by Chris Converse
Published 6/2012
English
$10 $20 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1 hour on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Chapter 1: Getting Started Introduction
What is Twitter Bootstrap
About the Project Files
Download the Project Files
Starting Your Project
Chapter 2: Adding the Base Markup for the Page
Page Container and Nested Rows
Adding Containers for Content
Adding Main Content
Preparing Graphics with Photoshop
Chapter 3: Adding your Own Style with CSS
Styling the Blockquote
Styling the Footer
Add Content and Style the Promos
Add Your Logo with a Link
Adding the Navigation Menu
Chapter 4: Create Your Own Icons
Add a Custom Icon to Glyphicons
Customize Styles for the Menus
Page and Background Styles
Chapter 5: Customize the Experience with Plug-ins
HTML Markup for the Carousel Plug-in
Responsive Download via CSS
Set the Timing for the Carousel
Remote Control the Carousel
Adding Form Elements
Creating an Auto Suggest
Chapter 6: Where To Go From Here
Where To Go From Here
View Curriculum
Requirements
  • A text editor, Photoshop CS2 or later (optional)
Description

A total of 23 lectures with a total running time of 74 minutes.

This step-by-step approach will show you how to build a responsive, interactive, and visually engaging web page with simple and flexible HTML, CSS and JavaScript -- all built on the free, open-source framework called Twitter Bootstrap. Learn to take advantage of the many aspects of Twitter Bootsrtap, including creating your own layouts, customizing components, device-sensitive elements, auto-suggest form fields, and extend the icon sprite sheet to incorporate your own icons! This course includes HTML, CSS, JavaScript, and Photoshop templates that you can customize for use in your own projects.

Who is the target audience?
  • Graphic and PRint Designers, Web Designers, Front-end Developers, Tech-savvy Marketing Managers
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 24 Lectures Collapse All 24 Lectures 01:10:49
+
Chapter 1: Getting Started
5 Lectures 12:23

Take a tour of the final project. We'll explore the responsive, cross-platform, and interactive features of the design, as well as the varying download sizes based on screen size.

Preview 06:53

Get a brief description of the Twitter Bootstrap framework, as well as an overview of how the reference website is structured.

Preview 01:55

Get familiar with the exercise files included. You will have access to source Photoshop files, code snippets, and a copy of the final project previewed in the introduction.

Preview 01:50

Download the files we'll be using during this course. This download includes:

  • Photoshop files
  • Snippets (HTML, CSS, TXT)
  • Twitter Bootstrap v.2.0.2
  • Copy of the final project
  • A "Skip Photoshop" folder
    (in case you want to bypass the Photoshop lectures)
Project Files
8.4 MB

Create a location on your hard drive to build your web site. Then add the started files from the project files.

NOTE: The videos are not displaying one line of HTML code that is included in the head area of the HTML files found in the Exercise Files. You will see this additional line added before the title tag:

Preview 01:45
+
Chapter 2: Adding the Base Markup for the Page
4 Lectures 10:34

Setting up the main page container and main five rows. Next, we'll add the markup for a nested row in the header area.

Page Container and Nested Rows
02:38

Add markup for columns for promos, main content, and footer area.

Adding Containers for Content
01:58

Placing in content for the main content area, including a pull quote using the blockquote element.

Adding Main Content
01:37

Use the Photoshop temples to prepare multiple versions of your carousel images, graphics for the promos, and imagery for your logo.

Preview 04:21
+
Chapter 3: Adding your Own Style with CSS
5 Lectures 16:03

Combine custom graphics and CSS overrides to style the block quote with a custom design.

Styling the Blockquote
01:38

Add columns, content, and links to the footer area. Then we'll add multiple CSS rules for varying screen sizes.

Styling the Footer
02:48

After we add content into the promo area, we'll add varying CSS rules for varying screen sizes.

Add Content and Style the Promos
04:15

Create a simple anchor link and add imagery and dimensions with CSS.

Add Your Logo with a Link
02:54

Add a standard unordered list in your markup for the navigation menu.

Adding the Navigation Menu
04:28
+
Chapter 4: Create Your Own Icons
3 Lectures 07:11

Using Photoshop, we'll add an additional icon to the sprite sheet, and measure the position for use in a custom CSS class.

Add a Custom Icon to Glyphicons
01:53

Add a custom CSS rule to make use of our new phone icon. In addition, we'll add a utility class to control when the phone number menu item appears.

Customize Styles for the Menus
02:55

Add CSS rules to style the background and page container. For small screens, we'll remove the page background altogether to save download data for smaller screens.

Page and Background Styles
02:23
+
Chapter 5: Customize the Experience with Plug-ins
6 Lectures 22:53

Learn how to add a plugin into your project. First we'll create a container for the carousel and search form, then add the necessary markup for the carousel.

HTML Markup for the Carousel Plug-in
04:09

By replacing the image tags with div containers, we can alter the imagery used in the carousel through CSS. This gives us the varying download sizes based on the user's screen size.

Responsive Download via CSS
04:42

Create custom jQuery instructions to set timing options for the carousel panels.

Preview 02:38

Create a custom JavaScript function to change and pause the carousel from a standard anchor link.

Remote Control the Carousel
04:44

Add the markup for a search form, then add CSS rules to style the form elements over the carousel.

Adding Form Elements
03:41

Using the Typehead plugin, we can add a series items that are provided as suggestions, based on what your user enters into the search field.

Creating an Auto Suggest
02:59
+
Chapter 6: Where To Go From Here
1 Lecture 01:45

Get suggestions on additional technologies to explore in conjunction with Twitter Bootstrap. In addition to this framework, you can use this free 7-day trial link for lynda.com (http://www.lynda.com/trial/chrisconverse) to learn more jQuery techniques, similar to the one found in this course.

Preview 01:45
About the Instructor
4.2 Average rating
693 Reviews
42,904 Students
8 Courses
Designer and Developer at Codify Design Studio

Chris has over 25 years experience in graphic design and interactive media, with a unique focus on both design and development. Chris possesses development skills across such languages as HTML, CSS, JavaScript (including jQuery and AngularJS), and PHP, making his design execution optimal across various media. In addition to designing and teaching online, Chris speaks at number of industry-related conferences, including HOW Design, Adobe MAX, Adobe ADIM, AIGA, and the Creative Publishing Network.

Report Abuse