Master en CSS Extremo: Retos creativos y dibujos con código
Domina CSS3 con esta nueva metodología de aprendizaje: Dibujar con CSS ¡Si! Más de 20 dibujos usando sólo CSS explicados
4.92 (32 reviews)
374
students
11.5 hours
content
May 2025
last update
$79.99
regular price
Why take this course?
¡Parece una propuesta de curso muy completa y atractiva! A continuación, te detallo cómo podrías estructurar este curso tanto en línea como de forma presencial, teniendo en cuenta las recomendaciones que has mencionado. Además, te daré un ejemplo de cómo podrías comenzar a maquetar uno de los personajes que mencionaste utilizando HTML y CSS. peculio education
Estructura del Curso "Desarrollo Front-End Avanzado con CSS: Dibujo Creativo y Maquetación Web"
Objetivos del Curso:
- Adquirir y dominar las habilidades avanzadas de HTML5 y CSS3.
- Aplicar la metodología BEM para la organización y mantenimiento del código CSS.
- Implementar animaciones y efectos visuales complejos utilizando CSS y JavaScript.
- Estudiar casos prácticos mediante el rediseño de personajes populares con tecnologías web modernas.
- Contribuir en el mercado laboral como desarrollador front-end o en proyectos de diseño web.
Duración del Curso: 6.5 horas aproximadamente
- Repartidas en más de 50 clases en vídeo, con ejercicios prácticos y retos.
Contenido del Curso:
-
Introducción a HTML y CSS:
- Estructura básica de un documento HTML.
- Tag semánticos y su uso correcto.
- Introducción a CSS y estilos en línea, en hojas y anidados.
-
Mejores Prácticas y Herramientas:
- Uso de un entorno de desarrollo como Visual Studio Code.
- Instalación y configuración de sistemas de control de versiones (por ejemplo, Git).
-
Habilidades Avanzadas con CSS:
- Flexbox y su uso para diseño responsivo.
- CSS Grid Layout y cómo organizar el layout más complejos.
- Transiciones, transformaciones y animaciones con CSS o JavaScript.
- Pseudoselectores avanzados y combinadores de clases (BEM).
-
Proyectos Prácticos:
- Incremental diseño y maquetación de personajes (por ejemplo, un personaje de un videojuego o serie popular).
- Aplicación de animaciones y transiciones para dar vida a los elementos.
- Optimización del rendimiento y accesibilidad del sitio web.
-
Revisión y Proyecto Final:
- Repaso completo de todos los conceptos aprendidos.
- Desarrollo de un proyecto final que demuestre todas las habilidades adquiridas.
-
Soporte y Dudas:
- Foros de discusión y soporte técnico.
- Asistencia personalizada para resolver dudas y problemas al enfrentarlos.
Herramientos Necesarios:
- Editor de código (por ejemplo, Visual Studio Code).
- Navegador web actualizado (Chrome, Firefox, etc.).
- Acceso a un entorno de versionado como Git y repositorios en la nube (GitHub, GitLab, Bitbucket).
- Maquetador de diseño web (opcional pero recomendado, como Figma o Adobe XD).
Ejemplo de Cómo Maquetar un Personaje con HTML y CSS: Mickey Mouse
Para comenzar a maquetar a Mickey Mouse utilizando HTML y CSS, primero debemos estructurar el documento HTML para definir la anatomía del personaje. Luego aplicaremos los estilos con CSS. A continuación, te muestro cómo podrías empezar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mickey Mouse con CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="mickey-mouse">
<!-- Cabeza -->
<div class="head"></div>
<!-- Ojos -->
<div class="eyes"></div>
<!-- Nariz -->
<div class="nose"></div>
<!-- Hace un cuadrado para la boca, pero en CSS aplicaremos una transformación para representarla correctamente -->
<div class="mouth square"></div>
<!-- Cuerpo -->
<div class="body"></div>
<!-- Bótenes -->
<div class="shoes"></div>
<!-- Oídos opcionales -->
<div class="ears"></div>
</div>
</body>
</html>
En el archivo styles.css, comenzaríamos definiendo las clases con los respectivos selectores y propiedades:
.mickey-mouse {
width: 200px;
height: 350px;
background-color: #f5de5d;
position: relative;
}
.head {
width: 100%;
height: 150px;
background-color: #e8992c;
border-bottom: 30px solid #ed7d36;
}
.eyes {
position: absolute;
top: 40%;
left: 50%;
width: 50px;
height: 25px;
background-color: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.eyes:nth-child(1) {
top: 35%;
background-color: #bbb; /* Ojo izquierdo con sombra */
}
.nose {
position: absolute;
top: 60%;
left: 50%;
width: 20px;
height: 30px;
background-color: #bbb;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.mouth.square {
position: absolute;
top: 17.5%;
left: 50%;
width: 80px;
height: 80px;
background-color: #e8992c;
border-radius: 50%;
transform: scale(0.6);
transform-origin: bottom right;
}
.body {
position: absolute;
top: 275px;
left: 50%;
width: 100%;
height: 35px;
background-color: #f5de5d;
border-radius: 0 0 45%, 45%;
}
.shoes {
position: absolute;
bottom: -25px;
left: 50%;
width: 80px;
height: 60px;
background-color: #bbb;
border-radius: 25% / 50% 50%;
}
.ears {
position: absolute;
top: -70px;
left: 65px;
width: 40px;
height: 25px;
background-color: #fff;
border-radius: 50%;
transform: rotate(45deg);
}
Este es un ejemplo básico y se pueden agregar más detalles y animaciones para hacerla más realista. A medida que avanzan en el curso, podrás aplicar técnicas más complejas de CSS para mejorar la representación del personaje y agregar interacción mediante JavaScript.
Este esquema del curso y el ejemplo de cómo comenzar a maquetar un personaje con HTML y CSS son puntos de partida para los estudiantes. Asegúrate de proporcionar recursos adicionales, ejemplos en vivo y soporte técnico para que los participantes puedan comprender y aplicar estas tecnologías para crear representaciones digitales de personajes icónicos como Mickey Mouse.
Course Gallery
Loading charts...
5729876
udemy ID
26/12/2023
course created date
05/01/2025
course indexed date
Bot
course submited by