In web design, there are lots of cases where you will need to stack <div> elements on top of each other in order to achieve certain effects or layouts. One example of this is a progress bar, where you have a background color, a foreground color (to mark the progress), and maybe a label. The … Continue reading HTML & CSS: How to create a progress bar with stacked divs
Month: March 2018
Node.js: How to install Node + npm and confirm the installation in less than 5 minutes
To install node.js, start at the nodejs.org website: https://nodejs.org/en/ Then click the green box to download the .msi. This will download the “node-v9.8.0-x64.msi” to your downloads folder. Then click the .msi to install node. I chose to change the path to C:\nodejs . Then once the installation is complete, restart your computer. Once the computer … Continue reading Node.js: How to install Node + npm and confirm the installation in less than 5 minutes
Meteor: How to use an image background in your CSS
To use images in Meteor, we must first create a top level ‘public’ folder and place our images folder inside of it. This is because Meteor is a full stack framework that takes care of both the client side and the server side. On the server side, images would normally be placed in a public/images … Continue reading Meteor: How to use an image background in your CSS
JavaScript: How to use the array.map( ) method
The JavaScript map()method creates a new array with the results of calling a provided function on every element in this array. For example, lets say you have a small array of numbers called “numbers”: var numbers = [1, 4, 9]; We can use .map on this array to find the square root of each of … Continue reading JavaScript: How to use the array.map( ) method
Meteor: How to install Meteor and get a project started in less than 5 minutes
In this article, I want to detail how to install Meteor and get a project quickly up and running. Step 1: Install Meteor In order to install Meteor, the first step according to the installation instructions is to install a tool called “chocolatey”. https://chocolatey.org/install This can be installed with a cmd.exe command. Once that … Continue reading Meteor: How to install Meteor and get a project started in less than 5 minutes
MongoDB: How to get up and running in less than 5 minutes (on Windows)
MongoDB is a “NoSQL” (non-relational) data store of documents that have no predefined schema, where data is stored as a series of JSON objects. The concept of the relational database where there is a database that has tables which are made up of columns and rows, is replaced by the MongoDB concept of a database … Continue reading MongoDB: How to get up and running in less than 5 minutes (on Windows)
React: How to use CSS in React
In this article I will describe two ways to use CSS in React. Option 1: Inline Define CSS styles ‘inline’ inside React. This uses the props key ‘style’, which uses a dictionary to define all of the CSS attributes. However, these CSS attributes have differences from normal CSS. For example, 1. The attribute names must … Continue reading React: How to use CSS in React
HTML & CSS: How to create a square grid using CSS grid
In order to create a game of tic-tac-toe using React.js, I first needed to figure out how to create a 3×3 grid of squares using HTML and CSS. Turns out, with CSS grid it is fairly straightforward. All we need is three CSS classes: container: This is the highest level div that will contain the … Continue reading HTML & CSS: How to create a square grid using CSS grid
MySQL: How to install a test database and confirm the installation
Now that I have installed PHP and MySQL: How to install PHP/MySQL and confirm the installation I wanted to start using MySQL so I searched for a sample database full of data that I could install for testing. I found this “Employee Sample Database” on the dev.mysql.com website: https://dev.mysql.com/doc/employee/en/ The instructions for installation: https://dev.mysql.com/doc/employee/en/employees-installation.html led … Continue reading MySQL: How to install a test database and confirm the installation
React: How to create the simplest app using Atom
This article is a continuation of the previous article where I created the simplest possible React app in Codepen: React.js: How to create the simplest app using Codepen A second way to create React apps is to use a text editor such as Atom, and reference the necessary resources via CDNs (content delivery networks). In … Continue reading React: How to create the simplest app using Atom