Uma das principais fases do desenvolvimento de um projeto Web, é a prototipação da aplicação. Nessa fase, definimos os padrões que devem ser utilizados em todo projeto, para que tenhamos uma interface bonita, de fácil uso e que atenda às necessidades do usuário. Entre vários aspectos, definimos como as informações serão organizadas, a paleta de cores e a tipologia que será aplicada, e como os conteúdos serão exibidos na interface. Para isso utilizaremos o Figma, uma das ferramentas mais disruptivas do mercado, e que, aliada aos padrões UI (User Interface) e UX (User Experience), possibilita a prototipação de interfaces para qualquer aplicação Web. Além disso, usaremos a Inteligência Artificial como ferramenta para nos ajudar no desenvolvimento de pesquisas, geração de conteúdo e testes, propiciando assim, uma perfeita experiência ao usuário.

O que você vai dominar?
 

• Visão geral de UX e UI; O que é interface;
• Pesquisas - Entrevistas;  
• Card Sorting;
• Uso do Chat GPT;
• Testes de Usabilidade;  
• Heurísticas;
• Introdução Figma;
• FigJam;
• Princípios design;
• Conceitos UI;
• Cores;
• Tipografia;
• Projeto;
• Rabiscos;
• Style Guide (Design System);
• Prototipação (Figma).

Agora que temos um protótipo, chega o grande momento de codificá-lo. Para isso, vamos utilizar duas linguagens essenciais no desenvolvimento Front-End: o HTML, a linguagem de marcação responsável pela inserção de qualquer tipo de conteúdo, e a CSS, a linguagem de estilização que realiza a formatação de todos os elementos existentes na interface. Além disso, usaremos um dos frameworks Front-End mais utilizado do mercado: o Bootstrap. Você também conhecerá o Sass, um pré-processador CSS que permitirá uma codificação mais rápida e organizada dos seus estilos.

O que você vai dominar?
 

• Como funciona uma página Web;
• Conceito de camadas: apresentação, formatação e comportamento;
• O que é HTML?;
• Conceito de tags;
• Como criar a estrutura inicial de um documento HTML;
• Inserção de tags para: títulos, parágrafos, imagens, links e listas;
• O que é CSS?;
• Conceito de estilização e tipos de CSS;
• Elementos que formam as regras CSS: Seletor, propriedade e valor;
• Criação de uma folha de estilos;
• Aplicações de formatações iniciais: tipologia, imagens, padrões de cores (Hexadecimal - RGB - HSL - HWB);
• O que são containers? Manipulação do Box Model;
• Formatação de background de páginas e containers: inserção de imagens e cores;
• Unidades de medida CSS: px – em – rem – vh – vw – vmin – vmax;
• Alteração de posicionamento dos elementos: position e flexbox;
• Posicionamento de elementos;
• Aplicação de tags semânticas: nav, main, section, article, header, footer e aside;
• Criação de layouts com CSS Grid Layout;
• Introdução ao Web design responsivo (WDR);
• Conhecimento de Bootstrap: conceitos iniciais, classes, grid, containers e páginas responsivas;
• Apresentação de componentes Bootstrap;
• Tabelas com HTML: Estilização com Bootstrap;
• Formulários HTML: Estilização com Bootstrap;
• Sass - O que é? Como funciona um pré-processador?;
• Instalação do Sass: Criando pastas do projeto;
• Tipos de sintaxe: Sass e SCSS;
• Compilação do Sass;
• Aplicação de comentários no Sass;
• Utilização de Nesting, Parent Selector e Placeholder Selector;
• Variáveis no Sass;
• Partial - Mixins - Funções.

O Framework Tailwind CSS possui classes de estilos totalmente reutilizáveis e intuitivas que podem ser customizadas facilmente, permitindo assim a criação de componentes e interfaces modernas de uma forma bem rápida e eficiente. Lançado em 2017, logo se mostrou uma ferramenta bem útil no desenvolvimento Front-End, pois possui muitas vantagens: é bem fácil de ser utilizado, pode aumentar a produtividade de desenvolvimento, permite a criação de um design consistente, é performático e possui total integração com o Javascript. Com certeza você se surpreenderá com esse framework e suas poderosas classes.

O que você vai dominar?
 

• Introdução ao Framework - Classes Utilitárias;
• Instalação - Arquivo de configuração - Documentação;
• Tipologia - Espaçamento - Cores;
• Background - Bordas;
• Utilização de flexbox;
• Utilização de Grid;
• Design responsivo;
• Criando componentes.

Javascript é uma das linguagens de programação mais utilizadas do mundo, e fundamental no desenvolvimento Web. Utilizaremos essa importantíssima linguagem para ensinar os conceitos de lógica de programação, em conjunto com os fantásticos recursos que ela possui. Você aprenderá como deixar suas aplicações muito mais interativas, proporcionando assim uma excelente experiência ao usuário.

O que você vai dominar?

• Introdução Javascript;
• Variáveis e tipos de dados;
• Operadores aritméticos;
• Operadores relacionais;
• Operadores lógicos;
• Estruturas de decisão;
• Estruturas de repetição;
• Objetos nativos do Javascript;
• Manipulação de Arrays;
• Introdução DOM - Document Object Model;
• Eventos;
• Funções em Javascript;
• Arrow Function;
• Filter - Map - Reduce;
• Objetos JSON.

Neste módulo você aprenderá React, uma das principais bibliotecas Javascript de código aberto para desenvolvimento Front-End. Criada pelo Facebook, como um dos seus principais projetos internos, ela teve seu código disponibilizado para a comunidade e logo se tornou um importante pré-requisito para quem deseja atuar no desenvolvimento Front-End. Você aprenderá a separar a interface em partes independentes, como componentes, e reutilizá-los quando necessário. O React também permite a criação de aplicações Web de forma simples, fácil, moderna e escalável.

O que você vai dominar?
 

• Introdução ao framework;
• JSX;
• Estilização;
• Componentes;
• Props;
• Eventos;
• Variáveis de Estado;
• Efeitos;
• React Hooks;
• React Router;
• JSON;
• Context API e states globais;
• Consumo de API;
• Hospedagem.

O Next.js é um poderoso framework para desenvolvimento Web que tem como base o React. Ele tem sido amplamente adotado pelos desenvolvedores devido à sua capacidade de simplificar o desenvolvimento, melhorar tanto o desempenho quanto a escalabilidade da aplicação, facilitar a otimização com os dispositivos de busca (SEO), entre outras vantagens. Com certeza esse framework te ajudará muito na criação de aplicativos Web modernos e eficientes.

O que você vai dominar?
 

• Introdução ao framework;
• Introdução TypeScript - Tipagem;
• Componentes;
• Funções;
• Gerenciamento de Rotas;
• Estilização;
• Server-Side-Rendering;
• Eslint;
• Consumo de API.