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: < 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: 3 minutos Reading time: 3 minutes Hello, today I bring you some useful CSS tricks that you can use in your projects: Hide content: Sometimes you may want to hide certain content on your website without removing it from the HTML code. To do this, you can use the display: none; property. This will hide the element … Read more
Tiempo de lectura: 2 minutos Reading Time: 2 minutes Hello! In this tutorial, I’ll show you how to create a CSS animation in WordPress. CSS animations can add dynamism and life to your website and are relatively easy to implement. To get started, you’ll need to access your WordPress dashboard and create a new post or page. Once you’ve entered … 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: < 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
