Lo que aprenderás
- Aprenderás a convertir cualquier diseño creado en ADOBE ILLUSTRATOR en un sitio web responsive.
- Aprenderás a exportar correctamente recursos gráficos desde Adobe Illustrator para usarlos dentro de tus proyecto web.
- Aprenderás a crear un sitio web responsive usando toda la magia de Bootstrap 5.
- Aprenderás migrar cualquier proyecto, de Bootstrap 4 a Bootstrap 5 de forma exitosa.
Temario del curso
Módulo 1: Introducción al curso
- ¿Qué aprenderemos en este curso?
- ¿Cómo utilizar los recursos de este curso?
- Descargar recursos usados en este curso
- Instalación de herramientas básicas
- Instalación de extensiones para VScode (parte 1)
- Instalación de extensiones para VScode (parte 2)
- Instalando de Bootstrap usando un CDN
- Instalando de Bootstrap usando los archivos compilados
- Instalando de Bootstrap usando los archivos fuentes
Módulo 2: Analizando lo nuevo de BOOTSTRAP 5
- Soporte nativo para RTL (parte 1)
- Soporte nativo para RTL (parte 2)
- Integrando RFS (Responsive Font Sizes)
- Integrando Bootstrap Icons (parte 1)
- Integrando Bootstrap Icons (parte 2)
- Bienvenido Breakpoint XXL (parte 1)
- Bienvenido Breakpoint XXL (parte 2)
- Bienvenido Breakpoint XXL (parte 3)
- Las nuevas clases de espaciado de columnas (parte 1)
- Las nuevas clases de espaciado de columnas (parte 2)
- Entendiendo la nueva API de utilidades
- Trabajando con la nueva API de utilidades
- Las nuevas clases CSS que trae Bootstrap 5
Módulo 3: Definiendo detalles antes de convertir
Módulo 4: Creando el encabezado del sitio
- Entendiendo la estructura del encabezado
- Implementando el componente Navbar
- Personalizando el componente Navbar
- Personalizando los enlaces del Navbar
- Integrando Bootstrap Icons en el Navbar
- Integrando el enlace «Iniciar sesión» en el Navbar
- Centrando los enlaces del Navbar
- Creando el bloque «Bienvenidos»
- Trabajando con las nuevas clases d-grid y gap
- Creando columnas responsive con Bootstrap
- Sobrescribiendo las variables SASS del Navbar
- Sobrescribiendo las variables SASS del componente Button
- Implementando las Media queries NATIVAS de Bootstrap
- Exportando imágenes en Adobe Illustrator para la vista móvil
- Exportando imágenes en Adobe Illustrator para la vista Escritorio
- Integrando las imágenes de encabezado con CSS
- Insertando un capa semi-transparente al encabezado
- Implementando las nuevas UTILIDADES DE CENTRADO
- Entendiendo el posicionamiento ABSOLUTO y RELATIVO
- Entendiendo las nuevas UTILIDADES DE CENTRADO
- Insertando el logo en el encabezado
- Definiendo el tamaño del BOTON MOVIL
- Cambiando el icono del BOTON MOVIL cuando esta activo
- Personalizando el ICONO INGRESAR
- Últimos detalles para la sección BIENVENIDOS
- Creando una utilidad personalizada CSS «ORDEN DE CAPAS»
- Implementando la utilidad CSS «ORDEN DE CAPAS»
- Estilizando el MENU DESPLEGABLE
- Trabajando con media-breakpoint-down()
Módulo 5: Modulo 5 Creando la sección PLAN DE ACCIÓN
- Creando el encabezado del PLAN DE ACCIÓN
- Creando una linea divisoria REUTILIZABLE con CSS
- Creando una linea divisoria REUTILIZABLE RESPONSIVE
- Exportando iconos en formato SVG
- Insertando las clases CSS para bordes
- Insertando iconos en formato SVG
- Insertando el contenido para cada PLAN DE ACCIÓN
- Insertando el contenido para todos los PLANES DE ACCIÓN
- Creando las columnas Responsive para los PLANES
- Creando columnas con ROW-COLUMNS de Bootstrap
- Creando sombras nativas de Bootstrap
Módulo 6: Creando la sección TE AYUDAMOS
- Creando la estructura de la sección TE AYUDAMOS
- Trabajando con los INPUT GROUP
- Exportando una imagen de fondo para la vista Movil
- Exportando una imagen de fondo para la vista Escritorio
- Creando una descripción Responsive
- Diseñando el formulario para la vista Móvil
- Diseñando el formulario para la vista Escritorio
- Definiendo espaciados Responsive para la sección
Módulo 7: Creando la sección PROYECTOS
- Creando el encabezado de la sección PROYECTOS
- Exportando imágenes de cada proyecto
- Implementando el contenedor fluido de Bootstrap
- Creando la galería para la vista Móvil
- Creando las columnas para la vista Escritorio
- Removiendo el espaciado entre columnas
- Creando el efecto Hover de los proyectos (parte 1)
- Creando el efecto Hover de los proyectos (parte 2)
Módulo 8: Creando el PIE DE PÁGINA
- Creando la estructura del pie de página
- Creando listas nativas de Bootstrap
- Creando los iconos para REDES SOCIALES
- Estilizando los iconos para REDES SOCIALES
- Creando las columnas del PIE DE PÁGINA
- Columnas responsive para el PIE DE PáGINA
- Optimizando el PIE DE PÁGINA
- Creando los créditos del sitio
Módulo 9: Retoques finales y despedida
Descripción
En este curso aprenderás a crear un sitio web moderno y responsive usando todo el Power de Bootstrap 5, a partir de una plantilla creada en Adobe Illustrator.
¿Si estas buscando convertir tus diseños de Adobe Illustrator en un sitios web responsive completamente funcional?, este es el curso que necesitabas.
La habilidad de convertir un diseño a HTML5 y CSS3 es una destreza muy valorada, que todo diseñador o desarrollado web principiante o avanzado debe dominar. Y en este curso te mostraremos como utilizar todas las herramientas que nos brinda Adobe Illustrator para realizar este proceso de conversión, de forma exitosa.
¡Deje de pagarle a otra persona para que transformen tus diseños en sitios Web, hazlo tú mismo!
¿Diseñas plantillas en Adobe Illustrator y tiene que pagar a otra persona para que las conviertan en un sitio web? Si es así, estás desperdiciando dinero. Este curso, te dará todas las habilidades necesarias para convertir esos diseños en páginas completamente funcionales, utilizando Bootstrap 5 como herramienta clave.
¿CÓMO ESTÁ ESTRUCTURADO ESTE CURSO?
Comenzamos instalando toda las la herramientas y programas que utilizaremos en el proceso de diseño y codificación.
Luego analizaremos todas las características que trae Bootstrap 5 y procederemos a realizar la descarga e instalación de este Framework. Ha estas alturas, ya estamos listos para codificar y realizar la conversión.
Paso seguido, evaluaremos el diseño y exportaremos los recursos necesarios, como imágenes e iconos, eligiendo el formato correcto (png, jpg o svg), según la funcionalidad asignada en el sitio web.
Luego, comenzaremos a codificar el diseño, usando la variedad de clases CSS que Bootstrap nos proporciona e implementando el extraordinario Sistema de Columnas (Grid), para conseguir así, un comportamiento responsive consistente, invirtiendo una menor cantidad de tiempo y esfuerzo.
Este es mucho más que un simple curso de conversión de Adobe Illustrator a Bootstrap. Aquí veras todo el proceso completo de migración de un diseño de Adobe Illustrator a una pagina web totalmente Responsive , usando HTML5, CSS3 y Bootstrap 5.
MIRA EL SITIO QUE CONSTRUIRÁS:
Este es un curso práctico y cada cosa que te enseñemos, lo pondrás en práctica en la vida real. Este el sitio web desarrollaremos en este curso:
Mira el proyecto que crearemos en este curso
¿PARA QUIÉN ES ESTE CURSO DE BOOTSTRAP 5?
- Cualquiera que esté interesado en aprender cómo integrar Adobe Illustrator, HTML5 y BOOTSTRAP 5.
- Diseñadores gráficos que desean utilizar Adobe Illustrator como herramienta de diseño web.
- Estudiantes que planean convertirse en diseñadores web.
- Diseñadores web nóveles que buscan adquirir un conjunto nuevo de habilidades.
- Diseñadores y desarrolladores web que buscan aprender a convertir un diseño de Adobe Illustrator en un sitio web totalmente funcional.
Te invito a que veas cualquiera de las clases gratuitas antes de comprar el curso de Bootstrap 5 y estoy seguro que desearás ver el resto de este entrenamiento. También disponemos de varios cursos de Bootstrap que te pueden gustar.
Un saludo y te esperamos dentro del curso.
Cursos Relacionados
Instructor
Erick Mines
- 33 cursos
- 231180 estudiantes
