O basico para iniciar no frontend

Faaala dev! Bora entender os principais conceitos de um desenvolvedor frontend!

O desenvolvimento frontend envolve o uso de HTML, CSS e JavaScript para criar um web site do lado do cliente. O lado do cliente de um web site é a parte visual de um aplicativo da Web e também com o que um usuário interage quando um site é aberto: cores, fontes, botões, navegações, animações etc.

O desenvolvimento frontend inclui a interface do usuário de um aplicativo. Tudo o que um usuário interage quando visita um site, como uma página de login ou inscrição, página inicial, página de contato, se enquadra no termo de desenvolvimento de frontend. Um desenvolvedor frontend é responsável por construir e implementar a interface de um site ou aplicativo da web. Eles criam aplicativos do lado do cliente usando tecnologias da Web, como HTML, CSS e JavaScript.

Em 2022, no entanto, o desenvolvimento frontend foi além do HTML, CSS e JavaScript. Há muitas tecnologias e framework frontend que você precisa aprender para se destacar como desenvolvedor este ano. Este post abordará tudo o que você precisa para começar a desenvolver frontend em 2022.

Fundamentos da Web

Antes de mais nada, é fundamental aprender os fundamentos da web e entender como tudo funciona antes de começar a aprender qualquer tecnologia. Você deve aprender sobre coisas como:

• Como a internet funciona
• HTTP / HTTPS

Aprendendo HTML

HTML significa Hypertext Markup Language. É a linguagem de marcação para a construção de páginas da web, é também o bloco de construção da web. HTML é fácil de aprender e compreender. Com apenas HTML, você pode construir um site básico.

Você precisa aprender o básico de HTML, como: Títulos HTML- estes são o que você usa para exibir títulos ou legendas em suas páginas da web. Consiste em <h1> que é o título mais importante e <h6> que é o menos importante. exemplo:

Formulários HTML - Os formulários HTML são usados ​​para coletar entradas de dados, como nome de usuário, e-mail, informações de contato. Elementos HTML - os elementos HTML definem como os navegadores da Web formatarão e exibirão o conteúdo. O conteúdo na tag <i> será exibido em itálico, o conteúdo na tag <strong> será exibido em negrito. Atributos HTML - os atributos HTML fornecem informações adicionais sobre os elementos HTML. Por exemplo, a tag <img> é usada para incorporar uma imagem em uma página da web, o atributo src será usado para definir o caminho onde a imagem está localizada. por exemplo:

Algumas tags HTML são Self-Closing, que significa que elas abrem e fecham em si mesmas como no exemplo acima, ao invez de <img> </img>

Layout HTML - o layout HTML define as diferentes maneiras pelas quais um site exibe o conteúdo. É aconselhável usar elementos HTML semânticos, como <header><nav><main><section><article><footer>, porque descreve claramente o elemento para o navegador e o desenvolvedor.

Aqui estão alguns recursos para aprender HTML:

• HTML tutorial - w3schools (Code Pilot recomenda)
• HTML Curso Completo - Freecodecamp

Aprenda CSS

CSS significa Cascading Style Sheets. É a tecnologia para aprender depois do HTML. Ele é usado para estilizar nosso HTML. Por exemplo, podemos usar CSS para espaçar nosso conteúdo, cores, fontes, etc.

Os conceitos básicos de CSS que você precisa aprender são:

• CSS Box model - Box model consiste na margem, borda, preenchimento e conteúdo.
• CSS Positioning - Positioning ajuda você a manipular um elemento para diferentes locais, como fixed, relative, absolute, estatic, etc. A imagem abaixo mostra as posições CSS.
• CSS Grid - Grid é um sistema bidimensional com linhas e colunas. A grade CSS facilita a estruturação de uma página da Web sem a necessidade de usar floats.
• CSS Flexbox - Flexbox é um sistema unidimensional que nos permite escolher entre uma linha ou uma coluna como layout principal ou estrutura de uma página web. CSS flexbox também torna mais flexível estruturar uma página web sem ter que usar floats.
• Design responsivo e Media Queries - O design responsivo é a abordagem de que um aplicativo deve ser construído ou projetado com o usuário em mente, independentemente do ambiente, como o tamanho da tela/dispositivos. O design responsivo é muito importante e deve estar na mente de todo desenvolvedor ao construir um aplicativo da web. As consultas de mídia são úteis quando você deseja modificar seu aplicativo para adequá-lo a um dispositivo como desktops, tablets e telefones

Processadores CSS

• Sass - Sass significa Syntactically Awesome Stylesheet (Folha de Estilo Sintaticamente Incrível). De acordo com a documentação, Sass é uma linguagem de folha de estilo compilada para CSS. Ele permite que você use variáveis, regras aninhadas, mixins, funções e muito mais, tudo com uma sintaxe totalmente compatível com CSS. Sass ajuda a manter grandes folhas de estilo bem organizadas e facilita o compartilhamento de design dentro e entre projetos. Como o próprio nome já diz, sintaticamente incrível.
• Less - Less significa Leaner Style Sheets, é uma extensão de linguagem compatível com versões anteriores para CSS.

Frameworks CSS

• TailwindCss - De acordo com a documentação oficial, Tailwind CSS é um framework CSS utilitário para construir rapidamente interfaces de usuário personalizadas. O Tailwind nos permite usar estilo inline e obter resultados incríveis sem usar uma única linha de CSS. (O Code Peek foi todo construido utilizando TailwindCss)
• Bootstrap - O Bootstrap nos ajuda a construir sites rápidos e responsivos.
• Styled-Components - CSS In JS, styled-components nos permite escrever código css em arquivos JavaScript e utilizar como um componente

Aqui estão alguns sites para aprender CSS:

• CSS tutorials - w3schools
• SASS Tutorial - w3schools
• Bootstrap - w3school

Aprenda JavaScript

JavaScript é uma das linguagens de programação mais populares do mundo. É a linguagem da web. Como desenvolvedor frontend, é necessário que você aprenda JavaScript. JavaScript nos permite criar conteúdo dinâmico. Quando você cria sua estrutura HTML e seu estilo com seu CSS, o JavaScript torna o site dinâmico e vivo. JavaScript é uma linguagem que pode ser utilizada para desenvolvimento web frontend, backend (NodeJS) e mobile (React Native), mas hoje falaremos apenas do seu uso no frontend.

Alguns dos conceitos básicos de JavaScript que você precisa aprender são:

• Sintaxe JavaScript - Cada linguagem de programação tem suas próprias regras sobre como um programa é escrito. A sintaxe do JavaScript é o conjunto de regras que determinam como um programa é escrito por um programador e interpretado por um navegador.
• Manipulação do DOM - DOM significa document objects model. De acordo com o padrão W3C (World Wide Web Consortium), o DOM é uma plataforma e uma interface de linguagem neutra que permite que programas e scripts acessem e atualizem dinamicamente o conteúdo, a estrutura e o estilo de um documento. O DOM é uma representação de como o conteúdo de uma página da web é estruturado. JavaScript manipula o DOM atualizando o conteúdo, o estilo, removendo elementos, adicionando novos elementos.
• Fetch API - API significa Application Programming Interface. Uma API é um intermediário que permite que dois aplicativos se comuniquem. Como desenvolvedor frontend, ao construir um aplicativo da web, é provável que você tenha que trabalhar com dados externos, como APIs de terceiros, a API de busca permite que os navegadores façam solicitações HTTP para um servidor da web.

JavaScript Frameworks/Bibliotecas

Depois de aprender o básico do JavaScript, você pode escolher qualquer framework JavaScript de sua escolha. Mas eu recomendo que você escolha o ReactJS, prático e fácil de aprender.

• React - De acordo com a documentação, uma biblioteca JavaScript para construir interfaces de usuário React permite criar componentes reutilizáveis. (O Code Peek foi construido utilizando React)
• Vue - Vuejs é uma estrutura JavaScript acessível, versátil e de alto desempenho que ajuda a criar uma base de código sustentável e testável. Vuejs também é amigável para iniciantes.
• Angular - De acordo com a documentação, Angular é uma estrutura de design de aplicativos e plataforma de desenvolvimento para criar aplicativos de página única eficientes e sofisticados.

Aqui estão alguns sites para aprender JavaScript

• JavaScript Tutorial - W3schools
• Learn JavaScript - Freecodecamp

Gerenciadores de pacotes

Um gerenciador de pacotes é uma ferramenta que permite aos usuários instalar, atualizar, configurar e gerenciar pacotes de software e dependências de produtos. Exemplos de gerenciadores de pacotes são NPM e Yarn. É recomendável que você aprenda o básico de um deles.

Acessibilidade

Acessibilidade na Web é o processo de tornar seu site utilizável por todas as pessoas. A acessibilidade da Web é uma parte essencial do desenvolvimento frontend. É importante que, como desenvolvedor frontend, você precise criar páginas da Web com acessibilidade em mente. Quando você constrói com acessibilidade em mente, não há restrição para ninguém. Pessoas com deficiência, redes lentas, deficiência visual, deficiência auditiva podem ter acesso a todas as informações do site sem obstruções ou dificuldades.

Performance

De acordo com o MDN, o desempenho Web é sobre tornar os sites rápidos, incluindo fazer com que os processos lentos pareçam rápidos. Uma das métricas que um bom site/aplicativo web deve atender é a renderização rápida da página.O desempenho da Web refere-se a quanto tempo leva para um aplicativo ser renderizado no navegador, bem como a capacidade de resposta à interação do usuário. Para uma melhor experiência do usuário, é recomendado que os desenvolvedores adotem diferentes técnicas de otimização web. Isso inclui o uso de uma Content Delivery Network (CDN), que é um servidor web estrategicamente distribuído que entrega conteúdo aos usuários com base na localização. Outra opção é usar ferramentas de compactação de imagem como imageOptim para reduzir o tamanho da imagem sem comprometer sua qualidade. Utilizar SSR e SSG são uma ótima opção para performance, e nada melhor do que recomendar framework NextJS. Mas isso é um assunto avançado que falaremos em outro post.

Git - Version Control

Git é um sistema de controle de versão que permite que os desenvolvedores acompanhem as alterações em seu projeto. O Git também ajuda os desenvolvedores a colaborar em equipe. O Git é necessário entre os desenvolvedores, para garantir que não haja conflitos de código entre os desenvolvedores.

Aqui estão alguns sites para aprender Git:

• Git Handbook - Github guides
• Git - Git
• Git book - Git

GitHub

O GitHub é uma plataforma de hospedagem de código para desenvolvimento de software. O GitHub permite que as equipes trabalhem juntas em projetos e também é usado para controle de versão. Ele pode ser usado entre equipes para colaborar em um projeto. Por exemplo, uma equipe de desenvolvedores deseja construir uma aplicação web e todos recebem uma tarefa que deve ser atualizada diariamente enquanto trabalham no projeto, neste caso, o GitHub os ajuda a construir um repositório centralizado onde cada membro da equipe pode fazer atualizações ou gerenciar o arquivo de código ou repositório.

Para começar, inscreva-se no GitHub.

DICA
Além de seguir todos estes passos, mostre seu progresso! Seja criando um site portfólio ou divulgando no seu LinkedIn

Deploy

Com o conhecimento obtido de HTML, CSS e JavaScript, você pode criar páginas da Web simples usando essas tecnologias. A maior parte do tempo após a construção, ele permanece em nosso computador ou repositório do Github e não há como as pessoas verem o que você construiu. Mas com implantações na web, você pode hospedar seu aplicativo simples na internet. É superfácil de fazer. Você pode usar ferramentas como páginas do GitHub, Netlify ou Vercel.

inglês

Ter conhecimento de inglês tornou-se praticamente essencial e obrigatório nos dias atuais e é um diferencial valioso em um currículo. Além de proporcionar uma vantagem competitiva em relação a outros candidatos, aprofundar-se nesse idioma amplia significativamente as oportunidades no mercado global. Acesso a fóruns e documentações em inglês é fundamental para qualquer desenvolvedor, pois oferece uma ampla gama de recursos e conhecimentos essenciais. Recomendo que você comece a estudar inglês pra ontem!

Se Destacar

Em um mercado saturado de nos desenvolvedores, você precisa ser fora da curva, e isso nem é uma questão debativel, basta olhar a quantidade de vagas x candidatos, é absurdo a diferença. E mesmo assim, empresas não consegue contratar um desenvolvedor de qualidade, pois ta em falta! Então eu recomendo que você:

• Procure uma forma de se destacar, fazendo algo fora da curva, não siga o que a massa esta fazendo, não faça uma pokedex
• Procure referencias internacionais, o YouTube ta cheio de indiano dando cursos e ideias grátis e mastigado pra você
• Faça o simples bem feito, saber o básico é essencial, mas você precisa DOMINAR, html todo mundo sabe, então mostre que você domina
• Aprenda a se comunicar e a como se vender, mostrar que você do que ta falando e que pode trazer valor para a empresa. Isso será um divisor de águas em suas entrevistas.
• Siga o math_codes no Instagram para ficar ligado nas principais novidades sobre desenvolvimento web!

E não desista, pode ser difícil, mas pensando bem, que outra area não é? Apenas digo uma coisa, vale cada esforço! 😎

Conclusão

Parabéns, você chegou ao fim do roteiro de desenvolvimento frontend para 2024! Com o básico de conhecimento das tecnologias apresentadas aqui (HTML, CSS e JavaScript) você pode facilmente conseguir sua primeira oportunidade de trabalho como desenvolvedor frontend júnior. É claro que quanto mais você se aprofundar, melhores oportunidades virão. Nunca se esqueça de que o aprendizado é continuo e sempre haverá um próximo nível, então nunca pare de aprender. Boa sorte na sua jornada!

Dica Extra

Para se destacar como desenvolvedor frontend em 2024 você precisa focar em uma tecnologia e aprender tudo sobre ela. Eu recomendo que você, após aprender o básico, comece a aprender React e TypeScript. São frameworks JavaScript fáceis de entender e de utilizar, e uma vez que você tenha noção dessas techs, tenho certeza que conseguira ótimas oportunidades!

Que a força esteja com você.