Tag: CSS

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

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

10 Best PHP URL Shortener Scripts

URLs are rarely short and sweet. They usually contain multiple keywords and are accompanied by extra parameters to help with the tracking of different campaigns or incoming traffic. These long URLs with so many parameters can sometimes be off-putting for potential visitors. Therefore, it’s usually a better idea to use a URL shortener script and… Continue reading 10 Best PHP URL Shortener Scripts

12 Best Google Design & Development Tools

Google resembles an iceberg: there’s the part above the water we can see and use everyday; there’s also the part beneath the water, that we don’t see and know little about. While many of us are concerned about the aspects of Google we don’t see — the parts that threaten our privacy, or monopolize the… Continue reading 12 Best Google Design & Development Tools

25 Must-Read Books For Designers, Typography Lovers, And Freelancers

UPDATED AUGUST 2020 You may already know that I read a lot and of course, being a designer and a blogger there are many design blogs that I follow and read on a regular basis, but there’s also a lot of books about design, usability, typography, CSS, freelancing and a boatload of other related topics… Continue reading 25 Must-Read Books For Designers, Typography Lovers, And Freelancers

Exciting New Tools for Designers, August 2020

The common theme in this month’s collection of new tools and resources is “things that help you show off your work.” Many of these tools are made to help you better web products or apps or showcase designs with others. Here’s what new for designers this month. Naturaltts Naturaltts is an online text to speech… Continue reading Exciting New Tools for Designers, August 2020

How to Make Your Own SVG Files

Using images is essential in web design. This is why knowledge about different image formats is important for web designers. Not only this, but it is also necessary to learn about the functions of each type of image. Knowledge on how to create and edit such images are also considered as essential skills for web… Continue reading How to Make Your Own SVG Files

Choose Your Own Adventure with the Parsons Web Design and Development Certificate

Many people dream of a career in web design, but it may actually be more attainable than you think. There are countless online courses, of variable quality, with little to no academic structure; self-learning is an option, but it doesn’t come with a curriculum. Without a professional structure and a comprehensive curriculum your dream career… Continue reading Choose Your Own Adventure with the Parsons Web Design and Development Certificate

Performance Tip: Use the Media Attribute for Faster Page Load Times

Sometimes web performance optimization takes a lot of work, and sometimes performance can be improved in just a moment. Adding the media attribute to conditional CSS files is an easy and quick way to speed up web page load times. TL;DR In short, if you add the media attribute to the <link> tag that calls… Continue reading Performance Tip: Use the Media Attribute for Faster Page Load Times

How to Self-Host Google Fonts on Your Own Server

As web designers living in the era of high-speed internet, we have picked up the habit of adding external dependencies such as fonts from third-party servers, most frequently from content delivery networks (CDNs). However, this is not always the best decision. Sometimes, it’s still better to stick to your own infrastructure and host your assets… Continue reading How to Self-Host Google Fonts on Your Own Server

How to Improve Largest Contentful Paint (LCP) and SEO

Contentful; Webster’s Dictionary defines “contentful” as… not found. Clearly someone made up this word, but that is not necessarily a bad thing. The world of user experience metrics is moving quickly, so new terminology is needed. Largest Contentful Paint (LCP) is one of a number of metrics measuring the render time of content on a… Continue reading How to Improve Largest Contentful Paint (LCP) and SEO