Calendario: Flexible.
Fecha disponible: Inmediata.
Porcentaje de Bonificación: 100%
Diploma acreditativo emitido por FUNDAE.
Certificado acreditativo para concursos y oposiciones.
Temario Personalizado.
Modalidades: teleformación, aula virtual y MIXTA
| La duración del curso de Desarrollo Frontend (HTML, CSS, SASS, JavaScript y Bootstrap) es de 50 horas,
acreditadas en el Diploma del mismo. PLAZO DE REALIZACIÓN: El plazo se puede establecer según las necesidades del alumno o del plan de formación de la empresa. |
Bonificación
Curso bonificable al 100%
| Este curso puede ser bonificado al 100% para la empresa receptora, incluso aunque esta tenga un porcentaje de copago en razón de su número de empleados en plantilla. El coste de la formación se recuperará
mediante descuento en el pago de los seguros sociales. |
Este descuento será aplicable libremente en cualquier mes del año posterior a la fecha en que haya finalizado la formación. Podrán bonificarse las matrículas de aquellos alumnos que realicen al menos el
75% del curso con éxito. |
Modalidades
Teleformación · Aula virtual · Mixta · Presencial
| EN CURSOS ONLINE Teleformación: En esta modalidad todo el curso se realiza a través de internet, con acceso las 24 hs. todos los días de la semana y plazo máximo de seis meses. No hay actividades como clases a las que el alumno deba asistir en horarios y fechas programados. Aula virtual: En esta modalidad la formación se imparte mediante clases en directo a través de internet, es decir clases tele-presenciales, que se llevarán a cabo a través de ZOOM, Skype u otra herramienta a convenir. Modalidad MIXTA: Combinación de las dos modalidades anteriores. Los trabajadores asisten a clases en directo (por ejemplo una a la semana) y entre clases disponen de material para avanzar en el curso en la plataforma. Es la más completa para grupos de trabajadores que realizan un mismo curso. EN CURSOS PRESENCIALES o SEMI - PRESENCIALES En esta modalidad los trabajadores realizan el curso asistiendo físicamente a un aula en la que se imparte la formación. Puede ser complementada igualmente con acceso a una plataforma online entre clases. Para esta modalidad se requiere una consulta previa de disponibilidad en la ciudad donde se desee llevar a cabo. |
NOTA:
Trabajamos con la metodologia de curso personalizado, creada por Ciberaula en 1997. Usted puede solicitar un curso a la medida de sus objetivos, que combine lecciones de 2 o mas cursos en un plan de formacion a su medida. Si este es su caso consultenos, esta metodologia ofrece un aprovechamiento maximo de la formacion en los cursos bonificados para trabajadores.
El temario predefinido del curso online de Desarrollo Frontend (HTML, CSS, SASS, JavaScript y Bootstrap) es el siguiente:
1 Introducción al CSS
1.1 Importancia del CSS en el desarrollo web
1.2 Estructura y sintaxis básica
1.3 Creación de una primera página web con estilos básicos
2 Fundamentos de los Selectores CSS
2.2 Selectores (Parte 1 y 2) tipo, clase, ID
2.3 Selectores avanzados combinadores, pseudo-clases
3 Estilización de Fondos y Textos
3.3 Fondos color, imágenes, gradientes
3.4 Texto y tipografía fuentes, tamaño, estilo
4 Unidades en CSS
4.1 Unidades de medida px, em, rem, %
4.2 Unidades de colores RGB, HEX, HSL
5 El Modelo de Caja en CSS
5.1 Box model margen, borde, padding, contenido
5.2 Display inline, block, inline-block, none
6 Diseño y Posicionamiento
6.1 Tipos de elementos bloque, en línea
6.2 Posicionamiento de cajas relativo, absoluto, fijo, flotante
7 Visualización Avanzada
7.1 Galería de imágenes técnicas y prácticas
7.2 Sombras y bordes estilos y aplicaciones
8 Pseudo-clases y Pseudo-elementos
8.1 Aplicaciones y ejemplos prácticos
8.2 Listas y menús de navegación estilización avanzada
9 Formularios Web Estilizados
9.1 Diseño de formularios de contacto
9.2 Campos, botones, y validación visual
10 Animaciones y Transiciones en CSS
10.1 Uso de la propiedad transform
10.2 Creación de animaciones y transiciones suaves
11 Tipografías y Diseño Responsivo
11.1 Fuentes personalizadas incorporación y uso
11.2 Diseño responsivo con HTML y CSS técnicas y prácticas
12 Introducción a Flexbox
12.1 Flexbox conceptos básicos y propiedades para contenedores
12.2 Diseño de una página con Flexbox estructura y estilos
13 Flexbox Avanzado
13.1 Estilos para header, main, aside, y footer con Flexbox
13.2 Responsive design con Flexbox prácticas y ejemplos
14 Introducción a CSS Grid
14.1 Creación de la primera grid
14.2 minmax(), repeat(), y técnicas de posicionamiento
15 CSS Grid Avanzado
15.1 Áreas en CSS Grid y alineación de elementos
15.2 Grid implícita, auto-fill, y auto-fit
16 Preprocesamiento con SASS
16.1 Instalación de SASS y sintaxis básica
16.2 Variables, anidación de selectores
17 Técnicas Avanzadas en SASS
17.1 Organización de proyectos en múltiples archivos
17.2 Mixins, funciones, y clases extendidas
18 JavaScript Básico
18.1 Introducción y sintaxis básica
18.2 Variables, tipos de datos, operadores
19 Estructuras de Control en JavaScript
19.1 Condicionales, bucles (for, while)
19.2 Funciones y eventos básicos del DOM
20 JavaScript Avanzado
20.1 Objetos, arrays y sus métodos
20.2 Scope, closure, y hoisting
21 Manipulación del DOM con JavaScript
21.1 Se y modificación de elementos
21.2 Creación y eliminación de nodos
22 Eventos y Formularios en JavaScript
22.1 Manejo de eventos
22.2 Validación y envío de formularios
23 JavaScript Moderno
23.1 ES6+ let, const, arrow functions, template literals
23.2 Promesas, async/await para operaciones asincrónicas
24 Introducción a Bootstrap
24.1 Conceptos básicos de Bootstrap y su grid system
24.2 Descarga e integración en proyectos
25 Componentes de Bootstrap
25.1 Uso de componentes botones, cards, modales
25.2 Formularios con Bootstrap diseño y validación
26 Bootstrap Avanzado
26.1 Flexbox en Bootstrap para diseño de layouts
26.2 Responsive design con Bootstrap prácticas y ejemplos
Inicio
VS Code (gratis, recomendado). Alternativas igualmente válidas: Sublime Text, WebStorm Community o incluso Notepad++ para empezar.npm install -g sass, completamente gratis.<div> o <p> es suficiente..html, dedica 30 minutos a un tutorial de HTML básico antes de empezar — el curso arranca en CSS.A lo largo del curso construyes piezas reales que puedes añadir a tu portafolio desde el primer día. Aquí tienes los proyectos más representativos:
localStorage y arrow functions ES6+. Caso de uso: demostración de JavaScript sin frameworks, muy valorada en procesos de selección junior.Estos son los tropiezos más frecuentes al aprender frontend. Identificarlos antes te ahorra horas de depuración:
box-sizing: border-box global: sin él, añadir padding o border rompe el ancho calculado y los layouts se descuadran de forma inexplicable. Ponlo siempre en el reset CSS.px para todo impide que el diseño escale con las preferencias de fuente del usuario. Usa rem para tipografía y espaciados, % o fr para anchos.position: absolute sin position: relative en el padre: el elemento se posiciona respecto al viewport en lugar de a su contenedor, con resultados impredecibles.var en lugar de let o const en JavaScript: el hoisting de var genera bugs difíciles de rastrear. Usa siempre const por defecto y let solo cuando necesites reasignar.== con ===: "5" == 5 devuelve true en JavaScript por la coerción de tipos. Usa siempre === salvo que tengas un motivo muy concreto.document.getElementById() en el <head> sin esperar al evento DOMContentLoaded devuelve null y rompe el script..scss directamente. Debes compilar a .css con el comando sass --watch antes de ver cambios.margin-left extra desalinea toda la fila.Recursos gratuitos y herramientas que complementan el curso desde el primer día:
Artículos publicados sobre Desarrollo Frontend (HTML, CSS, SASS, JavaScript y Bootstrap)
|
Por Mario Madrid Herramientas de Desarrollo Frontend
El desarrollo frontend ha evolucionado significativamente en los últimos años, gracias al surgimiento de diversas herramientas que facilitan la creación de interfaces de usuario atractivas y funcionales. Una de las más populares es React, una biblioteca de JavaScript desarrollada por Facebook que permite construir componentes reutilizables. Otras herramientas esenciales incluyen Angular, un framework mantenido por Google, y Vue.js, conocido por su simplicidad y flexibilidad. Además de los frameworks y bibliotecas mencionadas, existen otras herramientas que facilitan el flujo de trabajo de los desarrolladores. Webpack, por ejemplo, es un module bundler que permite agrupar múltiples archivos en uno solo para optimizar la carga de la página. Por otro lado, Sass es un preprocesador CSS que añade funcionalidades como variables y mixins al CSS tradicional, mejorando la eficiencia y la mantenibilidad del código. Finalmente, herramientas como Git y GitHub son cruciales para el control de versiones y la colaboración en proyectos de desarrollo frontend. Estas plataformas permiten a los desarrolladores trabajar de manera colaborativa y gestionar el historial de cambios en el código de manera efectiva. Con la combinación adecuada de herramientas, los desarrolladores pueden crear experiencias de usuario optimizadas, manteniendo un código limpio y escalable. |
|---|
|
Por Jasmin Fasquelle Componentes Web Reutilizables con JavaScript y Web Components Componentes Web Reutilizables con JavaScript y Web Components son una herramienta poderosa para los desarrolladores modernos. Estos componentes permiten crear elementos personalizados y encapsulados que se pueden utilizar en diferentes proyectos, ahorrando tiempo y esfuerzo. Al aprovechar las capacidades nativas de JavaScript y los estándares de Web Components, se pueden construir interfaces de usuario más modulares y mantenibles. La clave para utilizar Web Components es entender sus cuatro pilares principales: Custom Elements, Shadow DOM, HTML Templates y ES Modules. Con Custom Elements, puedes definir nuevos elementos HTML que tienen comportamientos personalizados. El Shadow DOM proporciona encapsulamiento, evitando conflictos de estilos y scripts. Las HTML Templates permiten definir estructuras reutilizables, y los ES Modules facilitan la carga de scripts de manera modular. Adoptar Componentes Web Reutilizables con JavaScript no solo mejora la eficiencia del desarrollo, sino que también impulsa la compatibilidad y rendimiento de las aplicaciones web. A medida que más navegadores soportan estos estándares, los Web Components se están convirtiendo en una herramienta esencial en la creación de interfaces modernas, escalables y de alto rendimiento. |
|---|
|
Por Jasmin Fasquelle Accesibilidad Web: Mejores Prácticas en HTML y ARIA
Accesibilidad Web es fundamental para garantizar que todas las personas, incluidas aquellas con discapacidades, puedan navegar y utilizar sitios web de manera efectiva. Una de las mejores prácticas es utilizar etiquetas HTML semánticas adecuadamente. Estas etiquetas no solo mejoran la estructura del contenido, sino que también permiten que los lectores de pantalla interpreten y naveguen por el sitio de manera más eficaz. Además, es esencial proporcionar texto alternativo para las imágenes y asegurarse de que todos los enlaces sean descriptivos y comprendan el propósito de cada elemento interactivo. La implementación de ARIA (Accessible Rich Internet Applications) es otro aspecto crucial en la accesibilidad web. ARIA permite a los desarrolladores mejorar la accesibilidad de aplicaciones web ricas al agregar atributos que describen el comportamiento y el propósito de los elementos en la interfaz. Por ejemplo, los roles ARIA pueden definir qué función tiene un componente específico, como un botón o un cuadro de diálogo, y los estados y propiedades ARIA pueden actualizarse dinámicamente para reflejar cambios en la interfaz, proporcionando a los usuarios una experiencia más inclusiva y comprensible. Para mejorar la accesibilidad web, también es importante realizar pruebas regulares con herramientas de evaluación de accesibilidad y con usuarios reales que tienen diversas discapacidades. Estas pruebas pueden revelar problemas que no son evidentes durante el desarrollo. Al seguir estas mejores prácticas en HTML y ARIA, los desarrolladores pueden crear sitios web más accesibles y mejorar significativamente la experiencia del usuario para todos. |
|---|
|
Por Jasmin Fasquelle Animaciones Web Creativas con CSS y JavaScript En la era digital actual, las animaciones web creativas se han convertido en una herramienta esencial para mejorar la experiencia del usuario en sitios web. Utilizando CSS y JavaScript, los desarrolladores pueden crear efectos visuales dinámicos que capturan la atención y mantienen a los visitantes comprometidos. Desde transiciones suaves hasta animaciones complejas, estas técnicas no solo embellecen un sitio, sino que también pueden mejorar su funcionalidad y usabilidad. Uno de los métodos más populares para implementar animaciones web es mediante CSS. Con propiedades como transform, transition y animation, es posible crear movimientos suaves y transiciones atractivas sin necesidad de cargar archivos pesados. Por otro lado, JavaScript permite un control más detallado y la capacidad de responder a eventos del usuario en tiempo real, lo cual es perfecto para interacciones más complejas como juegos y aplicaciones interactivas. En resumen, combinar CSS y JavaScript en animaciones web puede transformar un sitio estático en una experiencia dinámica y envolvente. Al dominar estas herramientas, los desarrolladores pueden crear sitios web que no solo sean funcionales, sino también visualmente impresionantes, lo que puede aumentar significativamente el tiempo de permanencia de los usuarios y mejorar las tasas de conversión. |
|---|
|
Por Jasmin Fasquelle Estrategias de Optimización de Carga de Página para Frontend
Las estrategias de optimización de carga de página para frontend son fundamentales para mejorar la experiencia del usuario y el rendimiento del sitio web. Un primer paso clave es minimizar el tamaño de los archivos utilizando técnicas como la compresión de imágenes y la reducción de archivos CSS y JavaScript. Utilizar herramientas como Webpack o Gulp permite automatizar estos procesos, asegurando que el contenido estático se entregue de manera eficiente. Además, implementar la carga diferida de imágenes y scripts ayuda a mejorar los tiempos de carga iniciales. Otra estrategia esencial es aprovechar el caché del navegador. Configurar correctamente el caché permite que los elementos recurrentes de la página, como logos o archivos CSS, se almacenen localmente en el navegador del usuario, reduciendo la necesidad de volver a descargarlos en visitas subsiguientes. Complementariamente, utilizar una red de distribución de contenido (CDN) puede distribuir los archivos estáticos desde servidores ubicados estratégicamente alrededor del mundo, disminuyendo la latencia y acelerando la entrega de contenido. Finalmente, optimizar el renderizado del frontend puede marcar una gran diferencia. Priorizar el renderizado de contenido crítico, como el HTML y CSS esenciales, asegura que los usuarios vean el contenido principal rápidamente. El uso de técnicas como AMP (Accelerated Mobile Pages) también puede mejorar significativamente los tiempos de carga en dispositivos móviles, lo cual es crucial dado el creciente número de usuarios que acceden a sitios web desde sus teléfonos. Implementar estas estrategias de optimización no solo mejora la experiencia del usuario, sino que también puede influir positivamente en el posicionamiento en motores de búsqueda. |
|---|
|
Por Jasmin Fasquelle HTML5 Avanzado: Más Allá de las Bases En el mundo del desarrollo web, HTML5 ha revolucionado la forma en que diseñamos y estructuramos sitios web. A medida que las necesidades de los usuarios y las capacidades de los navegadores han evolucionado, los desarrolladores han tenido que ir más allá de las bases de HTML5 para crear experiencias más dinámicas e interactivas. API como Canvas y WebGL permiten la creación de gráficos y animaciones complejas directamente en el navegador sin necesidad de complementos externos. Estas tecnologías, junto con la integración de microdatos y elementos semánticos, mejoran la accesibilidad y el SEO de los sitios web. La implementación de características avanzadas en HTML5 también incluye el uso de Service Workers para mejorar la performance y la capacidad de trabajar sin conexión. Los Service Workers actúan como un proxy entre la aplicación y la red, permitiendo almacenar recursos en caché y ofrecer experiencias más rápidas y confiables. Además, con el uso de WebSockets y WebRTC, los desarrolladores pueden implementar comunicación en tiempo real, lo que es crucial para aplicaciones de chat y videollamadas. Por último, la integración de HTML5 con otras tecnologías web modernas como CSS3 y JavaScript ES6 permite una mayor interactividad y una experiencia de usuario más rica. El uso de Frameworks y librerías como Angular, React y Vue.js optimiza el desarrollo y facilita la creación de aplicaciones web complejas y eficientes. Con estas herramientas avanzadas, HTML5 sigue siendo una pieza clave en el desarrollo web moderno, llevando la creación de sitios web más allá de lo básico hacia nuevas fronteras de funcionalidad y rendimiento. |
|---|
|
Por Jasmin Fasquelle JavaScript Moderno: Características y Herramientas
JavaScript ha evolucionado significativamente desde su creación, y el JavaScript moderno ha incorporado numerosas características que facilitan la escritura de código más limpio y eficiente. Con la introducción de ES6 y versiones posteriores, JavaScript moderno ofrece nuevas sintaxis y capacidades como las clases, módulos y promesas, que son esenciales para el desarrollo de aplicaciones complejas. Estas características no solo mejoran la legibilidad del código, sino que también optimizan el flujo de trabajo de desarrollo.
El uso de herramientas modernas de desarrollo en JavaScript, como Babel y Webpack, ha permitido a los desarrolladores mantenerse al día con las últimas características del lenguaje, garantizando compatibilidad con navegadores antiguos. Además, los frameworks y bibliotecas como React, Angular y Vue han revolucionado la forma en que se construyen las interfaces de usuario, haciendo que JavaScript sea indispensable en el desarrollo front-end. Estas tecnologías no solo aceleran el desarrollo, sino que también promueven mejores prácticas y patrones de diseño más sólidos.
La comunidad de desarrolladores juega un papel crucial en el continuo crecimiento y evolución de JavaScript. Con una vasta cantidad de recursos y tutoriales disponibles, aprender JavaScript moderno es más accesible que nunca. Además, la contribución continua de la comunidad al desarrollo de nuevos frameworks, herramientas y bibliotecas garantiza que JavaScript siga siendo relevante y en la vanguardia de la tecnología de desarrollo web. |
|---|
|
Por Ana Flores Tendencias Actuales en Diseño Web con CSS y SASS El mundo del diseño web está en constante evolución, adaptándose no solo a las necesidades de los usuarios sino también a los avances tecnológicos. Entre las herramientas que están marcando la pauta en la creación de interfaces atractivas y funcionales se encuentran CSS y SASS. Estas tecnologías permiten a los desarrolladores y diseñadores implementar tendencias actuales de diseño de manera eficiente y con mayor control sobre el estilo de los sitios web. Las animaciones complejas, los degradados dinámicos y los diseños responsivos no solo mejoran la estética, sino que también la usabilidad y accesibilidad de las páginas web. Una de las tendencias destacadas es el uso de variables CSS y funciones SASS, que facilitan la implementación de esquemas de colores personalizables y la adaptabilidad del diseño a diferentes dispositivos y preferencias del usuario. Esta capacidad de personalización no solo enriquece la experiencia del usuario sino que también refleja la identidad de marca de manera coherente a través de diferentes plataformas. Además, la incorporación de grid y flexbox en CSS ha revolucionado la forma en que se estructuran los layouts, permitiendo diseños más complejos y versátiles que se adaptan de manera fluida a cualquier tamaño de pantalla. Por otro lado, la importancia de la optimización del rendimiento y la accesibilidad web nunca ha sido tan crucial. El uso eficiente de CSS y SASS, junto con prácticas de codificación limpias y la implementación de técnicas de carga diferida, contribuyen significativamente a la velocidad de carga de las páginas, aspecto vital para mejorar el SEO y retener a los visitantes en el sitio. Al mismo tiempo, asegurarse de que los sitios web sean accesibles para todos los usuarios, incluyendo aquellos con discapacidades, se ha convertido en un estándar en el diseño web, reforzando la necesidad de seguir las directrices de accesibilidad web (WCAG) mediante el uso adecuado de HTML semántico y ARIA roles con CSS y SASS. En conclusión, estas tendencias no solo destacan la importancia de crear sitios web estéticamente agradables y funcionalmente ricos, sino que también subrayan el compromiso con la inclusión y la accesibilidad en el espacio digital. |
|---|
📰 Blog del curso
Formación bonificada online para empresas. Ayudamos a equipos a ganar productividad con formación realmente aprovechable.
Somos una empresa de formación bonificada especializada en formación online en sus diferentes modalidades: teleformación, aula virtual y formación mixta.
Ayudamos a nuestros clientes a alcanzar una mayor productividad mediante acciones formativas ajustadas a sus necesidades reales.
Formación que transforma equipos. Nos esforzamos por aportar valor: diseñamos itinerarios con objetivos concretos de negocio, medimos la finalización real, y acompañamos a cada alumno hasta el final. Por eso el 95% de quienes empiezan, terminan.
