Logo de Aulaideal

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

45 Insertando un capa semitransparente al encabezado

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 avanzando 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 57
  • Cuestionarios 0
  • Duración 5 horas
  • Nivel Intermedio
  • Idioma Español
  • Estudiantes 478
  • 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
  • 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
  • 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” 04 min
    • Clase4.28
      Estilizando el MENU DESPLEGABLE 09 min
    • Clase4.29
      Trabajando con media-breakpoint-down() 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

0
0 puntuación

Evaluación detallada

5
0%
4
0%
3
0%
2
0%
1
0%

¿NECESITAS AYUDA INMEDIATA?