Diseño Web Responsive con HTML5 y CSS3

Conviértete en un diseñador web profesional
4.7 (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.
83 students enrolled
$100
Take This Course
  • Lectures 33
  • Contents Video: 4 hours
    Other: 0 mins
  • 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/2013 Spanish

Course Description

El objetivo del curso es que seas capaz de crear sitios web responsive que se adapten fácilmente a todos los dispositivos, tanto móviles como desktop. Al finalizar el curso serás capaz de crear sitios web 100% optimizados que garanticen un alto rendimiento.

  • Crea un diseño web responsive que se adapte a todos los dispositivos.
  • Profundiza en el uso de HTML5 y CSS3 en tu trabajo.
  • Descubre cómo crear imágenes retina para tus diseños.
  • Crea sitios web 100% optimizados que garanticen un alto rendimiento.

Lo que vas a conseguir con este curso:

  • 1. SABER CREAR UN DISEÑO WEB RESPONSIVE Y FLUIDO. Aprenderás a crear sitios web que se adapten tanto a smartphones como a pantallas de alta resolución.
  • 2. APRENDER HTML5 y CSS3 CON UN EJEMPLO REAL. La mejor manera de aprender es con la práctica, así que todo el curso va enfocado a un ejemplo real.
  • 3. OPTIMIZAR EL SITIO WEB Y MEJORAR EL RENDIMIENTO. La web no sólo debe ser responsive, sino que también ha de cargar rápido en todos los dispositivos.


What are the requirements?

  • HTML y CSS básicos
  • Editor de textos como Notepad++ o Sublime Text 2

What am I going to get from this course?

  • Aprender diseño web responsive
  • Entender cómo funciona HTML5
  • Conocer las propiedades y selectores de CSS3
  • Aprender a crear un menú responsive moderno
  • Saber cómo implementar un slider fluido
  • Conocer cómo implementar un portafolio fluido basado en CSS3
  • Adquirir una base sólida para dedicarse al diseño web profesional

What is the target audience?

  • Personas con ganas de aprender

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
03:29

Introducción al curso. Si te falta la base, te recomiendo hacer el curso básico para tener todos los conceptos claros.

Section 2: Diseño Web Responsive
08:01

La evolución del diseño web a la actualidad

06:57

Introducción al diseño web responsive

Descargar el ejemplo práctico
Article
10:42

Los media queries de CSS3

13:50

Ejemplo práctico de los media queries de CSS3

06:42

El viewport

01:34

Ejemplo práctico del viewport

13:50

El layout fluido o líquido

11:58

Ejemplo práctico del layout fluido

03:48

Las fuentes flexibles

01:29

Ejemplo práctico de las fuentes flexibles

03:59

Las imágenes fluidas

02:31

Ejemplo práctico de las imágenes fluidas

06:42

Las imágenes retina

04:12

Ejemplo práctico de las imágenes retina

11:12

El enfoque del mobile first o primero el diseño web móvil

06:17

La diferencia entre el diseño web móvil y el responsive

16:01

El rendimiento web y el tiempo de carga. Si quieres profundizar en el tema, te recomiendo este artículo.

Section 3: HTML5 y CSS3
14:35

Las etiquetas de HTML5 y su aplicación en el día a día

09:14

Las propiedades del CSS3

09:27

Los selectores de CSS3. Si quieres ir un paso más allá, te recomiendo este artículo con las transformaciones, transiciones y animaciones de CSS3. Es con esto, con el canvas de HTML5 y el JavaScript que se hacen sitios web con animaciones parecidas a las de Flash. Esto excede este curso, pero si te interesa el tema, te recomiendo el artículo, así como aprender JavaScript. Si sabes inglés, entonces puedes aprender a usar el canvas de HTML5con este libro.

Section 4: Caso práctico. Maquetación web
06:49

Conocer el Boilerplate. Preparar el head de nuestra web-

07:23

Insertar un logo responsive en nuestra web. Sirve para todas las imágenes responsive.

05:09

El HTML del menú responsive

11:44

El CSS básico del menú responsive

11:46

El CSS para smartphones del menú responsive

06:04

El CSS para tabletas del menú responsive

11:39

Aprender a implementar un slider responsive

10:54

El HTML de nuestro portafolio responsive. Su implementación requiere MixitUp, un plugin de jQuery y CSS3. En este curso no veremos cómo se implementa el jQuery por ser un tema más avanzado, simplemente con que copies el código igual que se encuentra en el código fuente te funcionará. Puedes descargar el código fuente aquí.

12:03

El CSS de nuestro portafolio responsive

02:58

Creación del footer de la web

Section 5: Conclusión
00:57

Puedes usar todo el código empleado en este curso para tus propios proyectos. Te animo a visitar la web de CreativaSfera, donde encontrarás muchos recursos prácticos para tu día a día. Si lo prefieres, también estoy en Twitter. Mándame un DM o un tweet indicándome que eres alumno de mi curso, así sabré quien eres para seguirte.

Si te ha gustado el curso, no te olvides de dejar una valoración de 5 estrellas. ¡Gracias por tu participación!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Son muchos los  que se dedican a enseñar. Pocos a los que les apasiona y se les da bien  hacerlo. Y a mí  me encanta enseñar.  Con mi estilo didacta, dinámico y ameno consigo enseñar y contagiar mi pasión. 

Amplia experiencia docente. Con muy buenas referencias. Actualmente colaborando con Barcelona Activa, a la vez que organizo cursos por mi cuenta.

Este es mi lema: enseñar, inspirar, motivar. Me gusta lo que hago y eso se transmite.

Ready to start learning?
Take This Course