Crea páginas web responsive con Bootstrap
4.5 (249 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,298 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Crea páginas web responsive con Bootstrap to your Wishlist.

Add to Wishlist

Crea páginas web responsive con Bootstrap

Aprende a crear páginas web multipantallas con HTML5, CSS3 y Bootstrap para que se adapten a cualquier dispositivo
4.5 (249 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,298 students enrolled
Last updated 8/2017
Spanish
Current price: $15 Original price: $100 Discount: 85% off
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Aprenderás a construir el diseño web adaptable desde cero en un programa de diseño vectorial como Illustrator.
  • Aprenderás el sistema de columnas que maneja Bootstrap para que cada caja HTML se adapte a cualquier dispositivo.
  • Aprenderás a integrar cualquier diseño sobre la estructura creada en Bootstrap.
  • Aprenderás a utilizar los recursos interactivos que trae Bootstrap.
  • Aprenderás a interpretar e intervenir cualquier plantilla que descargues de internet construida en Bootstrap.
View Curriculum
Requirements
  • El estudiante debe tener conocimientos previos de HTML5 y CSS3, y descargar el material de apoyo que lo encuentras en la clase N1
Description

¿DE QUÉ SE TRATA EL CURSO?

Hoy en día todas las páginas web deben ser construidas para ser visualizadas correctamente en cualquier dispositivo, ya sea un móvil, una tablet o un computador. 

Este curso te va ayudar a crear páginas web que se adapten a cualquier dispositivo. Esta práctica la conocemos como "Responsive Web design" (Diseño Web Responsivo) y aprenderás a trabajar con el Framework más importante del diseño responsivo llamado Bootstrap, creado por los desarrolladores de Twitter.

¿CÓMO ES EL CURSO?

El curso se divide en varias secciones. En una primera sección aprenderemos a construir el diseño web adaptable desde cero en un programa de diseño como Illustrator. Luego pasaremos a conocer el sistema de columnas que maneja Bootstrap para que cada caja HTML se adapte a cualquier dispositivo. Comenzaremos a crear una maquetación web de acuerdo al diseño preestablecido y finalizaríamos esta sección con la creación del Wireframe, incluyendo los recursos interactivos que trae Bootstrap.

En la última sección de este curso integraríamos el diseño con cada uno de los gráficos que exportamos de Illustrator.

¿CUÁNTO SE TARDA EN COMPLETAR EL CURSO?

Depende de ti. Estimo que menos de una semana puedes completar el curso, pero dependerá de tu ritmo de trabajo y de tu disponibilidad.

¿CUÁLES SON LOS REQUISITOS?

Descargar el material que se encuentra en los recursos de la clase 1. Tener principios en HTML5 y CSS3, curso gratuito que puede realizar en UDEMY: "Aprende HTML5 y CSS3 desde cero".

¿A QUIÉN VA DIRIGIDO ESTE CURSO?

Este curso va dirigido a diseñadores gráficos, desarrolladores web, personas que quieran actualizar su conocimiento en la construcción de sitios web, personas que más adelante quieran crear aplicaciones nativas para dispositivos, personas que que más adelante deseen crear plantillas para Joomla o Wordpress.

Who is the target audience?
  • Este curso de Bootstrap va dirigido a diseñadores y desarrolladores que web que necesitan aprender a crear páginas web que se adapten a cualquier dispositivo.
Curriculum For This Course
28 Lectures
03:54:22
+
Planeación y diseño
3 Lectures 23:19

Bienvenidos a este curso de crear páginas web responsive con Bootstrap, vamos a aprender paso a paso la construcción de un sitio responsivo desde su fase de diseño hasta la fase de integración. Recuerda descargar el material de apoyo de todo el curso en los recursos de esta clase.

Preview 04:47

En esta clase vamos a analizar los archivos que se deben crear en esta fase de planeación y diseño. Emprezando por la creación de columnas para cada pantalla, pasando por la construcción del Wireframe y terminando en la propuesta del diseño.

Preview 08:45

Continuamos con la fase de planeación y diseño.

Preview 09:47

Vamos a demostrar lo aprendido en esta sección.

Sección Planeación y Diseño
1 question
+
Bootstrap
3 Lectures 27:58

En esta clase analizaremos cómo funciona el sistema de columnas que utiliza bootstrap. Cuáles son los puntos de quiebre y sus respectivas medidas.

Bootstrap Sistema de Columnas - parte 1
08:19

Continuamos con la construcción de columnas.

Bootstrap Sistema de Columnas - parte 2
09:46

Continuamos con la construcción de columnas.

Bootstrap Sistema de Columnas - parte 3
09:53

En este examen pondremos a prueba lo aprendido en esta sección.

Sección Columnas Bootstrap
2 questions
+
Maquetación de cajas
3 Lectures 29:00

Esta primera fase de maquetación es muy importante para identificar la posición y el tamaño de cada una de las cajas que componen el sitio web.

Maquetación de Cajas - parte 1
09:40

Continuamos con la maquetación de las cajas.

Maquetación de Cajas - parte 2
09:39

Continuamos con la maquetación de las cajas.

Maquetación de Cajas - parte 3
09:41
+
Wireframe
3 Lectures 29:26

El wireframe es el esqueleto de la página web y en él puedo visualizar la estructura del sitio web completa. En estas clases a continuación comenzaremos a construir el wireframe con los textos e imágenes auxiliares.

Wireframe - parte 1
09:39

Continuamos con la construcción del wireframe.

Wireframe - parte 2
10:02

Continuamos con la construcción del wireframe.

Wireframe - parte 3
09:45
+
Recursos de Bootstrap
10 Lectures 01:21:16

Bootstrap trae varios recursos para la construcción de una barra de navegación adaptable a cualquier pantalla. En esta clase vamos a construir una barra de navegación con la ayuda de Bootstrap. 

Botonera Móvil de Bootstrap
06:52

En esta clase aprenderemos a construir un Slide interactivo con los recursos de Bootstrap.

Slide interactivo de Bootstrap
09:56

En esta clase construiremos la sección de la página web.

Sección de Wireframe
08:52

Bootstrap ofrece una serie de opciones para la creación de botones standar para ubicar en cualquier parte del sitio web.

Botones de Bootstrap
07:05

Finalizaremos la construcción de la sección del sitio web con la creación de la galería de imágenes.

Construyendo la Galería
10:02

Bootstrap trae en sus recursos la opción de crear contenido Modal, es decir, contenido flotante sobre la página, ideal para construir galería de imágenes tipo lightbox, y artículos flotantes.

Efecto modal con Bootstrap - parte 1
09:00

Continuamos aprendiendo más acerca del efecto modal.

Efecto modal con Bootstrap - parte 2
10:02

Creamos la sección de videos.

Creando la sección de videos
03:26

En esta clase aprenderemos a utilizar el estilo de formularios que nos ofrece Bootstrap.

Creando formularios de Bootstrap
09:19

En esta clase finalizaremos la construcción del Wireframe.

Terminando de organizar el Wireframe
06:42
+
Integrando el diseño
6 Lectures 43:38

Luego de finalizar el wireframe, comenzaremos a integrar las piezas gráficas definitivas del sitio web.

Integrando el Diseño - parte 1
09:27

Continuamos con la integración del diseño.

Integrando el Diseño - parte 2
08:46

Nos acercamos al final de este curso, terminando de integrar el diseño e invitando a profundizar más en el lenguaje de programación JavaScript.

Despedida
09:00

En esta clase aprenderemos a crear un scroll animado que navegue por cada una de las secciones del sitio web. Este es un recurso creado exclusivamente con JQUERY; no hace parte de los recursos de Bootstrap.

Bonus - parte 1
10:02

Felicidades! ya tiene un sitio web construido con el sistema de columnas de Bootstrap. Lo invito a que continúe aprendiendo más acerca del desarrollo web, esta es una disciplina en crecimiento y en constantes actualizaciones.

Bonus - parte 2
05:26

Clase extra!
00:57
About the Instructor
Juan Fernando Urrego
4.5 Average rating
3,604 Reviews
15,567 Students
8 Courses
Diseñador Visual y Desarrollador Web

Mi nombre es Juan Fernando Urrego, soy profesional en Diseño Visual y Especialista en Administración de la Informática Educativa. Dedicado tiempo completo a la docencia en Desarrollo Web, Diseño Interactivo, Animación 3D e Ilustración. Fundador del portal de cursos Tutoriales a tu Alcance. Soy un convencido de que la internet es la oportunidad del conocimiento, la educación y los empleos del futuro.