Curso de Sass

Este curso de desarrollo con Sass es un curso ideal para todos aquellos que quieran tener una mejor comprensión global sobre el desarrollo frontend, quieran conocer herramientas y frameworks para mejorar el mismo y quieran mejorar su proceso de desarrollo y hacerlo más organizado.

Podrás realizar este curso online de forma exitosa cumpliendo algunos requisitos previos, como son poseer un conocimiento amplio sobre HTML, también sobre CSS, al menos todo lo referente a selectores y maquetación, y tener ciertos conocimientos básicos sobre programación. Si además sabes algo sobre Bootstrap, mucho mejor.

Si no cumples estos requisitos, te recomendamos preparar previamente los cursos necesarios, que encontrarás en nuestra plataforma, como son el curso de HTML5 y CSS3, el curso de introducción a la programación y el curso de bootstrap 4, todos ellos incluidos en la suscripción.

La formación se compone de cuatro bloques, cada uno centrado en un aspecto del desarrollo frontend, para que vayas adquiriendo los conocimientos de forma organizada y estructurada en clases no muy extensas, para ayudarte a la comprensión.

Comienza el curso con una primera toma de contacto con el tutor y con el curso, quién realiza una introducción sobre él mismo y sobre el temario. Después explicará el glosario de conceptos básicos, como frontend, preprocesador CSS, web component, build-tools o task runners y workflow.

Para completar esta primera parte introductoria, podrás ver los componentes y programas que componen el entorno de trabajo recomendado y que se utilizará durante el resto del curso, para que puedas instalarlo en tu equipo.

Una vez finalizada esta primera sección, comenzaría ya el primer bloque formativo propiamente dicho, el cual se va a centrar en Sass, el preprocesador CSS que utilizaremos y en el que se basa todo este curso online.

En las diferentes lecciones que componen el bloque de Sass aprenderás sus características principales, sus ventajas más destacadas y algunas de las desventajas que presenta respecto a otras opciones, así como instalar la última versión del mismo.

También irás conociendo los elementos básicos de esta herramienta (variables, comentarios, listas, mapas, interpolación y anidamiento), para después aprender a realizar una compilación con Sass.

Seguidamente realizaremos el ejercicio práctico propuesto por el profesor, el cual te servirá para plasmar de forma más visual todo lo visto de forma teórica hasta este momento.

En la recta final del apartado dedicado a Sass se hablará sobre las estructuras de control y las funciones del mismo (@if, @else, @while, @for, @each), sus directivas (@import, @extend, @error, @warn, @debug, @at-root, @media, @support, @keyframes) y los mixins.

De todos estos conceptos se realizarán unos completos ejercicios prácticos con los que asentar estos conocimientos de una forma mucho más fácil. Y para completar el bloque, veremos cómo documentar nuestro proyecto CSS con la herramienta SaasDoc, realizando también una práctica sobre este proceso.

El siguiente bloque trata sobre Gulp, un task runner o build-tool que nos proporciona muchas posibilidades. Comenzarás aprendiendo a instalar esta aplicación y a crear un primer proyecto con ella, y a continuación se explicará cómo generar las tareas con el fichero gulpfile.js.

En el resto de clases de este segmento dedicado a Gulp te mostraremos una serie de interesantes plugins con los que extender sus funcionalidades, como gulp-concat o gulp-dart-sass entre otros, y también cómo definir nuestro workflow y qué tareas lo componen.

Llegamos al penúltimo apartado del curso, en el que aprenderás a crear tu propio framework de trabajo utilizando Bootstrap, un completo y conocido framework CSS. Comenzaremos explicando qué es Bootstrap, sus ventajas e inconvenientes y cómo descargar e instalarlo en nuestro sistema.

Seguidamente pasamos a explicar cómo se organiza un framework CSS de manera profesional, para que conozcas su estructura de directorios, el fichero package.json y la carpeta Scss. Después aprenderás a adaptar un tema ya existente en Bootstrap y modificándolo según tus necesidades, y también cómo generar un tema nuevo propio utilizando Gulp.

Para concluir el curso te enfrentarás al segmento en el que vamos a desarrollar nuestro propio mini framework CSS, aplicando todos los conocimientos que se han visto a lo largo del curso hasta llegar aquí, pudiendo de esta forma comprobar todas las posibilidades que ofrece el uso de Sass y Gulp conjuntamente.

En este proceso partiremos de una estructura previa de directorios, crearemos los componentes de nuestro framework, estableceremos el flujo de trabajo con Sass y Gulp, comenzaremos la creación del framework y acabaremos utilizando el mismo para desarrollar una página web.

Comprobarás que este curso de Sass desde cero se ha desarrollado enfocándolo principalmente a que aprendas de una forma muy centrada en la práctica, de forma que comprendas la teoría y de forma inmediata con los ejercicios aplicados la asimiles mucho más rápidamente.

Aprender Sass y complementarlo con el uso de Gulp y de Bootstrap tal y cómo el profesor explica a lo largo de esta formación, hará que mejores tu perfil como desarrollador frontend o desarrollador web de una forma más profesional.