A day in the life of a Junior Web Designer

CSS Classes

In the last example we used the following line - <link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> This tells the web browser where to find the style sheet.

Classes in HTML are used to control the way a block of code (or mark-up) is rendered (appears) in the browser. Each class corresponds to a class definition in the Bootstrap CSS (Cascading Style Sheet) file, which is where things like font-size and background colours (to name just a couple) are set.

Bootstrap uses descriptive class names to show the purpose of the HTML components.

In the last step, you found where to change the text by looking for the class="navbar-brand". This class controls how the site branding shows in the navbar - the site navigation or menu.

Below is the carousel component, which is a slide show of banner images used on sites to promote things (to draw attention to a special offer for example). Look at the carousel component and drag the class names to the correct block of rendered HTML.

Perfect. Let's crack on.

Below is the HTML mark-up for the Carousel component. Click Preview to view how it currently looks.

1 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 2 <!-- Indicators --> 3 <ol class="carousel-indicators"> 4 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 5 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 6 </ol> 7 <!-- Wrapper for slides --> 8 <div class="carousel-inner" role="listbox"> 9 <div class="item active"> 10 <img src="banner1.jpg" alt="..."> 11 <div class="carousel-caption"> 12 This is my caption 13 </div> 14 </div> 15 </div> 16 17 <!-- Controls --> 18 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 19 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 20 <span class="sr-only">Previous</span> 21 </a> 22 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 23 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 24 <span class="sr-only">Next</span> 25 </a> 26 </div>
Preview the code

Note that there is currently only one slide when there are two dots on the 'carousel-indicator' suggesting there are two slides.

Create another slide by following these steps:

1 Copy and paste this block of HTML into line 15 below. This copies the first slide which is defined in lines 9-14 of the code and creates a new one.

<div class="item active"> <img src="banner1.jpg" alt="..."> <div class="carousel-caption"> This is my caption </div> </div>

Top tip: Every opening <div> tells the browser that a block of code has started. The </div> tells the browser that this block of code has ended.

2 Delete the word 'active' from the class in the code you just pasted in. This class tells the browser which slide is currently active (or visible) - there should only be one slide visible. Don't forget, you can a double click a word to select it all.

3 Change the image the slide uses by changing the <img src=""> from 'banner1.jpg' to 'banner2.jpg' in the code you just pasted in. The src part of the <img> tag tells the browser which image to display.

1 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 2 <!-- Indicators --> 3 <ol class="carousel-indicators"> 4 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 5 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 6 </ol> 7 <!-- Wrapper for slides --> 8 <div class="carousel-inner" role="listbox"> 9 <div class="item active"> 10 <img src="banner1.jpg" alt="..."> 11 <div class="carousel-caption"> 12 This is my caption 13 </div> 14 </div>
15
16 </div> 17 18 <!-- Controls --> 19 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 20 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 21 <span class="sr-only">Previous</span> 22 </a> 23 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 24 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 25 <span class="sr-only">Next</span> 26 </a> 27 </div>
Preview the code

Something's not quite right. Try again.

Your code block should look like this:

<div class="item"> <img src="banner2.jpg" alt="..."> <div class="carousel-caption"> This is my caption </div> </div>

Superb. Let's move on.

On to the next task

Sorry

Your screen is too small to complete these tasks.

Please try again when you have access to a larger screen.

;