Category: HTML/CSS

How to use Chrome DevTools like a Pro

As the name implies Chrome Developer Tools is a tool that allows web developers to interfere and manipulate applications via the browser. With this tool you can: Manage interface problems Debug Javascript Code with using breakpoints Optimize your code To open DevTools, you can right-click anywhere on the page and...

Layouts With CSS: Flexbox or Grid?

The way we design websites has undergone some more and some less radical changes over the past years. With the introduction of CSS flexbox, a major change has taken place. Shortly after, a new layout model, CSS grid, joined the party. Which of them is the better choice for which job? Do I have to choose a model? From...

Web Standards Documentation: Microsoft Joins the Mozilla Developer Network

Microsoft is busily exporting documents that deal with web standards. Target of the export is the MDN, the Mozilla Developer Network. What gives? In times where a reading and thinking human can get the impression that everyone was a splitter, Microsoft’s latest move is well received. Recently, they decided to mer...

Fontplop: Free Mac App Turns Web Fonts Into Desktop Fonts

Life can be this easy. Drag your TTF or OTF over to Fontplop, and get a web font bundle consisting of WOFF2, WOFF, TFF, SVG, and EOT in return. Fontplop is a small app for macOS, available for free on Github. You can download it as source text, but also as a DMG, ready to be installed. The functionality does not requir...

Bubbly Backgrounds: Moving Backgrounds for Your Website

It’s not modern if it doesn’t move. Of course, this also applies to your website’s background. Bubbly Backgrounds are at your service. JavaScript for Bubbles Bubbly Backgrounds is a very small JavaScript written by a Norwegian developer called David who goes by the name of Tipsy on Github. With its co...

Tool Tip: Moving Letters With Anime.js and CSS

Animated font effects are real eye-catchers. Used correctly, they can enhance your design. Moving Letters provides you with 16 fantastic visuals. The Swedish designer and developer Tobias Ahlin has an impressive backlog of references. First of all, he was one of Spotify’s first contributors and is responsible fo...

Hologram: Free Mac App For a Smooth Start With WebVR

Freelancers that make their money off customer projects have little time for new technologies. With Hologram, you can get a sneak peek at WebVR, without losing entire monthly incomes in the process. Hologram is a native app for macOS and is as such useless for everyone that does their daily work using Windows. Mac user...

CSS Grid Layout: Masonry Layout Made From Pure HTML and CSS

Codepen user Kseso convinces us with a simple but impressive application case for CSS Grid, by creating a clean Masonry layout from pure HTML and CSS. CSS Grid Layout is Available Across the Board The fact that the CSS Grid Layout is an important design function for modern websites has been a given ever since its near ...

Full Control over Grids: Firefox’ New Layout Panel For CSS Grids

Previously, proper grid based layouts were only possible via inconvenient ways. The new CSS grids, which have been available in the newer versions of the popular browsers for a little while now, finally allow for these layouts. In Firefox, at least in the Nightly version, there’s a new layout panel in the inspect...

Taffy: Slim CSS Framework Based on CSS Flexbox

The syntax of CSS Flexbox isn’t that easy to grasp. If you don’t deal with it on a daily basis, you’d rather use something more straightforward if and as needed. The tiny CSS framework Taffy is that thing. CSS Flexbox: Induction Inevitable Here at Noupe, we’ve already dealt with Flexbox several ...