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:-

https://ohmycheatsheet.com/

https://ohmycheatsheet.com/css

https://ohmycheatsheet.com/jquery

https://ohmycheatsheet.com/ruby

https://ohmycheatsheet.com/ruby/Array

https://ohmycheatsheet.com/html

https://ohmycheatsheet.com/fontawesome/

https://ohmycheatsheet.com/material_icons/

HTML, CSS : Beautiful radio and checkboxes

Radio:

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
      </label>
    • 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

.wrapper{
 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%;}
}
.rotating-image{
 width: 30%;
 height: 100px;
 border-radius: 5px;
 float: left;
 margin: 10px;
 background-position: cover;
}
#advert1{
 background: url(http://192.185.117.219/~advice/wp-content/uploads/2014/12/medium_DSCF1619.jpg)
}
#advert2{
 background: url(http://192.185.117.219/~advice/wp-content/uploads/2014/12/walnut-tree-worlington.jpg)
}
#advert3{
 background: url(http://192.185.117.219/~advice/wp-content/uploads/2014/12/bird1.jpg)
}
<body>
<div class="wrapper">
 <div class="rotating-image" id="advert1"></div>
 <div class="rotating-image" id="advert2"></div>
 <div class="rotating-image" id="advert3"></div>
</div>
</body>

The related pen code is in this link