Advanced CSS in WordPress: A Design System with Variables + Clamp()

Advanced CSS in WordPress: A Design System with Variables + Clamp()

Tiempo de lectura: 2 minutosThis is especially powerful if you want your web to be consistent, maintainable and responsive without relying on 50 media queries. A design system is not just “that looks nice”. It’s having clear and reusable rules for: No repeat values by all the stylesheet, we’re going to centralize everything in CSS variables and use clamp() … Read more

What are Variables in CSS and How to Use Them

What are Variables in CSS and How to Use Them

Tiempo de lectura: 2 minutosCustom properties in CSS (also called variables) allow you to store reusable values, such as colors, sizes or spacings, to use them in multiple places of the code.If you change the value on a site, it gets updated in all places where it is used. They are especially useful when working on large web projects … Read more

CSS Counter: Creating Elegantly Numbered Lists

CSS Counter: Creating Elegantly Numbered Lists

Tiempo de lectura: < 1 minutoGood morning, today I show you a brief example of how it would be: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link rel=”stylesheet” href=”styles.css”> <title>Numbered List</title> </head> <body> <ul class=”numbered-list”> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </body> </html> By default, as we already know, this returns bullets. If … Read more

How to Dynamically Generate Options for a Select from JSON Data in JavaScript

How to Dynamically Generate Options for a Select from JSON Data in JavaScript

Tiempo de lectura: 2 minutosPhoto by Pixabay In this example, we’ll see how to dynamically generate options for a select element in HTML using JSON data and JavaScript. First, let’s display the array of elements we’ll use as an example: const jsonData = [ { id: 1, name: “NameDevCodelight1” }, { id: 2, name: “NameDevCodelight2” }, { id: 3, … Read more

AJAX Structure with JQuery in JavaScript for Making a POST Call

AJAX Structure with JQuery in JavaScript for Making a POST Call

Tiempo de lectura: 2 minutosPhoto by James Wheeler In this example, I’m going to show a basic structure for making a POST type AJAX request with jQuery in JavaScript. First, we define the parameters of the AJAX request. Here, we set the URL to which we’ll send the request, the type of request which will be POST, and the … Read more

AJAX Structure with JQuery in JavaScript for Making a GET Call

AJAX Structure with JQuery in JavaScript for Making a GET Call

Tiempo de lectura: 2 minutosPhoto by Yaqui Zanni In this example, I’m going to show a basic structure for making a GET type AJAX request with jQuery in JavaScript. First, we define the parameters of the AJAX request. Here, we set the URL to which we’ll send the request, the type of request which will be GET, and the … Read more

Menu in HTML, CSS, and JavaScript

Tiempo de lectura: 2 minutosTo create a horizontal menu with different options that change content based on the selected option, follow these steps. First, create an unordered list (<ul>) representing your menu and give it some styles to remove bullets and set a dark background. Each list item (<li>) represents a menu option and is floated left (float: left) … Read more

HTML, CSS, and JavaScript Menu

HTML, CSS, and JavaScript Menu

Tiempo de lectura: 3 minutosTo create a horizontal menu with different options and change the content based on the selected option, you need to follow these steps. First, create an unordered list <ul> that represents your menu and give it some styles to remove bullets and give it a dark background. Each list item <li> represents an option in … Read more

Interactive Tip Calculator with HTML and JavaScript

Interactive Tip Calculator with HTML and JavaScript

Tiempo de lectura: 3 minutoshtml Copy code In this tutorial, we are going to build an interactive tip calculator that allows users to input their bill amount and desired tip percentage. As users enter these values, the calculator will automatically display the total amount to pay, which can be useful in situations like dining at a restaurant. Here are … Read more