Is there a life without Javascript ?

 
 

If you're a full-stack developer, you'll probably answer "No" to which I'll say

- "Yeah you're right"

- "This was a rhetorical question"

When you start coding you quickly understand that JS is about making a site or an application dynamic and yes, most animations you see on the Internet are made using Javascript or one of its libraries.

According to W3techs.comJavascript is used by 94.6% of all the websites.

Ok, ok, if you have a form on your site then you'll have to use Javascript. Having a visitor filling out details will require a script to listen to an event, check that the data is correctly entered (for example that the email field does contain a valid email address and so on.

This doesn't mean that your site cam't look great without it. There a couple of sites out there with minimal and sometimes no JS.

Taking the same HTML structure as starting point, CSS Zen Garden is showing how far a pure-CSS-styling approach can get you. I personally like the horizontal-collage layout number 101 has and number 202 is awesome! 

Remember that CSS has very advanced attributes you can use now, such as

- CSS animations and transitions

There are two ways to create CSS animations. The first is very easy, it is done through animating the changes of CSS properties with the transition declaration. With transitions, you can create hover or mouse down effects, or you can trigger the animation by changing the style of an element with Javascript. You can see the transition below by hovering over the planet - this will cause the rocket to close in.

If you want to know more check out this brilliant article by Thoriq Firdaus:

 
 

- Generated content counters (and a game built on it)

See the Pen CSS Counter Game by Will Boyd (@lonekorean) on CodePen.

MDN gives a couple of examples on their page. You can even generate content on hover just like... yeah Javascript! If you're curious about what can be done and how to do it, a good starting point is this MDN page. Don't forget to check out compatibility issues beforehand on CanIuse.

You can create clickable responsive navigation tabs without Javascript. Here's how:

See the Pen Responsive CSS Tabs by Thomas Faller (@thomasfaller) on CodePen.

CSS Panic

by GeckoTang

You can even create a game using only HTML and CSS: CSS Panic

I this example, crocodiles are actually radio buttons and animations are controlled via the :checked pseudo-class. Here's a link for more information on how CSS pseudo-classes work:

And here's the source code for it.

 

 

 

 

 

One the same topic, you should check out this glorious Wired article 

 

And here's a great site totally responsive that's not even using CSS 😉 http://motherfuckingwebsite.com/

 

 

 'I TURNED OFF JAVASCRIPT FOR A WHOLE WEEK AND IT WAS GLORIOUS' by  Klint Finley

'I TURNED OFF JAVASCRIPT FOR A WHOLE WEEK AND IT WAS GLORIOUS' by Klint Finley