A total of 23 lectures with a total running time of 74 minutes.
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.
Get a brief description of the Twitter Bootstrap framework, as well as an overview of how the reference website is structured.
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.
Download the files we'll be using during this course. This download includes:
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:
Setting up the main page container and main five rows. Next, we'll add the markup for a nested row in the header area.
Add markup for columns for promos, main content, and footer area.
Placing in content for the main content area, including a pull quote using the blockquote element.
Combine custom graphics and CSS overrides to style the block quote with a custom design.
Add columns, content, and links to the footer area. Then we'll add multiple CSS rules for varying screen sizes.
After we add content into the promo area, we'll add varying CSS rules for varying screen sizes.
Create a simple anchor link and add imagery and dimensions with CSS.
Add a standard unordered list in your markup for the navigation menu.
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 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.
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.
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.
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.
Create custom jQuery instructions to set timing options for the carousel panels.
Add the markup for a search form, then add CSS rules to style the form elements over the carousel.
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.
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.