Loading..

JavaScript Tutorial

Project Overview

INTRODUCTION

The objective for this project was to design a website with 3 pages showing the basic understanding of JavaScript & jQuery concepts that will help guide users as well as myself by providing standard definitions and examples to the majority of the significant terms and topics. 

PROJECT INFO

FIRST PAGE – JAVASCRIPTING CONCEPTS

For the first page it explains the 3 major key components to JavaScript which include, variables, functions, and conditional structures. Firstly, the global navigation was designed simply listing the site links with a <ul> tag and grouped the elements with a div class. For the body elements I used “myAccordion” from a third party source, jQueryui.com which helped me design that collapsible content and allowed me to access to many other effects and clean interfaces. The code snippet example for each content box is a shared link from Codepen which I was able to manually integrate to my content and allow users to see the HTML, CSS, and javaScript code for themselves.

SECOND PAGE – JQUERY CONCEPTS

For the second page, I provided a short introduction to the jQuery concept, and provided information on the three topics: jQuery selector syntax and types of selectors, DOM (Document Object Model) get / set actions along with some examples, and finally some effects or animation actions along with some examples provided as well. This page focuses more so on how the page is presented using the combinations between jQuery effects and animation to transition from one piece of information to another whereas for the first page, user would only be able to view one piece of content at a time. Each of these buttons presented here are utilizing the jquery effects in some way for example, “expand all” button uses slideDown(); effect, each of the content box is using slideToggle(); which enables that sliding up and down effect for every click. 

THIRD PAGE – PLUG-INS CONCEPTS

For the final page, I created a mini-portfolio which presents some of my personal favourite projects at the time when I created this and organized in a way so when you click a project it would present a small slideshow. This page uses a third party plug-in, Fancybox which is essentially a fancy lightbox that helps display images, HTML content, and other various multi-media sources can all be presented as fascinating gallery. All the small effects such as scrolling to change go to previous / next slide on the slideshow mode, hover effects and thumbnails are all supported using jQuery plug-ins. 

FINAL DESIGN

Scroll to top