Logo de Aulaideal

De Adobe Illustrator a Bootstrap 5: ¡De Cero hasta Experto!

DESCRIPCIÓN DEL CURSO DE BOOTSTRAP 5

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.

curso de bootstrap

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.

DESPUÉS DE ESTE CURSO PODRÁS:

  • Aprenderás a integrar Adobe Illustrator con HTML, CSS y Bootstrap.
  • Aprenderás a convertir cualquier diseño creado en ADOBE ILLUSTRATOR en un sitio web responsive.
  • Aprenderás a crear un sitio web en Bootstrap 5.
  • Aprenderás migrar cualquier proyecto, de Bootstrap 4 a Bootstrap 5 de forma exitosa.

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.

Detalles del curso

  • Clases 96
  • Cuestionarios 0
  • Duración 11 horas 20 min
  • Nivel Intermedio
  • Idioma Español
  • Estudiantes 494
  • Certificado Si
  • Evaluaciones Si
Regresar al curso

De Adobe Illustrator a Bootstrap 5: ¡De Cero hasta Experto!

  • Módulo 1: Introducción al curso
  • Módulo 2: Analizando lo nuevo de BOOTSTRAP 5
    • Clase2.1
      Soporte nativo para RTL (parte 1) 09 min
    • Clase2.2
      Soporte nativo para RTL (parte 2) 09 min
    • Clase2.3
      Integrando RFS (Responsive Font Sizes) 13 min
    • Clase2.4
      Integrando Bootstrap Icons (parte 1) 09 min
    • Clase2.5
      Integrando Bootstrap Icons (parte 2) 11 min
    • Clase2.6
      Bienvenido Breakpoint XXL (parte 1) 10 min
    • Clase2.7
      Bienvenido Breakpoint XXL (parte 2) 11 min
    • Clase2.8
      Bienvenido Breakpoint XXL (parte 3) 07 min
    • Clase2.9
      Las nuevas clases de espaciado de columnas (parte 1) 09 min
    • Clase2.10
      Las nuevas clases de espaciado de columnas (parte 2) 07 min
    • Clase2.11
      Entendiendo la nueva API de utilidades 08 min
    • Clase2.12
      Trabajando con la nueva API de utilidades 11 min
    • Clase2.13
      Las nuevas clases CSS que trae Bootstrap 5 09 min
  • Módulo 3: Definiendo detalles antes de convertir
    • Clase3.1
      Instalando las Fuentes para el diseño 02 min
    • Clase3.2
      Gestionando el espacio de trabajo en Adobe Illustrator 07 min
    • Clase3.3
      Trabajando con la herramienta “Selección” y “Zoom” en Adobe Illustrator 10 min
    • Clase3.4
      Definiendo el patron de colores 10 min
    • Clase3.5
      Definiendo el tipo de fuente en Bootstrap 09 min
    • Clase3.6
      Definiendo del tamaño y color del texto 08 min
  • Módulo 4: Creando el encabezado del sitio
    • Clase4.1
      Entendiendo la estructura del encabezado 07 min
    • Clase4.2
      Implementando el componente Navbar 11 min
    • Clase4.3
      Personalizando el componente Navbar 09 min
    • Clase4.4
      Personalizando los enlaces del Navbar 05 min
    • Clase4.5
      Integrando Bootstrap Icons en el Navbar 07 min
    • Clase4.6
      Integrando el enlace “Iniciar sesión” en el Navbar 05 min
    • Clase4.7
      Centrando los enlaces del Navbar 03 min
    • Clase4.8
      Creando el bloque “Bienvenidos” 04 min
    • Clase4.9
      Trabajando con las nuevas clases d-grid y gap 09 min
    • Clase4.10
      Creando columnas responsive con Bootstrap 06 min
    • Clase4.11
      Sobrescribiendo las variables SASS del Navbar 07 min
    • Clase4.12
      Sobrescribiendo las variables SASS del componente Button 09 min
    • Clase4.13
      Implementando las Media queries NATIVAS de Bootstrap 08 min
    • Clase4.14
      Exportando imágenes en Adobe Illustrator para la vista móvil 11 min
    • Clase4.15
      Exportando imágenes en Adobe Illustrator para la vista Escritorio 03 min
    • Clase4.16
      Integrando las imágenes de encabezado con CSS 07 min
    • Clase4.17
      Insertando un capa semi-transparente al encabezado 07 min
    • Clase4.18
      Implementando las nuevas UTILIDADES DE CENTRADO 05 min
    • Clase4.19
      Entendiendo el posicionamiento ABSOLUTO y RELATIVO 09 min
    • Clase4.20
      Entendiendo las nuevas UTILIDADES DE CENTRADO 09 min
    • Clase4.21
      Insertando el logo en el encabezado 05 min
    • Clase4.22
      Definiendo el tamaño del BOTON MOVIL 08 min
    • Clase4.23
      Cambiando el icono del BOTON MOVIL cuando esta activo 11 min
    • Clase4.24
      Personalizando el ICONO INGRESAR 04 min
    • Clase4.25
      Últimos detalles para la sección BIENVENIDOS 12 min
    • Clase4.26
      Creando una utilidad personalizada CSS “ORDEN DE CAPAS” 10 min
    • Clase4.27
      Implementando la utilidad CSS “ORDEN DE CAPAS” 03 min
    • Clase4.28
      Estilizando el MENU DESPLEGABLE 09 min
    • Clase4.29
      Trabajando con media-breakpoint-down() 10 min
  • Módulo 5: Modulo 5 Creando la sección PLAN DE ACCIÓN
    • Clase5.1
      Creando el encabezado del PLAN DE ACCIÓN 10 min
    • Clase5.2
      Creando una linea divisoria REUTILIZABLE con CSS 09 min
    • Clase5.3
      Creando una linea divisoria REUTILIZABLE RESPONSIVE 04 min
    • Clase5.4
      Exportando iconos en formato SVG 05 min
    • Clase5.5
      Insertando las clases CSS para bordes 08 min
    • Clase5.6
      Insertando iconos en formato SVG 03 min
    • Clase5.7
      Insertando el contenido para cada PLAN DE ACCIÓN 06 min
    • Clase5.8
      Insertando el contenido para todos los PLANES DE ACCIÓN 08 min
    • Clase5.9
      Creando las columnas Responsive para los PLANES 03 min
    • Clase5.10
      Creando columnas con ROW-COLUMNS de Bootstrap 03 min
    • Clase5.11
      Creando sombras nativas de Bootstrap 06 min
  • Módulo 6: Creando la sección TE AYUDAMOS
    • Clase6.1
      Creando la estructura de la sección TE AYUDAMOS 07 min
    • Clase6.2
      Trabajando con los INPUT GROUP 06 min
    • Clase6.3
      Exportando una imagen de fondo para la vista Movil 09 min
    • Clase6.4
      Exportando una imagen de fondo para la vista Escritorio 06 min
    • Clase6.5
      Creando una descripción Responsive 06 min
    • Clase6.6
      Diseñando el formulario para la vista Móvil 07 min
    • Clase6.7
      Diseñando el formulario para la vista Escritorio 04 min
    • Clase6.8
      Definiendo espaciados Responsive para la sección 03 min
  • Módulo 7: Creando la sección PROYECTOS
    • Clase7.1
      Creando el encabezado de la sección PROYECTOS 05 min
    • Clase7.2
      Exportando imágenes de cada proyecto 03 min
    • Clase7.3
      Implementando el contenedor fluido de Bootstrap 02 min
    • Clase7.4
      Creando la galería para la vista Móvil 05 min
    • Clase7.5
      Creando las columnas para la vista Escritorio 03 min
    • Clase7.6
      Removiendo el espaciado entre columnas 02 min
    • Clase7.7
      Creando el efecto Hover de los proyectos (parte 1) 09 min
    • Clase7.8
      Creando el efecto Hover de los proyectos (parte 2) 11 min
  • Módulo 8: Creando el PIE DE PÁGINA
    • Clase8.1
      Creando la estructura del pie de página 08 min
    • Clase8.2
      Creando listas nativas de Bootstrap 09 min
    • Clase8.3
      Creando los iconos para REDES SOCIALES 06 min
    • Clase8.4
      Estilizando los iconos para REDES SOCIALES 06 min
    • Clase8.5
      Creando las columnas del PIE DE PÁGINA 10 min
    • Clase8.6
      Columnas responsive para el PIE DE PáGINA 07 min
    • Clase8.7
      Optimizando el PIE DE PÁGINA 05 min
    • Clase8.8
      Creando los créditos del sitio
  • Módulo 9: Retoques finales y despedida
    • Clase9.1
      Optimizando los archivos CSS de Bootstrap (parte 1) 09 min
    • Clase9.2
      Optimizando los archivos CSS de Bootstrap (parte 2) 10 min
    • Clase9.3
      Optimizando los archivos JS de Bootstrap 08 min
    • Clase9.4
      Creando un favicon AVANZADO 10 min

Apasionado por el Diseño y Desarrollo Web desde hace 15 años. Un amante de Wordpress, Bootstrap y de las cosas buenas de la vida.

Comentarios

Promedio

4.3
3 puntuaciones

Evaluación detallada

5
33%
4
67%
3
0%
2
0%
1
0%
  • Admin bar avatar

    Un curso muy enriquecedor!

    El instructor es buenísimo y proporciona mucha información basado en su experiencia. Me agrado mucho el curso y aprendí mucho. gracias

  • Admin bar avatar

    Muy interesantes el diseño que se crea

    Esta genial, he estado haciendo la practica parando el vídeo y practicando, hasta el momento lo he entendido perfecto. Mil gracias, ahí vamos poco a poco.

  • Admin bar avatar

    Extraordinario curso de Bootstrap 5

    Explicación práctica y muy didáctica. Puedo asegurar que la calidad de este curso es mucho mas que recomendable. El contenido es claro, se nota la buena preparación del instructor. Un abrazo Erick!

¿NECESITAS AYUDA INMEDIATA?