Code a Responsive Website with Bootstrap 3 - [Lecture 9] Coding the Carousel

Lecture #9: In this lecture, we code the HTML for the animated carousel.

===========
Please Donate:
===========

=================
More about this course:
=================

==============
Code Responsively
==============

Do you want to learn how to build a responsive, mobile-friendly and beautiful website using HTML5, CSS3 and jQuery? Look no further! You're in the right place.

======================
A Simple Step-by-Step Guide
======================

This course is a simple, step-by-step tutorial that will arm you with the appropriate skills and knowledge to start building your very own responsive websites using the newly released Twitter Bootstrap 3 — a popular, free, mobile-first, open-source framework.

==========
Dive Right In
==========

We will dive into hand-coding custom responsive layouts, sliding carousels, beautiful buttons, device-specific elements, scalable font icons, and so much more! This course includes all HTML5, CSS3, jQuery, and even Photoshop files for you to use for free in your own websites & applications.

What are you waiting for? Let's get ahead of the game and get started right now!

=====================
Check out the Final Product
=====================

=======================
What My Students Are Saying
=======================

Ground breaking (and simple) web creation.

Wow. What's the most expensive website on the Internet? Facebook? Twitter? Because when you finish this course you will have hand-coded a webpage that looks and functions JUST like the most impressive and intuitive websites that once took programmers thousands of hours to code. Bootstrap 3 is RIDICULOUSLY straight-forward.

These videos are well created, concise, fast-paced, easy to follow, and just funny enough to keep you chuckling as you're slamming out lines of code. I've taken 3 courses from this instructor. Whenever I have questions he is right there with a simple solution or a helpful suggestion to keep me going forward with the course work.

If you haven't done any coding before (or need to get brushed up on HTML) this guy's HTML course is a bit slower and more in depth as to how the entry level code works. This Bootstrap course assumes that you're well-versed in HTML and runs with it. My only complaint is that I now have to go back and re-do ALL my websites... because this course info is just too good to pass up. ;)

[wahidulislam]

ur the best best  lecturer i have ever seen on web course ...Awesome work.

[theekshanabandara]

Good explaining plus great advise. " dont just copy and past just learn".. :)

[niro.nathan]

by the way nice tutor Brad Hussey! 100% recommendable

[monquiturdle]

I love this tutorial and all the work you put into it. I am a graphic designer with minimal web experience and this is very helpful so far. I do not understand all of the intricacies of the code but it is great to follow along. I am finding that your typing is very fast for me to follow along without pausing and rewinding. (Not a complaint). I am also using coda for the first time. Am I missing some quick shortcuts to help my code writing work more efficiently? It would be awesome if you did a coda walkthrough video that shows how power users can work in it.

[slawekskibinski]

Hi Brad,
great series so far, thanks for your effort, although I have a little issue with carousel controls. The code is outside carousel-inner and looks exactly the same like yours, but the buttons(controls) aren't clickable. They show the slide position correctly, but I cannot click on them. Could you advise?

[pallavipra]

hello sir, it is the one of the best tutorial on responsive design. I have been struck on the carousel portion. I have inlcuded code as exactly explained in tutorial.I have inlcuded  jquery and bootstrap.min.js. However the carousel is not working properly?

[csmcustomerservice]

Hey Brad, is there any way to make the carousel scroll vertical?

[jennifersomers]

is it my imagination or is there a missing opening <div> tag for the Controls section? Should there be one just before we star the <a> tags?

[bendyamin]

Why not just give carousel div a black background and then make svg or pngs for each one of the icons/background images and then set the responsiveness to them?

[angelusherath]

I would like to now how to make the home button white when i click services it looks quite weird without it

[niro.nathan]

Hey Guys!

i have a question..
when i am using "data-.." Attribute 
then give my Coding Programm "Aptana" as warning this "a proprietary attribute "data-slide" "

this is my code line
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>

as well my navbar with dropdown function itdoesn't work
i think is the same issue!

my code line:
<a href="#" class="dropdown-toggle" <strong class="caret"></strong></a>

"data-toggle" same matter


Sorry for my bad english :)

i hope i wanna get a solution 

thank you guys
cheers
niro

[satishhalmare]

sir how to create fluide layout - side bar in bootstrap3   

[chome]

When I remove the carousel contents and put in a new div that is going to contain a banner, nothing shows up and the contents below just 'jump' up to fill the void. Any ideas?