Skip to content

Instantly share code, notes, and snippets.

@mrmccormack

mrmccormack/README.md

Last active January 7, 2019 15:15
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 mrmccormack/77b821c5b724975d3c82245285424dfb to your computer and use it in GitHub Desktop.
Save mrmccormack/77b821c5b724975d3c82245285424dfb to your computer and use it in GitHub Desktop.
Download ZIP
IM215 - First Class - Bootstrap 4 / Font Awesome - CDN version
Raw
README.md

IM215: Quick Mark #1 - Requirements

Steps:

  1. Create your own index.html (file below) on your computer and view it in Chrome
  2. Open index.html in your favorite editor

Part 1: Sing-a-long with Mr. M.

  1. Inspect the file... what is familiar to you, what is not familiar
  2. Change the ugly green color of the <h1> tags with internal CSS styles
  3. Add a 4th column - Mr. M. will show you. TIP: Bootstrap has a 12 column grid
  4. Add an alert box from https://getbootstrap.com/docs/4.1/components/alerts/
  5. Using FontAwesome add your icons. Ref: https://fontawesome.com/icons?d=gallery&m=free

Part 2: On your own

  1. Add your own image, make it responsive in the 2nd column
  2. Add 3 Bootstrap components from https://getbootstrap.com/docs/4.1/components/
  3. Add 2 more nice icons from FontAwesome https://fontawesome.com/icons?d=gallery&m=free
  4. Add a responsive YouTube video to any column. Ref:: https://getbootstrap.com/docs/4.1/utilities/embed/
  5. Save a copy of index.html to your Google Drive - or anywhere in the Cloud - or just email it to yourself.
  6. Show Mr. M. your work before you go.

Notes

  • Mr. M. discourages the use of USB drive in Programming Courses for many reasons
  • Mr. M. doesn't user Blackboard for submission of assignments etc. (too old, too slow, too expensive, not a tool you'll ever use again)
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<!-- Fontawesome links -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<title>????Enter your title here, don't forget!!! </title>
<style>
h3 {
color: green;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-primary">
<a class="navbar-brand" href="#">Yoda Lives</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Fan club</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Members only</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Yoda lives here.</h1>
<p>My first Bootstrap 4.x Yoda Page</p>
<p><small>by Mr. M. - Confederation College</small></p>
<a class="btn btn-primary" href="#" role="button">Yoda's videos &raquo;</a>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Column 1</h3>
<img class="img-fluid rounded-circle" src="https://assets.entrepreneur.com/content/3x2/2000/20170405204540-empire-yoda.jpeg?width=700&crop=2:1"
alt="yoda">
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-stroopwafel"></i>
</span>
<i class="fas fa-rocket fa-xs"></i>
<i class="fas fa-rocket fa-sm"></i>
<i class="fas fa-rocket fa-lg"></i>
<i class="fas fa-rocket fa-2x"></i>
<p>Lorem ipsum dolor..</p>
<p>Ut enim ad..</p>
</div>
<div class="col-md-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor..</p>
<p>Ut enim ad..</p>
</div>
<div class="col-md-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor..</p>
<p>Ut enim ad..</p>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment