It is possible with CSS to control how much vertical space exists between list elements. In this article, I will demonstrate how to control this. Here is a codepen example of a bulleted list with bullets that are styled as squares, but no control over spacing between list items: Now, to add space between the … Continue reading HTML & CSS: How to add space between list elements
HTML
HTML & CSS: How to skew an HTML entity
Looking through the available HTML entities, I found a flattened DOWN arrow that uses the code ▾ For example: ▾ However, I could not find a similar flattened UP arrow amongst the defined HTML entities, so I found this CSS technique that will turn a regular unflattened UP arrow ▴ ▴ into a flattened UP … Continue reading HTML & CSS: How to skew an HTML entity
HTML & CSS: Four different ways to expand a div to 100% width using Grid
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
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 launch a file upload dialog from a text field
I have a text field with placeholder text that says “No file chosen”. I wanted to add functionality to this so that if the text field is clicked it launches a file upload dialog. Then when a file is chosen, I want the name of the chosen file to appear in the text field. This … Continue reading jQuery: How to launch a file upload dialog from a text field
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 & 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