I find it very easy to keep track of all language features using cheat sheet.

I have been coding for the last 10 years. I have been through Quick Basic, Visual Basic, C, PHP, Ruby, Javascript and Web UI with CSS, HTML and Bootstrap. Its impossible for anyone to remember all the features and syntax of everything.

Then, I found https://ohmycheatsheet.com . It has everything I need like CSS, HTML, jQUery, Ruby and Javascript cheat sheets.

Some useful links are:-









HTML, CSS : Beautiful radio and checkboxes


There are two ways you can put label on radios

  • Put for="id_of_your_radio" in the label tag
  • Put the radio inside of lable tag; no need of for attribute. It will be implicit
    • <label>
       <input id="sex-other" type="radio" name="sex" value="others" /> Other
    • This technique is more cleaner, intuitive and maintainable from my perspective.

Our Target:

The basic idea is: we want to modify the label according to our design demands. But the later technique explained above has label as parent to input tag; CSS has limitation; we cannot select parent on the basis of child. In our case child (input) changes events and need to modify the label.

So going with the former technique


See here for More details

Creating Revolving /Sliding images only CSS/HTML no jQuery/js

 width: 100%;
 position: absolute;
 -webkit-animation: mymove 20s infinite;
 -moz-animation: mymove 20s infinite;
 animation: mymove 20s infinite;
 overflow: hidden;
 display: table;
 background-color: yellow;
@-webkit-keyframes mymove {
 0% {left: 0%;}
 25% {left: -100%;}
 75% {left: 100%;}
 100% {left: 0%;}
 width: 30%;
 height: 100px;
 border-radius: 5px;
 float: left;
 margin: 10px;
 background-position: cover;
 background: url(
 background: url(
 background: url(
<div class="wrapper">
 <div class="rotating-image" id="advert1"></div>
 <div class="rotating-image" id="advert2"></div>
 <div class="rotating-image" id="advert3"></div>

The related pen code is in this link