Node JS Express MongoDB Bootstrap

Purchase History App Tutorial: Node + Express + MongoDB + Bootstrap

In this tutorial I am going to show you how to make an app that can store your Purchase History. Just a simple app that lets you add and delete items from a database. As you know databases are really important in any application if you wish to store/save information. For this application, we will be using NodeJS, Express, MongoDB and Bootstrap. The main purpose of this tutorial is to show you how to use the various Node modules (mainly Express) to create a web application. To create the app you will need to have:

Our completed app should look like the following:

Node Express MongoDB bootstrap

Continue reading

create sublime text 3 plugin

Create Sublime Text 3 Plugin – Webify Tutorial 2016

Creating A Sublime Text 3 Plugin

In this article, I want to share with you how to create a basic Sublime Text 3 plugin (or package). Sublime Text 3 (ST3) comes with a running ‘Hello World’ plugin example, however, if you have read any of my previous posts, I am not a big fan of simple ‘Hello World’ applications. I will, however, walk you through setting up the ‘Hello World’ plugin and then we will create our own Sublime Text 3 plugin named ‘Webify’. ‘Webify’ will replace the less than (< ) and greater than (>) signs in your block of code to &lt; and &gt;, also referred to as HTML Entities.

Continue reading

Ultra Simple Handlebars, Express JS & Node JS Example 2016

Handlebars + Express JS + Node JS

Today I’m going to show you how to create an ultra simple Express JS server application and use the Handlebars framework to handle “modularization”. To follow along, please make sure you have Node and NPM configured on your machine. If you don’t have the required applications, read my Setup Node JS and NPM Tutorial. The following tutorial will introduce you to Handlebars (for templating), and ExpressJS. By the end of this tutorial you should have an basic understanding on how to create an application/website with what I like to call HEN (Handlebars, Express JS & Node JS) stack. 😉

Continue reading

CSS Image Grid

CSS Columns: Polaroid Style CSS Image Grid

CSS Columns for CSS Image Grid

CSS columns allow us to define columns in a container using the column-count property. The column-count property sets the number of columns in a container (such as <div></div>). Another important property is the column-gap property, which sets the gap between each of the columns. Columns are excellent to organize content on your website.

Although CSS columns can be used in multiple ways, I am going to show you how to make a Polaroid Style CSS Image Grid with Captions, (Also referred to as a Masonry Image Grid). For our CSS image grid, we will be using HTML and CSS programming languages only, so it should be fairly simple for the beginner to follow along, especially if you have done any of my previous pure-CSS tutorials.

The CSS Image grid/gallery will have 3 columns and display “old-school” style Polaroid images. Here is an example of how our finished project will look:

css image grid
Polaroid CSS Image grid with Captions

Continue reading

Node JS Server Example

Beginner Node JS Server Example with Routing

What is a Node JS Server?

Node JS gives the front-end developer (and back-end developers) the ability to use JavaScript (JS) as the back-end server-side scripting language instead of other back-end server-side languages. This is exceptionally useful for front-end JS developers looking to do server-side scripting as well. When you develop an application using Node, the application you write is the server. Node is a framework for you to build a web server. To setup and configure Node and NPM, see my tutorial.

beginner node js server
In the following Node JS Server tutorial, I will show you how to create a simple Node JS Server for serving static files using Routing. Routing tells our Node JS server which files (web-pages) to send the user based on the URL request, submitted by the user, through their web browser (Chrome, Firefox, Safari, etc.).

Our Node JS Server will serve a simple index.html file with a logo, and a 404.html file when the user requests a page that does not exist. It is simple to follow and gives you an idea of how NodeJS Servers work.

Continue reading

Node and NPM

Setup Node JS and NPM for JavaScript Project – 2016

What is Node JS and NPM

..Node.js is an open-source, cross-platform runtime environment for developing server-side Web applications. Although Node.js is not a JavaScript framework,[3] many of its basic modules are written in JavaScript, and developers can write new modules in JavaScript. –wikipedia.com

Node.js is also written as NodeJS,Node JSor just Node. I will try to keep it the wording uniform but please forgive me if I use different variations.

Node JS runtime environment interprets JavaScript via Google V8 JavaScript engine. What makes Node JS even more attractive for back-end server development is the huge ecosystem of Node JS libraries and applications which can be implemented by other developers.

node js

Node JS installation comes with a command line utility called NPM (node package manager) which allows you to easily install, version-control, and manage dependencies of Node JS libraries (or packages), and applications, from the vast NPM online repository. NPM CLI is much like APT, only for Node Packages. Node packages are other JavaScript modules that have been created by other developers, which can be included in your own code to simplify the coding. Some common NPM packages include, Express, Angular, Jquery, etc. (visit https://www.npmjs.com/ for a complete list)

Continue reading

html css 3d cube image slider header

HTML CSS 3D Cube Slider Tutorial – 2016

3D Cube Image Slider with CSS Transform

Today, I am going to show you how to create a neat CSS 3D cube slider with HTML and CSS coding languages. A spinning 3D Cube is a very cool technique to show off images as well as your coding skills. CSS has come a long way and animations are much easier to create without the need for extra languages. We will be using CSS transform and CSS animation properties to create a cube. The 3D cube, that we will design, will have pictures on each of the 6 sides, then it will spin and show all the pictures before restarting the CSS animation. Here is the HTML CSS 3D cube slider that we will be creating:

css transform 3d 1

 
 
 

*CSS Animations may vary slightly due to browser compatibility.

 

Continue reading

HTML CSS Image Slider main

HTML CSS Image Slider for Image slideshow Tutorial

What is an HTML CSS Image Slider?

A HTML CSS image slider is a creative way to show an image slideshow. An image slider is basically an object on your webpage that cycles through the various images that you provide it, only displaying one at a time. And if you couldn’t already tell, a HTML CSS image slider is technically an image slideshow that has been created using only HTML and CSS programming languages. The images in your HTML CSS image slider can be set to automatically scroll using CSS animations, or you can take advantage of CSS transitions and implement slider control buttons that will change the image only on a web visitor’s click. Once again, an image slider is a great way to present dynamic content to your website visitors.

A lot of times an HTML CSS image slider is also referred to as a “pure CSS image slider” (just the HTML part is left out). Also, the terms slideshow and slider can be used interchangeably here. 🙂

Creating an image slideshow/image slider with just HTML + CSS was not an easy task few years ago. Since the release of CSS3, transitions and animations using CSS have become very easy. A great slider can be created with just a few lines of code. It is the perfect coding project for a new web developer to get his or her hands dirty. Anyhow, let’s get started.

I will be showing you how to make the following image slider:

HTML CSS Image SliderHTML CSS Image SliderHTML CSS Image Slider

Continue reading

plugin_banner

DIY WordPress plugin - add Font Awesome 2016

Do you own a WordPress theme that didn’t come pre-installed with FontAwesome or any awesome icons? Or do you just want to learn how to create a WordPress plugin? Well, either way, you’ve come to the right place! In this article, I’m going to show you a very simple way to add Font Awesome icons to your website, while at the same time you will learn how to create a very basic WordPress plugin. Font Awesome lets you add awesome icons, which they have created, to your website, by using simple HTML. I am going to be assuming you have already downloaded WordPress, and have somewhat of a website setup.

WordPress plugins are bits of software that can be uploaded to to extend and expand the functionality of your WordPress site.ithemes.com

Font Awesome “left-quote” icon was used in the blockquote above. As you can see, it can help make your website more user friendly, by allowing you to better organize your content.

Although Font Awesome can be added simply by specifying a single-line <link> in the <head> section of your tag, the purpose of this tutorial is to show you how to create a basic plugin.

Continue reading

flat menu main

Navigation Menu with HTML and CSS- Flat Icon style

In this article, I am going to show you how to implement a flat-icon style navigation menu in your HTML. You don’t have to use it as a menu, technically you can create “buttons” by following the same tutorial as well. It’s a fairly simple tutorial for those new to Cascade Style Sheets (CSS).

I will also introduce you to the process of implementing FontAwesome Icons. If you’ve never used FontAwesome before, it offers a completely free icon-set available to everyone, and it’s very easy to utilize on your website. For this tutorial, you may need prior HTML & CSS experience, but I will try to explain things as best as possible for newbies. You should be able to follow along, nonetheless, if you have any programming experience.

Create Flat Icon Navigation Menu

The flat-icon style navigation menu that we will create will look like this:


The text only shows when “hovering” over icons

Notice that the navigation’s icons are off to the side–this was done on purpose, however you can easily center the icons by adjusting the CSS file we will be creating.

Continue reading