Create an Engaging Website with Twitter Bootstrap 2.x

Learn to create your website with this free and open-source web design framework.
  • Lectures 24
  • Video 2 Hours
  • Skill level all level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

Course 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.

What are the requirements?

  • A text editor, Photoshop CS2 or later (optional)

What am I going to get from this course?

  • Over 24 lectures and 1 hour of content!
  • 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

What is the target audience?

  • Graphic and PRint Designers, Web Designers, Front-end Developers, Tech-savvy Marketing Managers

What you get with this course?

Not for you? No problem.
30 day money back guarantee

Forever yours.
Lifetime access

Learn on the go.
Desktop, iOS and Android

Get rewarded.
Certificate of completion

Curriculum

Section 1: Chapter 1: Getting Started
06:53

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.

01:55

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

01:50

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.

8.05 MB

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)
01:45

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:

Section 2: Chapter 2: Adding the Base Markup for the Page
02:38

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

01:58

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

01:37

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

04:21

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

Section 3: Chapter 3: Adding your Own Style with CSS
01:38

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

02:48

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

04:15

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

02:54

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

04:28

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

Section 4: Chapter 4: Create Your Own Icons
01:53

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

02:55

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.

02:23

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.

Section 5: Chapter 5: Customize the Experience with Plug-ins
04:09

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.

04:42

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.

02:38

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

04:44

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

03:41

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

02:59

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.

Section 6: Chapter 6: Where To Go From Here
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.

Instructor Biography

Chris Converse , Designer and Developer at Codify Design Studio

Chris has over 22 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 PHP, ActionScript, HTML, CSS, and JavaScript (including jQuery and AngulatJS), making his design execution optimal across various media.

Join the biggest student community

6,400,000

Hours of video content

29,000,000

Course Enrollments

7,900,000

Students

Reviews

Average Rating
4.3
Details
  1. 5 Stars
    25
  2. 4 Stars
    15
  3. 3 Stars
    2
  4. 2 Stars
    5
  5. 1 Stars
    0
    • Mark Sorensen

    Great Course!

    This is a perfect introduction to Twitter Bootstrap 2. The lessons and project files are easy to follow and understand and just the right length. A lot of thought has gone in to the project files, especially the way the folders are set up for users who don't want to or can't use PhotoShop. The only downside to this course is that the Twitter Bootstrap is now updated to v3 but I highly recommend this course if you want an understanding of what Twitter Bootstrap is and how it can help you build websites.

    • Jeremy Metcalf

    Nice course

    I picked up a few new things and will enjoy playing around in it.

    • Rohit Nayak

    Great Tutorial!

    Awesome intro into bootstrap .I am really going to use this for designing new websites.

    • Ivan Bayross

    An excellent course to start using Twitter Bootstrap

    Chris has created a well thought through workflow prior creating this course. The work flow logic is excellent, mapped closely to how a most template developers think and work. This really makes it easy to work through each section of the course and build your template development skills. The code snippets, are an excellent way of quickly crafting the responsive template without getting involved in typos that would prevent the codespec being crafted from working. Then image / asset media queries were explained very simply and elegantly. Thanks Chris. Appreciate the effort put in. Regards, Ivan Bayross

    • Mark Cohen

    A Good Introduction into the use of Twitter Bootstrap 2

    An easy to understand walk through of building a responsive website with Bootstrap 2. The course follows a logical well-paced progression & keeps focused on the Bootstrap features; rather than wasting time explaining the basics of HTML & CSS coding. The instructor provides an excellent level of support via the Udemy Question & Answer facility.

Show more reviews
Ready to start learning?
Preview this course