Let’s say we set up a basic web page layout that has 5 sections: Title, Header, Sidebar, Content, and Footer. This can be easily laid out using Grid, where we have an overall container that has five child divs. For example: The HTML looks like this: Note that each div in the grid has … Continue reading HTML & CSS: Four different ways to expand a div to 100% width using Grid
CSS
HTML & CSS: How to use column-count to automatically divide text into columns
Let’s say I have a project where I want to print all numbers from 1 to 100 in a web page. For this example, I am using the the ZeroCool problem where I print “Zero” for all multiples of 3, “Cool” for all multiples of 5, and “ZeroCool” for all numbers that are a multiple … Continue reading HTML & CSS: How to use column-count to automatically divide text into columns
HTML & CSS: How to control uneven columns with Flexbox align-self
Building on the Flexbox foundation described in this previous article: HTML & CSS: How to understand the basics of Flexbox for responsive web design I am now going to describe how to control columns that may have varying amounts of data in them. Flexbox has an attribute for the child element called “align-self” which can … Continue reading HTML & CSS: How to control uneven columns with Flexbox align-self
HTML & CSS: How to understand the basics of Flexbox for responsive web design
The CSS3 Flexbox Grid system is based on the idea of a parent/child container relationship. The parent, if we call it “row” needs to have “display: flex;”. For example: /* Parent */ .row { display: flex; } The child, if we give it a class name of “col”, should have “flex: 1;”. The 1 here … Continue reading HTML & CSS: How to understand the basics of Flexbox for responsive web design
jQuery: How to create a textarea character countdown for Twitter
Twitter has a 280 character limit for tweets. If you need to build an input form that will remotely post tweets to Twitter, you will need to make sure that the messages are not too long. In this article I will show how to build a textarea that has a text counter attached to it … Continue reading jQuery: How to create a textarea character countdown for Twitter
HTML: How to make a combo box using datalist
A combo box is a combination text box and select menu, rolled into one. It uses a little known HTML5 element called “datalist”, which is supported by all of the modern browsers, but was never supported by Safari or late versions of Internet Explorer. To set up an HTML5 combo box, start by creating a … Continue reading HTML: How to make a combo box using datalist
HTML & CSS: How to create a circular bio portrait between two divs
Let’s say you are creating a bio page and want to use a circular bio photo and place it between two divs with different color backgrounds on the page. For example: The technique to accomplish this is to use an outer div with a span and an inner div inside. The outer div is like … Continue reading HTML & CSS: How to create a circular bio portrait between two divs
JavaScript: How to create a looping tabindex cycle
Let’s say you have a modal with a form in it and you want to have tighter control over what happens when the user uses the Tab button on their keyboard. Without setting controls, it is possible for the user to tab through the text boxes in the modal and change the focus to other … Continue reading JavaScript: How to create a looping tabindex cycle
JavaScript: How to create a custom range slider using bootstrap-slider
This article describes how to create a custom HTML range slider using Bootstrap 3, jQuery, HTML, CSS, and a JavaScript package called “bootstrap-slider”. There are download and installation instructions for this package on github. This slider can be custom styled with CSS and comes with a built-in tooltip. See the graphic below for a description … Continue reading JavaScript: How to create a custom range slider using bootstrap-slider
AngularJS: How to write a simple To Do app
In this article I will describe how to create a simple “To Do” app in AngularJS and write about some of the basic concepts of AngularJS. The app I will be describing looks like this: Step 1: AngularJS CDN To create an AngularJS app, the first thing you will need is a CDN in … Continue reading AngularJS: How to write a simple To Do app