PDF de programación - Curso de HTML5 desde cero

Tabla de contenido

Presentación

Contribuciones
Markdown

¿Qué vamos a necesitar?

Conceptos básicos

Alojamiento y servidores HTTP
Navegadores
URLs
Peticiones HTTP
Ejercicio
Recursos

HTML5: Primeros pasos

Introducción a HTML5
Etiquetas
Anidación
Estructura básica de una página
Etiquetas básicas
Ejercicio
Recursos

Chrome DevTools

Pestaña network
Pestaña elements
Pestaña sources
Configuración
Ejercicio
Recursos

HTML5: Mi Curriculum Vitae

Etiquetas - Parte 2
Anidación - Parte 2
Validación y accesibilidad

1.1
1.1.1
1.1.1.1
1.1.2
1.2
1.2.1
1.2.2
1.2.3
1.2.4
1.2.5
1.2.6
1.3
1.3.1
1.3.2
1.3.3
1.3.4
1.3.5
1.3.6
1.3.7
1.4
1.4.1
1.4.2
1.4.3
1.4.4
1.4.5
1.4.6
1.5
1.5.1
1.5.2
1.5.3

2

Convenciones
Errores frecuentes
Ejercicio
Recursos

Git & Github

Configurar nuestra cuenta
Enviar y recibir cambios
Funcionalidades
Publicar una web en Github
Colaborar con un proyecto
Ejercicio
Recursos

CSS: Primeros pasos

Introducción a CSS
Propiedades
Añadiendo los estilos
Selectores y herencia
Estilos con DevTools
Ejercicio
Recursos
Anexo: Navegadores y estándares soportados

CSS: Modelo de caja
Elementos HTML
Propiedades - Parte 2
Posicionar el contenido
Modelo de caja con DevTools
Ejercicio
Recursos

CSS: Refinando el diseño

Animaciones
Tipografías
Diseño web adaptable
Ejercicio
Recursos

1.5.4
1.5.5
1.5.6
1.5.7
1.6
1.6.1
1.6.2
1.6.3
1.6.4
1.6.5
1.6.6
1.6.7
1.7
1.7.1
1.7.2
1.7.3
1.7.4
1.7.5
1.7.6
1.7.7
1.7.8
1.8
1.8.1
1.8.2
1.8.3
1.8.4
1.8.5
1.8.6
1.9
1.9.1
1.9.2
1.9.3
1.9.4
1.9.5

3

JS: Primeros pasos

Variables
Operadores
Consola de Chrome DevTools
Ejercicio
Recursos

JS: Controlando el flujo

Estructuras de control
Depurando con Chrome DevTools
Objetos, funciones y ámbitos
Ejercicio
Recursos

JS: Trabajando como un profesional

Window & Document
Peticiones AJAX
Expresiones regulares
Aplicaciones web offline
Bibliotecas de terceros
Ejercicio
Recursos

1.10
1.10.1
1.10.2
1.10.3
1.10.4
1.10.5
1.11
1.11.1
1.11.2
1.11.3
1.11.4
1.11.5
1.12
1.12.1
1.12.2
1.12.3
1.12.4
1.12.5
1.12.6
1.12.7

4

Presentación

Presentación

Este curso es gratuito y lo puedes realizar incluso si no sabes nada de programación,
sólo hace falta tener ganas de aprender. A pesar de esto, también puede serte útil si ya
sabes HTML pero quieres perfeccionar o refrescar tus conocimientos sobre HTML5, CSS3 o
JavaScript.

A lo largo del mismo te voy a:

Enseñar los elementos más comunes de HTML5, CSS3 y JavaScript, osea los que
usaremos el día día.
Mostrar dónde podrás resolver tus dudas cuando tengas problemas.
Explicar cómo trabajar con algunas de las herramientas que usan los profesionales del
mundo real como son Github o las herramientas para desarrolladores de Google
Chrome.

Es importante saber que en el mundo de la programación hay muchas formas de resolver
un mismo problema, y que todas ellas pueden ser igualmente válidas. Dicho esto, quiero
aclarar que el objetivo del curso no es aprender todas y cada una de las formas de
resolver un problema (esto se va aprendiendo con años de práctica), y es por ello que no
entraré en profundidad en todos y cada uno de los elementos y características de
cada lenguaje.

Las definiciones estarán simplificadas, esto está hecho a conciencia ya que como decía
antes, no he querido asumir que tengas ningún conocimiento previo sobre desarrollo web.
Por eso, para facilitarte la comprensión y evitar distraerte del objetivo del curso, te explicaré
conceptos en muchas ocasiones que no serán 100% precisos pero que sí correctos.

En muchas ocasiones encontrarás enlaces a la Wikipedia, he elegido hacerlo así por
varias razones:

1. Usa un lenguaje bastante coloquial
2. Incluye enlaces a las palabras más complejas
3. Son definiciones consensuadas en las discusiones

A pesar de esto incluiré enlaces al W3C con las definiciones formales, aunque puede que
estas sean más difíciles de entender.

Así que no tomes todas las definiciones al pie de la letra, tómalas como definiciones lo
suficiente buenas como para ayudarte a entender el contexto. De todos modos, siempre
que se dé este caso te añadiré un enlace a un recurso con más información o añadiré un
superíndice con aclaraciones al final de la página.

5

Presentación

El objetivo del curso es dotarte de una buena base que te permita sentirte lo
suficientemente seguro para afrontar cualquier proyecto y así seguir aprendiendo. Para
ello nos centraremos solamente en los conocimientos y herramientas más importantes de
2
un desarrollador front-end .

1

Formato

Este es el material escrito del Curso de HTML5, CSS3 y JS desde cero, si quieres puedes
estudiarte este curso por tu cuenta, o inscribirte al formato MOOC a través de la web
para que te avise en las próximas ediciones que organice.

Estas ediciones que se celebran periódicamente consisten en ver una serie de vídeo-
tutoriales y hacer unos ejercicios que te enviaré semanalmente. La carga de trabajo
pretende ser menor a 3 horas semanales e incluyen una sesión online (en grupo) de 1h a la
semana para resolver dudas.

El formato MOOC tendrá una duración aproximada de 6 semanas.

Snippets interactivos

A lo largo de todo el libro utilizaré ejemplos de código (snippets) interactivos para facilitar la
compresión y la interacción con el código HTML, CSS y JavaScript. Estos snippets están
organizados por lección y número de snippet, por lo que a lo largo de las lecciones haré
referencia a ellos y así, en caso de que algo no te haya quedado claro, puedas consultarlos
antes de continuar con la lección.

Además de como apoyo al libro, tienen un segundo propósito: servirte de "libreta" en el
futuro para tener una lista de ejemplos para tus propios desarrollos.

Dudas, ideas, sugerencias, y contribuciones

Además de resolver dudas en la sesiones online semanales, podrás realizar cualquier
pregunta, o aportar cualquier idea o sugerencia en cualquier momento:

A través del apartado de issues del proyecto en Github (opción recomendada).
Añadiendo comentarios al final de la página:

6

Presentación

Añadiendo comentarios en los párrafos del libro :

Recuerda, que no te de vergüenza preguntar cualquier duda que te surja, por simple que te
parezca, si te ha surgido a ti, ten por seguro que le surgirá a más personas. Así me
ayudarás también saber qué aclaraciones añadir o qué mejoras puedo hacer al
contenido del curso para facilitarles el aprendizaje a otras personas que vengan detrás.

Además si consigues terminar el curso sin ninguna duda, el día que estés haciendo un
proyecto y algo no te funcione sabrás mucho mejor por dónde empezar a buscar los
errores.

Y si te sientes cómodo usando Github, puedes hacer un pull request al repositorio
resolviendo cualquier error que encuentres.

Autor(es)

Mi nombre es Raúl Jiménez Ortega, he creado este curso basándome principalmente en
mis años de experiencia haciendo webs (llevo desde 1999) y dando formación (desde
2009), pero además he revisado las mejores fuentes que conozco para seleccionar lo mejor
de cada curso/tutorial que he encontrado en estos años en Internet.

Aunque inicialmente me he lanzado sólo a crear este curso, mi objetivo es animar a que
otros profesionales aporten su granito de arena para mejorar el contenido y mantener este
curso actualizado durante mucho tiempo, es por eso que he decidido liberar este libro
licenciándolo como Creative Commons (CC-BY-NC-SA 4.0 International).

7

Presentación

En el siguiente apartado veremos las diferentes maneras de contribuir a mejorar el curso.
Por supuesto, las personas que contribuyan tendrán su reconocimiento no sólo en Github
sino también dentro de los contenidos del libro.

Motivación - ¿Por qué?

¿Por qué otro curso de HTML/HTML5?, pues las razones que me han llevado a lanzarme a
esta aventura son:

1. Compartir los trucos y consejos: a lo largo de estos años he ido aprendiendo

muchos trucos y muchas lecciones sobre cómo ser más productivo y me gustaría
compartirlos contigo.

2. Asentar una buena base: después de revisar muchos cursos (algunos de ellos muy
buenos), tengo la sensación de que ninguno explica todos los conceptos necesarios
para crear una buena base que te permita sentirte cómodo a la hora de continuar
creciendo por tu cuenta.

3. Creo que los tiempos han cambiado: y creo que hay muchísimas personas con

mucho potencial a las que saber HTML, CSS y JavaScript les "daría alas" y les abrirían
muchas puertas profesionales.

4. Disfruto compartiendo lo que sé y ayudando a los demás: siempre quise montar

una empresa para crear algún producto que mejorase aunque fuese un poco la vida de
miles/millones de personas, pero después de 6 años me he dado cuenta de que
también es posible cambiar la vida de muchas personas enseñándoles lo que sé.

Todo esto ha sido más que suficiente para que me decida a dedicar muchas horas (y
cariño) de mi tiempo libre para ir creando poco a poco los contenido de este curso.

Aclaraciones:

1. A lo largo de todo el libro usaré el masculino por facilitar la lectura evitando los:

"seguro/a", o los "segur@", espero que nadie se ofenda ;-P.

2. Un programador front-end no es más que un programador que domina HTML, CSS y

JavaScript.

8

Contribuciones

Contribuciones

Cualquier persona puede contribuir de diferentes formas:

1. Ayudando a mejorar los contenidos del libro o los ejercicios.
2. Colaborando en mejorar la página web.
3. Ayudando con las aplicaciones móviles.

Para facilitar la comunicación entre todas las personas que quieran contribuir se ha creado
un canal en Gitter. A continuación explicamos cómo contribuir en cada uno de los apartados
mencionados anteriormente.

Contenidos del curso

Libro

Estado de las tareas: Waffle | Github

Cualquier persona puede ayudar a introducir mejoras, corregir errores tipográficos,
gramaticales, etc.

Los pasos son muy sencillos, primero accedemos a la página con el índice del libro en
Github y seguimos los siguientes pasos:

9

Contribuciones

Para "poder editar" una página (aclaración: en realidad lo que estarás haciendo es enviarme
una propu