brenomatias / Fundamentals-and-Front-end

Studies and projects about Fundamentals of Web Development and Front-end (JavaScript | React )

FUNDAMENTALS OF WEB DEVELOPMENT

Block 1: Unix, Bash

• 1: Unix & Bash

Block 2: Git, GitHub and Internet

• 2-1: Git & GitHub
• 2-2: Internet - How it works

Block 3: HTML and CSS Introduction

• 3-1: HTML & CSS - Pages structure
• 3-2: HTML Semantic

Block 4: Introduction to JavaScript and Programming Logic

• 4-1: JavaScript - Array and loop For
• 4-2: JavaScript - Algorithm Lofic
• 4-3: JavaScript - Objects and functions
• 4-5: [Project - Playground Functions]

Block 5: JavaScript: DOM, Eventos and Web Storage

• 5-1: JavaScript - DOM and seletores
• 5-2: JavaScript - Evento
• 5-3: JavaScript - Web Storage
• 5-4: [Project - Pixels Art]
• 5-5: [Project - To Do List]

Block 6: HTML - CSS: Forms, Flexbox and Responsivness

• 6-1: HTML & CSS - Forms
• 6-2: Library JavaScript and Frameworks CSS
• 6-3: CSS Flexbox -
• 6-5: CSS Responsive
• 6-6: [Project 08 - ](

Block 7: Introduction to JavaScript ES6 and Unit Tests

• 7-1: JavaScript ES6 - let, const, arrow functions and template literals
• 7-2: JavaScript ES6 - Objects
• 7-3: Unit tests in JavaScript
• 7-4: [Project 09 - JS ES6 & Unit Tests]

Block 8: Higher Order Functions of JavaScript ES6

• 8-1: JavaScript ES6 - Higher Order Functions - forEach, find, some, every, sort
• 8-2: JavaScript ES6 - Higher Order Functions - map e filter, reduce
• 8-3: JavaScript ES6 - spread operator, parâmeters, rest, destructuring
• 8-4: [Project 10 - JS ES6 & Higher Order Functions (Zoo Functions)

Block 9: Asynchronous JavaScript e Promises

• 9-1: Asynchronous JavaScript and Callbacks
• 9-2: JavaScript Promises
• 9-3: [Project 11 - Shopping Cart]

FRONT-END DEVELOPMENT

Block 11: Introdução à React

• 11-1: Introdução Front-end & React
• 11-2: Componentes React
• 11-3: [Project 13 - Movie Cards Library]

Block 12: Componentes com Estado, Eventos e Formulários com React

• 12-1: Componentes com estado e eventos
• 12-2: Formulários no React
• 12-3: [Project 14 - Movie Cards Library Stateful]

Block 13: Ciclo de Vida de Componentes e React Router

• 13-1: Ciclo de vida de componentes
• 13-2: React Router
• 13-3: [Project 15 - Movie Cards Library CRUD]crud)

Block 14: Metodologias Ágeis

• 14-1: Metodologias Ágeis
• 14-2: Project 16 - Frontend Online Store

Block 15: Testes automatizados com React Testing Library

• 15-1: RTL - Primeiros passos
• 15-2: RTL - Mocks e Inputs
• 15-3: RTL - Testando React Router
• 15-4: [Project 17 - React Testing Library]

Block 16: Introdução ao Redux

• 16-1: Introdução ao Redux
• 16-2: React com Redux - Parte 1
• 16-3: React com Redux - Prática
• 16-4: React com Redux - Parte 2
• 16-5: Testes síncronos com React-Redux
• 16-6: Project - Tabela com filtros de dados

Block 17: Project React

• 17-1: [Project - Jogo de Trivia]

Block 18: React & Context API

• 18-1: Context API do React
• 18-2: React Hooks - useState e useContext
• 18-3: React Hooks - useEffect e Hooks customizados
• 18-4: Project - StarWars Datatable com Context API e Hooks

Block 19: Project Final de Front-end

• 19-1: Project - App de Receitas