Change background and text based on time with Javascript
Changing a websites background color based on client side (viewers) time is easily done with a small amount of vanilla Javascript. Changing a website background color or other styles has…
Tag: HTML
Responsive CSS style based on screen width with @media
Using @media in CSS allows you to specify styles for a certain viewpoint (width/height). This helps with creating responsive designs if you’re not using a framework such as Bulma or…
A clean and modern Bootstrap mockup
Looking at different approach to design with Bootstrap 4, a free flowing open one page design. A large amount of websites have defined areas and even i am guilty of…
Video background with CSS
Here is a method to have a video autoplay and loop in the background of a webpage. The CSS has focus on it being somewhat responsive, With a framework like…
The dilemma
Redesigning my website apart from the looks overhaul I wanted it to be quick and light with minimal requests. Through using CDN’s and minifying I got it to a decent…
Random image on page load with HTML and PHP
Here is a quick and very easy way to select and display a random image each time the page is loaded. Store the image links in an array and with…
How to add a tab icon in html
The little icon that sits before the tab title text is called a favicon. A favicon can be in png or ico format, with png being supported by all browsers…
How to do a CSS text Distortion
Here is a method to do a distortion or glitch effect to text in CSS. This is done through the use of CSS web kit animation and key frames. The…
Easy sortable HTML table with Javascript
To have your HTML table be sortable (highest to lowest/lowest to highest) you need the jQuery framework, the table sorter Javascript plugin, a table id and a little bit of…
Building a drone weather web app Part2: Design, display and the front end
With the api calls done and a mass of functions created to manage the data I was ready to display it. Part 1 here. Bootstrap was always going to be…