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
Tiempo de lectura: 2 minutos Reading time: 2 minutes Good morning, colleagues. Today I have prepared a tutorial on how to perform a series of actions on a form using DOM in JavaScript to access form elements. DOM (Document Object Model) allows dynamic access, modification, deletion, etc., of different elements in an HTML. I’ll provide a very simple example. <!DOCTYPE … Read more
Tiempo de lectura: < 1 minuto Reading time: < 1 minute Good morning, today I’m going to provide you with a tutorial on how to create an automatic image viewer using HTML, CSS, and JavaScript. Firstly, I will show you the project structure. I use Visual Studio Code as my development environment, and I’ll leave the link for you to download ... Read more
Tiempo de lectura: 3 minutos Reading time: 2 minutes A responsive menu means that it is visible on both PCs and tablets and mobile devices. It involves defining breakpoints where you want the view to change without disrupting the content. Below is an example: <!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” … Read more
