Tips, tricks, tutorials…

HTML

I have already presented how to draw faces with plain HTML+CSS and we’ve also learned about CSS keyframes animation. Let’s combine these two and create a continuously moving face with blinking eyes looking around and with a smiling mouth. Let’s do this using nothing but plain HTML5 CSS3!

We have written many articles about what can be done using only front-end coding without canvas. If we can draw an animated 3D cube with CSS3 then why shouldn’t we try to make a Rubik’s Cube solver with JavaScript?

Picking the perfect emoji has never been easier. With the new ideogram and smiley directory you can find the best suiting emoji for your electronic messages in seconds. They are special characters which means that they can be copy-pasted into the web browser as plain text.

You might have noticed a small flash icon next to a couple websites on the Google search results page and some social media sites. This icon means that the webpage is using the AMP technology and it’s loading lightning fast on mobile browsers.

AMP (Accelerated Mobile Pages) is an open-source initiative by Google and promoted by several companies. It aims to be a standard for creating super-fast mobile websites.

If you just simply publish an email address on a website you can expect tons of spam in the inbox. Web spiders crawl the sites all the time looking to collect email addresses to send them spams, ads or viruses. This is why you have to make sure you never add your email to any website as plain text or link which is visible by robots.

Demo

Popup boxes are the most useful way of showing a warning or any other important information to the website visitors in many HTML5 templates. In this article I’m going to walk you through the creation of a very simple popup box with shadow overlay and close button. We’re going to implement this using HTML, CSS and jQuery in less than 100 lines (not compressed code).

Creating websites is a complicated process and many coders can develop bad practices while creating them. Here’s a few things not to do while web coding and some site features you should avoid at all costs.

I often find myself writing the same code over and over for each new HTML or XHTML document I start. Below are some minimalist HTML templates for various doctypes which you can copy and paste into any new documents you are creating. All of these validate.