Applying responsive design to an HTML, CSS, Javascript website

Applying responsive design to an HTML, CSS, Javascript website

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

Crear un modal con Boostrap

Crear un modal con Boostrap

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

Creating a Spinner with HTML and CSS

Creating a Spinner with HTML and CSS

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

Create an image carousel with viewer using HTML, CSS and Javascript

Create an image carousel with viewer using HTML, CSS and Javascript

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

JSON File Data Access (Simple)

JSON File Data Access (Simple)

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

How to validate your website to meet WCAG 2.2 accessibility criteria

How to validate your website to meet WCAG 2.2 accessibility criteria

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

Animated Divs: Crushed Button Effect with HTML and CSS

Animated Divs: Crushed Button Effect with HTML and CSS

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

Change text input color and Enable/Disable text input with JavaScript

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

Automatic Image Viewer with JavaScript, HTML, and CSS

Automatic Image Viewer with JavaScript, HTML, and CSS

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