Skip to content

Instantly share code, notes, and snippets.

@trumbitta

trumbitta/index.html

Created September 24, 2014 16:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save trumbitta/999cb7fcac95516983b1 to your computer and use it in GitHub Desktop.
Save trumbitta/999cb7fcac95516983b1 to your computer and use it in GitHub Desktop.
Download ZIP
Main page for the BB test
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><b>Backbase Dashboard</b></a>
</div>
<div class="navbar-collapse collapse">
</div><!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h2>Welcome to your online banking dashboard</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu augue lorem. Integer quis elit ut turpis accumsan eleifend non eget nunc. Donec vitae luctus urna, eu dapibus felis. Vivamus rutrum, magna eget condimentum venenatis, turpis diam sagittis urna, eu lobortis massa nibh ac sapien. Nullam ut vestibulum massa</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Profile</div>
<div class='panel-body'>
<p><b>Welcome</b></p>
<p><img src='/img/profile.jpg' width="100"></p>
<p><a href="#"><span class="glyphicon glyphicon-envelope"></span> 4 new messages</a></p>
</div>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">History</div>
<div class='panel-body'>
<img src="/img/chart.png" width="100%">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Accounts</div>
<ul class="list-group">
<li class="list-group-item">
<span class="pull-right h4">€1033,93</span>
<h4>Personal checking</h4>
</li>
<li class="list-group-item">
<span class="pull-right h4">€433,52</span>
<h4>Savings</h4>
</li>
<li class="list-group-item">
<p class="pull-right h4">€200,22</span>
<h4>Credit Card</h4>
</li>
</ul>
</div>
</div>
<div class="col-md-8">
<iframe src="/widgets/transactions/index.html" width="100%" height="200px" frameborder="none">
</div>
</div>
<footer>
<p>&copy; Company 2014</p>
</footer>
</div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
@trumbitta
Copy link
Author

My comments to the file

  1. The W3C validator spots 15 errors. Most of them are trivial, and some will disappear as soon as their parent error is fixed. But some ugly ones remain. Errors make the browser enter quirksmode and behave differently.
  2. Line 51: There are some parts of the file where ' are used instead of ".
  3. Line 53: img tags must have an alt attribute, even if it's empty. It's good for Accessibility, and a best practice.
  4. Line 75: You are using a h4 with no parent h3, and on Line 40 a h2 with no parent h1. This means you are using HTML tags for styling instead of meaning and it is just wrong. Compare it with the widget I wrote for the test, where I used way more semantic code and in particular a <p class="h4"> in order to retain the style you gave to the whole page, while using a proper HTML element in that context.
  5. Line 82: The span starts as a p
  6. Line 99: The footer is misplaced and in fact it just ends up being cut out from the page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment