HTML & CSS

Welcome to a quick tutorial on how to create a simple hidden side menu in HTML and CSS. I am sure there are a ton of “sidebar plugins” on the Internet, but they are bloated and hard to customize. So let us do something different in this guide – Only the raw basics, so you […]

Welcome to a tutorial on how to rotate and spin images in HTML CSS. So you want to rotate or spin an image, but it is too much trouble to do image editing or create an animated GIF? Good news, it is easy to rotate images in modern CSS. To can rotate an image in

Want to show some text or an image caption on mouse hover? Yes, we can do that without a single line of Javascript – Let us walk through a few simple examples in this guide. Read on!     TABLE OF CONTENTS Download & Notes Text Over Image Extras The End   DOWNLOAD & NOTES

HTML PAGE LAYOUT & SECTION TAGS <header>MY SITE</header> <nav> <a href=”home.html”>Home</a> <a href=”page.html”>Page</a> </nav> <main> <article> <h1>My Article</h1> <section>SECTION A</section> <section>SECTION B</section> </article> <aside>Side bar</aside> <div>Generic division or section.</div> </main> <footer>&copy; Copyright My Site.</footer> <header> Page header. <nav> Navigation. <main> Main section – Can only have one. <article> An article. <section> A section. <div> Generic

Welcome to a quick tutorial on how to auto-resize images in HTML and CSS. Just started with HTML CSS and struggling to fit images? The easiest way to create an auto-resize-to-fit image is to set 100% width – <img src=”IMAGE.JPG” style=”width: 100%”> Yes, that’s all, we don’t need crazy CSS and Javascript. Read on for

HTML AUDIO <audio src=”MUSIC.mp3″ controls loop autoplay muted> </audio> src Source file. controls Show the audio controls. loop Loop the audio when it ends. autoplay Start the audio automatically when sufficiently loaded. But take note, this may not always work. muted Mute the audio by default… Kind of beats the point.   NOTES ON AUTOPLAY

Welcome to a tutorial on how to create a responsive fullscreen background image in HTML CSS. Need to add a background image that will look nice on both big and small screens? Creating a responsive fullscreen background image is as easy as setting a background image to cover the entire window – body { width:

HTML VIDEOS <video src=”dog.mp4″ width=”405″ height=”720″ poster=”poster.jpg” controls loop autoplay muted> </video> src Source file. width height Video dimensions. poster Optional, show this image as the poster before the video plays. controls Show the video controls. loop Loop the video when it ends. autoplay Start the video automatically when sufficiently loaded. But take note, this

Welcome to a tutorial on how to create a simple list grid view. Once upon a time in the Dark Ages of the Internet, we have to use all sorts of CSS hacks and fight digital dragons to transform a list into a grid. But fear not, it is pretty easy with modern HTML CSS