Tips & Tutorials

Welcome to a tutorial on how to create a responsive dropdown menu in HTML CSS. Yep, there are a ton of “dropdown menu plugins” on the Internet. But we can literally build one within minutes, using only HTML CSS. No third-party libraries and senseless bloat. Read on for the example!     TABLE OF CONTENTS […]

Welcome to a quick tutorial on how to create a simple scroll to top button in HTML. There are a ton of scroll-to-top plugins on the Internet, but know what? Forget those gimmicks. We can literally create one within minutes without using any 3rd party frameworks – Read on!     TABLE OF CONTENTS Download

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

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