#AW392 Khan Academy HTML/CSS

Como ya os dije hace tiempo Khan Academy te necesita... pues ahora ya podemos aprovecharnos nosotros de ellos. De entre todos los contenidos creados en esta plataforma de e-learning ya disponemos de contenidos aptos para el módulo de Aplicaciones Web del CFGM de SMR.

Para ampliar el apartado 3 sobre HTML y CSS os recomiendo este tutorial

https://es.khanacademy.org/computing/computer-programming/html-css

Hace falta registrarse y ir haciendo cada etapa.

Todo el contenido en "Intro to HTML/CSS: Making webpages"

Introducción a HTML

Aprende qué es HTML y cómo hacer una página web básica con texto marcado e imágenes.

• ¡Bienvenido a la web! (Video)
• Conceptos básicos de HTML (Bloc de notas)
• Desafío: escribe un poema (Bloc de notas)
• HTML: énfasis de texto (Bloc de notas)
• Desafío: puedes aprender etiquetas de texto (Bloc de notas)
• HTML: listas (Bloc de notas)
• Desafío: tu lista de aprendizaje (Bloc de notas)
• HTML: imágenes (Bloc de notas)
• Desafío: un viaje de ensueño (Bloc de notas) 

 

Introducción a CSS

Aprende cómo escribir reglas sencillas de CSS, cómo seleccionar con base en el elemento, clase o ID, y cómo cambiar los colores de tu página.

• CSS básico (Bloc de notas)
• Desafío: criatura colorida (Bloc de notas)
• CSS: seleccionando por id (Bloc de notas)
• Desafío: ids estacionales (Bloc de notas)
• CSS: seleccionando por clase (Bloc de notas)
• Desafío: clases de manzanas y plátanos (Bloc de notas)
• Cuestionario: selectores CSS (Ejercicio)
• Proyecto: página web de viajes (Bloc de notas)

 

Más etiquetas HTML

Aprende a hacer vínculos, tablas y comentarios.

• Vínculos en HTML (Bloc de notas)
• Desafío: vínculos que te encantan (Bloc de notas)
• Vínculos internos en HTML (Bloc de notas)
• Desafío: saltar de un lado a otro (Bloc de notas)
• Tablas en HTML (Bloc de notas)
• Desafío: el menú de la cena (Bloc de notas)
• Comentarios en HTML (Bloc de notas)
• Proyecto: libro de recetas (Bloc de notas)

 

Propiedades de texto CSS

Aprende cómo estilar tu texto, como familias de fuentes, tamaño, espacio y alineación.

• CSS Zen Garden (Video)
• Propiedad font-family de CSS (Bloc de notas)
• Desafío: familias de fuentes elegantes (Bloc de notas)
• Propiedad font-size de CSS (Bloc de notas)
• Desafío: tamaños de fuente grandes (Bloc de notas)
• Estilos de fuentes y taquigrafía en CSS (Bloc de notas)
• Desafío: formatos de fuentes famosas (Bloc de notas)
• Más propiedades de texto en CSS (Bloc de notas)
• Cuestionario: propiedades de texto (Ejercicio)
• Herencia en CSS (Bloc de notas)
• Proyecto: blog (Bloc de notas)

 

Diseño CSS

Aprende cómo usar los elementos span y div de HTML con propiedades de CSS como position y float para cambiar el diseño de tus páginas web.

• Agrupando elementos en CSS (Bloc de notas)
• Desafío: agrupa a los meros (Bloc de notas)
• Propiedades width, height y overflow en CSS (Bloc de notas)
• El océano que se desborda (Bloc de notas)
• Modelo de caja en CSS (Bloc de notas)
• Desafío: el modelo bóxer (Bloc de notas)
• Posición en CSS (Bloc de notas)
• Desafío: coloca al planeta (Bloc de notas)
• CSS en la naturaleza: Google Maps (Video)
• Elementos flotantes en CSS (Bloc de notas)
• Desafío: nubes flotantes (Bloc de notas)
• Cuestionario: diseño CSS (Ejercicio)
• Proyecto: invitación a un evento (Bloc de notas)

 

Más selectores CSS

Aprende selectores más complejos- usando múltiples clases, combinando elementos con clases, selectores descendientes, selectores agrupados y pseudo-clases dinámicas.

• Usando múltiples clases en CSS (Bloc de notas)
• Desafío: una galería con clase (Bloc de notas)
• Combinando clases y selectores de elementos en CSS (Bloc de notas)
• Desafío: clases de elementos (Bloc de notas)
• Selectores descendientes en CSS (Bloc de notas)
• Desafío: descendientes de Khan (Bloc de notas)
• Agrupando selectores en CSS (Bloc de notas)
• Pseudo-clases dinámicas en CSS (Bloc de notas)
• Desafío: animales agrupados (Bloc de notas)
• Especificidad en CSS (Bloc de notas)
• Cuestionario: especificidad en CSS (Ejercicio)

 Más aprendizaje

¿Qué puedes hacer para seguir aprendiendo HTML y CSS?

• Validación HTML (Video)
• Cuestionario: valida este HTML (Ejercicio)
• Qué aprender a continuación

ENTRADAS RELACIONADAS

 

 Todas sobre Khan Academy -  http://smrweb2.blogspot.com.es/search/label/Khan%20Academy

Esperando que os sea de interés y os aporte algo. ¿Nos gustaría saber si te ha gustado esta entrada? ¿Estas utilizandoKhan Academy? ¿Y vosotr@s alumn@s? Gracias por seguirnos y leernos. Hasta el próximo artículo...

¿Me regalas un tuit o tweet de esta entrada? Gracias por compartirla...