Bootstrap 3 Para Principiantes: Aprende Desde Cero
3.8 (12 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.
44 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Bootstrap 3 Para Principiantes: Aprende Desde Cero to your Wishlist.

Add to Wishlist

Bootstrap 3 Para Principiantes: Aprende Desde Cero

Como Hacer Una Pagina Dinamica que pueda funcionar en Computadorar, tabletas, y celulares desde cero con Bootstrap 3.
3.8 (12 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.
44 students enrolled
Created by Oscar Ogando
Last updated 12/2014
Spanish
Current price: $10 Original price: $20 Discount: 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4.5 hours on-demand video
  • 2 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Van a poder hacer una pagina web completa usando Bootstrap, HTML5 y CSS3
  • Van a tener un Conocimiento de como Hacer pagina web con Bootstrap
  • Van a Conocer todo lo que tiene Bootstrap desde adentro
  • Pagina Web Para Tabletas
  • Pagina Web Para Celulares
  • Vas Aprender a usar La Libreria Bootstrap 3
View Curriculum
Requirements
  • Tienen Que Bajar Notepad ++ Es GRATIS!!
  • Yo Le voy a Enseñar Donde Bajar Notepad ++ y Bootstrap
  • Bajar Opera Mobile Emulator
Description

En este curso vas a aprender a usar la libreria de Bootstrap que fue diseñada por Twitter. Bootstrap nos permite hacer pagina web dinamicas, osea que funcionen y que interactuen en celulares, tabletas y computadoras de la misma manera. En el transcurso de este curso vamos a crear una pagina web desde cero. Al final del curso le voy a enseñar como hacer 4 paginas diferente con bootstrap, en la que van a tener slideshow y muchas cosas mas. Al Final vas a crear una pagina web completa y vas a mandarmela a mi correo electronico. hare un video en la que presentare tu pagina web para y los usuarios decidiran quien es el ganador dejando comentarios para votar. Voy a dar 15 premios. Los premios van hacer cupones para mi proximo curso de "como hacer una plantilla wordpress con Bootstrap." Lo Videos Estan Divididos en Capitulos y por Cada Capitulo vamos hacer un Projecto y un Examen. Estos Son Los Capitulos:

  1. •Cuadrillas
  2. •Tablas
  3. •Colunmas
  4. •Typografia
  5. •Formularios
  6. •Butones
  7. •Bonos
  8. Javascript
Who is the target audience?
  • Este Curso es Apto para Aquellos que Quieren Aprender HTML y CSS
  • Para Aquellos que quieren Aprender Bootstrap
  • Aquellos que Quieran Hacer Paginas Web Dinamicas
  • Aquellos que quieren Hacer Pagina Web Para Tabletas Y Celulares Mobiles
  • Aquellos que quieran aprender mas sobre HTML5 y CSS3
  • Aquellos Que Quieran Aprender Todo Sobre Bootstrap
Students Who Viewed This Course Also Viewed
Curriculum For This Course
39 Lectures
04:21:12
+
Introducción
3 Lectures 13:52

Te Explico Quien Soy como tambien le doy una pequeña introduccion a HTML5, CSS3, Bootstrap y El Curso

Que Vamos Hacer
04:51

Vamos a Crear Folders Como tambien Vamos a Bajar Opera Mobile Operator, Bootstrap y Notepad ++

Preview 03:24

+
CSS - Cuadrícula responsiva
7 Lectures 50:12
Que es HTML y CSS
3 questions

—<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Cuadricula - Empiladas Horizontal
08:56

—No quieren que sus columnas simplemente se apilan en los dispositivos más pequeños?

Utilicen —La cuadrícula pequeñas y medianas

Preview 05:34

Ahora Vamos a —diseñar Cuadriculas más dinámicas y de gran alcance con la tableta

Cuadricula - Móvil, Tableta y Computadora
04:20

Columnas Compensatorias
06:52

—Mover las columnas hacia la derecha con .col-md-offset *

—Estas clases aumentan el margen izquierdo de una columna

—Cambie fácilmente el orden de cuadriculas

—Con columnas .col-md-push * y .col-md-pull *—

Agregar Contenido con la red por defecto, añadir un nuevo .row

—un conjunto de .col-SM- * y columnas dentro de un existente .col-SM- *

Columnas - Pull & Push, Y Jerarquización
10:09

Introducion a Cuadriculas
05:32

Vamos a usar Lo que Aprendimos para hacer una pagina web con tan solo cuadrillas para que pueda funcionar en Computadoras, Tabletas, y Celulares

Preview 08:49
+
Tipografía En Bootstrap
7 Lectures 49:40

Donde se inserta la Meta Etiqueta?

Que Aprendiste De Cuadriculas
4 questions

Todos los títulos HTML, <h1> a <h6>, están disponibles. .h1 a través de clases .h6 también están disponibles, para cuando se desea para que coincida con el estilo de letra de una partida, pero aún desea que su texto que se mostrará en línea

Titulos con Bootstrap - De <h1> a <h6>
06:22

Como detacar, borrar, y hacer un parrafo mas pequeño de lo que es. Es un Simple Video tutorial pero muy util

Parrafos Con Bootstrap - Destacar, Borrar Y Pequeñas
06:38

Mas Parrafos Con Bootstrap - Negrita, Alinacion y Transformacion
09:41

Mas Parrafos Con Bootstrap - Abreviatura, Siglas, y Bloques
08:50

Codigo en Bootstrap - En linea, Usuario, y Variables
07:34

Proyecto 1.1 - Direcciones
06:13

Vamos Hacer una carta de direciones usando lo que aprendimos anteriormente.

Proyecto General 2 - Pagina Web
04:22
+
Tablas En Bootstrap
3 Lectures 18:40

parrafos, negritas, borrar, pequeñas y Destacar

Que has Aprendido?
3 questions

Para el relleno básico estilo-luz y sólo horizontales divisores añadir la clase base .table a cualquier <table>. Puede parecer muy redundante, pero dado el uso generalizado de las mesas para otros plugins como calendarios y selectores de fecha, hemos optado por aislar a nuestros estilos de tabla personalizado.

Tabla Basica y Con Bordes
06:49

Añade .table-hover para permitir a un estado hover en filas de la tabla dentro de un <tbody>.

Tablas Con Efecto Hover
05:00

Utilice las clases contextuales para colorear filas de la tabla o celdas individuales. Este es un buen tutorial de como darle colores a su fila como tambien como a su celdas en la tabla!! disfrutenlo!!

Tablas Con Color
06:51
+
Formularios Con Bootstrap
6 Lectures 50:13

Que Aprendiste en la seccion de Tablas. Te Voy Hacer Unas Cuantas Preguntas Para ver si Pretaste atencion

Que Aprendiste De Las Tablas?
4 questions

Vamos a Poner dos Areas de Texto, Una Para Poner Tu Email y El Otro para Tu Contraseña, Tambien como Para Subir un Archivo. Use Estas Etiquetas <input>, <textarea><select>

Formulario Basico
12:53

Otro Ejemplo de Formularios con tu Nombre, Email, y Contraseña, pero Esta Ves la Creamos en Una Linea Vertical

Formulario En La Misma Linea
09:13

Bootstrap 3 también permite alinear los elementos <label> y los campos de formulario mediante las clases CSS utilizadas para definir las rejillas de los layouts. Para ello, añade la clase .form-horizontal al formulario. Además, como esta clase modifica la clase .form-group para que se comporte como la fila de una rejilla, no es necesario que añadas en el formulario elementos con la clase .row.

Las casillas de verificación y radios
07:32

Las casillas de verificación y radios en linea
04:36

Utilice la opción por defecto, o añadir múltiples para mostrar varias opciones a la vez. En este video les doy unos cuantos ejemplos de como usar la opcion por defector como tambien la opcion multiple

Seleccionar
06:34

Se requiere el posicionamiento manual de íconos de respuesta para las entradas sin una etiqueta y para los grupos de entrada con un add-on a la derecha. Se le recomienda a proporcionar etiquetas para todas las entradas por razones de accesibilidad. Si desea evitar que las etiquetas se muestren, Tienes que ocultar con la clase-.sr- only Si tiene que hacer sin etiquetas, ajuste el valor superior del icono de la retroalimentación. Para los grupos de entrada, ajustar el valor derecho a un valor de píxel apropiado en función de la anchura de su complemento.

Iconos, etiquetas, y los grupos de entrada
09:25
+
Botones Con Bootstrap
5 Lectures 31:39

Este es un pequeño examen para ver si aprendiste o si te acuerdas lo que te enseñe en la seccion de formularios

Que Aprendiste en la seccion de Formularios
2 questions

Usamo de nuevo las class success, info, danger, y warning. Tambien te introduciomos a la clase default de botones como tambien, la primary, y link. Si tienen algun incoveniente o dudas me dejan saver.

Botones - Diferentes Opciones
07:03

Botones - Tamaño y Bloque
06:35

Botones - Activado, Desactivado, & Enlace
08:12

Vamos agregar iconos a los botones. Tambien les dejo la foto que les enseñe en el video

Glyphicon en Botones
04:53

Este Es el Video Tutorial del Proyecto de la pagina Web Completa. En esta pagina web vamos agregar lo que aprendimos en esta seccion que fue botones. Espero que les guste. OJO SI NO TIENEN EL CODIGO DE LA PAGINA GENERAL, DEJENME UN COMENTARIO PARA MANDARSELO. Gracias :)

Proyecto General 3 - Pagina Web
04:56
+
Bonos del curso de Bootstrap 3
5 Lectures 32:17

Te vamos a enseñar como darle forma una imagen. Las Formas de la que vamos a hablar son esquinas aredondeadas, imagen aredondeada, y thumbnail/vista miniatura

Imagenes - Formas de Imagen
04:41

Aqui Estan las dos librerias de jquery que tienen que acceder para poder usar el dropdown

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

menu de navegacion parte 1 - bootstrap 3
07:02

Vamos a agregar unos cuantos botones/enlaces como tambien el buton desplegable.

menu de navegacion parte 2 - bootstrap 3
07:40

Vamos agregar un divisor en el menu desplegable para agregar mas enlaces. tambien lo vamos agregar al proyecto general de la pagina web. Y por ultimo les doy unos ejemplos mas de los menu de navegacion con static, fixed, y inversed

menu de navegacion parte 3 - bootstrap 3
07:57

Vamos Agregar un footer con la etiqueta <footer> adentro de la etiqueta <footer> vamos agregar un container. Vamos tambien agregar una imagen y le vamos a dar una class the circulo para agregar una foto del webmaster.

Footer Para la Pagina
04:57
+
Bono
3 Lectures 14:37
Que Aprendiste en la Seccion 8?
3 questions

Modales son simplificaciones, pero flexible, de diálogo que solicita con la funcionalidad necesaria mínima y con valores inteligentes.

Ventana emergente modal
14:11

Crea una pagina web completa y mandamela a mi correo electronico. hare un video en la que presentare tu pagina web para y te dare unos cuantos tips an tu pagina. Voy a dar 15 premios. Los premios van hacer cupones para mi proximo curso de "como hacer una plantilla wordpress con Bootstrap." Empieza ahora!! vamos alla!!

Crea y Mandame Tu Pagina Web
00:14

Dejenme un comentario pidiendome que curso quieres que haga ahora. Entra las opciones estam: PHP, Plantilla de Wordpress, Jquery, Javascript, Como Hacer un Sitio Web de Red Sociales (Como Facebook), o Como hacer Un Juego de Cartas con HTML5, CSS3, y Javascript. Ustedes Escojen!

Que Curso Quieres que Haga Ahora? - Que Te Gusto y No Te Gusto?
00:11
About the Instructor
Oscar Ogando
3.3 Average rating
28 Reviews
130 Students
5 Courses
Programador y Creador de Pagina Web

Hola, Mi Nombre es Oscar Ogando, Yo naci en El Bronx, NY Pero me crie en La Romana, Republica Dominicana. Llegue a Los Estados Unidos hace 6 años donde empezo mi pasion por programacion y Paginas Web. Mi primera Pagina Que Hice Fue En Blogger. Ya Tengo Trabajando Con HTML, CSS, Bootstrap, Java, Javascript, y PHP desde hace 6 años. Trabaje Como Freelancer y e Creado mas de 500+ Paginas Web Como HTML, Bootstrap y PHP. Tambien he Construido Alrededor de 80 Plantillas de Wordpress Con Bootstrap, Unas de Las Plantillas Que reciente Hice Fue Seriesypeliculasgratis como tambien codigoplusplus. En estos Momentos estoy trabajando como freelancer, los proyectos que puedo hacer son: Pagina Web Mobiles, Pagina Responsiva, Pagina Para Tabletas, Plantillas Wordpress, y Mucho mas. Yo tengo 22 años de edad y estoy actualmente en busqueda de mi bachillerato en la universidad de Albertus Magnus College, Connecticut, Estados Unidos.