O documento aborda o desenvolvimento front-end na web, destacando as linguagens HTML, CSS e JavaScript/TypeScript, bem como a diferença entre desenvolvedor front-end e designer UI/UX. A HTML é descrita como a estrutura da página, o CSS como responsável pela estilização, e o JavaScript como a linguagem que permite interatividade. Além disso, menciona recursos como TypeScript e ferramentas de desenvolvimento como Visual Studio Code.

1. Front-end
Desenvolvimento web com:
• HTML
• CSS
• JavaScript/Typescript

2. Front-end
• Desenvolvedoro Front-end vs UI/UX Designer
• Corresponde a parte visual da aplicação,
aquele com a qual o usuário interage.
• Desenvolvedor Front-end: profisisonal
reponsável por desenvolver os códigos que
vão garantir uma página web consistente,
responsiva e com boa experiência de
usuário (UX).

3. FRAMEWORKS Conjunto de bibliotecas
BIBLIOTECA Conjunto de pacotes
PACOTE Coleção de funções (funcionalidades prontas para uso)
LINGUAGEM DE PROGRAMAÇÃO
Conjunto de regras que permitem criar um código fonte que
informará instruções de processamento ao computador
LINGUAGEM DE MAQUINA
Linguagem entendida pelo computador e de difícil
compreensão para o ser humano
HARDWARES Dispositivo físico construído por circuitos elétricos
Entendendo alguns termos importantes
Direto ao ponto...

4. Tecnologias
HTML
CSS
JavaScript
Voltar ao índice
TypeScript

5. HTML
• Uma linguagem que possui
simbolos especiais que indicam
metainformações.
Linguagem de Marcação
• Criada em 1991
• Versão atual 5.2, atualizada
em 2017.
Sobre
• Delimitadas por ‘<’ e ‘>’;
• Usadas para descrever o elemento que será adicionado;
• Exemplo de tags HTML:
<button>, <p>, <h1>, dentre outras.
Tags HTML
• É um termo que significa que,
diferentemente de um texto
comum, ele pode conter
referências navegáveis par
outros textos.
Hipertexto
• Não é uma linguagem de
programação, mas de
marscação.
Tipo de Linguagem
(Linguagem de Marcação de Hipertexto)
Hipertext Markup Language

6. CSS
• Por meio do CSS, é possível
estilizar os elementos HTML e,
dessa forma, garantir uma
interface mais agradável para
os usuários de uma aplicação.
Principais funções
• Trata-se de uma linguagem
de estilização.
Tipo de linguagem
• Utilizada para trazer uma
melhor aparência para as
páginas web.
Uso
(Folha de estilo em cascata)
Cascading Style Sheets

7. JavaScript
• Muitos browers (navegadores)
executam o JavaScript.
Execução
• É uma linguagem de
programação mais utilizada
entre os desenvolvedores.
Tipo de Linguagem
• LInguagem utilizada em
aplicações Front-end, Back-
end e Mobile.
Utiliação
• Existem inúmeros frameworks
que se baseiam no JavaScript
Frameworks

8. Resumo
É importante entender as seguintes informações:
O HMTL é basicamente o Esqueleto da sua página.
O CSS é estiliza, a sua página.
O JavaScript é o sistema nervoso, o cérebro, responsável por
todos os comandos para que o usuário possa interagir com a
página web e obtenha a resposta esperada.

9. TypeScript
• Linguagem de
programação em
crescente utilização.
Tipo de linguagem
• Muitos dizem que o TypeScript é um
super-set do JavaScript, pois ele
consegue utilizar todo o contexto do
JavaScript (JS) e acrescentar vantagens
próprias, como tipagem estática e
outros recursos da linguagem que
tornam o código menos suscetível a
erros durante o desenvolvimento e bugs
Caracteristicas
• Criado em 2012, por Anders
Hejlsberg (Compilador Turbo
Pascal e das linguagens Delphi
e C#). Ela é mantido pela
Microsoft e possui o próprio
Anders como o líder do projeto.
Sobre

10. Ambiente de Desenvolvimento
Editor de código
• VS Code (Visual Studio)
Extensões
• Material Icon Theme (Pacote de ícones)
• Better Comments (Destaque de comentários)
• JavaScript ES code snippets (intellisense melhores)
• Node.js (Executa códigos JS fora de um navegador web)
Tema
• Drácula Official

11. Fim