Scribd
Cargar
57 vistas7 páginas

Ejercicios HTML Css Js Avanzados

El documento presenta una serie de ejercicios avanzados en HTML, CSS y JavaScript, incluyendo la creación de páginas web responsivas, formularios con validación, animaciones, y sistemas de pestañas. Cada ejercicio incluye una solución en código, proporcionando ejemplos prácticos para implementar funcionalidades como un lightbox, un carrito de compras y un reloj digital. Estos ejercicios están diseñados para mejorar las habilidades de desarrollo web del usuario.

Cargado por

MENDOZA BERMUDEZ ALAN JESUS
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
57 vistas7 páginas

Ejercicios HTML Css Js Avanzados

El documento presenta una serie de ejercicios avanzados en HTML, CSS y JavaScript, incluyendo la creación de páginas web responsivas, formularios con validación, animaciones, y sistemas de pestañas. Cada ejercicio incluye una solución en código, proporcionando ejemplos prácticos para implementar funcionalidades como un lightbox, un carrito de compras y un reloj digital. Estos ejercicios están diseñados para mejorar las habilidades de desarrollo web del usuario.

Cargado por

MENDOZA BERMUDEZ ALAN JESUS
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 7

Ejercicios de HTML, CSS y JavaScript Avanzados

## Ejercicios Avanzados:

1. Crear una página web responsiva que se adapte a diferentes tamaños de pantalla utilizando solo

HTML y CSS.

2. Crear un formulario con validación de campos (nombre, correo y teléfono) usando JavaScript.

3. Crear una animación que muestre un texto deslizándose de derecha a izquierda utilizando solo

CSS.

4. Crear una página web con un "lightbox" (caja de luz) para mostrar imágenes ampliadas cuando

se haga clic sobre ellas.

5. Crear una lista de productos donde cada producto se puede añadir al carrito de compras. Al

hacer clic en el carrito se debe mostrar el contenido.

6. Implementar un reloj digital en tiempo real utilizando JavaScript.

7. Crear una página de login con validación de usuario y contraseña (con validación visual de si son

correctos o no).

8. Crear un sistema de pestañas (tabs) donde se pueden mostrar diferentes secciones de contenido

al hacer clic en las pestañas.

9. Crear un menú de navegación fijo (sticky) que permanezca visible mientras se desplaza por la

página.

10. Crear un "scroll infinito" que cargue más contenido cuando se llegue al final de la página.

## Soluciones:

1. **Página Web Responsiva:**

**Solución:**
```html

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Web Responsiva</title>

<style>

body {

font-family: Arial, sans-serif;

header {

background: #333;

color: white;

padding: 10px 0;

text-align: center;

nav {

display: flex;

justify-content: space-around;

background-color: #444;

nav a {

color: white;

padding: 10px 15px;

text-decoration: none;

}
@media screen and (max-width: 600px) {

nav {

flex-direction: column;

</style>

</head>

<body>

<header><h1>Bienvenidos a mi página responsiva</h1></header>

<nav>

<a href="#">Inicio</a>

<a href="#">Sobre nosotros</a>

<a href="#">Contacto</a>

</nav>

<main>

<h2>Contenido principal</h2>

<p>Esta es una página responsiva.</p>

</main>

</body>

</html>

```

2. **Formulario con validación con JavaScript:**

**Solución:**

```html

<form id="contactForm">

<label for="name">Nombre:</label>
<input type="text" id="name" name="name"><br><br>

<label for="email">Correo electrónico:</label>

<input type="email" id="email" name="email"><br><br>

<label for="phone">Teléfono:</label>

<input type="tel" id="phone" name="phone"><br><br>

<button type="submit">Enviar</button>

</form>

<script>

document.getElementById("contactForm").addEventListener("submit", function(event) {

event.preventDefault();

const name = document.getElementById("name").value;

const email = document.getElementById("email").value;

const phone = document.getElementById("phone").value;

if (name === "" || email === "" || phone === "") {

alert("Todos los campos son obligatorios.");

} else {

alert("Formulario enviado correctamente.");

});

</script>

```

3. **Animación de texto deslizante con CSS:**

**Solución:**

```html

<div class="scroll-text">¡Este es un texto que se desliza de derecha a izquierda!</div>

<style>
.scroll-text {

width: 100%;

white-space: nowrap;

overflow: hidden;

font-size: 24px;

.scroll-text {

animation: scroll 10s linear infinite;

@keyframes scroll {

0% { transform: translateX(100%); }

100% { transform: translateX(-100%); }

</style>

```

4. **Implementar un lightbox para imágenes:**

**Solución:**

```html

<a href="img1_large.jpg" class="lightbox">

<img src="img1.jpg" alt="Imagen 1">

</a>

<style>

.lightbox {

display: block;

width: 300px;

}
.lightbox img {

width: 100%;

cursor: pointer;

</style>

<script>

const lightboxImages = document.querySelectorAll('.lightbox');

lightboxImages.forEach(img => {

img.addEventListener('click', function(event) {

event.preventDefault();

const imgSrc = this.href;

const overlay = document.createElement('div');

overlay.classList.add('overlay');

const fullImg = document.createElement('img');

fullImg.src = imgSrc;

overlay.appendChild(fullImg);

document.body.appendChild(overlay);

overlay.addEventListener('click', () => {

overlay.remove();

});

});

});

</script>

```

5. **Lista de productos y carrito de compras:**

**Solución:**
```html

<div>

<h2>Productos</h2>

<ul id="productList">

<li>Producto 1 <button onclick="addToCart('Producto 1')">Añadir al carrito</button></li>

<li>Producto 2 <button onclick="addToCart('Producto 2')">Añadir al carrito</button></li>

<li>Producto 3 <button onclick="addToCart('Producto 3')">Añadir al carrito</button></li>

</ul>

<h3>Carrito de compras</h3>

<ul id="cart"></ul>

</div>

<script>

let cart = [];

function addToCart(product) {

cart.push(product);

document.getElementById("cart").innerHTML = cart.map(item => `<li>${item}</li>`).join("");

</script>

```

[Agregar más soluciones para el resto de los ejercicios]

También podría gustarte