Primer Hackathon del Ale

Felicitaciones! Hemos llegado a la mitad del curso. Celebreamos haciendo un Hackathon. Es una buena oportunidad para trabajar en un proyecto nuevo, mientras revisamos los conceptos core que vinimos aprendiendo.

1. Hacer un plan

Toma algunos minutos para hacer brainstrom y conseguir algunas ideas de proyectos. Esto podría estar relacionado con su sitio de la comunidad, un proyecto independiente, o simplemente una locura sitio que le ayudarán a practicar diferentes conceptos de codificación

Revise el Paso 3:. Codificación de abajo para considerar los diferentes conceptos que esperamos para practicar durante este proyecto

En grupos de dos, mantenga un reunión para presentar su plan de lo que desea lograr, y los posibles obstáculos.

Si alguien menciona está preocupado con algún concepto que vos entendés bien, ofreceles ayuda por si tienen alguna pregunta.

2. Crear un repo en GitHub

Abra el Terminal y ejecute:

git config --global user.name "SU NOMBRE"

git config --global user.email "SU DIRECCIÓN DE CORREO ELECTRÓNICO"

• Ir a GitHub y abrir una sesión o regístrate para obtener una cuenta

• Crear un nuevo repositorio en GitHub haciendo clic en new repository , arriba a la derecha

Siga las instrucciones que aparecen en el nuevo repositorio

Si desea saber más sobre la filosofía detrás de control de versiones, echa un vistazo a The Git Parable

3. Codificar

A continuación se enumeran las habilidades básicas de desarrollo web con las que debes sentirse cómodo hasta el momento:

• [x]Usar Markdown para crear un README.md con la introducción de su proyecto.
• [x]Hace un Push a GitHub y vea que aparezca en la página principal de su repositorio

Crear un documento HTML usando las siguientes etiquetas HTML:

• html, head, title, body
• header y párrafos
• bold e italic
• divs y spans
• ordered y unordered lists
• imágenes y links
• horizontal rule y line break
• Usar un atributo de estilo en un elemento HTML
• usar el tag a < style > en el header,
• usar < link > para agregar un css separado para incluir estilos en tu página.

Trate de usar las siguientes propiedades CSS como mínimo:

• color

• background-color

• background-image

• font-size, font-family

• height, width, max-width

• margin, padding, border, border-radius

• Refactorear código para utilizar clases y ids.  

• Utilice algunos selectores CSS complejos tales como selectores descendientes  

• Utilice un iframe para incrustar vídeos o mapas en su página

• Usá float y position: fixed para colocar algunos elementos

• Crear un formulario HTML que incorpora varias entradas (texto, contraseña, correo electrónico, área de texto, radio, etc)

• Procesá tu formulario usando Formspree

• Utilice el grid system de Bootstrap para diseñar tu página

• Utilice algunas clases CSS pre-escritas de Bootstrap sobre diversos elementos de su página

• Usar alert , prompt y console.log donde sea apropiados.

• Establecer y recuperar valores de las variables de JavaScript

• Usar document.querySelector en conjunto con textContent y innerHTML para recuperar y escribir contenido en la página

• Usar if, elseif y else para implementar una lógica ramificada en base a la comparación de variables y valores

• Usar el Y lógico ( && ), O lógico ( || ), y el operador ternario

• Usar while loops realizar un trabajo varias veces hasta que una condición se cumple

• Utilizar el Math y parseInt

• Usar jQuery para seleccionar elementos HTML existentes en la página

Utilizar de jQuery

• .css ()
• .attr ()
• .text ()
• .html ()
• [ ].append ()
• val() para obtener y establecer valores

Utilice algunos efectos jQuery como:

• .show()
• .slideDown()
• .fadeOut()

Stretch Objetivos

• [x]Utilice algunas de las utilidades de JavaScript de Bootstrap

• [ ]Trate de incorporar algunos jQuery Plugins

4. Desplegar y Promover

• Desplegar el código en Divshot utilizando sus herramientas de línea de comandos

• Publicar un enlace en Slack para que sus compañeros de clase pueden disfrutar de su trabajo

• Envíalo a tus amigos

• Social Media?

5. Ganar

1. Monetizar
2. Monetizar
3. Monetizar

Credits!

========= Article on CodyHouse (http://codyhouse.co/?p=607) Terms (http://codyhouse.co/terms/) Icons from Nucleo (http://nucleoapp.com/) ========= SASS and CSS We use SASS and Bourbon (http://bourbon.io/) for our resources. If you don't use SASS, just use the .css files that you find in the css folder. You can delete both sass and partials folders. We have integrated Eric Meyer’s CSS reset rules (http://meyerweb.com/eric/tools/css/reset/) and Modernizr (http://modernizr.com/).