Front-End for OutSystems Developers | Setting up Front-End Developers

Setting up outstanding Front-End Developers

The OutSystems Front-End Developer program is an innovative and ambitious program designed for the preparation and qualification of outstanding Front-End Developers in OutSystems Platform. This is a very thorough and practical training based on the OutSystems UI framework. It has an updated curriculum that promotes a transversal and comprehensive understanding of how to better develop front-ends with the OutSystems Platform. The program is split in four modules, UX/UI basics, Front-End Development, Front-End Debugging and Live Style Guide.

Outcome
Methodology
Targets
Certification
PreRequisites

Outcome

With the OutSystems Front-End Developer program, trainees will master the front-end concepts and understand how to use and change the OutSystems UI framework including themes, templates, patterns and creating your own live style guide.

Methodology

The training methodology we follow is aimed at developing skills through their practical application, based on four vectors of learning: practical, theoretical, technical and technological; by focusing on interdisciplinary approach of the various aspects of OutSystems Programming.

Targets

The OutSystems Front-End Developer program is designed for OutSystems Associate Developers who want to master the OutSystems Front-End development.

Certification

The OutSystems Front-End Developer program has assessments in each module and a practical evaluation on a final project. A final score will be delivered in the end of the program.

PreRequisites

OutSystems Associate Developers with programming experience in OutSystems. It is also recommended to have experience in different technologies like HTML, CSS and JavaScript.

What we do to setting up an outstanding Front-End for OutSystems Developers

UX / UI Basics

Front-End Development

Front-End Debugging

Live Style Guide

1 DAY

UX / UI Basics

The UX/UI Basics module follows a flipped classroom approach, where the basics of UX/UI topics will be taught with the support of a guided exercise with the goal of understanding the concepts, the processes and the pitfalls of create an awesome User Experience.

CONTENTS:

The Developer’s UX Checklist
● Be a Storyteller
● Usability for IT Developers
● UX Checklist

Wireframing to minimize risk
● Process Basics with Wireframes

Awesome User Experience
● Talking to users
● Avoiding UX Traps

Assessments
Exam (requires a score of 70 percent or higher)

Results
Understand the UX/UI basic concepts

1 DAY

Front-End Development

The OutSystems Front-End Development module will teach you how to take advantage of OutSystems UI framework to convert web and mobile design artifacts in OutSystems applications. Best practices for themes, templates and patterns usage will be taught with support of guided exercises to put all concepts in practice.

CONTENTS:

Themes and templates
● OutSystems UI Themes
● OutSystems UI Structure (Menu, Layout, Content, Footer)
● Screen Templates
● Architecture

Pattern Development
● Blocks and Events
● OutSystems UI Patterns

Assessments
Exam (requires a score of 70 percent or higher)

Results
Understand how to develop themes, templates and patterns using OutSystems UI framework.

0.5 DAYS

Front-End Debugging

The Front-End Debugging module is design to teach the basics on how to use the browser console to help front-end developers inspect and debug CCS, HTML and JavaScript code. This module will be supported by several practical examples and exercises to put all concepts in practice.

CONTENTS:

Client and Server debugging

Browser Debugging
● The browser console
● CSS inspect
● How to debug your JavaScript
● Override JS files on the console
● Architecture / Components

Assessments
Exam (requires a score of 70 percent or higher)

Results
Understand how to take advantage of browser console tools for front-end development.

2.5 DAYS

Live Style Guide

The OutSystems Live Style Guide module is design to be a practical module, where what was taught in the previous modules will be used to create a custom branding of a fully-responsive simple live style guide, delivered as an OutSystems module, to be used directly by developers. In this module you will be able to choose your implementation in reactive or traditional web approach.

CONTENTS:

Live Style Guide
● Definition
● Benefits
● How to use
● Architecture and Components
● Maintenance

Implement your Live Style Guide
● Select a OutSystems UI base theme
● Customize OutSystems UI look & feel
● Implement new pattern
● Customize existing OutSystems UI pattern

Assessments
Exam (requires a score of 70 percent or higher)

Live Style Guide project Implementation

Results
Deliver a custom branding of a fully-responsive simple live style guide, based in a OutSystems UI theme.

What we do to setting up an outstanding Front-End for OutSystems Developers

UX / UI Basics

1 DAY

UX / UI Basics

CONTENTS:

The Developer’s UX Checklist
● Be a Storyteller
● Usability for IT Developers
● UX Checklist

Wireframing to minimize risk
● Process Basics with Wireframes

Awesome User Experience
● Talking to users
● Avoiding UX Traps

Assessments
Exam (requires a score of 70 percent or higher)

Results
Understand the UX/UI basic concepts

Front-End Development

1 DAY

Front-End Development

CONTENTS:

Themes and templates
● OutSystems UI Themes
● OutSystems UI Structure (Menu, Layout, Content, Footer)
● Screen Templates
● Architecture

Pattern Development
● Blocks and Events
● OutSystems UI Patterns

Assessments
Exam (requires a score of 70 percent or higher)

Results
Understand how to develop themes, templates and patterns using OutSystems UI framework.

Front-End Debugging

0.5 DAYS

Front-End Debugging

CONTENTS:

Client and Server debugging

Browser Debugging
● The browser console
● CSS inspect
● How to debug your JavaScript
● Override JS files on the console
● Architecture / Components

Assessments
Exam (requires a score of 70 percent or higher)

Results
Understand how to take advantage of browser console tools for front-end development.

Live Style Guide

2.5 DAYS

Live Style Guide

CONTENTS:

Live Style Guide
● Definition
● Benefits
● How to use
● Architecture and Components
● Maintenance

Implement your Live Style Guide
● Select a OutSystems UI base theme
● Customize OutSystems UI look & feel
● Implement new pattern
● Customize existing OutSystems UI pattern

Assessments
Exam (requires a score of 70 percent or higher)

Live Style Guide project Implementation

Results
Deliver a custom branding of a fully-responsive simple live style guide, based in a OutSystems UI theme.

Contact for Quote

Front-End for OutSystems Developers Training

Setting up outstanding Front-End Developers

Outcome

Methodology

Targets

Certification

PreRequisites

What we do to setting up an outstanding Front-End for OutSystems Developers

UX / UI Basics

Front-End Development

Front-End Debugging

Live Style Guide

What we do to setting up an outstanding Front-End for OutSystems Developers

UX / UI Basics

Front-End Development

Front-End Debugging

Live Style Guide

Contact for Quote