Diseño Web Responsive con el Framework Bootstrap 3

Domina el Framework más popular de HTML, CSS y JS y crea Diseños Web 100% profesionales de manera rápida y eficaz.
4.6 (195 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.
834 students enrolled
$20
Take This Course
  • Lectures 47
  • Contents Video: 4 hours
    Other: 5 mins
  • Skill Level Intermediate Level
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2015 Spanish

Course Description

Curso galardonado por Udemy en los "Premios a la Innovación" donde se premió a los instructores de habla hispana más innovadores a la hora de enseñar.

Si estás leyendo esto es porque te interesa diseñar webs de forma rápida, eficaz y profesional. ¿Es así? Pues estás en el sitio correcto:

En este curso aprenderás a utilizar una genial herramienta: Bootstrap 3. Gracias a este potente framework de HTML, CSS y JS podrás crear tus propios diseños web el doble de rápido y con resultados 100% profesionales.

Tanto si te dedicas al diseño web de forma profesional, como si estás emprendiendo y debes crearte un sitio web, Bootstrap 3 te resultará de gran ayuda.

¿CUÁL ES LA VENTAJA PRINCIPAL DE BOOTSTRAP 3?

La razón principal por la que empresas de la talla de Spotify utilizan Bootstrap 3 es porque nos permite crear diseños responsive de forma muy sencilla. Ya no tendrás excusa para que tus sitios web se adapten a todo tipo de dispositivos (smartphones, escritorio o tableta).

¿CÓMO FUNCIONA EL CURSO?

Durante todo el curso utilizo la Metodología de Aprendizaje Learning by Doing. Es decir, desde el minuto 0 del curso nos pondremos manos a la obra con Bootstrap 3, para que aprendas a la par que practicas. Para ello crearás un sitio web formado por un total de 5 páginas.

Para ello crearás un total de 5 páginas web que te permitirán dominar los skills más cruciales de todo Diseñador Web:

TEN EN CUENTA QUE...

  • El curso incluye todo el código fuente para que puedas compararlo con tus progresos.
  • Puedes contar conmigo siempre que lo necesites.
  • Dispones de 30 días de garantía con un reembolso total sin tener que darme explicaciones.
  • Este curso está enfocado a personas normales, no me interesa dar clases a robots, por lo que las explicaciones son para todo el mundo.

Te animo a leer las opiniones de mis grandes alumno/as (puedes verlas más abajo) y a echar un vistazo a las lecciones públicas.

490 alumnos ya han cambiado la forma de crear sus diseño web, ahora es tu turno :)

What are the requirements?

  • Conocimientos muy básicos de HTML y CSS

What am I going to get from this course?

  • Aprender a utilizar el framework Bootstrap 3 a partir de un proyecto real
  • Diseñar el frontend de tus proyectos web el doble de rápido y con resultados 100% profesionales
  • Crear páginas web responsive, adaptables a todo tipo de dispositivos
  • Maquetar un sitio web con HTML y CSS
  • Incluir nuevas fuentes a tus proyectos web utilizando Google Fonts o las populares fuentes de iconos de Font Awesome

What is the target audience?

  • Cualquier diseñador o desarrollador web que quiera ser más eficiente
  • Cualquier persona interesada en aprender Bootstrap 3 de una forma divertida, sin extenderse en rollos teóricos y con resultados visuales en cada lección

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introducción
¿Cómo actuar en caso de dudas?
Article
Bienvenida
Preview
01:44
05:08

En esta clase aprenderás qué es Bootstrap, para qué sirve y por qué va a revolucionar tu vida. El contenido que veremos es:

  • (00:20) ¿Qué es Bootstrap?
  • (0:39) Es Mobile First
  • (01:09) ¿Qué ofrece?
  • (02:08) Antes y después de Bootsrap?
  • (03:02) Ventajas
  • (03:47) Democratización del Diseño Web
  • (04:17) ¿No te gustan sus etilos predefinidos?
  • (04:38) Empresas que usan Bootstrap
04:46

En esta clase puedes ver en detalle el Proyecto Web que vas a desarollar a lo largo del curso. Se trata de un total de 5 págnas web que son:

  • (00:54) Home.html (Página de Promoción del curso)
  • (03:11) Course.html (Página con el Listado del curso)
  • (03:30) Details.hmtl (Página de Detalle de una lección)
  • (03:56) Admin_courses.html (Página de Administración del curso)
  • (04:19) Edit_user.html (Página de Editar mi cuenta)
04:05

En esta lección se detalla como está construido el curso. El contenido que veremos es:

  • (00:15) ¿Este curso me hará rico de la noche a la mañana?
  • (01:08) Learning By Doing
  • (01:56) Duración de las clases
  • (02:22) ¿Qué pasa si te encallas?
  • (03:16) No seas la Wikipedia
¡Examen Sorpresa!
6 questions
Section 2: Puesta a punto del Entorno
02:35

En esta clase aprenderás qué es el wireframing y por qué es tan importante antes de ponernos a escribir una sóla línea de código. El contenido que veremos es:

  • (00:18) ¿Qué es el Wireframing?
  • (01:54) Herramienta online para crear wireframes.
01:08

En esta clase aprenderás a descargarte el Editor de Textos Sublime Text que te permitirá desarrollar el proyecto web del curso.

Aquí tienes el enlace de Sublime Text 3: http://www.sublimetext.com/3

(Recuerda descargarte la versión compatible con tu sistema operativo)

03:04

En esta clase vas a aprender a descargarte Bootstrap 3 y a instalarlo.

Aquí tienes en enlace: http://getbootstrap.com/getting-started/#download

(Recuerda descargarte la primera de las opciones)

01:14

Descárgate el Material del Curso haciendo un clic al archivo: "BootIgniter Udemy Course Files" y sigue las instrucciones del vídeo para preparar de forma correcta el entorno de programación.

¡Examen Sorpresa!
1 question
Section 3: Desarrollo de la página de Promoción del Curso "home.html"
03:07

En esta clase vas a obtener la Plantilla Básica de Bootstrap que te permitirá empezar a desarrollar con Bootstrap a partir de la próxima clase.

Como verás se trata de un código HTML normal y corriente que incluye las llamadas (CSS y JS) al framework de Bootstrap.

08:29

En esta clase vas a definir la estructura general del fichero "home.html" de manera que se refleje cuantas secciones va a tener la página web y despúes el desarrollo sea más eficiente.

Para ello utilizaremos HTML5 para que la página web tenga una buena semántica.

04:24

En esta clase aprenderás a instalar y usar las fuentes web de Google Fonts, para conseguir dar un aspecto más atractivo al proyecto del curso.

Concretamente instalaremos la fuente "Graduate" y "Pacifico" que puedes encontrar en:

https://www.google.com/fonts#UsePlace:use/Collection:Graduate

https://www.google.com/fonts#UsePlace:use/Collection:Pacifico

04:48

En esta clase aprenderás a instalar el pack de fuentes de iconos más popular de la red, Font Awesome.

Su página web oficial es: http://fontawesome.io/

14:26

En esta clase aprenderás a crear Barras de Navegación utilizando Bootstrap.

12:50

En esta clase aprenderás a utilizar los "jumbotron" de Bootstrap para crear la sección de Portada de la página web.

11:37

En esta clase aprenderás a usar el Sistema de Rejillas de Bootstrap (distribución del contenido por filas y columnas responsivas) y a cómo crear imágenes con diseño circular. Todo ello creando una nueva sección para la Página Web llamada "¿Qué voy a Aprender?"

08:06

En esta lección añadirás una nueva sección llamada ¿Quién debería tomar este curso? donde practicaremos de nuevo el sitema de rejillas, las fotografías con estilo circular y los párrafos.

Corrección (Evitar el scroll horizontal y columnas incorrectas)
03:17
06:41

En esta lección desarrollarás una nueva sección de la página web llamada "Características del curso" y gracias a ello aprenderás a utilizar las fuentes de iconos Font Awesome y practicarás de nuevo con el Sistema de Rejillas de Bootstrap.

12:26

En esta clase vas a crear la sección del Instructor en la página web de promoción del curso. Con ello aprenderás a anidar columnas dentro de columnas, pudiendo superar el límite de Bootstrap de las 12 columnas por fila. También aprenderás cómo cambiar el estilo de un elemento en caso de que pasemos el cursor por encima suyo (hover).

05:32

En esta clase añadiremos un vídeo de presentación del curso que estamos promocionando. Por lo tanto, aprenderás a incrustar vídeos de Youtube a una página web de forma responsive.

02:42

En esta clase se creará una sección nueva para la página web que contendrá una llamada a la acción (call to action) y veremos cómo hacer que un botón ocupe todo el espacio de una columna.

03:16

En esta clase aprenderás a crear un pie de página (footer).

09:39

En esta clase aprenderás a usar las ventanas modales de Bootstrap y la usaremos para crear una ventanita para que el usuario pudiera acceder a la aplicación.

10:14

En esta clase crearemos otra ventana modal, esta vez para que el usuario pudiera registrarse en la aplicación.

¡Practica con tu código!
Article
Section 4: Desarrollo de la página Listado del Curso
03:24

Empezamos nueva sección y con ello nueva página web. Esta vez haremos una web para mostrar el listado del curso y lo primero que haremos será reaprovechar todo el código que podamos de la página de promoción del curso.

06:02

En esta clase retocaremos la barra de navegación de manera que simule que un usuario está logueado en la aplicación. Con ello aprenderemos a usar los menús desplegables de Bootstrap.

06:44

En esta clase crearemos el listado del curso. Para crearlo aprenderás a usar los "panels" de Bootstrap y a cómo crear listados de links.

¡Practica con tu código!
Article
Section 5: Desarrollo de la página Detalle de una Lección
02:58

Empezamos una nueva sección y también una nueva página web. Se trata de una página que contendrá los detalles de una lección. Al igual que en casos anteriores el primer paso será reaprovechar todo el código ya hecho que podamos.

03:05

En esta clase añadiremos el vídeo de la lección a la página web.

03:42

En esta lección veremos por primera vez cómo crear un formulario utilizando Bootstrap. Lo haremos creando un formulario para escribir comentarios.

06:01

En esta clase vas a aprender a utilizar los "Media Object" de Bootstrap que nos permitirán maquetar de forma muy sencilla los comentarios y respuestas.

04:38

En esta clase crearemos un formulario para las respuestas y aprenderemos a ocultar y mostrar elementos dentro de una página web utilizando mecanismos ya implementados de Bootstrap.

¡Practica con tu código!
Article
Section 6: Creación de la página Administración del Curso
05:09
En esta sección creamos una nueva página para perfeccionar nuestra técnica. En este caso crearemos una página web que serviría para administrar el curso. ¡Así que empezaremos reaprovechando código!
12:22
En esta clase aprenderás a crear menús de navegación con pestañas (tabs) utilizando Bootstrap.
06:36

En esta clase crearemos el listado que permitiría editar el curso. Lo haremos reaprovechando código de una sesión previa.

03:08

En esta clase crearemos un formulario de Bootstrap muy sencillo que serviría para añadir una nueva sección al curso.

06:06

En esta lección crearemos un formulario de Bootstrap que permitiría al instructor añadir una nueva clase.

¡Practica con tu código!
Article
Section 7: Desarrollo de la página Editar mi Cuenta
02:02

Empezamos a crear la última página web del curso. Ésta serviría para editar los detalles de la cuenta de un usuario registrado.

08:49

Para acabar la página aprenderás a crear un formulario de tipo horizontal de Bootstrap.

¡Practica con tu código!
Article
Section 8: Despedida
Recapitulando
01:43
SiliCodeValley: videolecciones semanales gratuitas sobre Diseño y Desarrollo Web
Preview
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

David Perálvarez, Diseñador y Desarrollador Web e Instructor Online

Soy David Perálvarez, de formación Ingeniero técnico en Informática de Sistemas Master in Computer Vision and Artificial Intelligence y en la actualidad me dedico a diseñar y desarrollar sitios web de forma freelance en Barcelona (España).

Llevo focalizado en el diseño y desarrollo de aplicaciones y sitios web más de 6 años. Asimismo, durante este tiempo he sido (y sigo siendo) emprendedor, he cofundado varias startups de base tecnológica, donde alguno de los proyectos ha sido utilizado por miles de personas de distintos países.

Además ejerzo como Profesor Asociado en un máster universitario de la Universidad Abat Oliba de Barcelona.

Por último, me encanta aprender cosas nuevas y compartirlas con todo el mundo. A parte de mis cursos de Udemy, en SiliCodeValley publico artículos y más videolecciones gratis para aquellas personas que quieran emprender un nuevo camino en el rubro del diseño y desarrollo web.

Ready to start learning?
Take This Course