Desarrollo web con bootstrap

Domina el framework de twitter y crea sitios web adaptables y para dispositivos moviles.
3.6 (9 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.
81 students enrolled
$20
Take This Course
  • Lectures 44
  • Contents Video: 3 hours
    Other: 1 min
  • 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 11/2013 Spanish

Course Description

Twitter Bootstrap se ha posicionado como una interesante herramienta para quienes trabajan en el desarrollo de sitios web, especialmente para quienes desean darle un aspecto visual moderno a sus proyectos sin dedicar mucho tiempo a este proceso, y que gracias a las facilidades ofrecidas por la herramienta se vuelve mas sencillo de hacer.

El diseño web moderno debe enfatizarse en la experiencia del usuario y combinarlo con diseños adaptables, que puedan ser apreciados sin importar el dispositivo desde el que se acceda al sitio, tarea que puede hacer el desarrollo web algo mas complejo, y es allí donde debemos sacar provecho a utilidades como Bootstrap que nos agilizan el trabajo y nos permiten conseguir resultados mas impactantes en el menor tiempo posible.

Para los que no lo conocen, Bootstrap es un conjunto de herramientas a modo de Framework enfocadas al desarrollo del Frontend (HTML, CSS, HTML5, CSS3, Javascript, jQuery) de un proyecto web, es decir a toda su parte visual y del lado del cliente.

En este entrenamiento aprende las bases y algunas tecnicas de bootstrap para desarrollar sitios web adaptables.

What are the requirements?

  • Editor de codigo
  • Conocimientos mínimos de html y css
  • Conocimientos minimos de un framework

What am I going to get from this course?

  • Manejar el 70%% de los componentes de bootstrap
  • Crear sitios mediante rejillas de 12 columnas
  • Crear sitios adaptables y liquidos

What is the target audience?

  • Maquetadores web
  • Freelances
  • Diseñadores y desarrolladores web
  • Apasionados por las nuevas tecnologias

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 a bootstrap
01:38

En este vídeo veremos que es bootstrap.

Section 2: Métodos scaffolding
04:11

Vamos a ver el metodo scaffolding de columnas sencillas.

01:51

Vamos a ver el metodo scaffolding de columnas anidadas.

01:45

Vamos a ver el metodo scaffolding de columnas adaptables.

02:26

Vamos a ver el método scaffolding de columnas adaptables anidadas.

01:32

Vamos a crear una pagina con el metodo de plantilla fija.

Section 3: Componentes I
01:59

Bootstrap nos estiliza las fuentes de nuestros proyectos de una manera muy agradable para el usuario.

05:17

Vamos a ver como personalizar las tablas con bootstrap con unas clases bien sencillas.

07:47

Vamos a ver todo lo relacionado a los formularios con bootstrap.

04:33

Continuamos como personalizar mas los formularios.

09:28

Vamos a ver los componentes de botones, imagenes e iconos.

02:27

Vamos a ver el componente de botones de bootstrap.

Section 4: Componentes II
04:13

Vamos a ver los componentes de navegacion por pestañas y pastillas.

05:38

Veremos como crear paginaciones y migajas en las paginas.

07:17

Vamos a ver las etiquetas y thumbnails.

08:37

Vamos aprender a crear barras de progreso y alertas.

Section 5: Despedida
Conclusión del curso
Article
Section 6: Bootstrap 3
01:49

Vamos a ver que es este framework de twitter y para nos sirve a la hora de realizar proyectos web

01:22

Vamos a ver unos sitios de ejemplos de como se comporta a la hora de trabajar con este sistema.

02:30

Vamos a ver el sitio oficial de donde podremos descargar el sistema de bootstrap.

01:39

Veremos unos puntos importantes antes de poder usar este gran framework.

03:49

Para los que quieran trabajar con este completo sistema pero no quieran tocar código, vamos a ver unas paginas que nos ayudan para trabajar de manera visual al crear un sitio web con el framework.

04:06

Comenzamos con una introducción al sistema basándonos en una plantilla básica que nos ofrece la pagina oficial de bootstrap.

06:19

Vamos a comenzar a trabajar con el sistema de rejillas de forma fácil y practica.

05:15

Vamos a ver como gestionar columnas de forma responsive para que se adapten dependiendo de viewport del navegador o dispositivo.

10:57

Vamos a meternos mas de lleno la destreza que tiene este sistema de una manera un poco mas avanzada.

05:45

Aveces necesitamos que nuestro contenido ocupe el ancho completo del navegador, aunque bootstrap ya determina un ancho predeterminado no quiere decir que estamos limitados a respetar esta regla, vamos a ver como podemos poner en ciertas partes de nuestro el contenido a full width.

02:53

Ya vimos lo fácil que es trabajar con el sistema de rejillas de forma básica y avanzada, ahora vamos a ver como anidar rejillas y dentro colocar contenido muy sencillo.

03:07

Vamos a ver que estilos le da a las paginas cuando incorporamos el sistema de bootstrap a los textos y otros elementos de un sitio.

02:21

Vamos a ver como trabajar con las listas y las clases que nos ofrece el sistema para adaptarlas fácilmente a nuestras necesidades.

03:55

Las tablas son aveces dolores de cabezas a la hora de trabajar con ellas, con bootstrap vamos a ver como estilizar una tabla muy sencilla y practica.

01:56

Como aplicar diferentes comportamientos ya sea a una fila, columna o celda de una tabla es muy fácil con las clases que nos da el sistema.

02:36

Aveces nos topamos en que las tablas no responden al método responsive, bootstrap nos resuelve este problema con una clase bien útil.

06:21

Vamos a ver como trabajar con formularios, uno de los elementos html mas utilizados, vemos lo fácil que es estilizar un formulario con bootstrap.

03:47

Son muy típicos los formularios de forma vertical, ¿pero que pasa cuando queremos formularios horizontales? vamos a ver en esta lección como hacer formularios de esta forma con un par de clases.

Ayudas para validacion de formularios
06:20
Botones
06:53
Efectos y responsive en las imágenes
05:00
Iconos
03:35
Desplegables
03:34
Grupo de botones verticales
04:30
Menú de navegación con pestañas
02:40
Menú de píldoras
02:06
Migas de pan y paginacion
03:05

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Klinsmann Fabian, Desarrollador web y Ninja Front-End

Estudio la Licenciatura de Marketing y Neuro Marketing Digitales, apasionado por las ultimas tecnologías, llevo mas de 3 años en esto del desarrollo web, especificamente en tecnologias HTML5, CSS3, jQuery, Responsive design y todo lo que tiene que ver en la web.

Actualmente trabajo de manera Freelance como Ninja Front-End creando sitios web, sitios adaptables para dispositivos móviles, tabletas y pantallas.

Soy instructor de manera independiente en diferentes áreas como computación para adultos, desarrollo web, Marketing y Neuro Marketing Digital.

Desarrollo videotutoriales en youtube sobre contenido de diseño, programación y marketing.

Te invito que visites mi pagina donde publico constantemente información sobre los últimos sucesos del mundo web, asi como también te invito que me sigas en mis redes sociales si quieres saber mas sobre lo que publico.

Ready to start learning?
Take This Course