JavaScript Tutorials

Ever wanted to learn some JavaScript in a fun and innovative way? These quick tutorials will do just that and then some! Learn about sticky nav’s, typed text animation and how to build a calculator using JavaScript and jQuery. I’ve put my skills to work to help you learn a cool new technique!

HTML 5 icon CSS 3 icon JavaScript icon jQuery icon Adobe Photoshop icon
JavaScript Tutorials Home Page

 The Planning

The JavaScript / jQuery Tutorials was an individual project that required us to demonstrate our skills using JavaScript and jQuery to teach three techniques that we found useful or interesting. I approached this project by asking myself “how would someone learn this information?” and designed the site as if someone were using their computer to do so. This project is not responsive as it was before we learned those skills.

JavaScript Tutorials Wireframes
JavaScript Tutorials Wireframes
JavaScript Tutorials Wireframes

 The Design

JavaScript Tutorial One
JavaScript Tutorial Two
JavaScript Tutorial Three

Ichose to do a sticky nav as my first tutorial because I appreciate always being able to see the navigation on a page that requires extensive scrolling. I love that the options are endless with various transitions and layout to make a navigation that fits any page. My second tutorial was the typed text animation plugin. I chose this because I like the movement of the cursor when typing. I enjoyed that this technique brings about many different looks depending on phrases used, font style, font size and colors that the designer can choose. For my final tutorial I chose a JavaScript calculator. I had a lot of trouble deciding what I wanted to do for this last one as I wanted to do something to fit into my ‘computer inception’ theme but couldn’t think of any other applications I could use to make an idea come to life. After searching for inspiration online and just around my own computer I settled on a calculator!

 The Code

For my JavaScript Tutorials project I added the code to Github to showcase my coding and to gain some more understanding of the Github interface. This repository is not minified as there are <pre> tags that wouldn’t work minified as well as the fact that it is a fairly small site that is really just meant for educational purposes.

JavaScript Tutorials Github Repository

During this project I learned how to use iframes and positioned them within the ‘browser’ and ‘notepad’ sections on each tutorial in order to allow them to scroll inside the computer screen. I also learned a valuable lesson about keeping all styles in one stylesheet rather than trying to combine them at the end. The current version has seperate stylesheets for each inset because at the end when I tried to put them together there were too many errors to fix so I left it as is.

Tutorial One HTML

<body>

<div class="desktop-comp">

	<img src="images/desktop-wallpaper.png" alt="Desktop Wallpaper" class="desk-wallpaper">

	<img src="images/chrome.png" alt="Chrome Webpage" class="chrome">

	<header>
        <nav>
            <ul>
                <li><a href="index.html">Main</a></li>
                <li><a href="tutorial-01.html">Tutorial One</a></li>
                <li><a href="tutorial-02.html">Tutorial Two</a></li>
                <li><a href="tutorial-03.html">Tutorial Three</a></li>
            </ul>
        </nav>
	</header>

<iframe src="tutorial-01-inset.html" class="tut-01"></iframe>

</div>

</body>
		
Tutorial One iFrame Inset

<body class="body-tut-01">

	<header> 
		<nav>
		<h1> How To: Sticky Nav</h1>
		    <ul>
			<li><a href="#link-html">HTML</a></li>
			<li><a href="#link-css">CSS</a></li>
			<li><a href="#link-javascript">JavaScript</a></li>
		    </ul>
	    </nav>
	</header>

<main class="main-tut-01">

	<article class="description">
		<h2>What is a sticky nav?</h2>
		<p>Sticky, or fixed, navigation is basically a website menu that is locked into place so that it does not disappear when the user scrolls down the page; in other words, it is accessible from anywhere on the website without having to scroll.</p>
	</article>

	<article class="html">
		<h1><span id="link-html" class="link-element"> </span>The HTML </h1>
		<p>Start by laying out the navigation menu in the header like this.</p>
		<pre><code class="language-markup">
<body>
	<header> 
		<nav>
			<h1> How To: Sticky Nav!</h1>
		    <ul>
				<li><a href="#">HTML</a></li>
				<li><a href="#">CSS</a></li>
				<li><a href="#">JavaScript</a></li>
		    </ul>
	    </nav>
	</header>
		</code></pre>
	</article>

	<article class="css">
		<h1><span id="link-css" class="link-element"> </span>The CSS</h1>
		<p>Then style your main navigation (class="normal-nav") as well as adding styles for your sticky nav (class="sticky" which will be added by the javaScript in the next section)</p>
		<pre><code class="language-css">
nav h1 {
	position: absolute;
	top: 20px;
	left: 25px;
	font-size: 25px;
	color: white;
	text-shadow: 2px 2px black;
}

nav {
	position: relative;
	top: 52px;
	float: left;
	display: block;
	background-color: #88BBD6;
	margin: 0px 40px;
	width: 90%;
	height: 64px;
	z-index: 10;
}

nav a {
	position: relative;
	top: 18px;
	text-decoration: none;
	float: left;
	width: calc(100% / 3);
	font-size: 16px;
	color: white;
	line-height: 64px;
	text-align: center;
	list-style-type: none;
	letter-spacing: 1px;
	text-shadow: 2px 2px black;
}

nav ul {
	list-style: none;
	float: right;
	width: 80%;
}

nav a:hover {
	background-color: #99D3DF;
}

nav li {
	width: 66%;
	margin-left: 189px;
	margin-top: -18px;
}

.sticky {
	position: fixed;
	top: 0;
	left: 0; 
	background-color: #88BBD6;
	float: left;
	display: block;
	width: 100%;
	height: 50px;
	margin: 0;
	z-index: 9000;
}

.sticky a {
	position: relative;
	top: 50px;
	text-decoration: none;
	float: left;
	width: calc(100% / 3);
	font-size: 16px;
	color: white;
	line-height: 50px;
	text-align: center;
	list-style-type: none;
	letter-spacing: 2px;
	text-shadow: 2px 2px black;
}

.sticky ul {
	list-style: none;
	float: right;
	width: 50%; }

.sticky a:hover {
	background-color: #99D3DF;
}

.sticky h1 {
	top: 13px;
}

.sticky li {
	width: 90%;
	margin-left: 45px;
	margin-top: -50px;
}
</code></pre>
</article>
	
<article class="javascript">
	<h1><span id="link-javascript" class="link-element"> </span>
The javaScript</h1>
	<p>Add the jquery library</p>
<pre><code class="language-markup">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</code></pre>
	<p>Last is the javaScript which will add the class 'sticky' to your HTML when you scroll down from the top of the screen and become a fixed navigation bar</p>
	<pre><code class="language-javascript">
var $mainNav = $('nav');

var mainNavTopPos = $mainNav.offset().top;

$(window).scroll(function(){
	
	if($(window).scrollTop() > mainNavTopPos){

		$mainNav.addClass('sticky');
		
	}else{

		$mainNav.removeClass('sticky');
	}
});
</code></pre>
</article>

</main>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="scripts/tutorial-01-demo.js"></script>
<script src="scripts/prism.js"></script>

</body>