React is the most popular framework for building user interfaces. In this course you will learn the fundamental concepts you need to start building applications with React. 1. What You Will Learn in This Free React Course You’ll start of with the basics of React—coding your first components: using React with vanilla JavaScript the basics of… Continue reading The Complete React Developer Course
Tag: attribute
How to Let Users Dynamically Change the Number of Posts per Page in WordPress
Consider the following scenario: you have a WordPress blog with hundreds of posts. On your blog archive page, six posts appear at a time. Of course, there’s pagination for moving between older and newer posts. But what if you want to give users the option to choose the number of posts they want to display… Continue reading How to Let Users Dynamically Change the Number of Posts per Page in WordPress
Create a Simple Math CAPTCHA for Your Forms With PHP and JavaScript
In this new tutorial we’ll discuss a straightforward approach for reducing spam from form submissions. This technique will use PHP and JavaScript to block form submission until the user provides the correct answer to a simple math CAPTCHA. Here’s a quick video that demonstrates the expected functionality: It’s important to note that this is just… Continue reading Create a Simple Math CAPTCHA for Your Forms With PHP and JavaScript
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
30 Web Development Best Practices for Beginners
There is a lot to learn as a web developer. For starters, the syntax of HTML, CSS and JavaScript, and how these fundamental web languages work together. However, on top of that you need to learn how to code well: how to use the web technologies like a professional, to create efficient, maintainable, and scalable… Continue reading 30 Web Development Best Practices for Beginners
Fixing Problems With Borders in Dark Mode (Email Design)
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Borders aren’t always treated the same as other elements when it comes to emails in Dark Mode. In this article I’ll take you through what is happening to your borders, as well as how fix any problems you’re having with them. Top Email Templates on Envato Elements… Continue reading Fixing Problems With Borders in Dark Mode (Email Design)
How to Build a UIkit Lightbox With Dot Navigation
* { 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 worked with the UIkit front-end framework? Its current version at the time of writing is 3.9.4, and in the next few months, YOOtheme (the team behind it) plan to release v4. This isn’t the first time I’ve written about UIkit; some years ago, while still… Continue reading How to Build a UIkit Lightbox With Dot Navigation
20 Best WooCommerce Product Add-Ons
Do you want to create an easy shopping experience on your WooCommerce products pages? Here are 20 of the best WooCommerce product add-ons to make it possible! They make your product pages more user-friendly and user-focused by adding intuitive functionalities like: adding easy navigation using filters allowing customers to personalize their orders offering extra choices and… Continue reading 20 Best WooCommerce Product Add-Ons
How to Customize an HTML Template
So you’ve just purchased an HTML template and now you have to customize it before it goes online. But you’re not experienced with code so you’re not sure how to go about it. Well, rest easy, because in this tutorial we’re going to step you through how to edit a HTML template. We’re going to… Continue reading How to Customize an HTML Template
SVG Viewport and viewBox (For Complete Beginners)
In this quick SVG viewport and viewBox tutorial, we’re going to break down exactly what viewport and viewBox are in SVG for the web. You’ll learn: The difference between the viewport and viewBox The aspects of your SVGs you can control with each How they are each applied Let’s begin! SVG Viewport If you literally… Continue reading SVG Viewport and viewBox (For Complete Beginners)
How to Work With Regular Expressions in PHP
In this article, we’ll go through the PHP functions that allow you to use regular expressions to perform search and replace operations on strings. What Is a Regular Expression? Regular expressions—also called “regex”—are search patterns for text. These patterns can be processed by a regex engine to find substrings, validate that a string matches a… Continue reading How to Work With Regular Expressions in PHP
Android Essentials: Creating Simple User Forms
Android applications often rely upon data supplied by users. This tutorial walks you through the creation and use of a number of the most common controls used to collect data from the user. Getting Started For this tutorial, you will design and implement a membership registration form. Whether you’re in charge of recruiting members for… Continue reading Android Essentials: Creating Simple User Forms
PHP Superglobals Explained—With Cheatsheet
In this post, I’ll give you a cheatsheet quick reference to all the PHP superglobal variables available in PHP. What Is a Superglobal Variable? Let’s have a look at the definition of superglobal variables. Superglobals are built-in variables that are always available in all scopes. Whether you are a seasoned PHP developer or a novice… Continue reading PHP Superglobals Explained—With Cheatsheet
Form Input Validation Using Only HTML5 and Regex
Validation of form input is something that should be taken seriously. With luck, nothing worse than garbage data will be submitted to a site which uses data from forms without proper validation. However, there also a chance that hackers will be able to compromise the private data of users who trusted you with their information.… Continue reading Form Input Validation Using Only HTML5 and Regex
Quick Tip: Add a Formspree Form to Your Static Sites
In this tutorial we’re going to use Formspree for a hassle-free way of adding dynamic, flexible forms to your static websites. The Problem: Contact Forms Imagine you’ve just created a website using static pages, whether that be with the aid of Jekyll, Eleventy, Gatsby or merely using some HTML files, but you now want to add a contact form.… Continue reading Quick Tip: Add a Formspree Form to Your Static Sites
How to Work With Cookies in PHP
You might have heard about cookies, but what exactly are they and what can we actually do with them? In this tutorial, we will focus on the basics of cookies, and learn about their functionality in various web applications and site environments. We will also learn how to work with cookies in PHP. Cookies vs… Continue reading How to Work With Cookies in PHP
Top 9 Tips For Optimizing Images in 2021
The ‘need for speed’ is an essential item on every website’s bucket list these days. And why not? Enhanced speed is directly responsible for converting traffic into paying clients. Anyone in any industry wishes to boost their website’s loading speed, providing an improved user experience. Plus, don’t forget that escalated site speeds also escalates the… Continue reading Top 9 Tips For Optimizing Images in 2021
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 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
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
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
Understanding the Image Component in React Native
Images are an essential aspect of any mobile app. This tutorial will introduce you to the image component and show you how to use images in your React Native app. You will also learn how to create your own photo gallery! Prerequisites to Create a React Native App We will use the Expo CLI for… Continue reading Understanding the Image Component in React Native
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
Axe-core 4.0 is Here!
Over the past few years, browsers like Firefox and Chrome have provided tools to better protect their users with advanced security features. The latest release of axe-core, axe-core 4.0 enables us to test accessibility even in the most security-aware environments. Improvements in axe-core 4.0 include support of Content Security Policy and has additional options for… Continue reading Axe-core 4.0 is Here!