THE FUNDAMENTALS
Your coding toolkit.
287 lessons from the Fervor library. Pick a topic, find a concept, and make it click.
287 tutorials
🌍 How to Point a Domain to Your AWS EC2 WordPress Site
🌍 How to Point a Domain to Your AWS EC2 WordPress Site You’ve got two common options for DNS setup: 1. Use your domain registrar’s DNS (free + easy) 2. Us
🌟 Awesome Things You Can Do with PHP in WordPress Themes 🌟
🌟 Awesome Things You Can Do with PHP in WordPress Themes 🌟 WordPress themes are powered by PHP, making them incredibly versatile. If you’re ready to leve
🎨 Tutorial: Customizing a WooCommerce Checkout Page with PHP Templates 🚀
🎨 Tutorial: Customizing a WooCommerce Checkout Page with PHP Templates 🚀 The WooCommerce Checkout Page is a critical step in your store's sales funnel. C
1. Product Types
Working with product data in WooCommerce involves understanding the different types of data you can manage and how to effectively use them to enhance your
1. Understanding the Basics
Creating custom category page templates for WooCommerce is a fantastic way to make your store stand out! Let’s dive into a step-by-step tutorial to create
19 Psychological UI UX Laws
Psychology impacting design
60,30,10 colors
How to make color choices
60,30,10 rule
Keeping Colors balanced
A-Frame 101
A-Frame 101 Basics
addEventListener =>
Use arrow functions with event listeners
addEventListener()
Respond to user interactions with event listeners
Adding Animation
Getting things to move.
Adding Product Catagories to the Menu
Adding Product Catagories to the Menu
Agile 101
Agile 101
All-in-One WP Migration
How to migrate your WordPress site with All-in-One WP Migration
All-in-One WP Migration 101
Comprehensive Tutorial on the All-in-One WP Migration Plugin
Anchor tags
Linking to the future
Array.from()
Convert array-like objects into true arrays
Arrays
Learn about arrays in PHP.
Attribute Function PHP Shortcode
Creating individual shortcodes for each of your custom product attributes
Background gradient
Learn how to create linear gradients in CSS.
Background Image Component
Reusable component for background images
Background-blend-mode
Create unique visual effects by blending multiple background images.
background-position
Control the positioning of background images in CSS.
bb Rows and Columns
Basics on rows and columns in Beaver Builder
Beaver Builder Blog Post Template
Creating a Blog Post Template with Beaver Builder
Beaver Builder Landing Page
Creating a Landing Page with Beaver Builder
Beaver Builder Mega Menu
Creating a Mega Menu with Beaver Builder
Black Label
Design sleek, modern black labels for various UI elements.
BONUS USE CASE
In this tutorial, we'll explore how to utilize the temperature parameter when interacting with OpenAI's GPT-4 through their API. The temperature setting pl
Borders 101
Introduction to CSS borders and their various properties.
Borders 102
Advanced border techniques and creative applications in CSS.
Box Model
Understand the CSS box model for precise layout control.
Button Shapes
Discover creative ways to style buttons beyond the standard rectangle.
Buttons from JSON
Generate buttons dynamically from JSON data
Buttons from JSON
Creating Buttons from JSON file
Category Btn UI/UX
Designing Category Buttons w topics
Chain of Symbols
Master the Chain of Symbols technique for advanced AI problem-solving
Change Bullet Color
Learn how to change the color of list bullets in CSS.
Changing ini.php Settings
Modifying PHP configuration settings via ini.php
Child Categories from Attributes
Creating WooCommerce categories, then creating child categories from values of custom fields with PHP
Chrome Extension 101
Building a Chrome Extension
Clear Cache One Page
Clearing the browser cache for just one page without nuking everything
Component Choice
Should it be a component?
Conditional Hamburger Nav
Show hamburger on mobile with additional features
Conditional Render &&
Using && for conditional rendering
Conditional Send Email Gravity Forms
Conditional Send Email Gravity Forms
Cool IMG Borders
Create eye-catching border effects for images using CSS.
Core Principles of UI and UX Design Tutorial
Core Principles of UI and UX Design Tutorial In this tutorial, you'll learn about the fundamental principles of user interface (UI) and user experience (UX
Create Explore Scene
Create Explore Scene with clickable tiles
Create React App
The 'Hello World' for React
Create React App 2
The old standby
Create React Vite
The way I do it
Create Vite (Same Dir)
Setting up Vite in the same directory
Creating a React Component to Display Cards from JSON
Creating a React Component to Display Cards from JSON This tutorial will guide you through creating a React component that takes a JSON file, converts it i
Creating a WooCommerce Product Page
Creating a WooCommerce Product Page WooCommerce is a powerful e-commerce plugin for WordPress that allows you to create a fully functional online store. In
Creating Cards
Component to Display Cards from JSON
Creating NextJS App
Creating a Next.js app in Visual Studio Code (VSCode) is a fantastic way to get started with building modern web applications. Here's a straightforward, st
Custom Home Page Template
Customizing the Homepage- WooCommerce and Beaver Builder Home Page
Custom Posts Templating PHP
Templating custom posts with PHP
Deleting all Products in WooCommerce
Deleting all Products in WooCommerce
DNS Hosts File
Changing the DNS Hosts File to prepare for a new domain
do_shortcode() Shortcode PHP
Creating individual shortcodes for each of your custom product attributes
double negative
Tutorial: Using the Double Negation Operator (!!) in JavaScript Introduction: Welcome to FrOnt3nd Tutorials! In this guide, we'll explore the fascinating w
Drop Down menu
Build interactive dropdown menus
Dropdown Menu
Climbing up while Dropping down
Dropdown Menu 2
Dropping it down
Dropdown UI/UX
Designing a Dropdown menu
DRY concept
DRY concept
else if
Handle multiple conditions with else-if statements
Else, Ternary, Switch
Advanced conditional rendering techniques
Email Rule Setup
Setting up email rules
Escaping Characters
Handle special characters in strings
EventHandler
Events handled
EventHandler =>
Events with arrow functions
Excel Ordering Fields
Sorting data in Excel
expand menu
Tutorial: Creating Expanding Menus/Topics Introduction: Welcome to FrOnt3nd Tutorials! In this guide, we'll dive into the process of creating expanding men
Expanding Menu
Accordion / expandable menu
Features of <Image />
In Next.js, <Image / is a React component specifically designed for optimizing images. It's part of the built-in image optimization features provided by Ne
Features of <Link />
Certainly! Another very useful component in Next.js is the <Link / component. It's fundamental for creating navigational structures within your Next.js app
Fervor Social App Simpleified
Fervor Social App made simple, with a focus on the basics
Fervor Social Scope
Fervor Social App Scope of work
Fetch a Table
Load and display table data asynchronously
Fetching Data
Finding and Delivering
Fetching Table
Fetching data and creating a table
Fetching with SWR
Data fetching using SWR in React
Field sets
A Field of Dreams
filter()
Create new arrays based on conditions
Finding Shared folder (Mac)
Finding the /Users/Shared directory on a Mac
Finding Site IP
Quickly find the IP address of a website
Font Pairings
Guidelines for selecting complementary font combinations in web design.
Font Shorthand
Simplify your CSS with efficient font property shorthand techniques.
For Loop
Master basic array iteration
For Loop
Basic iteration in React
forEach()
Iterate through arrays with forEach
Fragments <>
Fragments provide a lightweight syntax for grouping elements without extra DOM nodes
Framer-Motion Install
Installing Framer Motion for animations
fromCharcode()
Convert character codes to strings
Function Component
The basis for a component
Gallery with Grid
Picture this.
Gated Content 101
Creating Gated Content in WordPress
getBoundingClientRect()
Get element positions relative to viewport
Getting Started with WordPress
An introduction to getting started with WordPress
Godot 2D setup 101
Godot 2D 101
Gravity Forms 101
Introduction to Gravity Forms
Gravity Forms Divi
Using Gravity Forms with DIVI
Gravity Forms Export
Exporting Gravity Forms
Gravity Forms Recaptca
Implementing reCAPTCHA in Gravity Forms
Gravity Forms SMTP Email
Configuring SMTP for Gravity Forms
Gravity Forms styling
Styling Gravity Forms with DIVI
Hamburger Menu
Everyone needs one
hasOwnProperty()
Check if objects contain specific properties
hasOwnProperty()
Check if a specific property exists
Helmet for SEO
Managing SEO with Helmet in React
Hero Component
Creating a Hero section component
Highlighting Specific Words in Content using React
Highlighting Specific Words in Content using React In web development, you might want to highlight specific words in the content of a webpage to draw atten
How find your initial WordPress password
How find your initial WordPress password
How to create a WP site with AWS
How to create a WP site with AWS
How to set up SSL on AWS Bitnami
How to set up SSL on AWS Bitnami
How to SSH into your AWS WP site
How to create a WP site with AWS
How to Use the .map() Method in JavaScript
How to Use the .map() Method in JavaScript Welcome to FrOnt3nd Tutorials! In this tutorial, we'll explore how to use the .map() method in JavaScript to cre
HTACCESS
Modifying .htaccess settings
if statements
Master basic conditional logic in JavaScript
Image into Vector - Illustrator
Image into Vector - Illustrator
Images <img/>
How to use <img/> in React
Import CSV Woo 102
Importing CSV into WooCommerce for product mapping
includes()
Check if arrays contain specific values
Input Fields
All the fun values of input
Inset Borders
Learn to create inset border effects for a unique visual style.
Installing Node
Ah, the quest for installing npm, the trusty sidekick for any web developer! Think of npm as your digital toolbox, where you can grab all sorts of tools an
Installing PHP on Your Computer
Let's go through the detailed steps for installing PHP on your computer and setting up Visual Studio Code (VS Code) for PHP development. Installing PHP on
Internal linking
Creating internal links in WordPress
Introduction to Conditional Rendering
Using the if Statement in React: Conditional Rendering and Beyond In React, conditional rendering is a powerful technique that allows you to display differ
italic <i>
Proper usage of italic text and the <i> tag in modern web design.
Kanban Task Board Backend
Kanban Task Board Backend
Kanban Task Board Frontend
Kanban Task Board Frontend
Kanban Task Board Overview
Kanban Task Board Project/Tutorial Overview
Key Frames
Create smooth, complex animations using CSS keyframes.
Keys
Track changes and updates within dynamic lists
Landing Pages
Designing your landing page
Layer with Gradient Transparency
Layer Gradient Transparency
Links Routes
Convert SPA to MPA with routing
Load Save Game 101
Load Save Game 101
MAMP Database 101
Understanding MAMP databases
MAMP Database Backup
Backing up your MAMP database
MAMP PHP WP settings
Configuring MAMP for WordPress Development
MAMP Server
How to set up a local server with MAMP
MAMP WP Memory Limits
How to fix MAMP WP memory limits
MAMP WP Password DB
How to manage WordPress user passwords in MAMP
map() in React
Mapping data in React
map() method
Transform array elements with custom functions
Markdown Coolness
Using Markdown in React applications
Mastering Background Images in CSS
Mastering Background Images in CSS Introduction Creating visually attractive web pages is a crucial aspect of web development. Utilizing background images
Media Queries
Craft responsive designs using CSS media queries for different devices.
Menu Toggle
Toggle the menu visibility
Method 1: Using the Table Editor
Using Css variables in modules
Method 1: Using the WordPress Customizer
Let’s walk through the steps to change the background color of your WordPress site. This can be done through the WordPress Customizer or by adding custom C
Nav Bar
Leading the way
Nested Pages & Slugs
Managing nested pages and slugs in WordPress
Node Express (React CRUD)
Absolutely, we can utilize the fetch API which is native to modern browsers to interact with the server. Here is a modified version of the tutorial: Step 1
Node Express (Server)
This is a tutorial on setting up a Node Express server and working with a JSON database, along with explanations of concepts and syntax. Step 1: Setting Up
Nth Child
Master the nth-child selector for precise element targeting in CSS.
Nth Child 2
Advanced techniques and use cases for the nth-child selector.
onClick Handler
Gotta Handle those clicks
onscroll
Create scroll-triggered events and animations
onscroll Events
Create scroll-based interactions and animations
Opacity
Understand and apply opacity for creating transparent effects.
OpenAI API
Integrating OpenAI API with React
parentNode
Access and manipulate parent elements
PHP Basics
Learn the fundamental concepts and syntax of PHP programming.
PHP Import Custom Woo
Importing custom fields into WooCommerce
Pop-up Builder 101
Creating a Pop-up Builder with Beaver Builder
Python Find and Replace
Python find and replace script
Python Installing
Installing Python and setting up your environment
Quadratic Colors
Generate color schemes using RGB values
Querying Multiple Categories (and Tags) in Urls
Querying Multiple Categories (and Tags) in Urls
Radial Gradient
Master the creation of radial gradients for circular color transitions.
Range
Range function to generate an array of numbers within a specified range
React App Trendy Setup
Setting up a React app with Vite, Tailwind, and React Router
React ChatGPT
Build a ChatGPT-powered chat interface using React
Recaptcha
Securing forms with Recaptcha
Redirecting Regex 101
Redirecting Regex 101
Responsive Design
Learn techniques for creating layouts that adapt to different screen sizes.
Responsive Design
Adapt to change
Responsive Grid
Sturdy and Responsive
Role attribute
Enhancing accessibility with roles
Scene Boundry
Scene Boundry
Screen Capture Windows
Screen Capture Windows
Scroll Events
Scrolling and triggering events
Search Bar
Searching all Day, all night
Search Bar Rest API
Creating a Search Bar with Rest API
Search bar UI/UX
Designing a Search Bar
Select field
Dropdown of choices
Self-Consistency
Master the Chain of Symbols technique for advanced AI problem-solving
Servering WP local
How to serve WordPress locally
Serverless Functions
Implementing serverless functions
Setting Up a Serverless Netlify App with Prisma and PlanetScale
Sure, combining and refining the two tutorials you provided can yield a comprehensive guide to setting up a Prisma project with Netlify and serverless func
Setting up Supabase
Adapt to change
Shortcodes Product Attributes
Creating individual shortcodes for each of your custom product attributes
Simple Modal
Flashing back to 2000s
Smooth Scroll in CSS Tutorial
Certainly! Here's your tutorial on implementing smooth scroll in CSS following the format you've provided: --- Smooth Scroll in CSS Tutorial Goal Teach rea
sort() method
Sort arrays in ascending or descending order
Specialized Accordion Templates
Creating specialized accordion templates for each child category
SquareSpace 101
Introduction to SquareSpace
SquareSpace Adding Pages
How to add pages in SquareSpace
SquareSpace Custom CSS
Applying custom CSS in SquareSpace
SquareSpace Designing Pages
Designing pages in SquareSpace
SquareSpace Gallery
Creating galleries in SquareSpace
SquareSpace Page Editing
Editing pages in SquareSpace
SquareSpace Page Panel
Understanding the SquareSpace page panel
SSL Certificates Mismatch
Checking for SSL certificate mismatches
Staging Site to Final Site Migration
How to migrate a WordPress staging site to a live production site
Standard Player Camera Movement
Standard Player Camera Movement
Starting an Astro Project
Starting an Astro Project
Step 1: Create a Separate PHP File
Absolutely! Keeping your code organized is always a good idea, especially if your functions.php is getting crowded. You can place the shortcode code in a s
Step 1: Install a reCAPTCHA Plugin
To install or fix reCAPTCHA on the WordPress login page, you need to ensure the right plugin is installed and properly configured. Here’s a step-by-step gu
Step 1: Install Lucide React
Sure! Lucide React is a React component library for Lucide icons, which is an open-source icon library. It's super handy for adding icons to your React pro
Step 1: Log In and Navigate
Creating a duplicate of a page in Squarespace is like having a clone machine for your website content—it can save you heaps of time, especially if you want
Step 1: Log in to Your Squarespace Account
Absolutely! Accessing and managing images on your Squarespace account is a breeze once you know where to look. Here’s a step-by-step tutorial on how to acc
Step 1: Set Up Your Store
Alright, let's make this super simple, like explaining it to a third grader! We're going to make a shopping page where people can choose sizes (Small, Medi
Step 1: Set Up Your Supabase Project
Implementing user authentication with Supabase is straightforward, and adding Google authentication alongside traditional email/password authentication pro
Step 1: Setting the Table (Initial Setup)
Ah, mixing React into our serverless smoothie? Now that's a recipe for something deliciously modern and interactive! Let's whip up a React app that calls o
Step 1: Understand the Big Picture
Creating conditional templates for WooCommerce categories, where each category displays its products with accordion-style product specs tailored to the cat
SVG Background
Create stunning SVG backgrounds for your website.
Swarm UI
Install Swarm UI on your Mac
Tailwind CSS v4 - Complete Setup Guide
Tailwind CSS v4 - Complete Setup Guide Introduction Tailwind CSS v4 represents a significant evolution from previous versions, introducing a more streamlin
Tailwind Install
Installing Tailwind CSS in React projects
Text Area
Where Text enters
Transformer JS/React
Learn how to implement transformer architecture in modern JavaScript and React applications
Tree of Thoughts
Master the Tree of Thoughts technique for advanced AI problem-solving
useSWR
Let's dive into a tutorial on using useSWR in Next.js, which will simplify fetching and managing data with sleek, automatic data revalidation. What is useS
Using the .includes() Method in React: Searching and Matching Values
Using the .includes() Method in React: Searching and Matching Values React, a popular JavaScript library for building user interfaces, provides a powerful
UX and UI Color Selection Tutorial
UX and UI Color Selection Tutorial In this tutorial, you'll learn how to choose colors, determine the number of colors, and create a color palette for your
Variables and Data Types
Learn about variables and data types in PHP.
Variables in CSS Modules
Explore how to use CSS variables effectively in modular stylesheets.
Vertical Aligning
Techniques for vertically aligning elements in CSS layouts.
View Panels w Num pad
Adapt to change
VS Code (getting started)
Introduction to VS Code
What You'll Need:
Customizing the fonts on your WooCommerce products can really make your online store pop! Here's a step-by-step guide on how to change all the fonts in a W
Woo Cart Page 101
Creating WooCommerce Product Buy Buttons
Woo Category Sorting PHP
Sorting WooCommerce products by category
Woo checkout page
Customizing the WooCommerce checkout page
Woo Commerce Categories 101
Understanding and Using Categories in WooCommerce
Woo Commerce Product Accordion
Creating WooCommerce Product Accordions with Custom Expand/Collapse Behavior
Woo Commerce Product Sorting
Sorting WooCommerce Products by Category
Woo Commerce Recaptcha
How to add reCAPTCHA to WooCommerce
Woo Coupons: Coupon Codes
How to make coupon codes work in WooCommerce (step-by-step)
Woo Create Categories PHP
Creating WooCommerce categories with PHP
Woo Create Categories PHP 202
Creating WooCommerce categories with PHP
Woo CSV & API
Importing CSV and connecting to an API
Woo Custom Archive Product
Customizing the WooCommerce Archive Product Page
Woo Custom Cart
Customizing the WooCommerce Cart Page
Woo Custom Checkout Text
Customizing WooCommerce Checkout Text
Woo Custom Fields 101
Introduction to WooCommerce custom fields
Woo Custom Single Product
Customizing the WooCommerce Single Product Page
Woo Export Orders
How to export WooCommerce orders
Woo Gift Cards
Setting up WooCommerce gift cards
Woo Import Categories 101
Importing categories into WooCommerce
Woo Import CSV
Importing CSV into WooCommerce
Woo License Fix for Cloned Stores
Fix WooCommerce extension licensing issues on cloned or staging stores
Woo Pages Overview
Overview of WooCommerce Pages and how to customize them
Woo Product Accordion Category Page
Creating WooCommerce Product Accordions on a Category Page
Woo Product Attribute Shortcode
Creating a Shortcode for a Product Attributes in WooCommerce
Woo Product Buy Buttons
Creating WooCommerce Product Buy Buttons
Woo Product Catagory Nav
Creating WooCommerce Product Buy Buttons
Woo Product text-input
Adding text input fields to Woo Products
Woo Product Variations
Creating product variations in WooCommerce
Woo Products
Managing Woo Products
Woo Rest API
Creating a WooCommerce Rest API
Woo Stock Quanities Import
Creating WooCommerce Product Buy Buttons
Woo Subcategory Accordion Page
Creating Accordion Tabs for Products in WooCommerce Subcategories
Woo Tier Pricing
Creating WooCommerce Product Buy Buttons
Woo-commerce 101
Introduction to WooCommerce
WordPress Appearance Panel
Navigating the WordPress appearance panel
WordPress customize panel
Using the WordPress customize panel
WordPress dashboard
Overview of the WordPress dashboard
WordPress site identity
Setting up WordPress site identity
WordPress Widgets
Using WordPress widgets
WP Backup Database
How to backup your WordPress database
WP Database User Passwords
How to reset user passwords in WordPress
WP email sending
Setting up email sending in WordPress
WP Git Repo MAMP
How to use Git with MAMP for local WordPress development
WP Import Site
How to import an existing site into a blank WordPress setup
WP page caching
Implementing page caching in WordPress
WP pdf embeds
Embedding PDFs in WordPress
WP tailwindcss 101
Introduction to Tailwind CSS in WordPress
WP Template Child Theme PHP
Creating a child theme with PHP