Curso de Herramientas Frontend

Aprende a trabajar de una forma profesional con las herramientas que mejorarán tu flujo de desarrollo frontend
Material disponible
Intermedio
22 Clases 41 h
A éste y otros 200+ cursos
Independientemente de tu perfil y de tus habilidades, conocer y dominar las herramientas de trabajo que hoy en día tienes al alcance no solo hará que agilices tus desarrollos sino que logres multiplicar tu calidad profesional en poco tiempo.

El Curso de Herramientas Frontend es una iniciativa 100% online que te mostrará las buenas prácticas, herramientas y procesos que usan es sus trabajos los mejores desarrolladores y que harán que te sorprendas de cómo has podido sobrevivir sin ellas hasta la fecha.

También veremos cómo implementar una colección de buenas prácticas que harán más robusto tu desarrollo y acabaremos con un repositorio de un proyecto base, nuestro propio boilerplate, con varias de estas herramientas pre-configuradas. Empezar a trabajar con las mejores condiciones en un nuevo proyecto será más rápido que nunca!

Para trabajar con los ejemplos podéis usar el editor de código con el que más cómodo os sintáis. Por nuestra parte, al ser varios docentes, usaremos varios editores o IDEs. Con esto podremos ver que esa herramienta en concreto dependerá de cada desarrollador.

Objetivos del curso

El objetivo del curso es proporcionar las habilidades necesarias para optimizar tu trabajo en el desarrollo de cualquier tipo de aplicación, gracias a herramientas como Preprocesadores, PostCSS, Linters, Grunt o Gulp, para ello contaremos con la tutorización de un equipo de profesionales y expertos en el desarrollo Frontend que te descubrirán los secretos de todas estas tecnologías. Aquí puedes ver el programa de contenidos completo.

Qué tengo que saber

Para poder seguir el curso con fluidez será necesario un nivel básico de HTML,CSS y Javascript. En muchos casos trabajaremos con la terminal y con ficheros de configuración.

Clases y contenidos

1. Buenas prácticas en HTML5
  • Estructura del código HTML5.
  • Cómo crear un código semántico.
  • Accesibilidad (aria roles).
  • Cómo construir formularios semánticos y accesibles.
2. Boilerplate y frameworks Front­end

Veremos qué es boilerplate y cómo nos puede facilitar inicializar nuestros proyectos de una forma ágil. También veremos las diferentes alternativas disponibles.

3. Buenas prácticas en Javascript Gratis

Javascript es el lenguaje que tenemos disponible para el desarrollo de webs o aplicaciones en cliente. Como todo en lenguaje de programación tenemos una serie de buenas prácticas que hará que nuestro código sea más óptimo, más estructurado y siguiendo una serie de convenciones más fácil de leer para otros desarrolladores.

4. Buenas prácticas en CSS

CSS es una parte muy importante en el desarrollo de un site. Hay convenciones que hemos ido adquiriendo para que tengamos unas buenas prácticas y facilitar la estructura de archivos y código. Conoceremos diferentes formas de trabajar con CSS, como OOCSS, SMACSS y BEM.

5. Preprocesadores CSS: Sass, Less y Stylus

Los preprocesadores CSS permiten aplicar la lógica de programación, agilizando el desarrollo y las modificaciones de nuestro CSS. Veremos los que tenemos disponibles, cómo integrarlos en nuestros proyectos y ejemplos de uso

6. Preprocesadores HTML: Markdown, Jade y Haml

En HTML también tenemos disponibles preprocesadores, los cuales nos ofrecen una sintaxis simplificada, incluso estructuras de control para generar nuestro HTML final. Un ejemplo que vemos a diario es Markdown, en los Readme de los repositorios de GitHub.

7. Preprocesadores JS: CoffeeScript,TypeScript + ES6

Nos centraremos en el nueva estandar Javascript ES6 y cómo hacerlo compatible con los navegadores mediante Babel. También conoceremos que es CoffeeScript y TypeScript, así como la influencia que han marcado en la nueva versión de ECMAScript.

8. PostCSS

En esta sesión veremos esta herramienta para transformar estilos mediante plugins de JavaScript. Esto hará que podamos centrarnos en escribir Vanilla CSS

9. Linters: CSS, Sass, JS, PHP

Analizaremos cómo los linters pueden mejorar nuestro código, desde una perspectiva de buenas prácticas.

10. WPO: Web Performance Optimization

Es uno de los puntos más importantes en la experiencia de usuario. Aprenderemos cómo optimizar nuestros proyectos para que sean más rápidos.

11. Web Developer Tools

Desde su aparición, las developer tools no han dejado de mejorar y facilitarnos las tareas de desarrollo. Veremos cómo sacarle el máximo partido.

12. Grunt | Gulp

Tanto Grunt, como Gulp son gestores de tareas que nos permiten automatizar procesos que repetimos en cada proyecto. Analizaremos los dos más populares.

13. Plugins para Grunt y Gulp

Haremos un repaso a los plugins más importantes que tenemos disponibles para Grunt y Gulp.

14. Optimización de imágenes (Bitmap + SVG)

Las imágenes y gráficos son una parte muy importante del contenido de un site, pero igual de importante es saber cómo optimizar ese contenido para que sean lo más ligeras posibles.

15. Browserify

Esta librería nos permite escribir código JavaScript del cliente, como si estuviéramos programando en Node.js con módulos.

16. Node.js + npm

Con Node.js y su gestor de paquetes npm, veremos qué podemos ejecutar Javascript fuera del navegador. Veremos cómo trabajar con un entorno Node, cómo instalar paquetes y cómo crear nuestro propio paquete.

17. Webpack

Webpack es un module bundler (empaquetador de módulos) muy eficiente para webapps, que nos permite la carga, empaquetado, fragmentación del código y compilación a Javascript nativo.

18. TIPS para Sublime

Text Sublime Text es uno de los editores más populares entre los desarrolladores frontend, en esta sesión veremos una serie de TIPS para ser más productivos.

19. Herramientas para generar guías de estilos

Todo proyecto debería disponer de guías de estilos, esto facilita el desarrollo y futuras funcionalidades. Veremos algunas herramientas para automatizar este proceso.

20. TDD y BDD

Aprenderemos las ventajas, la diferencia entre TDD y BDD, cuándo y cómo debemos implementar cada una de ellas.

21. Git y Github para Front­end

Daremos un repaso a las principales órdenes de Git, así como ver el uso de Github como herramienta de desarrollo colaborativo.

22. Clase Extra Frontend Pre-commit Rules

Frontend Pre-commit Rules y cómo nos ayudan a mejorar la calidad de nuestro código mediante el Linting de Javascript y de SASS.

Valoraciones

Javi Felices

Emilio

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete