Alert Watch

Please click here to view my Bootstrap website.

In this exercise I created a simple website layout using Bootstrap. With the ‘marketing’ template on this W3Schools template I copied this into Visual Studio to start editing. Firstly I though of a medical product to base my website content on. I decided to go with the idea of a smart watch that connects with your hearing aid. With the Bootstrap template in my code editor, I identified the ids and classes in the HTML and matched them up to the internal CSS.

I started with editing the navigation bar at the top and by using navbar-inverse I made the design white text on a black background without having to define specific colours in the code. navbar-default would define black text on white. Following this I looked at the CSS and added rounded corners for a smoother, sleeker design along with a slight shadow for depth.

.navbar {
 margin-bottom: -50px;
 border-radius: 10px;
 box-shadow: 2px 2px 5px grey;
 }

<nav class="navbar navbar-inverse">
 <ul class="nav navbar-nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </nav>

The main header was simple to do as a <h1> set to 50px and the caption as a <p> tag. Also note margin-bottom: -50px; in the CSS for the navigation bar to decrease the padding between the two.

I downloaded some images from the internet to use in the carousel bar and the information boxes. This is when I found out that my idea was already in production and that had its pros and cons. Con – my idea had already been thought of. Pro – there are existing product images for my idea! The taxonomy for this is at the bottom of the page. I saved some images and resized them all to 1200px x 400px. Due to the varying colours of the bottom of the images I opted out of giving them captions.

 .carousel-inner img {
 width: 100%;
 margin: auto;
 min-height: 200px;
 }

<div id="myCarousel" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>

Underneath the main body of text are some more images sized at 200px x 200px and drop down pill buttons underneath them. This was interesting to learn because I have not created interactive buttons before. The code for The Dynamic Duo is below.

<div class="row">
 <div class="col-sm-4">
 <img src="imageOne.jpg" class="img-responsive" style="width:100%" alt="Image One">
 <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">The Dynamic Duo</button>
 <div id="demo" class="collapse">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 </div>
 </div>

Lastly, the text boxes at the side are simply wells, one of which contains the <blockquote> tag.

 <div class="well">
 <blockquote>
 <h2>"So helpful for myself and our elderly relatives"</h2>
 <footer>Sam, Essex (England)</footer></blockquote>
 </div>

The challenging thing about this project was getting to grips with which pieces of code would change which aspect of the page layout. Once I got my head around this,  I can now safely say I completely understand each line and would be able to duplicate it. This is a major milestone in my web-coding abilities because now that I have the ability and foundation knowledge to create a Bootstrap website, I can concentrate on more intricate and challenging pieces of work.

I would like to make a lot of improvements to my web page, however the main one would be the resizing issues. When the size of the window is changed the elements are unresponsive. For now, I am happy I have learnt how to use Bootstrap and can put more time into other aspects in other projects in the future.

Bibliography

W3schools.com. (2017). Bootstrap Templates. [online] Available at: https://www.w3schools.com/bootstrap/bootstrap_templates.asp [Accessed 4 Oct. 2017].

Resound.com. (2017). Smart hearing aids and wireless accessories | ReSound. [online] Available at: http://www.resound.com/en-gb [Accessed 4 Oct. 2017].

W3schools.com. (2017). Bootstrap 3 Tutorial. [online] Available at: https://www.w3schools.com/bootstrap/default.asp [Accessed 4 Oct. 2017].