Task 2
Contents
Task 2#
There are dozens of different Bootstrap components available for you to explore and work with.

At this point in the course, you will not be able to use all the components, as some of them require knowing Javascript, which we will learn later on in the course.
In the next few tasks, we will go over some of the key features of Bootstrap and with these, you should be able to make a fully functional, and responsive website.
Task 2.2 - Badges#
Following a similar procedure as Task 2.1, add three badges (of different colours) to your website and customize the text of each one (with anything you like). Here is a link to the documentation about Bootstrap badges.
Here is what we’re expecting (but feel free to choose your own colours and text):
Create three different badges, each of different colours and text, and add it to task2.html.

Task 2.3 - Images#
Choose a royalty-free, open-licensed image of your choice from Pexels.com or Pixabay.com for this task. Here is a link to the documentation about Bootstrap images.
Here’s what you need to do for this task:
Add the same image three times to task2.html using the standard
<img src="...">
tag.Shrink the images so they’re smaller on the page using the
width=20%
(or, equivalentlyheight=20%
).Add a rounded 1-px border around your images by adding the
img-thumbnail
class to each of your image tags.Add linked text with the attribution credit, make sure it’s linked to the image source.
Add “alt-text” for all of your images from here onwards.
Create a
div
with thetext-center
class, as well as threefloat
classes to have one image that is left-aligned, one image that is center-aligned, and one image that is right-aligned.
Here’s what we’re expecting for this task:

Task 2.4 - Deploy your website#
Visit your lab repository on GitHub.com.
Click on “Settings”
In the left side-bar, click on “Pages”
In the “Build and deployment” section, under “Source”, click the “Deploy from a branch” dropdown, and select “main” (the default is set to None).
Click Save
Wait 1-2 minutes
Come back to the page and reload it, you will see something like this:

Click “Visit Site”, and make sure your website shows up correctly.
Add a link in the main
index.html
file to link to the task1.html file usinghtml
syntax. Here’s what you should see when you’re done:

Note: Later in this lab you will learn all sorts of fancy components, feel free to apply that knowledge to style your home page, though it’s not required (yet).
Specifications#
Link to task2.html from your main
index.html
file.Display at least two buttons (each of a different colour and “state”).
Display at least 3 badges, of different colours and text.
Display three images as described in Task 2.3
Ensure all images have appropriate “alt-text”.
Arrange the elements in the task2.html file in a reasonably logical way.