Видео

hola Alex, gran video pero q pasa cuando le das click a alguno de los li, en ese caso se moverá a donde le digas pero nunca se cerrara el menú no dejando ver la pagina! saludos

No tenia ni idea!

Muy bueno. Gracias

Muchas gracias

Amigo, debieras poner el código y compartir lo que sabes. Yo te compartiría mis conocimientos, pero no te conviene. *Soy Proctologo.*

Tengo un problema con la fuente y color de la letra 😣

una maestro de maestros!

Con diferencia, la mejor explicación de intersection observer que he encontrado en español 👍👍👍

Maravilloso! gracias

Hola alex , genial video , es mi caso , para esto usaría js , sería más expresivo , pero igual buen tuto

Hola que curso es el más actual en udemy sobre javascript, para empezar de cero o cual es la ruta correcta.. saludos

Bienvenidos !!

Esta muy cool el menú con las nuevas características de css, buen video >:D

Aprenderás a crear una página web funcional con HTML, CSS y JavaScript, incluyendo un formulario de registro de correo electrónico. Además, aprenderás técnicas modernas de diseño web con CSS y dos formas de publicar tu sitio web en internet. Momentos clave: 00:00 Hoy aprenderás a crear una página web funcional con HTML, CSS y JavaScript, incluyendo registro de email. También aprenderás técnicas modernas de diseño web y cómo subir tu sitio a Hostinger. -El video enseña a adaptar la página web a dispositivos móviles y ofrece la posibilidad de obtener el código fuente al alcanzar ciertas interacciones en el video. -Se detalla el uso de herramientas como un navegador web Mozilla y Visual Studio Code para escribir HTML, CSS y JavaScript, junto con extensiones recomendadas para el editor. -Se explica cómo agregar iconos a la página web, obtener imágenes de Unsplash, y se muestra el proceso de creación de un favicon y de una imagen de computadora para la página. 10:05 El video tutorial se enfoca en la creación de una página web utilizando HTML y CSS, mostrando cómo estructurar la página y aplicar estilos personalizados. Se destaca la importancia de la accesibilidad y la organización del contenido. -La importancia de utilizar normalize.css para asegurar la consistencia de estilos en diferentes navegadores y evitar problemas de visualización. -La inclusión de fuentes personalizadas como Google Fonts para mejorar la apariencia y accesibilidad del sitio web. -La estructuración de la página web con etiquetas HTML y clases CSS, destacando la creación de secciones como Hero y la organización del contenido. 20:11 En este video se muestra cómo ajustar el diseño de una página web utilizando CSS, incluyendo la creación de secciones, estilos de fondo y menús de navegación. -Se explica la creación de menús de navegación personalizados con elementos flexibles y estilos de color y texto, mostrando cómo se ajustan para dispositivos móviles. -Se muestra el uso de propiedades como display grid y grid auto columns para organizar y diseñar secciones de la página de manera estructurada y visualmente atractiva. -Se detalla cómo configurar el contenedor 'Hero' con propiedades de ancho máximo y display grid, así como ajustar el padding a cero para una apariencia específica. 30:16 Se explica detalladamente cómo diseñar filas, títulos, párrafos y botones en una página web, asegurando alineación, espaciado y centrado adecuados. Se muestra la creación de secciones principales con clases específicas y contenido relevante. -Diseño detallado de filas, títulos y párrafos para garantizar una presentación visualmente atractiva y organizada en la página web. -Creación de secciones principales con clases específicas y contenido relevante como subtítulos, párrafos y elementos visuales como iconos e imágenes. 40:22 Estamos utilizando CSS Grid para diseñar un fondo con patrones geniales y luego pasamos a trabajar en la sección de precios de la página. -Diseño de fondo con patrones usando CSS Grid y herramientas como Magic Pattern Design. -Trabajo en la sección de precios de la página, creando tablas y elementos visuales con CSS. -Personalización de estilos y propiedades CSS para mejorar la apariencia y funcionalidad de la página. 50:29 El video muestra cómo aplicar estilos CSS para diseñar una página web, incluyendo la creación de un slider de testimonios con imágenes y texto. -La importancia de utilizar custom properties en CSS para cambiar estilos de manera eficiente y consistente en una página web. -La creación de un slider de testimonios con imágenes y texto, utilizando clases y contenedores específicos en CSS para lograr un diseño atractivo. 1:00:33 Todos los sliders se han ajustado para que tengan un diseño uniforme y se puedan controlar fácilmente a través de botones de navegación. Se ha creado una función para cambiar de posición los sliders de manera dinámica. -Ajuste de diseño uniforme de los sliders para una apariencia consistente y atractiva. -Creación de botones de navegación para controlar los sliders de forma intuitiva. -Implementación de una función dinámica para cambiar la posición de los sliders según la interacción del usuario. 1:10:38 El video explica cómo manejar dinámicamente elementos y clases en un slider en JavaScript, permitiendo agregar o quitar sliders sin romper la funcionalidad. Esto se logra mediante la manipulación de clases y estilos CSS. -La importancia de controlar dinámicamente los elementos en un slider para mantener su funcionalidad al agregar o quitar sliders en JavaScript. -La manipulación de clases y estilos CSS para lograr transiciones suaves al cambiar entre sliders y mantener la animación fluida en la interfaz. 1:20:43 Se muestra cómo modificar un diseño web utilizando Flexbox y CSS para alinear elementos y cambiar estilos. Se explica el proceso detallado de ajustar tamaños y estilos de diferentes elementos en la página. -Uso de Flexbox y CSS para alinear elementos y cambiar estilos en un diseño web. -Ajuste detallado de tamaños y estilos de elementos específicos en la página. 1:30:48 La clase 'question padding' se agrega para proporcionar un padding adecuado a un elemento, ya que 'scroll height' solo da el alto mínimo. Se finaliza el diseño con secciones 'questions offer' y 'fter' con contenido y estilos específicos. -Explicación de la necesidad de la clase 'question padding' para ajustar el padding de un elemento correctamente. -Creación de las secciones 'questions offer' y 'fter' con estilos y contenido específicos para completar el diseño. -Detalles sobre la configuración de estilos como colores, tamaños de fuente y disposición en las secciones 'fter' y 'fter inputs'. 1:40:54 El video muestra cómo diseñar un sitio web responsivo con HTML y CSS, incluyendo ajustes de diseño y funcionalidades interactivas para dispositivos móviles. -Se explica el uso de media queries para adaptar el diseño a dispositivos móviles y la configuración de elementos flexibles con CSS. -Se muestra cómo centrar elementos y distribuir espacios equitativamente utilizando flexbox, junto con ajustes de estilo y posicionamiento. -Se detalla la creación de un menú hamburguesa con transiciones y funcionalidades de apertura y cierre mediante JavaScript. 1:50:57 El video muestra cómo posicionar elementos en una página web utilizando CSS para adaptar el diseño a dispositivos móviles y corregir errores de visualización en diferentes tamaños de pantalla. -El proceso incluye ajustar tamaños de fuentes, distribución de columnas y centrado de elementos para lograr un diseño responsivo y atractivo en dispositivos móviles. -Se detalla la corrección de errores en la visualización de imágenes y contenedores al adaptar el diseño a diferentes tamaños de pantalla, manteniendo la coherencia en el diseño. -Se muestra cómo modificar el ancho y el espaciado de elementos como tablas de precios para garantizar una apariencia uniforme en distintos dispositivos, utilizando propiedades CSS específicas. 2:01:02 El video muestra el proceso detallado de maquetado de una página web, ajustando tamaños, alineaciones y estilos para lograr un diseño visualmente atractivo y funcional. Se utilizan clases y propiedades CSS para personalizar cada elemento de la página. -Personalización detallada de columnas, títulos y espacios en la página web para lograr un diseño visualmente atractivo y organizado. -Ajustes en alineaciones, tamaños de fuentes y márgenes para mejorar la apariencia de los elementos y garantizar la adaptabilidad a diferentes dispositivos. -Configuración de formularios y envío de correos a través de formspree.io utilizando HTML sin necesidad de backend, mostrando el proceso paso a paso. 2:11:07 La creación de metaetiquetas es fundamental para mejorar la visibilidad y presentación de un sitio web en redes sociales como Facebook y Twitter. Es importante entender la diferencia entre Hosting y dominio para publicar un sitio web en internet. -La importancia de las metaetiquetas en la presentación de un sitio web en redes sociales como Facebook y Twitter. -Explicación detallada sobre la creación de metaetiquetas para mejorar la visibilidad en Google y la importancia de Open Graph en redes sociales. -Diferencia entre Hosting y dominio, y cómo se relacionan para publicar un sitio web en internet. 2:21:09 Crear una página web estática en GitHub Pages es un proceso que implica registrarse en GitHub, crear un repositorio, subir archivos y realizar cambios fácilmente. -Importancia de GitHub para colaborar y compartir código con otros programadores. -Pasos detallados para registrarse en GitHub, crear un repositorio y subir archivos. -Realizar cambios en la página web y actualizar el repositorio en GitHub. 2:31:14 Hostinger ofrece certificados SSL gratuitos, dominios gratis y protección contra ataques en sus planes Premium, brindando seguridad y garantía de devolución de dinero en 30 días. Además, se puede obtener un descuento adicional al aplicar un código promocional. -Proceso de configuración de un sitio web en Hostinger, incluyendo la elección de dominio, país, y datos de contacto, así como la instalación de archivos en el Hosting. -Importancia de tener un certificado SSL para garantizar la seguridad del sitio web y cómo forzar la conexión segura HTTPS en Hostinger.

Muy buen video master, estoy aprendiendo de excelente manera con tus videos de css, muchas gracias

Buen video, muy vlaro todo y bien explicado, y si estaría bien que crearas rl menú desplegable con opciones, saludos

Excelente video bro!

No borres el video amigo :p

📘CURSO CSS3 MODERNO (Descuento) 👉 alexcgdesign.com/cssmoderno

29:05

Espero no incomodarlo cual seria la ruta correcta para aprender al 100% javascriot moderno, vea varios cursos en udemy, cual es seria el más actual e como s complementaria, veo muchos otros cursos dicen actualizados en udemy, dándole un vistazo más profundo empiezan con videos de hace 3 años y necesito estar al dia y ala vez tener buena base, espwro su pronta respuesta disculpe nuevamente las molestias....

Muy bueno, esta excelente la explicación. Voy a hacer esta practica. Gracias por compartir.

Espectacular

Espectacular

No me la sabia, gracias

Espectacular

Gracias por compartir tus conocimientos en este video, ha sido muy util para mi

Que simple era un gif animado jaja, espectacular el video, pero creo que los que crean la tecnología se están pasando con la complejidad de las cosas para algo muy simple

No hay cupón de descuento para el curso de CSS Moderno?

Es impresionante lo que haces amigo, realmente eres un grande, me encantan tus videos!

Empieza a parecerse a tailwind

📘CURSO CSS3 COMPLETO (Descuento) 👉 alexcgdesign.com/cursocss

he terminado el curso. sinceramente muy bueno. pensaba iniciar a crear una pagina con html, css y javascript. pero ahora que vi esto de SASS pienso incluirlo tambien. ahorra mucho tiempo y da una forma mas robusta de crear contenido

FIJEN ESTE COMENTARIO 33:11, SI NO LES APARECE LA IMAGEN DE FONDO COMPLEMENTEN EL CODIGO //------------------------------------------------------------------------------------------------ background-image: linear-gradient(rgb(56, 56, 56), rgb(44, 44, 44)), url('../img/bg.jpg'); background-size: cover; /* Ajusta la imagen y el gradiente para cubrir el área */ background-blend-mode: overlay; /* Opcional: mezcla la imagen y el gradiente */ //------------------------------------------------------------------------------------------------ al principio no me mostro nada pero despues agregue el SIZE y el BLEND y funciono bien

q grandeeee..... gracias!!!!

Continua la serie midu porfa

😮 buenas, por eso es que compre tus cursos son pura calidad.

DUDE! 'che explicacion chingona.🤩

Ese diseño se puede realizar solo con hostinger? o es IA de WordPress en general?

Eso me pasa mas pero cuando tengo elementos dentro de un contenedor... me pasa mucho en flexbox y en los grids... por ejemplo puedo tener cualquier tipo de composicion y acomodo, pero en veces me aparece un pequeño relleno asi como en tu ejemplo. y no necesariamente tengo imagenes. ¿a que se debe? la mayoria de las veces lo arreglo reacomodando propiedades pero si me preguntas acerca de un metodo en concreto, no te sabria decir!! jaja chido mi alex!! disfruto tus videos

En cual de tus cursos de udemy tienes este tipo de contenido?

Ya los diseñadores están fuera? Y los programadores front end? 😢

Excelente video. Me parece bien que hagas la versión de ese mismo menú, pero para desktop. Lo busqué y no lo encontré, por lo que supongo no se ha hecho. O no busqué bien. Felicitaciones y muchas gracias por enseñar

buen contenido

buen contenido

Cómo personalizar el input=date?? Para seleccionar fechas?

Que genial, ahora es más fácil modificarlos antes tocaba hasta meter otra propiedades para tener nuevos diseños

Excelente!!

Excelente 🎉