Tag: CSS

Code a Burger Menu for Mobile Users in WordPress

What You’ll Be Creating If you want your site to be responsive (and who doesn’t?), then it’s important to make sure that your main navigation menu works well on small screens. Large navigation menus can take up too much space on a mobile phone, or if they don’t, they can be too small to read… Continue reading Code a Burger Menu for Mobile Users in WordPress

Features, Syntax, and the Problem It Will Solve

CSS subgrid is slowly making its way into browsers. The CSS Working Group is actively working on it and the related W3C specification has already reached Level 2. This new feature will enable us to enhance grid items with subgrids that inherit the grid tracks of their parent grid and seamlessly align with it. As CSS subgrid is… Continue reading Features, Syntax, and the Problem It Will Solve

How to build a filtering component in pure CSS (2 methods)

In today’s tutorial, we’ll learn how to build a CSS-only filtering component, something which you’d be forgiven for thinking needs JavaScript. We’ll be using some simple markup, some form controls, and some really interesting CSS selectors that you may not have used before. What We’re Working Towards Each instructor here at Tuts+ has their own… Continue reading How to build a filtering component in pure CSS (2 methods)

Tips for Enhancing Website Loading Speed by Proper Optimization

Today era is digitization world, where website accessibility is the most common task. Users use websites for a variety of reasons in their day to day tasks. If a user is searching a query using any digital assistant whether phone or desktop, they expect quick and relevant answers to that. For example, if a user… Continue reading Tips for Enhancing Website Loading Speed by Proper Optimization

How to Make a Drop-Down Menu in WordPress

What You’ll Be Creating Navigation menus are having a bit of a moment in the spotlight. From burger menus for mobile through mega menus for stores to sticky menus for enhanced user experience, there’s a great choice in the way you can present your navigation menu in your WordPress site. But what if you want… Continue reading How to Make a Drop-Down Menu in WordPress

Create a Contact Form in WordPress Using a Free Plugin

Today, we’re going to discuss the Formidable Forms plugin for WordPress, which allows you to create different kinds of forms easily. Specifically, we’ll look at how you could use this plugin to build a contact form for your site. We’ll start by exploring the basic settings provided by this plugin, and later on, we’ll go… Continue reading Create a Contact Form in WordPress Using a Free Plugin

Getting Started With CSS Multi-Column Layout

How do you create layouts in CSS? Maybe you use floats, Flexbox, or CSS Grid Layout. But there’s another layout method that’s not used much yet, and that is “multi-column”. Learn about it in our new course, Getting Started With CSS Multi-Column Layout. What You’ll Learn In this short course, Adi Purdila will teach you… Continue reading Getting Started With CSS Multi-Column Layout

Which Should You Use and When?

Flexbox and CSS Grid are two CSS layout modules that have become mainstream in recent years. Both allow us to create complex layouts that were previously only possible by applying CSS hacks and/or JavaScript. Flexbox and CSS Grid share multiple similarities and many layouts can be solved with both. When to use which is another… Continue reading Which Should You Use and When?

14 Firefox Developer Tools You Might Not Know About

In this roundup we’re going to be checking out some of the awesome tools Firefox has in its collection of Developer Tools.  Even if Google Chrome is your primary development browser, Firefox has some tools that Chrome doesn’t. In fairness the reverse is also true–Chrome has some tools that Firefox doesn’t, but the tools in… Continue reading 14 Firefox Developer Tools You Might Not Know About

20 Best Shipping & Pricing WooCommerce Plugins

If you use a WooCommerce plugin to manage the online store on your WordPress site, you’re probably looking for plugins that offer a good variety of shipping options or that make selling your products and running sales as easy as possible.  Today, we look at the best shipping and pricing plugins and also take a look at a few… Continue reading 20 Best Shipping & Pricing WooCommerce Plugins

Best WPBakery (Visual Composer) Add-Ons and Templates on Envato Elements

WPBakery (formerly Visual Composer) is one of the most well-known and feature-packed visual page builders available for WordPress. While the team at WPBakery is always improving on their product, the number of variations of web projects out there make it impossible to rely on a single plugin for all of your needs. Luckily, though, WPBakery… Continue reading Best WPBakery (Visual Composer) Add-Ons and Templates on Envato Elements

Mason Is a Front-End Builder Worth Exploring

Building a front-end for your site from scratch might be the hardest part of building a great web app. The idea and logic can be perfect, but if the user interface is a wreck, you’ll never be a success. That’s where tools like Mason’s front-end-as-a-service become so valuable. With Mason, you can visually build a… Continue reading Mason Is a Front-End Builder Worth Exploring

Turn Your Static SVG Drawings Into Interactive Widgets and Infographics With Vue.js

What You’ll Be Creating SVG is powerful and flexible graphic format, which fits perfectly into the web medium. Unlike raster image formats, such as JPG, PNG, or GIF, SVG is vector-based and consists of “real” objects, which you can select and manipulate in whatever manner you want. So even with some basic scripting a static… Continue reading Turn Your Static SVG Drawings Into Interactive Widgets and Infographics With Vue.js

How to Make a Sticky Menu in WordPress

What You’ll Be Creating Navigation menus are changing. Instead of just throwing one into a site without considering what form it’ll take, designers are taking the time to consider the design of navigation menus, the space they take up on the page, and how users interact with them. One growing trend is for sticky menus.… Continue reading How to Make a Sticky Menu in WordPress

Best jQuery Flipbook Plugins Compared

Are you looking for a creative and interactive way to showcase text, photos, and documents on your website? Adding a flipbook to your site can elevate your project and enhance the experience of your website visitors.  For this article, I’ve chosen three great tools that will allow you to create realistic, animated flipbooks with ease.… Continue reading Best jQuery Flipbook Plugins Compared

Web Design History: Looking Back Through 20 Years of Design Evolution

The web has transformed how we do things. The first website went online nearly three decades ago and since that time, there has been a huge transformation. It is now possible for people to share information easily and efficiently. The evolution of the web has been marked by evolution in web design. Some of the… Continue reading Web Design History: Looking Back Through 20 Years of Design Evolution

Best WordPress Contact Form Plugins

If you run a WordPress site, you need a reliable contact form so that visitors can reach you with their questions and comments. However, with so many WordPress form builders on the market, it can be difficult to find the very best contact form WordPress has to offer. To save you the time-wasting and head-scratching… Continue reading Best WordPress Contact Form Plugins

Two Ways to Create a CSS Frosted Glass Effect

* { 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 tutorial I’ll show you how to create a frosted glass effect in CSS.  You’ll already have seen this glass blur effect in action in UIs (User Interfaces) such as on MacOS and iOS, even Windows nowadays, so the glass background is definitely a trending effect.… Continue reading Two Ways to Create a CSS Frosted Glass Effect

How to Maintain the Selected Option On Page Load

Imagine you’re using a <select> element to navigate between pages–ordinarily the select will return to its default option when the page reloads. Today we’ll learn how to maintain the selected option, ensuring that whatever page you’ve selected remains selected even once the new page has been served. To demonstrate it, we’ll use a demo project with… Continue reading How to Maintain the Selected Option On Page Load

Create Style Variations for WordPress Gutenberg Blocks: Part 2

In the previous post we learned all about block style variations and how they’re used in the brand new WordPress 5.0 editor to switch between predefined styles easily. We’ll take things a little further in this post by providing more examples to give you a solid base for implementing block style variations in your own… Continue reading Create Style Variations for WordPress Gutenberg Blocks: Part 2

7 Things You Must Remove From Your Website Before 2019

December 11, 2018 by Alex Fox If you’ve got these things in your website, you better remove them before 2019. Here’s our “favorite” outdated or regrettable content choices. Mouseover Navigation Menus The most obvious problems with mouseover navigation menus is that not every visitor has a mouse. How does a mobile user “mouseover” something? Obviously,… Continue reading 7 Things You Must Remove From Your Website Before 2019

How to Make a Great (Coming Soon) Website Product Launch Page

Launching a new product is an exciting business venture, one that could mean a world of difference for your business. However, as you’re prepping for the launch, it’s important to think about how you’re going to promote your product as well as make it possible for people to buy it. Here are two options: Create… Continue reading How to Make a Great (Coming Soon) Website Product Launch Page