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.9 (11 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.
42 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 39
  • Length 4.5 hours
  • Skill Level All Levels
  • 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 11/2014 Spanish

Course 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

What are the requirements?

  • Tienen Que Bajar Notepad ++ Es GRATIS!!
  • Yo Le voy a Enseñar Donde Bajar Notepad ++ y Bootstrap
  • Bajar Opera Mobile Emulator

What am I going to get from this course?

  • 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

What 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

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
04:51

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

03:24

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

Agregando Los Archivos De Bootstrap
Preview
05:37
Section 2: CSS - Cuadrícula responsiva
Que es HTML y CSS
3 questions
08:56

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

05:34

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

Utilicen —La cuadrícula pequeñas y medianas

04:20

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

Columnas Compensatorias
06:52
10:09

—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- *

Introducion a Cuadriculas
05:32
08:49

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

Section 3: Tipografía En Bootstrap
4 questions

Donde se inserta la Meta Etiqueta?

06:22

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

06:38

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

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
04:22

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

Section 4: Tablas En Bootstrap
3 questions

parrafos, negritas, borrar, pequeñas y Destacar

06:49

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.

05:00

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

06:51

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!!

Section 5: Formularios Con Bootstrap
4 questions

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

12:53

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>

09:13

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

07:32

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 en linea
04:36
06:34

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

09:25

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.

Section 6: Botones Con Bootstrap
2 questions

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

07:03

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 - Tamaño y Bloque
06:35
Botones - Activado, Desactivado, & Enlace
08:12
04:53

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

04:56

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 :)

Section 7: Bonos del curso de Bootstrap 3
04:41

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

07:02

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>

07:40

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

07:57

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

04: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.

Section 8: Bono
Que Aprendiste en la Seccion 8?
3 questions
14:11

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

Article

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!!

Article

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!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Oscar Ogando, 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.

Ready to start learning?
Take This Course