Library

Course: Create an Engaging Website with Twitter Bootstrap 2.x

Create an Engaging Website with Twitter Bootstrap 2.x

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
About this Course

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
Basic knowledge
  • A text editor, Photoshop CS2 or later (optional)
What you will 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
Curriculum
Number of Lecture: 24
Total Duration: 01:10:59
Chapter 1: Getting Started
  • Introduction  

    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.

  • What is Twitter Bootstrap  

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


  • About the Project Files  

    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.

  • Project Files  

    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)
  • Starting Your Project  

    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:

Chapter 2: Adding the Base Markup for the Page
  • Page Container and Nested Rows  

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

  • Adding Containers for Content  

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

  • Adding Main Content  

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


  • Preparing Graphics with Photoshop  

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

Chapter 3: Adding your Own Style with CSS
  • Styling the Blockquote  

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

  • Styling the Footer  

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

  • Add Content and Style the Promos  

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

  • Add Your Logo with a Link  

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

  • Adding the Navigation Menu  

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

Chapter 4: Create Your Own Icons
  • Add a Custom Icon to Glyphicons  

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

  • Customize Styles for the Menus  

    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.

  • Page and Background Styles  

    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.

Chapter 5: Customize the Experience with Plug-ins
  • HTML Markup for the Carousel Plug-in  

    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.

  • Responsive Download via CSS  

    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.

  • Set the Timing for the Carousel  

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

  • Remote Control the Carousel  

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

  • Adding Form Elements  

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

  • Creating an Auto Suggest  

    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.

Chapter 6: Where To Go From Here
  • Where To Go from Here  

    Get suggestions on additional technologies to explore in conjunction with Twitter Bootstrap.

Reviews (0)