How to Animate a “Twisting Text Effect” With CSS and JavaScript

In this tutorial, we’ll learn how to split an element’s text into separate characters, which we’ll then animate to give us a twisting effect. What We’ll be Building Without further intro, let’s check out what we’ll be building: In our case, there will be two types of animations: The first animation will happen each… Continue reading How to Animate a “Twisting Text Effect” With CSS and JavaScript

How to Implement Infinite Scrolling With JavaScript

What is Infinite Scrolling? Infinite scrolling is a feature used to dynamically load more content on a page once a user scrolls to the end of the page. The concept of infinite scrolling is used to load data from a server in a way that feels “seamless” to a user but doesn’t overload the server… Continue reading How to Implement Infinite Scrolling With JavaScript

10 Best Free Open Source JavaScript Lightbox Widgets and Plugins

Images are crucial, whether you’re running an e-commerce or portfolio website. How many sales you make or new clients you get depends a lot on the quality of the images of your products and services that you can showcase through your images. So it makes sense to highlight your images with a lightbox. Lightboxes make… Continue reading 10 Best Free Open Source JavaScript Lightbox Widgets and Plugins

How to Customize the WooCommerce Checkout Page

The checkout page is one of the most important pages on any eCommerce website. All the effort that you put into your website content, design and marketing will amount to nothing if your customers keep abandoning their carts and never complete the checkout process. Some statistics show that cart abandonment rate can vary in range… Continue reading How to Customize the WooCommerce Checkout Page

Choosing a WordPress Website Builder and Why You Should Use One

There are a lot of tools and services for creating websites today. However, none of them are as popular as WordPress. In fact, WordPress powers around 43% of all websites: that include hobby sites, official government websites, and the biggest news websites. Some examples of websites built with WordPress are The White House, Rolling Stone,… Continue reading Choosing a WordPress Website Builder and Why You Should Use One

WooCommerce Shortcodes Cheatsheet

WordPress added support for shortcodes around 15 years ago. You can use shortcodes to easily add complicated functionality to your website which otherwise would have required you to write a lot of code yourself. Basically, shortcodes are short text snippets whose behavior depends on some more complicated code written in the back end. While WordPress… Continue reading WooCommerce Shortcodes Cheatsheet

How to Customize the WooCommerce Shop Page

People who have created WordPress websites know that there are different kinds of pages that you can create in WordPress. WooCommerce follows a somewhat similar structure. There are single product pages like single post pages and then there are archive type pages to show a list of products. The WooCommerce shop page falls in the… Continue reading How to Customize the WooCommerce Shop Page

How to Customize Contact Form 7 for WordPress: Checkboxes and Radio Buttons

In the past, we’ve discussed different customizations of the WordPress Contact Form 7 (CF7) plugin. Today, we’ll learn how to build custom checkboxes and radio buttons with this plugin. Sound like a good exercise? Here are two animated images that show how these form elements will look after our custom styling: And here is a… Continue reading How to Customize Contact Form 7 for WordPress: Checkboxes and Radio Buttons

Customize a WooCommerce Product Page for Free

* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Creating a fully functioning eCommerce store requires you to take care of a lot of big and small things. Any website that you create to sell products will have different types of pages to address different needs. Dedicated product pages are one such example. A product page… Continue reading Customize a WooCommerce Product Page for Free

How to Conform to WCAG (Web Content Accessibility Guidelines) in Email

* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} WCAG (the Web Content Accessibility Guidelines) make the web a more accessible place for everyone. They’re written for web content, not email content, but as the two have a lot in common, conforming to WCAG lays a good foundation for applying accessibility to email. So, how do… Continue reading How to Conform to WCAG (Web Content Accessibility Guidelines) in Email

How to Build a Responsive Slider With Swiper.js

* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Have you ever built an advanced slider for a project? If so, you might have taken advantage of any one of a number of JavaScript carousels. In the past, I’ve covered two of them: slick and Owl. Today, I’ll introduce another well-known one: Swiper. Ready to learn… Continue reading How to Build a Responsive Slider With Swiper.js

What is HTML Email?

* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} In this quick explainer, I’ll clear up any doubts or questions you have about HTML emails, how to create them, and how to send them. What is HTML Email? Your email program or service can send and receive emails in two formats; plain text and HTML. Plain… Continue reading What is HTML Email?

A Look at Its Impact on the Web

In the web design industry, it’s rare that a tool stays relevant for a decade or more. Things tend to change so quickly that the useful life of an app or framework usually isn’t very long. However, Twitter’s Bootstrap has defied those odds. Now in existence for over 10 years, the self-described “front-end open source… Continue reading A Look at Its Impact on the Web

How To Fix Outlook Dark Mode Problems (Email Design)

Unpredictable text color changes in Outlook for Windows is one of the many mind-boggling issues you’ve no doubt encountered if you’ve ever built an HTML email for Dark Mode. Outlook brutally inverts colors in Dark Mode, in some cases even turning dark colors into white. Not only can this result in very unsightly parts of… Continue reading How To Fix Outlook Dark Mode Problems (Email Design)

What Is JavaScript?

Technology is advancing rapidly and web development is no different. New tools and services are constantly coming into existence to help you build the next big thing. It’s great to have so much innovation in web development, but it can be very intimidating for people who are just starting out in the field and have… Continue reading What Is JavaScript?

Create a Unique Scrolling Website With Locomotive Scroll & Tailwind CSS

Have you ever wanted to build a unique single-page scrolling website yet didn’t know where to start? If so, don’t worry! Today we’re going to create together such a website. To achieve this, we’ll take advantage of Locomotive Scroll, a small and easy-to-use JavaScript library for cool scrolling effects. Plus, to speed up the development… Continue reading Create a Unique Scrolling Website With Locomotive Scroll & Tailwind CSS

4 Quick Steps to Make a Website Responsive

Responsive web design as a concept has been around a long time now; in fact, it’s the de facto way of building websites nowadays. Right now people are accessing websites with mobile phones more than any other device, so it’s really important to ensure that your website is suited to small and large screens. It’s… Continue reading 4 Quick Steps to Make a Website Responsive

15 Best Web Fonts That Look Great at Small Sizes

Beautiful web fonts aren’t particularly difficult to find. A quick search will undoubtedly turn up a number of attractive typefaces that will complement your website’s look and messaging. However, many of these fonts tend to have very specific use cases. For instance, a wide font may be perfect for header text but would work poorly… Continue reading 15 Best Web Fonts That Look Great at Small Sizes

A Comprehensive Guide to Flexbox Sizing

Flexbox sizing makes it possible to create flexible layouts that fully adapt to the screen. If you set up everything correctly you won’t have to rely on media queries to support different viewports, layouts, and orientations. In this guide I’ll show you how to use the following flexbox sizing properties: flex-grow flex-shrink flex-basis flex  Explainer: Flexbox… Continue reading A Comprehensive Guide to Flexbox Sizing

Is It Time to Reset HTML?

HTML is one of the foundational building blocks of the Web. But just as web design best practices and techniques change over time, so does the code we use. As HTML evolves, some of its older markup has been deprecated while other parts have been repurposed. Does that create more problems for us, though? Would… Continue reading Is It Time to Reset HTML?

A Comprehensive Guide to Flexbox Ordering & Reordering

The flexbox layout module allows us to lay out flex items in any order and direction. Flexbox ordering is, in fact, easier than ordering with floats or CSS grid, even if you might not think so at first. As flexbox is a one-dimensional layout model, as opposed to CSS grid which is two-dimensional, you only have… Continue reading A Comprehensive Guide to Flexbox Ordering & Reordering

30 HTML Best Practices for Beginners

This tutorial is specifically for those who are just diving into web development. If you have one year of experience or less, hopefully some of the tips listed here will help you to become better, quicker! 1. Always Close Your Tags Back in the day, it wasn’t uncommon to see things like this: <li>Some text here.… Continue reading 30 HTML Best Practices for Beginners

A Comprehensive Guide to Flexbox Alignment

Alignment is probably the most confusing aspect of flexbox. The flexbox layout module has a handful of alignment properties that behave differently under different circumstances, and when using them you might not necessarily understand what is happening or why. However, if you know what to pay attention to, alignment is less complicated than it first… Continue reading A Comprehensive Guide to Flexbox Alignment

5 Web Design Tips To Improve Your SEO

Many factors affect your SEO ranking, and getting the best results from it depends on the same factors that affect your SEO. When people hear the words ‘search engine optimization’ or SEO, they automatically think about optimizing their content through keywords in order to improve their ranking on search engine results pages (SERPs). However, many… Continue reading 5 Web Design Tips To Improve Your SEO