We use Bootstrap 4.3.1 to build our website. Add their custom stylesheet before any others.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
For fonts, we'll be using the following fonts provided by Google Fonts.
Embed the stylesheet that Google Fonts provides into the <head> of your HTML document:
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab:400,700|Roboto:400,400i,700 rel="stylesheet">
Use FontAwesome to load the custom external link icon:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
In order to show our icon within the tab of a user's browser, we'll use the following code:
<link href="../apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"> <link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png"> <link rel="icon" type="image/png" href="../android-chrome-512x512.png">
For tooltips and related error messages, we require Popper.js. So instead of using Bootstrap's
default
bootstrap.min.js, we will use boostrap.bundle.min.js:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
After setting up, your HTML should look like the following:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Learn to Code</title>
<link href="../apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
<link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
<link rel="icon" type="image/png" href="../android-chrome-512x512.png">
<!-- FontAwesome Icons -->
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" rel="stylesheet">
<!-- Bootstrap CSS -->
<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<!-- Google Fonts Roboto, Roboto Slab, and Roboto Mono-->
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab:400,700|Roboto:400,400i,700"
rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Bootstrap Bundled with Popper JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Use the following CSS properties to specify our style's font families:
font-family: 'Roboto', sans-serif; font-family: 'Roboto Slab', serif; font-family: 'Roboto Mono', monospace;
Roboto will be used for any large text, such as titles, subtitles, and the various headings. Roboto Slab, given its serifs, are intended for body text or other length blocks of text that are not code. As for code, Roboto Monospace will be used both in inline code and blocks of code. Sample text is shown below.
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
//some python code
print("Hello, World!")
//some c code
int main(){
printf("Hello, World!");
return 0;
}
This is inline code.
It can even be multi inline (use a code block though).
Note: Any use of color requires heavy CSS customization to circumvent Bootstrap's default color scheme. Either:
!important CSS tag when using a separate stylesheet to declare an element's
color.
| Color | Hex | Usage |
|---|---|---|
| #7B1FA2 | Primary 1 | |
| #D6137E | Accent 1 | |
| #3D2432 | Accent 2 | |
| #AFAC4D | Accent 3 | |
| #D6BE13 | Accent 4 |
| Color | Hex | RGB | Tint & Shade |
|---|---|---|---|
| #FA9EFF | 250 158 255 | Lightened 50% | |
| #E185FF | 225 133 255 | Lightened 40% | |
| #C86CEF | 200 108 239 | Lightened 30% | |
| #AE52D5 | 174 82 213 | Lightened 20% | |
| #9539BC | 149 57 188 | Lightened 10% | |
| #7B1FA2 | 123 31 162 | Original | |
| #620689 | 98 6 137 | Darkened 10% | |
| #48006F | 72 0 111 | Darkened 20% | |
| #2F0056 | 47 0 86 | Darkened 30% | |
| #15003C | 21 0 60 | Darkened 40% | |
| #000023 | 0 0 35 | Darkened 50% |
| Color | Hex | RGB | Tint & Shade |
|---|---|---|---|
| #FF92FD | 255 146 253 | Lightened 50% | |
| #FF79E4 | 255 121 228 | Lightened 40% | |
| #FF60CB | 255 96 203 | Lightened 30% | |
| #FF46B1 | 255 70 177 | Lightened 20% | |
| #F02D98 | 240 45 152 | Lightened 10% | |
| #D6137E | 214 19 126 | Original | |
| #BD0065 | 189 0 101 | Darkened 10% | |
| #A3004B | 163 0 75 | Darkened 20% | |
| #8A0032 | 138 0 50 | Darkened 30% | |
| #700018 | 112 0 24 | Darkened 40% | |
| #570000 | 87 0 0 | Darkened 50% |
| Color | Hex | RGB | Tint & Shade |
|---|---|---|---|
| #BCA3B1 | 188 163 177 | Lightened 50% | |
| #A38A98 | 163 138 152 | Lightened 40% | |
| #8A717F | 138 113 127 | Lightened 30% | |
| #705765 | 112 87 101 | Lightened 20% | |
| #573E4C | 87 62 76 | Lightened 10% | |
| #3D2432 | 61 36 50 | Original | |
| #240B19 | 36 11 25 | Darkened 10% | |
| #0A0000 | 10 0 05 | Darkened 20% |
| Color | Hex | RGB | Tint & Shade |
|---|---|---|---|
| #FFFFCC | 255 255 204 | Lightened 50% | |
| #FFFFB3 | 255 255 179 | Lightened 40% | |
| #FCF99A | 252 249 154 | Lightened 30% | |
| #E2DF80 | 226 223 128 | Lightened 20% | |
| #C9C667 | 201 198 103 | Lightened 10% | |
| #AFAC4D | 175 172 77 | Original | |
| #969334 | 150 147 52 | Darkened 10% | |
| #7C791A | 124 121 26 | Darkened 20% | |
| #636001 | 99 96 1 | Darkened 30% | |
| #494600 | 73 70 0 | Darkened 40% | |
| #302D00 | 48 45 0 | Darkened 50% |
| Color | Hex | RGB | Tint & Shade |
|---|---|---|---|
| #FFFF92 | 255 255 146 | Lightened 50% | |
| #FFFF79 | 255 255 121 | Lightened 40% | |
| #FFFF60 | 255 255 96 | Lightened 30% | |
| #FFF146 | 255 241 70 | Lightened 20% | |
| #F0D82D | 240 216 45 | Lightened 10% | |
| #D6BE13 | 214 190 19 | Original | |
| #BDA500 | 189 165 0 | Darkened 10% | |
| #A38B00 | 163 139 0 | Darkened 20% | |
| #8A7200 | 138 114 0 | Darkened 30% | |
| #705800 | 112 88 0 | Darkened 40% | |
| #573F00 | 87 63 0 | Darkened 50% |
We used a Bootstrap 4 template called Modern Business for most of the site, which can be found here. Additionally, we used the "SB Admin" template for the administration and analytics board, found here. Both templates were provided by Start Bootstrap.
In order to maintain a consistent site, the navigation and footer for all pages are outlined below.
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Proudly Created by 7 Train Company</p>
</div>
</footer>
In order to show the current page, use the active class in addition to the nav-item when creating the single item list
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">Learn to Code</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="index.html" class="nav-link" id="login" data-toggle="modal" data-target="#modalRegisterForm">
Login/Register</a>
</li>
<li class="nav-item">
<a class="nav-link" id="logout" style="display:none;" href="index.html">Log Out</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Lessons
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item" href="lessons1.html">1. Basic Lessons</a>
<a class="dropdown-item" href="lessons2.html">2. Fundamental Lessons</a>
<a class="dropdown-item" href="lessons3.html">3. Intermediate Lessons</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
Each lesson page will start with a relevant title to that specific material, contained in a card layout to create a sense of discrete, compartmentalized information.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.
You can do this by using the following HTML:
<h1 >Lesson Title</h1>
<!-- This portion below is repeatable for multiple subtitle cards -->
<div class="row">
<div class="col-lg-12">
<div class="card h-100">
<h4 class="card-header">Lesson Subtitle</h4>
<div class="card-body">
<p class="card-text">Lesson Body pt. 1</p>
</div>
</div>
</div>
</div>
No outlined button exists for a link, as it would cause too much confusion between a link button and link text.
<!-- Button trigger modal -->
<button class="btn btn-primary" data-target="#exampleModal" data-toggle="modal" type="button">
Show Default Modal
</button>
<!-- Modal -->
<div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="exampleModal" role="dialog"
tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button aria-label="Close" class="close" data-dismiss="modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Hello World!
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" type="button">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Show Centered Modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Hello Centered World!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
In order to adjust the sizing of an alert relative to its container, you must surround it with
<div class="row">
<-- where # is a number from 1 to 12-->
<div class="col-#">
<div class="alert alert-success" role="alert">
A simple success alert!
</div>
</div>
</div>
Alerts can also contain links, headings, paragraphs, and other HTML elements.
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Bootstrap's bundled JavaScript allows for dimissable alerts; with a few more lines a boilerplate code, you can get:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
This does however, result in the alert being removed from the DOM upon dismissal.
Fortunately, adding an alert can be done easily with jQuery, along with other HTML insertion methods, as outlined in W3Schools' jQuery - Add Elements page. Alternatively, you can adapt the script below, which refreshes the alert above, to your use cases.
function addDismissibleAlert() {
let div = $("#dimiss_div");
const html = "<div class=\"row\"><div class=\"col-12\"><div class=\"alert alert-warning alert-dismissible fade show\" role=\"alert\"><strong>Holy guacamole!</strong> You should check in on some of those fields below.<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button></div></div></div>";
div.empty();
div.append(html);
}
As mentioned in the Set Up section, tooltips require Popper.js, and so in order to simplify our
scripts
we'll be using Bootstrap's boostrap.bundle.min.js. To enable the tooltips on a page,
use this
small script:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
You can also show, hide, and toogle tooltips on demand using jQuery:
$('#elem_id').tooltip('show')
$('#elem_id').tooltip('hide')
$('#elem_id').tooltip('toggle')
All tooltips require a small amount of bolierplate attributes, specifically
data-toggle="tooltip" and title="tooltip text".
You can pass plenty of tooltip options through data attributes by using a data-*
attribute,
and appending the name of the option, like data-placement="top". The possible options
can be
found on Bootstrap's Tooltip Documentation, found
here.
This is some text with a tooltip. As you can see, it is difficult to tell what text contains a tooltip, so using the HTML "a" tag with an href of "#" can make text that contains tooltips easier to notice.
A tooltip's placement can also be customized.
And now with custom HTML.