Bootstrap video player with information bar
The HTML framework for a simple video player with an information bar showing details that is fully responsive. Being responsive means the view from a large to mobile screen (small)…
Tag: HTML
Javascript click button to copy textarea or input
How to do a button click to copy for a text box or input with HTML and a little bit of Javascript. The HTML (bootstrap): <div class=”container”> <div class=”row mt-2″>…
Bootstrap collapse example
Bootstrap collapse allows you to add toggles to show and hide HTML content. This is handy for avoiding an overload of information on a page. This method will still show…
HTML form inputs based on a select element
Creating an HTML form that is dynamic based on what is selected. Certain form input elements will be shown based on the initial select dropdown. CodePen link. As you can…
Importance of headings in your web content
One of the most commonly known SEO practices is breaking up your web page content with headings. Ranging from h1 as the biggest, highest importance through to h6 which is…
Full screen image background with text overlay
How to easily get a responsive full screen image background with text overlay in HTML such as this: The method shown here uses Bootstrap, you could however do it vanilla…
Transition your CSS hovers
The hover selector in CSS is a very well known selector, it can do great things for when your mouse hovers over an element. However this snpappy change can be…
Make text grow on page load with CSS keyframes
Using CSS keyframe animations on page load can add something extra to your design. Whether it be animating a border, a background change or section grow, using keyframes to change…
Change image based on screen size
Mobile based viewers of your website are going to be on smaller screens and (in theory) have slower internet, thus making a decent means for smaller sized and lower quality…
Load smaller image in first with Javascript
How to avoid images popping in after the page has loaded by loading in and displaying a much smaller one first. Credit to FThompson here at StackOverflow. I edited it…