aprend.io

aprend.io es un proyecto de Nicolás Barrera (Drummerhead).
Es "un curso de front-end (sólo html y css) en español y gratuito, principalmente compuesto por videos y código de referencia.
Es el resultado de meses de la creación de contenidos, grabación, edición de videos, carga y construcción de sitios. Es una manera de devolver a la Internet lo que ella me ha dado (conocimiento, poder y divertimento)".

Es un curso claro, ameno e informal (a veces, más de lo deseado) y en español (aunque utiliza muchísimas palabras en inglés y muchos anglicismos).
Son, en total, más de 10 horas, divididas en 16 lecciones en video (con sus correspondientes códigos descargables): comienza con la introducción, pasa por html y por css, y termina con un ejercicio de un mini-sitio de una pizzería.
Está muy interesante y vale mucho la pena verlos. En especial, me gustaron muchísimo los capítulos 9 (sobre los floats) y 10 (sobre posicionamiento css) y todo el trabajo de creación del sitio de ejemplo. Hay que verlo.

Y yo ya lo hice. Visité todos los videos y a continuación les dejo un somero resumen de todos y cada uno:

1. Introducción. (15'36")
   Presentación del curso. Primeros bocetos ("wireframes", como él los llama) del sitio.
2. html - Introducción. (21'22")
   Funcionamiento de una estructura html. Para ello, hace una analogía con un edificio, sus pisos y sus apartamentos.
   Herramientas de texto para editar los documentos.
   Presentación del doctype y de los elementos html, head y body.
3. html - Semántica. (31'19")
   Diferencia entre contenido (html) y apariencia (css).
   Elementos básicos de html: vínculos (elemento a) e imágenes (elemento img).
4. html - Elementos. (48'48")
   Secciones y estructura; listas desordenadas, ordenadas y de definición; semántica a nivel de texto; contenido incrustado; tablas; formularios; elementos vacíos.
5. css - Introducción. (39'27")
   Creación de una hoja de estilos de ejemplo desde cero y vinculación con el documento html correspondiente. Explicación de las partes de una declaración de estilo; selectores (de elemento, de clase, de id); selectores hijos, etc.
6. css - Propiedades de texto. (34'14")
   Formateo de texto con hojas de estilo. Color, tipografía, tamaño, negritas, cursivas, versalitas, alineación de texto, decoración de texto, indentación, transformación, flujo de texto sobrante, sombras, interlineado, interletraje.
7. css - Box model. (24'49")
   Elementos de bloque y elementos de línea. El modelo caja (Box Model).
   Propiedades css relacionadas con el Modelo Caja: ancho y alto; anchos y altos mínimos y máximos; paddings; bordes; márgenes.
8. css - layout. (18'28")
   Introducción al diseño con css. El perimido uso de tablas para realizar el diseño. El motivante sitio csszengarden.com. Somera presentación de los temas de los dos siguientes videos: float y posicionamiento.
9. css - float. (46'47") voy en el 40'00"
   Uso originario de la propiedad float. Cómo hacer columnas ("responsives" o una fija y la otra "fluida"). "Clearfix". Cambiar el comportamiento del modelo caja con un selector universal y la regla box-sizing: border-box;. "Vendor prefixes". Sencillo generador de una cuadrícula de diseño.
10. css - position. (27'52")
    Explicación de posicionamiento y css; sus valores: relative, absolute, fixed, static.
11. Pizzatio - estructura básica. (33'54")
    Armado de la estructura html básica de las 4 páginas que forman el proyecto y de la navegación entre ellas.
12. Pizzatio - comenzando css. (52'22")
    Organización de la hoja de estilo y creación de los estilos básicos. Estilizado de la cabecera de las páginas y del menú principal.
13. Pizzatio - footer, grids, landing. (1:07'27")
    Armado del "footer". Agregado de contenido y armado de la "landing" ayudándose con una grilla de columnas "casera". Utilización de transform: rotate () y transform-origin para rotar un elemento. Conceptos de "mobile first" y "desktop first".
14. Pizzatio - acerca, menu (55'04")
    Armado de la página "acerca (about)". Comentarios sobre microformatos, W3C validators y cómo agregar el buscador de MDN al navegador web. Armado de la página "menú".
15. Pizzatio - galería, algo de js. (36'08")
    Preparación de las imágenes con un procesamiento por lotes en un editor de imágenes. Creación de una versión básica de la galería de fotos, sin javascript. Creación de la versión principal de la galería (que muestra las fotos individuales en una modal window) con javascript.
    Somera explicación del javascript y del css utilizado para el funcionamiento de la galería. Introducción al uso de plugins de jquery.
    Recomendación del uso de html5 boilerplate.
16. Pizzatio - forms, refactor. (1:05'39") - voy en 45'00"
    Armado de la página de contacto. Reutilización y adaptación de código.
    Armado de formularios. Insertar un mapa de GoogleMap. Adaptación y emprolijamiento del código generado.

(enterado de la existencia de este sitio en picando código, vía agujerodelmate.org).