Aprende Javascript con MentoringJS - Pretraining Step 3
Primero de todo, me he intentado familiarizar con la página dash. No ha sido muy difícil ya que al autenticarte ya te aparecen directamente los proyectos y es muy sencillo de empezar a practicar.
El sistema es parecido al de Codecademy, ya que incorpora con un editor y un visor. El visor, además, incorpora una visión de móvil
Metodología
La metodología es parecida a la de Codeacademy: trabajo por proyectos. La teoría o información se muestra en slides. Hay un foro por si te encallas en algún apartado, aunque el foro lleva a un foro de Facebook. Hay algunas cosas diferentes al curso de Codeacademy. Aquí hay skills que se supone que tienes que ir aprendiendo. Son skills de los elementos HTML, CSS o Javascript que van apareciendo. Cada vez que utilizas uno de estas habilidad se desbloquean y te aparecen como “superada”. Otra cosa diferente es que hay checkpoints donde tienes que realizar un ejercicio concreto con las indicadicones previas. Si no lo haces, no puedes seguir avanzando.
Proyecto 1
Este proyecto ha sido relativamente sencillo, ya que eran cosas bastante básicas y que ya he dado en otros cursos, incluído el de Codeacademy. Cada proyecto se divide en tres partes y un ejercicio libre final. La primera parte ha sido HTML básico. La segunda parte ha pasado directamente a CSS. Por lo que he visto, se avanza contenido más rápido que el curso de Codeacademy.
Una cosa tener en cuenta es que el código CSS se coloca en el mismo archivo HTML, ya que así se evita añadir otros archivos y también porque el editor dentro de la web quizá no sea el mejor modo para mostrar o navegar entre archivos. Hay muchas cosas que ya he tocado recientemente, por lo que voy bastante rápido, sin encallarme y sin pararme.
Proyecto 2
En el segundo proyecto ya empieza a aparecer contenido interesante y que no he visto mucho: la barra de navegación (navbar); responsive design y Javascript. Dentro del responsive design, veo las condiciones en CSS para que, cuando una pantalla sea más pequeña de x tamaño, se muestre cierto contenido como se le indique. Todo el tema de responsive y mobile-friendly es muy interesante. También aparecen el uso de colores, en hexadecimal (que ya había visto, en rgba)
Comenzamos con Javascript!. Toca hacer un botón de like, aunque solo la parte de delante (Front) ya que la de atrás (back) aun es pronto. A pesar de eso, hago mi primer script en Javascript!!! Uso la librería jQuery. La sintaxis de Javascript me descoloca un poco ya que parece más compleja que HTML y CSS, pero para empezar está bien.
Proyecto 3
Hasta el momento no había tenido problemas significativos, tan solo algunos pequeños problemillas cuando faltaban unas comillas dobles o había que poner junto el paréntesi, o cosas así. Pero, en este proyecto, ha habido un primer lugar dónde me he quedado estancado: al intentar poner un estilo de CSS con color en rgba. Me ha costado un rato, porque creo que lo ponía bien pero no me lo cogía. Después de mucho batallar (parece que esto será la tónica) he podido descubrir el pequeño error de sintaxis y seguir adelante.
La sensación de este último proyecto, aunque en el segundo ya me ha pasado, es que iba haciendo cosas y era un poco como un rompecabezas: ahora ponemos un poco de margen por aquí, de padding, de espacio en los parágrafos, etc., etc. Esto está bien cuándo tienes que ir siguiendo unos pasos, pero hacerlo yo solo desde cero creo que ahora mismo sería imposible. Esto queda claro cuando intentaba hacer el ejercicio libre, ya que cogía como base lo que había ido haciendo. Cuando en un momento dado quería cambiar el color o fondo o tamaño de un elemento del CSS, toda la web se descuadraba.
En este último proyecto he visto cosas más complejas de CSS, como los gradientes y la opacidad. Todo se ha complicado bastante más y me quedo un poco con la sensación de que necesito más práctica para que se me queden todos los conceptos y su sintaxis.
En este proyecto han aparecido nuevos temas interesantes, como por ejemplo las fuentes de Google. Al entrar en esta parte, he tenido algunas dificultades a la hora de seleccionar la fuente que me pedía el ejercicio en la web de Google, ya que no me quedaba claro como seleccionarla y después qué había que hacer. Al final he aprendido que había que darle al + en la fuente que querías y después desplegarla en el apartado “family selected”. Ahí aparecía el link CSS que se debía añadir en la parte del código del “head”. Después no me quedaba claro como aplicar esa fuente a la letra del código. Después de dar vueltas, he visto que había que añadir el nombre concreto que se indicaba en la web de Google de la propia fuente seleccionada.
Este último proyecto me ha costado bastante. En algunos momentos me he quedado estancado. Ha habido diversos motivos. En primer lugar, había checkpoints que tenía que ir hacia atrás a mirar la teoría y los ejemplos. Pero también ha habido casos en qué no me validaba bien el ejercicio y le he tenido que dar mil vueltas. La cosa se ha complicado… La parte de responsive design también se ha complicado pero es más fácil de entender que otras parte y, sobre todo, se disfruta más ya que ves los cambios muy efectivos.
Mi último proyecto. El restaurante