Programador web: HTML5 y CSS3 Responsive ¡Fácil y Práctico!

Aprende a diseñar páginas web profesionales y actuales. Desde cero... de forma fácil, dinámica y muy práctica.
4.5 (19 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.
52 students enrolled
$60
Take This Course
  • Lectures 128
  • Contents Video: 16 hours
    Other: 3.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

Descubre un curso fácil, claro, completo, práctico y muy didáctico y conviértete en programador y diseñador de páginas web con las más recientes versiones de los lenguajes de programación HTML y CSS.

¿Quieres dedicarte a una de las profesiones con más futuro y proyección pero te parece muy difícil?. ¿O tal vez ya tengas conocimientos básicos de HTML o CSS y quieres profundizar?. En ambos casos, te ofrecemos los mejores recursos para que lo consigas.

  • Más de 100 vídeos donde te explicamos cada tema de forma amena y dándole más importancia al aspecto práctico. ¡A programar, se aprende programando!.
  • Un manual escrito para cada capítulo del curso donde podrás repasar los temas tratados en los vídeos, ampliar conocimientos y acceder a más ejemplos prácticos.
  • Decenas y decenas de ejercicios con sus correspondientes soluciones, para que pongas a prueba lo aprendido en el curso.
  • Y el soporte y ayuda de tu tutor, para que nunca te sientas perdido.

Y ten presente que este es un curso dinámico. Respondiendo a tus dudas y para estar siempre a la última en programación y diseño web responsive con HTML y CSS iremos ampliando los contenidos de nuestro curso con nuevos temas, trucos y casos prácticos. Recuerda que tienes acceso ilimitado e indefinido. ¡Vuelve cuando quieras, aquí estaremos!

What are the requirements?

  • No se requieren conocimientos previos.
  • Tan sólo necesitas un editor de código HTML-CSS y un programa de FTP para publicar tus páginas. En el curso te explicamos como instalarlos y utilizarlos.

What am I going to get from this course?

  • Programar perfectamente en HTML5 todo tipo de páginas web
  • Utilizar las herramientas de formato de sitios webs que ofrece el CSS3
  • Diseñar páginas web responsive, acordes a las más recientes tecnologías de diseño web

What is the target audience?

  • Si deseas convertirte en programador web, este es tu curso.
  • Está orientado a quienes no tienen conocimientos previos de programación.
  • También es adecuado para aquellos que, teniendo unos conocimientos básicos, desean ampliarlos o actualizarse en HTML5, CSS3 y el diseño web responsive.

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 y principios del HTML5
10:17

Vamos a conocer las premisas de las que parten los lenguajes HTML y CSS, en qué se diferencian y para qué usaremos cada uno de ellos.

¿Qué programas necesito?
Preview
15:41
Manual de la Sección 1
4 pages
Section 2: Tu primera página web
05:24

Si de un edificio se tratase, las etiquetas serían los ladrillos con los que lo contruiríamos. Vamos a empezar a descubrir los elementos que usaremos en la programación web.

19:05

¿Cómo debe estructurarse una página web? ¿Cuáles son las etiquetas fundamentales que debe definirla?. Vamos a descubrir cuales son las claves para construir una página web correcta e indexable por los buscadores.

04:12

Además de programar correctamente, un buen programador también se distingue por comentar su código de forma clara y precisa. Descubramos cómo insertar comentarios en nuestro código HTML.

13:18

El encabezado (<head>) de nuestro sitio web lo define y presenta a buscadores, lectores para discapacitados y permite a los programas navegadores mostrar nuestro sitio web de forma correcta... ¡Fíjate si tiene importancia conocer cómo construirlo correctamente!

12:16

Seguimos el video anterior: El encabezado (<head>) de nuestro sitio web lo define y presenta a buscadores, lectores para discapacitados y permite a los programas navegadores mostrar nuestro sitio web de forma correcta... ¡Fíjate si tiene importancia conocer cómo construirlo correctamente!

Manual de la Sección 2
3 pages
Ejercicios de la Sección 2
2 pages
Section 3: La organización del texto
08:01

Generalmente el texto es el contenido más importante de nuestra página web. Para empezar, es el principal "alimento" del que se nutren los buscadores a la hora de indexarnos lo mejor posible y enviarnos unas buenas visitas. Vamos a descubrir las principales herramientas que ofrece HTML para insertar textos en nuestros documentos.

07:26

Definir correctamente los diferentes tipos de títulos de nuestra página web puede facilitarnos mucho las futuras tareas de diseño, y además, ayudará a los buscadores a indexar mejor nuestra página... y cuanto mejor indexada esté, ¡más visitas ganaremos!. Vamos a descubrir en este tema las claves de unos títulos correctos, coherentes y bien programados teniendo en cuenta tanto la estructura de nuestro sitio como claves para el posicionamiento web.

11:57

Destacar de forma correcta las expresiones más importantes de nuestros textos facilita la lectura a nuestros visitantes y tiene repercusión en el posicionamiento web. En el siguiente video descubriremos la forma correcta de hacerlo.

18:04

En nuestras páginas web podemos agregar enumeraciones con diversos puntos: Se trata de otro elemento importante a la hora de facilitar su lectura y compresión. Desde las listas más sencillas a las más complejas, vamos a descubrir como usar esta potente y sencilla herramienta.

Manual de la Sección 3
5 pages
Ejercicios de la Sección 3
9 pages
Section 4: Hipervínculos
13:06

Los links son el elemento característico de una página web, aquello que las distingue de los medios editoriales clásicos. Gracias a ellos podemos navegar fácilmente dentro de las diferentes secciones de un sitio web o visitar páginas webs ajenas a la nuestra. Vamos a descubrir las claves de la creación de hipervínculos.

10:54

Profundizamos en el tema de los hipervínculos externos: Los links son el elemento característico de una página web, aquello que las distingue de los medios editoriales clásicos. Gracias a ellos podemos navegar fácilmente dentro de las diferentes secciones de un sitio web o visitar páginas webs ajenas a la nuestra. Vamos a descubrir las claves de la creación de hipervínculos.

13:26

Los hipervínculos internos son especialmente útiles en páginas webs muy extensas: facilitan la navegación de los usuarios por toda su extensión y moverse de forma sencilla y ágil. Vamos a descubrir en este video en qué consisten y las diversas formas de trabajar con ellos.

15:21

Los links no sólo sirven para enviarnos a otras páginas HTML. Entre otras cosas, podemos crear links que descarguen archivos o generen correos electrónicos. Vamos a descubrirlo en el siguiente video.

07:19

Descubriremos como añadir parámetros para personalizar el comportamiento de los hipervínculos.

Manual de la Sección 4
4 pages
Ejercicios de la Sección 4
9 pages
Section 5: Imágenes
14:53

Las imágenes le dan a nuestros documentos un aire más personal, atractivo y permiten ampliar la información contenido en el texto. Aprenderemos desde cero como insertar imágenes en nuestras páginas web con HTML y veremos las diferentes opciones disponibles para configurar su visualización.

02:11

Haz que las imágenes insertadas en un documento enlacen fácilmente con otras páginas o sitios webs.

05:37

Vamos a descubrir las nuevas etiquetas HTML5 que nos permiten definir mejor nuestras imágenes.

Manual de la Sección 5
3 pages
Ejercicios de la Sección 5
1 page
Section 6: Hojas de Estilos: CSS
03:24

Una vez conocemos las herramientas fundamentales para añadir contenidos a nuestra página web, vamos a pasar a centrarnos en el trabajo de formato, en el estudio del CSS.

CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada.

Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página web.

07:32

Vamos a descubrir la forma de trabajar con CSS más práctica y más flexible. La idea es que todas las normas de estilo irán guardadas en un archivo aparte con extension css, al que llamaremos desde nuestra página html. Descubriremos en el siguiente video de forma muy práctica como conseguirlo.

06:48

Podemos definir los estilos de nuestra página directamente en la cabecera de ésta. No es recomendable hacerlo si el CSS va a ser un poco extenso, por que enseguida hará más confusa la programación de nuestra web, y además, por que para cada archivo html de nuestro sitio deberíamos incluir estos códigos. Pero puede ser útil en determinados casos: vamos a ver cuando y cómo.

04:05

Insertar CSS en las etiquetas HTML es la forma más fácil pero la menos recomendada para la aplicación de un estilo a una etiqueta HTML. La idea es definir en la propiedad style los estilos para cada etiqueta. Veamos cómo se hace y en qué casos puede ser útil.

03:31

El código CSS tiene una estructura muy sencilla, pero potente. Vamos a descubrir las claves y trucos para trabajar el aspecto de nuestros documentos.

09:13

Aprendamos a sacarle todo su potencial a las hojas de estilos.

07:28

En el siguiente tema aprenderemos en qué momentos usar las etiquetas universales <div> y <span>.

04:40

Técnicas, tácticas y trucos que te permitirán trabajar de forma más ágil, sencilla y eficiente con el CSS.

07:09

Una de las características principales del CSS es la herencia de las propiedades. Cuando establecemos una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad. Vamos a ver en el siguiente video cómo se consigue y en qué nos beneficia dominarla.

05:53

Puede ser que deseemos aplicar un determinado aspecto a un elemento de nuestro documento, por ejemplo un párrafo, pero solo si está dentro de un contexto, de un ámbito determinado, por ejemplo, que esté en negrita. Veamos cómo se consigue y que ventajas aporta.

Manual de la Sección 6
8 pages
Ejercicios de la Sección 6
2 pages
Section 7: El aspecto del texto
03:49

A lo largo de todo esta sección estudiaremos las diferentes propiedades CSS que permiten modificar el aspecto de los textos insertados en nuestras páginas web. En este primer capítulo te presentamos todas las propiedades que tienes a tu disposición.

13:17

A lo largo de este tema veremos las diferentes formas de hacer referencia al color en nuestro documentos: empleando su propio nombre, de forma hexadecimal o por medio de los códigos RGB.

04:45

La propiedad text-align permite definir la alineación de nuestro texto. A lo largo de este capítulo la forma de aplicarla y algunos ejemplos prácticos.

06:41

Con la propiedad text-decoration podemos, entre otras cosas que aparezca subrayado el texto, tachado o una línea en la parte superior. Estudiemos casos prácticos de esta propiedad y como aplicarla a nuestros documentos.

14:14

Existen varias formas de indicar el tamaño de la fuente. Vamos a descubrir en qué consisten y qué ventajas aporta cada una de ellas. Usar el tamaño de fuente correctamente es el primer paso para que nuestro sitio web sea responsive, es decir, para que se adapte a las dimensiones y características del dispositivo (movil, tablet, ordenador...) con el que se conectan nuestros visitantes.

04:18

Font Style permite establecer el estilo con el que se muestran los caracteres, en otras palabras, diversas formas de aplicar cursivas. Veamos como establecer los estilos disponibles: normal (normal), itálico (italic) y oblicuo (oblique).

03:26

La propiedad font-weight permite establecer el grosor con el que se muestran las letras del texto. Normalmente, esta propiedad se emplea para mostrar un texto en negrita. Veamos todas las alternativas que nos ofrece y en qué caso usar cada una de ellas en este video repleto de casos prácticos.

07:24

Las propiedades letter-spacing y word-spacing establecen la separación entre las letras o palabras del texto. Conozcamos más en detalle el uso correcto, trucos y ejemplos de estas propiedades.

Tabulación: Text-indent
02:13
03:36

Con text-transform podrás transformar el texto en mayusculas, minusculas... de forma fácil y muy dinámica. Vamos a analizar en el siguiente video el uso de esta interesante propiedad, una auténtica desconocida para muchos programadores.

04:04

Gracias a font-family podemos definir la tipografía, el tipo de letra a aplicar a todo o parte de nuestras páginas webs. En este primer video dedicado a esta propiedad estudiaremos la forma más simple de trabajar con ella, recurriendo a las tipografías predeterminadas.

19:48

Con CSS3 es posible elegir fuentes a nuestro gusto, al margen de estas. Veremos como elegir las tipografías con total libertad, como descargarlas, instalarlas en nuestra página web y usarlas en nuestros trabajos.

Manual de la Sección 7
9 pages
Ejercicios de la Sección 7
14 pages
Section 8: Definiendo fondos
04:30

Para especificar un color de fondo a cualquier elemento de nuestra página, usamos la propiedad CSS background-color. Veamos la forma de aplicar fondos a nuestra página o a los objetos insertados en ella de forma sencilla y muy práctica.

10:41

Gracias a CSS3 es posible aplicar degradados de fondo en nuestra página o los objetos en ella colocados. Descubramos la forma de conseguirlo desde el principio y algunos trucos para que esa tarea resulte más sencilla de lo que podría parecer.

04:44

También es posible colocar una imagen de fondo, no solo al fondo de nuestra página, si no a cualquiera de los elementos que hay dentro de ella: titulares, párrafos... Veamos en el siguiente video como conseguirlo.

13:30

Vamos a descubrir algunas de las propiedades avanzadas que permiten personalizar la forma en que se muestran los fondos para conseguir todo tipo de efectos.

02:30

CSS3 nos permite aplicar diferentes niveles de transparencia a los elementos de nuestra página. Concretamente, La propiedad opacity permite especificar la opacidad de un elemento. En el siguiente tema la estudiaremos en detalle.

Manual de la Sección 8
10 pages
Ejercicios de la Sección 8
3 pages
Section 9: Bordes y sombreados
06:26

CSS nos permite recurrir a un buen número de opciones a la hora de trazar los bordes de los elementos que incluimos en nuestras páginas. En este tema toca estudiar en profundidad y de forma muy práctica en qué consisten y cómo aplicarlas a nuestros documentos.

05:15

Gracias a propiedad border-radius podemos crear esquinas redondeadas sin tener que recurrir a complejos mosaicos de imágenes, como se hacía hasta la llegada de las versiones más recientes de CSS. En el siguiente tema veremos como aplicarla para conseguir documentos con aspecto sofisticado y moderno de forma muy sencilla.

06:59

La propiedad box-shadow nos permite definir una sombra a un objeto de la página. Otra de las nuevas ventajas de las más recientes versiones de CSS que, por fin, te permitirán darle a tus documentos un toque de diseño sin trabajar casi nada. Veamos cuales son las claves y los trucos para conseguirlo.

Manual de la Sección 9
4 pages
Ejercicios de la Sección 9
5 pages
Section 10: Efectos dinámicos
10:56

Con CSS podemos modificar la apariencia de los elementos de la página web de forma dinámica, es decir, los elementos pueden cambiar de forma una vez que la página se haya cargado si se dan determinadas condiciones.

05:25

Con el pseudo formato Active podemos definir un estilo cuando se hace clic en un elemento de la página. En la práctica sólo se utiliza en los enlaces. El enlace mantendrá este aspecto brevemente: el cambio se produce cuando se presiona el botón del ratón. Veamos la forma de aplicarlo de manera rápida y eficaz.

03:21

Los efectos dinámicos permiten modificar la apariencia de los elementos de la página una vez que se haya cargado si se dan determinadas condiciones. En esta ocasión veremos cómo es posible aplicar un estilo a un enlace a una página que ya se ha visto.

Manual de la Sección 10
3 pages
Ejercicios de la Sección 10
2 pages
Section 11: Estructurando nuestra página web
13:26

Podemos definir el tamaño de los bloque que incorporamos a nuestro documento. Este es el primer paso para darle a tu página web la estructura y distribución que desees. ¡Vamos a conseguir resultados totalmente profesionales!

08:16

Hemos visto que los diferentes elementos que podemos situar en nuestra página pueden tener un ancho y un alto que los delimite.

Además de esas dos medidas, podemos establecer margenes en torno a ellas, un espacio que se situará alrededor de nuestro objeto. En concreto, podemos trabajar con margenes interiores y margenes exteriores.

11:03

Cuando definimos las dimensiones para nuestros bloques pueden que sean demasiado pequeños para el texto que contienen y no controlamos demasiado su extensión.

Vamos a estudiar brevemente propiedades para controlar desbordamientos y que hacemos en estos casos. Vamos a anticipar algunos de los problemas que puedan surgirte en el futuro.

Manual de la Sección 11
9 pages
Ejercicios de la Sección 11
3 pages
Section 12: Posicionar elementos en una página
17:04

La mayoría de estructuras de las páginas web complejas están diseñadas con el posicionamiento flotante. Fíjate si tiene importancia. En este tema estudiaremos como emplear esta técnica para ubicar elementos en nuestra página, como siempre, haciendo incapié en el aspecto más práctico de la materia.

12:01

La mayoría de estructuras de las páginas web complejas están diseñadas con el posicionamiento flotante. Seguimos estudiando esta técnica para ubicar elementos en nuestras páginas.

06:55

La propiedad clear es importante para controlar el comportamiento de las capas definidas con el posicionamiento flotante que estudiamos en los videos anteriores. Veamos como utilizarla y en qué casos puede ser interesante.

12:11

El posicionamiento absoluto se emplea para establecer de forma exacta la posición en la que se muestra un elemento.

09:45

La propiedad z-index nos permite definir la forma en que se apilarán los objetos que han sido definidos con el posicionamiento absoluto. Veamos de forma didáctica y muy práctica la forma en que podemos trabajar con ella.

07:43

El principio es exactamente el mismo que en el caso del posicionamiento absoluto, excepto que esta vez, el bloque permanece fijo en su posición, incluso si la página se mueve. Veamos en qué consiste de forma muy práctica y qué utilidades puede tener.

08:03

El posicionamiento relativo desplaza una caja respecto de su posición original establecida mediante el posicionamiento normal. Veamos en el próximo video en qué consiste y cómo puede intervenir en nuestras páginas.

Manual de la Sección 12
10 pages
Ejercicios de la Sección 12
21 pages
Section 13: Nuevas etiquetas HTML5 para estructurar webs
07:15

En este capítulo, vamos a descubrir las nuevas etiquetas HTML5 dedicadas a la estructuración del sitio web.

Gracias a ellas podemos definir, por ejemplo, sus dimensiones usando el CSS. En este tema veremos de forma introductoria cuales son esas etiqueta y en el siguiente aprenderemos de forma práctica a darles la dimensión y ubicación que consideremos oportuna.

19:48

Te proponemos un ejemplo práctico que te descubra el uso de las etiquetas HTML5 para la estructuración de nuestras páginas web.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Técnico en sistemas y formador informático desde hace más de veinte años, mi trabajo está relacionado con el mundo del diseño y la programación web desde los últimos quince años... ¡Media vida me la he pasado en la red!

Actualmente soy Director Creativo en la empresa de diseño XarxaCreativa y compagino esa actividad con la formación en el ámbito del diseño web responsive, programación orientada a Internet (PHP, JavaScript, bases de datos MySQL) y el diseño gráfico.

Siempre he creído que la formación tenía que ser sencilla, asequible para los alumnos. Por eso mis cursos, tanto online como presenciales pretenden ser amenos, didácticos y muy, muy prácticos. Emplear un lenguaje comprensible para el estudiante y un ritmo adecuado a su aprendizaje son fundamentales.

Ready to start learning?
Take This Course