Tips & Tutorials – HTML & CSS

Custom Audio Player With Playlist (Step-By-Step Example)

Welcome to a tutorial and example on how to create a custom audio player with a playlist. Looking to build your own audio player and add a playlist to it? Sadly, there are no native implementations of a playlist as at the time of writing. So the only way to build a playlist is to …

Custom Audio Player With Playlist (Step-By-Step Example) Read More »

5 Steps Responsive Drop-Down Menu In Pure CSS – NO Javascript!

Welcome to a tutorial on how to create a responsive drop-down menu with pure CSS. Yep, there are a ton of these “dropdown menu plugins” all over the Internet, but some of them require a third-party library. It really doesn’t make sense to load an entire library just for a simple menu, so here it …

5 Steps Responsive Drop-Down Menu In Pure CSS – NO Javascript! Read More »

Very Simple Popup In Pure HTML CSS JS – Free Download!

Welcome to a quick tutorial on how to create a simple popup with HTML, CSS, and Javascript. I am sure there are tons of popup plugins all over the Internet, but some of them depend on 3rd party frameworks and add too much loading bloat. So here it is – We will walk through a …

Very Simple Popup In Pure HTML CSS JS – Free Download! Read More »

2 Ways to Create HTML & CSS News Ticker (Horizontal and Vertical)

Welcome to a tutorial on how to create a news ticker with just pure HTML and CSS. Need to add a block of scrolling news text? Yep, it is actually possible with today’s technology, using only pure CSS. There will not be a single line of Javascript involved in this tutorial – Read on to …

2 Ways to Create HTML & CSS News Ticker (Horizontal and Vertical) Read More »

2 Ways To Display A Message After Submitting HTML Form

Welcome to a beginner’s tutorial on how to display a message after submitting an HTML form. Yep, forms are pretty easy to create in HTML… But the aftermath is kind of a mystery. How do we show a message to the user after the processing is done? There are 2 general ways to show a …

2 Ways To Display A Message After Submitting HTML Form Read More »

How To Disable Pinch Zoom With HTML Viewport – A Quick Guide

Welcome to a tutorial on how to disable pinch zoom with the HTML viewport meta tag. Having some trouble with your website design on mobile devices? Is it zooming in too much, or zooming out too far? Well, here’s the quick fix. To disable pinch-zoom in HTML, simply add <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” …

How To Disable Pinch Zoom With HTML Viewport – A Quick Guide Read More »