In a previous tutorial, we learned how to create a grayscale-to-color effect on scroll. To implement it, we took advantage of modern front-end features like CSS Grid, the clip-path property, and the Intersection Observer API. Today, we’ll use these tools and the knowledge gained from that tutorial to build another cool scroll effect. As we scroll, page… Continue reading Create Beautiful Scrolling Animations With the CSS Clip-Path Property
Tag: CSS
What Are Web Fonts?
If you’re new to web fonts, you might be wondering: what are web fonts? Don’t worry. Here we’ll cover what web fonts are and how to install web fonts. We’ll also show you some of the best web fonts from Envato Elements. Web fonts are fonts especially created for websites. They’re usually on a web… Continue reading What Are Web Fonts?
How to Create a Simple Web-Based Chat Application
In this tutorial we will be creating a simple web-based chat application with PHP and jQuery. This sort of utility would be perfect for a live support system for your website. Otherwise, learn how to build one yourself in this tutorial. This tutorial was updated recently to make improvements in the chat app. Introduction The… Continue reading How to Create a Simple Web-Based Chat Application
How to Use Color Fonts on the Web
Every web designer knows how to set a font’s color, right? It’s one of the first things we do when we begin learning CSS. We choose a color, and then we use styles to set it, like color: blue; or color: purple;, so all the glyphs in our chosen font turn that color, and only… Continue reading How to Use Color Fonts on the Web
Working With Tables in React, Part One
.png)
One of the most common user interface elements for presenting your data is a table. It turns out that there are many aspects to control when working with tables, such as: defining columns and headers various cell formats (text, numbers, check boxes) resizing filtering dynamic growing styling In this two-part series, you will learn about… Continue reading Working With Tables in React, Part One
How to Paginate Data With PHP
I can remember years ago, when I first began coding in PHP and MySQL, how excited I was the first time I got information from a database to show up in a web browser. For someone who had little database and programming knowledge, seeing those table rows show up onscreen based on the code I… Continue reading How to Paginate Data With PHP
Top New CMS Plugins, December 2020
Looking for the best new CMS plugins to take your website to the next level? Well look no further. In this post, we’ll cover a list of the best new CMS plugins for December 2020. This article will include useful plugins for WordPress, Shopify, Craft, and Joomla. Let’s get started… WordPress OptiPic images optimization OptiPic… Continue reading Top New CMS Plugins, December 2020
How to Customize Contact Form 7 for WordPress: Floating Labels
You might have seen forms where the placeholder text is animated when you start typing into that input. This pattern isn’t new, yet still remains a popular trend in UX form design. Today, we’ll learn the steps needed for adding this behavior into a form built with Contact Form 7 (CF7), one of the most… Continue reading How to Customize Contact Form 7 for WordPress: Floating Labels
Creating Pretty Popup Messages Using SweetAlert2
Every now and then, you will have to show an alert box to your users to let them know about an error or notification. The problem with the default alert boxes provided by browsers is that they are not very attractive. When you are creating a website with great color combinations and fancy animation to… Continue reading Creating Pretty Popup Messages Using SweetAlert2
Creating a Future-Proof Responsive Email Without Media Queries
What You’ll Be Creating Using this method you can create an email that has responsiveness baked in to the layout, without any need for CSS or media queries in the <head>, so that even in the worst case scenario of email rendering, your layout will remain intact. Is Developing HTML Email Still Hard? HTML email has… Continue reading Creating a Future-Proof Responsive Email Without Media Queries
2 Smartest Ways to Structure Sass
Sass – the extended arm of CSS; the power factor that brings elegance to your code. With Sass, it is all about variables, nesting, mixins, functions, partials, imports, inheritance, and control directives. Sass makes your code more maintainable and reusable. And now, I will show you how to make your code more structured and organized.… Continue reading 2 Smartest Ways to Structure Sass
How to Use Figma’s New Auto Layout Features
In this video I’ll show you how Figma’s new and improved Auto Layout features make designing responsive components and layouts easier than ever! Figma’s original Auto Layout features were introduced in December 2019–and now, almost a year later, Auto Layout has been completely reimagined, rebuilt and is (in my opinion) much better. Watch the Video… Continue reading How to Use Figma’s New Auto Layout Features
Common React Native App Layouts: Login Page
In this series, you’ll learn how to use React Native to create page layouts commonly used in mobile apps. The layouts you’ll be creating won’t be functional—instead, the main focus of this series is to get your hands dirty in laying out content in your React Native apps. If you’re new to laying out React… Continue reading Common React Native App Layouts: Login Page
CSS Charts: How to Create an Organizational Chart
In previous tutorials we’ve learned how to create different types of charts including bar charts, thermometer charts, and donut charts. Today we’ll continue this journey by building a CSS-only organizational chart. Ready to test your CSS skills? The Organizational Chart We’re Building Here’s the CSS chart we’ll be creating: It consists of four levels and… Continue reading CSS Charts: How to Create an Organizational Chart
Create a PHP Login Form
A user login and registration system is super helpful when we want to store information about the users of our website. This applies to everything from educational websites which might store course progress and marks to e-commerce websites which will store information about customers’ past purchases. In this tutorial, I’ll teach you how to create… Continue reading Create a PHP Login Form
How to Use ARIA Roles, Properties, and States in HTML
In this beginner’s accessibility tutorial we’re going to learn what ARIA is, why it is necessary to write our HTML with ARIA in mind, what ARIA roles, properties, and states are, and (very importantly) the 5 rules of ARIA use. What is ARIA? ARIA stands for Accessible Rich Internet Applications and it was created by the World… Continue reading How to Use ARIA Roles, Properties, and States in HTML
A Guide to Overriding Parent Theme Functions in Your Child Theme
If you’ve had any experience working with parent and child themes in WordPress, you’ll know that the template files in your child theme override those in your parent theme. For example, if your parent theme has a page.php file and you create a new one in your child theme, WordPress will use the one in the child… Continue reading A Guide to Overriding Parent Theme Functions in Your Child Theme
Build an HTML Email Template From Scratch
What You’ll Be Creating The best way to understand any process is to carry it out yourself, from the ground up. Today, we’re going to do just that with email design, by building an HTML email template from scratch. “The sooner you stop fighting the quirks of email, the sooner you can use them to… Continue reading Build an HTML Email Template From Scratch
Top New CMS Plugins, October 2020
Plugins offer a ton of benefits to developers and website administrators; from flexibility, to saving time in development, the right plugin is priceless to a project. In this article, we’ll cover a list of the best new plugins for October 2020. You’ll find useful plugins for WordPress, Craft, Shopify, and Joomla. Let’s get started. WordPress… Continue reading Top New CMS Plugins, October 2020
100 Best Typography & Font Tutorials for Every Designer
If you’re looking for an awesome typography tutorial collection, you’re going to love this list of font tutorials, text effects, web fonts, and more. Learn from these Illustrator typography tutorials and Photoshop typography tutorials, or try out a 3D typography tutorial—we’ve got a list of over 100 awesome free tutorials for you to enjoy today. Font Basics:… Continue reading 100 Best Typography & Font Tutorials for Every Designer
Exciting New Tools for Designers, October 2020
This month’s collection of new tools, resources, and freebies for designers is a smorgasbord of sorts. You’ll find everything from useful APIs to icons to tutorials to fonts. Let’s get right into it, here’s what new for designers this month: Tooltip Sequence Now that your app or website is ready, you might need to help… Continue reading Exciting New Tools for Designers, October 2020
A Guide to HTML & CSS Forms (No Hacks!)
Historically, HTML forms have been quite tricky — firstly, because at least a little bit of JavaScript was required, and secondly, because no amount of CSS could ever make them behave. However, this isn’t necessarily true in the case of the modern web, so let’s learn how to mark up forms using only HTML and… Continue reading A Guide to HTML & CSS Forms (No Hacks!)
Create a Contact Form in PHP
No matter what type of website you own or manage, you probably need a contact form. The contact form can help your visitors request a quote, ask for information, or share any tips or problems they’re facing while using your website. In this tutorial, our focus will be on creating a fully functional contact form… Continue reading Create a Contact Form in PHP
These Fun Games With Surely Test your Web Design Skills
September 23, 2020 by Sangalang Kristine Anyone could learn how to create websites through continuous training and practice. However, this could get eventually boring and de-motivating. The great news is that game devs have created games that help newbie web designers hone their skills for both web design and coding development. Here are a few… Continue reading These Fun Games With Surely Test your Web Design Skills