Meow. Meow meow, purr. Meoooooow.
*cat translator activates*
Salutations inferior human, today I have hijacked Scott’s blog to tell you all about front end development from from a cat’s purr-spective.
JavaScript
If you a mere kitten in the world of JavaScript, you can start by pawing at the keyboard until you have written out the below snippet of code. When run, it will continually print out “Meow” to the console.
for (var i=0;i<Number.MAX_VALUE;i++) {
console.log('[' + i + ']: Meow');
}
HTML
Now that you have mastered JavaScript, you can move onto HTML, or Hypertext Markup Language. The follow should suffice:
<div id="my-box" class="box">
<div class="kitten">Dr. Kitkat</div>
<div class="kitten">Mr. Mittens</div>
<div class="kitten">Sir Purrsalot</div>
</div>
CSS
Now that you have some HTML, we can add some style to this boring old document. CSS, or a Cascading Stylesheet, can be used to change the color, size, and many more visual aspects of our HTML elements.
.my-box {
height: 100%;
width: 100%;
}
.kitten {
background-color: orange;
height: 50px;
width: 50px;
}
.kitten:hover:after {
content: 'Meow';
}
And there you have it. A box full of kittens in HTML, CSS, and JavaScript. Now if you don’t mind, it is time for my nap.