Bread crumbs…they bring up associations with the fairy tale of Hansel and Gretel, where Hansel leaves bread crumbs to help him find his way home again. Although the association with bread crumbs is perhaps still stronger in the realm of Grimm stories, that’s gradually changing as breadcrumbs in navigation help web designers create a better… Continue reading How to use breadcrumbs (the right way)
Tag: attribute
Scrollify – Create Smooth Snapping Scroll Layout Easily
Snapping scroll is one of a popular layout in web design, it makes sure user is scrolling to the correct screnn by automatically scrolling to the right position. Usually the website layout is divided into different section and each section is made to be 100% width and height so it would scroll and fit into… Continue reading Scrollify – Create Smooth Snapping Scroll Layout Easily
How to Work With Images in Shopify
When starting out with a new platform, such as Shopify, there’s a lot to learn. Whilst Liquid, the template language used in Shopify themes, is very readable and easy to get started with, one area of Shopify development which can often cause confusion for new theme developers is images. I believe the main reason for… Continue reading How to Work With Images in Shopify
How to Make Floating Input Labels With HTML5 Validation
TL;DR Replace your JavaScript validation with HTML5 validation. It’s easier than you think, and gives you a ton of markup and styling control. Try this demo: What We’re Doing Here So you need to validate a form. You do the right thing and start with server-side validation. Then, if you’re a good web-designer, you add… Continue reading How to Make Floating Input Labels With HTML5 Validation
How to Make WooCommerce Product Attributes More Prominent
What You’ll Be Creating WooCommerce product attributes are a really useful feature, but by default they’re hidden quite a way down the page, in the Additional Information section. Depending on your theme, they might not be visible until the user clicks on a tab, which means many users may not look at them. Sometimes it’s… Continue reading How to Make WooCommerce Product Attributes More Prominent
Philter – Control CSS Filters with HTML Attributes
Philter provides an easy way for almost anyone to post-process their content in the web. Using Philter is as easy as writing an attribute in HTML. Philter also supports hover effects. This nice effect of grayscale transition was created by Philter with one simple attribute. And some drop shadow, of course. Have you ever wanted… Continue reading Philter – Control CSS Filters with HTML Attributes
Build a Custom WordPress User Flow — Part 3: Password Reset
In the first two tutorials in this series, we have built custom pages for logging in and registering a new user. Now, there is only one part in the login flow left to explore and replace: what happens if a user forgets their password and wants to reset their WordPress password? In this tutorial, we’ll… Continue reading Build a Custom WordPress User Flow — Part 3: Password Reset
Build a Freshly Squeezed Responsive Grid System
I’d like to talk to you about Lemonade. Not the refreshing citrus drink, but a grid system I created. Lemonade is a grid system that was built in order to give designers and developers the confidence to make fully responsive websites, eliminating the frustration of flicking between browsers looking for bugs and errors. Let’s look… Continue reading Build a Freshly Squeezed Responsive Grid System
Creating the New Google Play’s Multi-Level Navigation from Scratch
Google have recently released a new Google Play website complete with a new redesign and what caught my attention was the way they implemented their navigation bar. With the smooth animation and how they let users peek at the root-level menu by simply hovering a back button, I decided to build a similar navigation menu from scratch… Continue reading Creating the New Google Play’s Multi-Level Navigation from Scratch