Tiempo de lectura: 5 minutos Reading time: 2 minutes To create a simple list from an array of objects, you need to follow the steps below: First, create a file with the .html extension, where we’ll create a div with an associated ID that will display the list of elements. The ID for the list, in this case, will be … Read more
Tiempo de lectura: 2 minutos Reading time: 2 minutes Good afternoon! Today I bring you a very cool and interesting tutorial about an element you can use on your website. Let’s get started! A loader button is a functionality that allows users to know when a background task is being processed, such as a request to a server. In this … Read more
Tiempo de lectura: 2 minutos Reading time: 2 minutes Adapting a website to be responsive is a process that involves designing and developing a website that adjusts to different screen sizes and devices, providing an optimal user experience across all of them. In order to adapt a website to be responsive, it is necessary to consider the following steps: Identify … Read more
Tiempo de lectura: 2 minutos Reading time: 2 minutes To create a modal with Bootstrap and HTML, follow these steps: Include the Bootstrap stylesheet in your HTML file. You can do this by downloading the CSS file from the Bootstrap website or including a link to an online version in your HTML file. <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”> Add the HTML code … Read more
Tiempo de lectura: 4 minutos Reading time: 4 minutes To perform unit testing in HTML and JavaScript, you can use any of the following tools: Jest: It is a popular and easy-to-use JavaScript testing tool. You can use it to perform unit testing on your HTML and JavaScript code. Mocha: It is another popular JavaScript testing tool. It allows you … Read more
Tiempo de lectura: < 1 minuto Reading Time: < 1 minute Good morning, to create a spinner (a spinning loading indicator) with HTML and CSS, you can follow these steps: First, create an empty div to which we will later give the appearance of a spinner to add to our projects. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> … Read more
Tiempo de lectura: 2 minutos Reading time: 2 minutes A carousel of images is a common element on most websites and can be easily created using HTML and CSS. Here’s a basic tutorial on how to create an image carousel: Create a basic HTML structure for your carousel. This would include a div tag with a class of “carousel”: <div … Read more
Tiempo de lectura: 2 minutos Reading time: 2 minutes Good afternoon everyone, I’m going to provide you with a tutorial on how to access data: <!DOCTYPE html> <html> <body> <h2>First Example Accessing Data in JSON Format</h2> <p id=”miDiv”></p> <script> var texto = ‘[{“nombre”:”Laura Gonzalez”, “calle”:”Su casa en la montania portal 6″, “telefono”:877436700, “fecha”:”1998-07-25″},{“nombre”:”Pablo Perez”, “calle”:”Su casa en la playa bajo … Read more
Tiempo de lectura: 2 minutos Reading time: 2 minutes If we want to meet the accessibility criteria of the WCAG 2.2 standard, we can use various tools to assist us. One very useful tool is WAVE, available as a web tool and browser plug-in (Firefox/Chrome). It allows us to analyze the web for accessibility errors and offers the following features: … Read more
Tiempo de lectura: 2 minutos Reading time: < 1 minute Good afternoon, everyone! In today’s post, I’m going to share a cool animation with you. It demonstrates what you can achieve with simple div elements. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link rel=”stylesheet” href=”style.css” type=”text/css” /> <title>DevCodeLight</title> </head> <body> <div id=”m”><span>M</span></div> <div … Read more
