HTML & CSS

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

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

Want to create a custom toggle button without 3rd party frameworks and Javascript? Yes, it is possible with some clever CSS – Read on for the example!     TABLE OF CONTENTS Download & Demo HTML CSS Toggle Button Extras The End   DOWNLOAD & DEMO Here is the download link to the example code,

ADD CLICKABLE AREAS TO IMAGE <map name=”mymap”> <area title=”Code Boxx” href=”https://code-boxx.com” coords=”219,36,383,199″ shape=”rect”> <area title=”Wikipedia” href=”https://wikipedia.org” coords=”416,405,67″ shape=”circle”> </map> <img src=”MY-IMAGE.JPG” title=”Image Title” usemap=”#mymap”> Create an image map with <map>, and give it a name=”MYMAP”. Set usemap=”MYMAP” on the image. Finally, define clickable areas in the image using <area>. title The title or caption of

Welcome to a tutorial on how to create glowing text in HTML and CSS. Need to catch the attention of users, or want to add some funky effects to your website? A block of glowing text can be easily created by using the CSS text-shadow property. For example, p.glow { text-shadow: 0 0 10px #fff700

INSERTING IMAGES <img src=”MY-IMAGE.JPG” title=”Image Title”> <img> Image tag. src Image source file. title Optional, the image title. Shows on mouse hover and when the image fails to load.   WIDTH & HEIGHT By default – Images will only be inserted into the page when it loads. This will cause the content to be pushed