Curso Completo: Desarrollo Responsive + Proyectos Prácticos
2.0 (1 rating)
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.
5 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Curso Completo: Desarrollo Responsive + Proyectos Prácticos to your Wishlist.

Add to Wishlist

Curso Completo: Desarrollo Responsive + Proyectos Prácticos

Aprende como crear sitios web de calidad para diferentes dispositivos y resoluciones
2.0 (1 rating)
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.
5 students enrolled
Last updated 4/2017
Spanish
Current price: $10 Original price: $25 Discount: 60% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 8.5 hours on-demand video
  • 11 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Entender y dominar las técnicas y tecnologías html y css necesarias para la creación de sitios web adaptables a los diferentes dispositivos
  • Entender como trabajar con el framework Bootstrap
  • Entender el uso de los Media Queries de CSS 3
  • Entender los fundamentos de HTML 5 para la creación de sitios web responsive
View Curriculum
Requirements
  • No es necesario conocimientos previos ya que el curso viene con dos capítulos dedicados a los fundamentos de HTML y CSS necesarios para el mismo
  • Si ya tienes conocimientos en HTML Y CSS puedes omitir los dos primeros capítulos y empezar con los proyectos
  • Como herramientas para la creación de los proyectos, vas a necesitar un editor de código como Sublime Text. En uno de los videos se explica como desacargarlo e instalarlo, un navegador web (Mozilla, Chrome, Operta, etc), una computadora con cualquier sistema operativo
Description

¿Quieres aprender a desarrollar sitios web amigables a dispositivos móviles (Responsive)?

En este curso aprenderás a desarrollar sitios web completamente adaptables a los diferentes dispositivos móviles, conocerás la tecnología y las técnicas usadas para la creación de interfaces web utilizando HTML 5 y los Media Queries de CSS 3.

A día de hoy es necesario desarrollar sitios que se adapten a los diferentes dispositivos móviles y sus resoluciones para una mejor experiencia de usuario

Con este curso aprenderás a crear interfaces web modernas y de gran calidad.

El curso es completamente práctico. Crearemos 4 proyectos desde cero que incluyen un formulario responsive, un menú de 3 niveles, un sitio de consultoría y por último un sitio completo utilizando el framework Bootstrap

Para este curso no es necesario tener conocimientos en HTML y CSS ya que se incluyen dos capítulos donde se enseñan los fundamentos básicos de estos.

Al finalizar el curso tendrás los conocimientos prácticos para desarrollar cualquier sitio que desees, ya sea utilizando las tecnologías nativas de HTML 5 Y CSS 3 o utilizando el framework Bootstrap

Dirigido a personas que quieran aprender de manera práctica como desarrollar sitios web modernos que se vean bien en cualquier pantalla y resolución. No importa si eres un profesional o si empiezas desde cero este curso está orientado a todas las personas.

¿Qué incluye el curso?

  • Más de 5 horas de videos explicados en detalle
  • 4 Proyectos prácticos
  • Acceso a los archivos fuente del curso para que los puedas descargar y usar en tus proyectos
  • Garantía de 30 días.


Aprenderás:

  • Como crear sitios adaptables a dispositivos móviles
  • Los Fundamentos básicos de HTML 5 y CSS - 3
  • Como crear la estructura de un documento HTML
  • Como dar estilos al sitio web con CSS - 3
  • Como utilizar los Media Queries para hacer un sitio responsive
  • Como crear un formulario y un menú de 3 niveles completamente responsive
  • Como crear un sitio web completo utilizando HTML 5 y CSS - 3 Media Queries
  • A trabajar con el Framework Bootstrap
  • A crear un sitio web completo utilizando el Framework Bootstrap


Acerca de mí

Trabajo desde hace 12 años en las áreas del Diseño y Desarrollo Web, Visualización 3D.

Amplia experiencia trabajando para diferentes empresas de la región como Londonred Hosting, Instituto de Cultura de Pereira, Fenalco Risaralda, entre otras.

En mi tiempo libre también trabajo en el Desarrollo de Video Juegos, Aplicaciones Móviles y Diseño Gráfico.

“Apasionado y siempre actualizado en nuevas tecnologías”.

Creador y administrador de numerosos proyectos para empresas del país y también en el exterior.

Mis tutoriales tiene un enfoque 100% práctico ya que considero que es la mejor forma de aprender.

“El que ve hacer las cosas las aprende, pero el que las hace las aprende dos veces”.


Who is the target audience?
  • Apto para cualquier persona ya sea que estes iniciando o seas un profesional que desee afianzar sus conocimientos para el desarrollo responsive
  • Diseñadores web, que quieren saber como pasar sus diseños a código HTML y CSS optimizados para diferentes dispositivos
Students Who Viewed This Course Also Viewed
Curriculum For This Course
52 Lectures
08:21:56
+
Introducción al Curso
3 Lectures 06:29

Este es el video de presentación del "Curso Completo: Desarrollo Responsive + Proyectos Prácticos"

Preview 01:00

Información que explica los siguientes tópicos:

  1. Que es el desarrollo responsive
  2. Buenas practicas para el desarrollo responsive
  3. Que es Bootstrap
  4. Información acerca del curso y objetivos del mismo
Preview 03:22

En este video veremos como instalar el editor de codigo HTML y CSS - Sublime Text. Se puede trabajar con otros editores como notepad ++

Instalar Editor de Código Sublime Text
02:07
+
Fundamentos de HTML 5
6 Lectures 16:07

En este video veremos como crear la estructura básica de un documento HTML con el DOCTYPE de HTML 5 y las etiquetas <html>, <head>, <body>.

Estructura Base HTML
02:38

Video que explica las etiquetas HTML para crear el título y las metaetiquetas de un sitio web

Título y Metaetiquetas
01:55

Este video explica las etiquetas Div, Header, Main, Footer y la importancia del HTML semántico

Div, Header, Main, Footer
02:23

Como crear encabezados y listas en html con las etiquetas <h1>, <h2>, etc

y las etiquetas <ul> y <li> para listas

Encabezados y Listas
03:42

En este video veremos como insertar imágenes en html y sus atributos más importantes

Imágenes
03:40

Video que explica como crear hipervínculos en html

Hipervínculos
01:49
+
Fundamentos de CSS - 3
7 Lectures 31:44

En este video se explica las formas de crear código CSS, ya sea dentro del mismo documento HTML o en una hoja de estilos aparte

Donde Escribir el código CSS
05:36

En este video se explica cuales son los selectores básicos en HTML para ser invocados desde CSS

Selectores Básicos
02:49

En este video veremos como crear fuentes personalizadas en nuestros sitios web utilizando la propiedad @font-face de CSS 3 y también veremos como utilizar las fuentes de Google Fonts

Fuentes Personalizadas y de Google
05:28

Entender la alineación y el flotado de los diferentes elementos HTML utilizando CSS

Alineación y Flotado
02:33

En este video explicamos la creación de fondos, colores e imágenes con CSS

Fondos, Colores e Imágenes
05:28

En este video se explica como crear transiciones en CSS 3

Transiciones y Hover
03:15

Entender la importancia de los Media Queries en CSS 3 para la creación de sitios responsive

Media Queries
06:35
+
Proyecto 1 - Formulario Responsive
5 Lectures 31:04

En este video revisaremos el proyecto final que aprenderáz a crear al final de este capítulo (Un formulario totalmente responsive)

Preview 01:22

En este video crearemos la estructura de carpetas y archivos necesarios para el proyecto

Creación de Carpetas y Archivos
01:28

En este video crearemos la estructura básica, es decir el marcado con html para el formulario

Marcado con HTML
09:00

En este video daremos forma y estética a el formulario creado en el video anterior utilizando CSS - 3

Estilos CSS
12:30

En este video utilizaremos los Media Queries de CSS 3 para hacer que nuestro formulario sea responsive

Media Queries
06:44
+
Proyecto 2 - Menú Responsive
5 Lectures 46:45

En este video revisaremos el proyecto que desarrollaremos en este capítulo (Un menú completamente responsive)

Preview 00:47

En este video crearemos la estructura básica del menú con HTML 5

Marcado con HTML
06:42

Esta es la primera parte del video donde daremos estilos a nuestro menú utilizando CSS - 3

Estilos CSS - Parte 1
13:38

Esta es la segunda parte del video donde daremos estilos a nuestro menú utilizando CSS - 3

Estilos CSS - Parte 2
10:43

En este video haremos que nuestro menú se adapta a los dispositivos móviles utilizando CSS 3

Media Queries y Responsive
14:55
+
Proyecto 3 - Sitio Web Consultoría Responsive
7 Lectures 01:09:39

En este video revisaremos el proyecto final que crearemos en este capítulo (Un sitio web de consultaria responsive)

Preview 01:46

En esta parte crearemos la estructura de carpetas y archivos necesarios para la realización del proyecto

Estructura de Carpetas y Archivos
01:15

En esta parte escribiremos el código HTML necesario par estructurar nuestro proyecto

Marcado con HTML
20:59

Primera parte de la creación de estilos CSS necesarios para dar forma y estética a nuestro sitio de consultoría, utilizando diseño fluido

Estilos CSS Globales- Parte 1
13:52

Segunda parte de la creación de estilos CSS necesarios para dar forma y estética a nuestro sitio de consultoría, utilizando diseño fluido y CSS 3

Estilos CSS Globales- Parte 2
07:42

En este capítulo utilizaremos los Media Queries para hacer que nuestro sitio sea responsive

Media Queries
19:44

Este capítulo es opcional  ya que hasta aquí tenemos un sitio web responsive, lo que haremos es dar un bonito efecto de animación a nuestro sitio utilizando las transiciones de CSS 3

Transiciones CSS
04:21
+
Fundamentos de Bootstrap
6 Lectures 57:02

En esta parte veremos la introduccción al framework Bootstrap, muy extendido entre todos los desarrolladores del mundo  ya que optimiza mucho la creación de sitios responsive

Introducción a Bootstrap
03:52

Para poder empezar a trabajar con el framework Bootstrap es necesario aprender a crear la plantilla básica desde donde debemos partir para crear nuestros proyectos web, en este video te mostraré como hacerlo

Creación Plantilla Base
07:21

Para entender Bootstrap y sacarle provecho es necesario aprender a trabajar con su documentación

Documentación de Bootstrap
08:45

El sistema de rejilla de Bootstrap es realmente la razón de ser y lo más importante que debemos entener para poder estructurar los contenidos, en este video te enseñaré como funciona este sistema de rejilla (Grid System)

Práctica - Rejilla Bootstrap
12:23

En este video pondremos en práctica lo vista en los anteriores videos de Bootstrap, empezando en este video por utilizar el sistema de rejilla para los contenidos

Práctica de los Componentes de Bootstrap - Parte 1
12:23

Continuamos con los ejercicios práctico de Bootstrap y en este video veremos como utilizar algunos de sus maravillosos componentes

Práctica de los Componentes de Bootstrap - Parte 2
12:18
+
Proyecto 4 - FotoBUK - Sitio Web Bootstrap
6 Lectures 01:09:58

Este es el último proyecto del curso donde desarrollaremos  un sitio completo utilizando Bootstrap, en este video revisaremos el proyecto que crearemos

Preview 02:15

Este video es la primera parte y empezaremos por crear la estructura base utilizando HTML pero también vamos daremos los estilos CSS

HTML Y CSS Parte 1
11:33

Este video es la segunda parte y seguiremos creando nuestro sitio de inicio con HTML 5 y CSS 3

HTML Y CSS Parte 2
09:30

Este video es la tercera parte y seguiremos creando nuestro sitio de inicio con HTML 5 y CSS 3

HTML Y CSS Parte 3
20:00

En esta parte del proyecto vamos a crear las secciones internas de nuestro sitio web Bootstrap

Secciones Internas
16:15

Aunque Bootstrap ya vien con un sistema completo para el desarrollo responsive, en este video veremos como crear nuestros porpios Media Queries para mejorar la visibilidad del sitio en dispositivos móviles

Ajustes Media Queries
10:25
+
Proyecto 5 - Sitio Frontend
3 Lectures 01:18:29

Crearemos otro proyecto como práctica desarrollando el frontend de un sitio web desde cero y haciendo que sea responsive

Preview 22:36

Crearemos los estilos CSS necesarios para que nuestro sitio frontend tome forma

Estilos CSS
27:18

Ya solo nos queda crear las secciones internas y hacer que nuestro sitio frontend sea responsive

Secciones Internas y Responsive
28:35
+
Sitio Backend con Bootstrap 3
2 Lectures 01:32:25

En este video aprenderás como desarrollar la interfáz de un sitio backend usando Bootstrap. Veremos el demo del proyecto que haremos en este capítulo y empezaremos con la maquetación del inicio y login

Demo del proyecto y Maquetación Inicial
55:21

Terminaremos de maquetear nuestro sitio usando Bootstrap. Crearemos las secciones internas y también copiaremos nuestra ventana modal.

Maquetación Final: Secciones Internas y CSS
37:04
1 More Section
About the Instructor
José Andrés Montoya
4.3 Average rating
150 Reviews
2,878 Students
2 Courses
Tecnólogo en Computación, Diseñador Gráfico Publicitario

Tecnólogo en Computación, Diseñador Gráfico Publicitario

Trabajo desde hace 12 años en las áreas del Diseño y Desarrollo Web, Visualización 3D.

Amplia experiencia trabajando para diferentes empresas de la región como Londonred Hosting, Instituto de Cultura de Pereira, Fenalco Risaralda, entre otras.

En mi tiempo libre también trabajo en el Desarrollo de Video Juegos, Aplicaciones Móviles y Diseño Gráfico.

“Apasionado y siempre actualizado en nuevas tecnologías”.

Creador y administrador de numerosos proyectos para empresas del país y también en el exterior.

Mis tutoriales tiene un enfoque 100% práctico ya que considero que es la mejor forma de aprender.

“El que ve hacer las cosas las aprende, pero el que las hace las aprende dos veces”.