GitHub y el aprendizaje 馃摎

Cristina Fern谩ndez

Desarrolladora front-end

脡pocas de "Cursitis"

Portada Curso Sass con los temas: Crear fichero Sass, Mixins, Funciones y operaciones y SCSS mantenible

Errores al aprender

(Tweet en ingl茅s) Un error: demasiado leer poco escribir. Me siento y leo sobre cosas nuevas, pero necesito construir cosas para aprenderlas de verdad.

Soluci贸n: Aprender haciendo

Curso Flexbox

Colecci贸n codepen Flexbox mostrando lo que se ve en el navegador

Codepen

Ejemplo Codepen con HTML, CSS y resultado

驴Puedes publicarlos?

Autor de cursos Wes Box deja que se publiquen sus cursos

驴D贸nde alojar tus experimentos?

GitHub + servidor propio

Repo

Repo con un c贸digo ejemplo

Demo

Ejemplo en el navegador

GitHub + Codepen

Repo

Fichero JS con un c贸digo ejemplo

Demo

Ejemplo mostrado en Codepen: con CSS, JS y resultado

GitHub + GitHub Pages

Crear cuenta GitHub

Crear cuenta GitHub con usuario, email y contrase帽a.

Crear repositorio

Crear un repositorio a帽adiendo nombre y un README.

Trabajar en local

  • cd Projects
  • git clone git@github.com/user/repository.git
  • cd repository

A帽adir c贸digo al proyecto

Ejecuci贸n git status con ficheros en directorio de trabajo y ficheros preparados en Index.

Subir el c贸digo

  • git add .
  • git commit -m "Mensaje"
  • git push origin master

Demo en GitHub Pages

https://github.com/andreidbr/JS30

Repo con todos los ejercicios del curso

https://andreidbr.github.io/JS30/

Lista de ejercicios en una p谩gina web a trav茅s de GitHub Pages

Habilitar GitHub Pages

Habilitar GitHub Pages desde la pesta帽a Settings, eligiendo desde el dropdown las posibilidades.

Enlaces en README

Readme

Enlaces a cada ejemplo en README

Resultado

Ejemplo aplicaci贸n CRUD a帽adir direcciones

Jotted: Resultado y c贸digo

Uso

C贸digo para usarlo, en p谩gina web de jotted

Resultado

Resultado con pesta帽as para ver HTML, CSS y JS

Ejemplos con GitHub Pages

GitHub Pages desde master

Midi Redux

C贸digo GitHub en forma de 谩rbol se帽alando el index en master

Demo

P谩gina web del proyecto

GitHub Pages desde /docs

TheAntiEvent

C贸digo GitHub en forma de 谩rbol se帽alando el index en master dentro de carpeta docs

P谩gina web

P谩gina web del proyecto

GitHub Pages desde gh-pages

master

C贸digo GitHub en forma de 谩rbol se帽alando el index en master dentro de carpeta docs

gh-pages

C贸digo GitHub en forma de 谩rbol se帽alando el index en master dentro de carpeta docs

Demo

P谩gina web del proyecto

Documentaci贸n

C贸mo se hizo

Documentaci贸n de c贸mo lo has hecho en el fichero README.md

Conclusiones

  • Practica lo que aprendes
  • Documenta
  • Publica c贸digo y demo

隆Gracias!

Cr茅ditos