Tag: child

How to Use HTML5 “picture”, “srcset”, and “sizes” for Responsive Images

<picture> is an HTML5 element designed to give us more versatile and performant responsive image functionality. Instead of loading a single image and trying to resize it to suit all possible viewport sizes and layouts, the picture tag loads multiple images of different sizes and resolutions, choosing the best fit for different scenarios. How Does <picture>… Continue reading How to Use HTML5 “picture”, “srcset”, and “sizes” for Responsive Images

How to Create a Web Booking Form With the Smart Forms Script

Booking forms can serve a lot of purposes on a website. You can use them to allow your visitors to book a hotel room or tickets to a popular event. They can also be used for other things like booking appointments with clients. They are a great way for people to simply give you all… Continue reading How to Create a Web Booking Form With the Smart Forms Script

How to Find the Best WordPress Gallery Plugins for Images or Video

How you present your visual content is key to the success of your website or online store. When visual content is done beautifully it encourages visitors to stay longer on your website. It also improves your SEO ranking and make your website easier to find in search results.  However, creating a beautiful gallery for your… Continue reading How to Find the Best WordPress Gallery Plugins for Images or Video

Exploring Photo Manipulation: Analysis and Interviews

What You’ll Be Creating Photo manipulation and photo effects—they could cover anything from touching up a face to adding an entire universe right into your favorite photo. The manipulation of imagery is often associated with Adobe Photoshop, but photo manipulation itself predates Photoshop by many, many years. Perhaps we, as artists, designers, and people, have… Continue reading Exploring Photo Manipulation: Analysis and Interviews

How to Code a Landing Page in Your WordPress Theme

What You’ll Be Creating If you’ve bought anything on the internet, you’ve probably come across a landing page. They’re a highly effective way of maximizing conversions from a website. But just what is a landing page, and how do you create one for your WordPress site?  In this tutorial, I’ll demonstrate what makes a landing… Continue reading How to Code a Landing Page in Your WordPress Theme

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

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

Using the New WordPress Default Theme

Twenty Nineteen is the latest WordPress default theme currently available and was included with the WordPress 5.0 release. It’s already proving pretty popular with over 800,000 active installations to date. It’s also also available to WordPress.com users too which bumps up the user base even more. It’s described as a minimal and non-generic theme with simple but sophisticated… Continue reading Using the New WordPress Default Theme

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

Show WordPress Related Posts With Taxonomy and a Custom Post Type

What You’ll Be Creating Sometimes you want your blog posts to appear on more pages in your WordPress site than just your blog. You’ve already got the option of using category and taxonomy archives, as well as tags. This can help you divide up your content and add a variety of sections to your blog… Continue reading Show WordPress Related Posts With Taxonomy and a Custom Post Type

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

Create a CSS Grid Image Gallery (With Blur Effect and Interaction Media Queries)

In this tutorial we’re going to take a bunch of ordinary thumbnail links and turn them into a responsive CSS grid gallery with a blurred hover effect. We’ll also use a great CSS trick to make sure touch screen users don’t miss out! Here’s what we’ll be creating: A Little Background Recently, Rachel McCollin wrote a… Continue reading Create a CSS Grid Image Gallery (With Blur Effect and Interaction Media Queries)

Create a WordPress Image Gallery: Code the Plugin

What You’ll Be Creating People like pictures. They like looking at them, they like clicking on them. So it makes sense to use them in the navigation for your site. You may already use featured images in your archive pages, letting users get a greater insight into what a post is about and making your… Continue reading Create a WordPress Image Gallery: Code the Plugin

Celebrate Diversity in Design—Volume 14

Welcome back to our Diversity in Design series on Envato Tuts+. Discover four talented artists with inspiring styles you’ll love. 4 Artists You Should Know: Diversity in Design Celebrate the work of these extraordinary artists. Each with their own unique background, they draw inspiration from their culture and surroundings to create phenomenal designs. Blake… Continue reading Celebrate Diversity in Design—Volume 14

Testing Components in React Using Jest and Enzyme

This is the second part of the series on Testing Components in React. If you have prior experience with Jest, you can skip ahead and use the GitHub code as a starting point.  In the previous article, we covered the basic principles and ideas behind test-driven development. We also set up the environment and the tools… Continue reading Testing Components in React Using Jest and Enzyme

Testing Components in React Using Jest: The Basics

What You’ll Be Creating Testing code is a confusing practice for many developers. That’s understandable because writing tests requires more effort, time, and the ability to foresee possible use cases. Startups and developers working on smaller projects usually favor ignoring tests altogether because of the lack of resources and manpower.  However, there are a couple… Continue reading Testing Components in React Using Jest: The Basics

What is Z-Index and How Does It Work?

June 18, 2018 by Alex Fox Elements on a web page can stack for a variety of reasons. With basic CSS positioning tools, it’s possible to stack elements on top of one other with negative margins, floats, and other tools. Even without specific position, elements stack, with div stacking on backgrounds on table cells stacking… Continue reading What is Z-Index and How Does It Work?

What Are the WordPress PHP Coding Standards?

What are the WordPress PHP coding standards? In this video from my course, Learn PHP for WordPress, you’ll learn all about the coding standards and why they’re important. The WordPress PHP Coding Standards What Are the WordPress PHP Coding Standards? You can find the full WordPress PHP coding standards in the official WordPress handbook. They’re… Continue reading What Are the WordPress PHP Coding Standards?

11 Super Simple WordPress Themes

As we most of the time looking for minimal themes for our websites, so, we have put our efforts to collect few most simple wordpress themes in one place. In this post, we are going to share with you some super simple WordPress minimalist themes that help you in creating your simple blogs. All these… Continue reading 11 Super Simple WordPress Themes

Comparable experiences: The starting point for inclusive design.

Photo by Talles Alves on Unsplash How many of you drink Coca-Cola? Did you know that initially it was not sold in supermarkets, but in pharmacies? In the beginning, the recipe included alcohol and was used to cure headache, nausea, and even addiction to morphine. A vintage 1917 Listerine Antiseptic ad. Credit: Vintage Art Clips Let’s try… Continue reading Comparable experiences: The starting point for inclusive design.

Using CSS Pseudo-elements and Pseudo-classes like ::before and ::after

April 23, 2018 by Alex Fox CSS wasn’t always as flexible as it is today. By using CSS pseudo-elements and pseudo-classes, designers can target elements based on their dynamic states or positioning in relation to other elements. Pseudo-Elements and Pseudo-Classes There are two types of pseudo selectors: pseudo-elements and pseudo-classes. Either of these pseudo selectors… Continue reading Using CSS Pseudo-elements and Pseudo-classes like ::before and ::after

The Brand: the forgotten child in Design Thinking

Just as ‘we are our brain’, companies ‘are their brand’. It defines why they exist, why they do what they do and what distinguishes them from competition. The often quoted Simon Sinek framework of the ‘why, how and what‘ is a perfect way to answer the question: ‘why are we doing what we’re doing?’, and… Continue reading The Brand: the forgotten child in Design Thinking

Beginner’s Guide to Angular: Components

Building single-page applications is an art, with many impressive frameworks to choose from. One of the most intuitive and widely used frameworks for building both web and mobile applications is Angular. Today, Angular 10 is out, and there are many impressive features. However, you need to master components before you dig deep.  First Things First:… Continue reading Beginner’s Guide to Angular: Components