Guia do Desenvolvedor Full Stack

Guia do Desenvolvedor Full Stack

🌟 Guia passo a passo para se tornar um desenvolvedor web full stack 🌟

1. Aprenda tecnologias front-end:

- 🖌 HTML: mergulhe na estrutura das páginas da web, criando a base de seus aplicativos.

- 🎨 CSS: explore técnicas de estilo e layout para tornar seus sites visualmente atraentes.

- 📜 JavaScript: adicione interatividade e conteúdo dinâmico, dando vida aos seus sites.

2. Domine frameworks front-end:

- 🅰️ Angular, ⚛️ React ou 🔼 Vue.js: escolha sua arma! Crie interfaces responsivas e amigáveis usando seu framework preferido.

3. Obtenha proficiência em back-end:

- 💻 Escolha uma linguagem do lado do servidor: adote Python, Java, Ruby ou outras para potencializar a mágica do back-end.

 - ⚙️ Aprenda uma estrutura de backend: Express, Django, Ruby on Rails - ferramentas para criar aplicativos robustos do lado do servidor.

4. Fundamentos de banco de dados:

- 🗄 SQL: Domine a arte de manipular bancos de dados, garantindo operações de dados perfeitas.

- 🔗 Design e gerenciamento de banco de dados: Arquitete e gerencie bancos de dados para armazenamento eficiente de dados.

5. Mergulhe no desenvolvimento de backend:

- 🏗 Configure servidores e APIs: Construa arquiteturas de servidor e APIs para conectar o front-end e o back-end.

- 📡 Lide com armazenamento e recuperação de dados: Busque e armazene dados como um profissional!

6. Controle de versão e colaboração:

- 🔄 Git: Hora de rastrear alterações como um mago! Colabore com outras pessoas usando o mágico GitHub.

7. DevOps e implantação:

- 🚀 Implante aplicativos em servidores (Heroku, AWS): Lance suas criações no cosmos digital. 

- 🛠 Integração/Implantação Contínua (CI/CD): automatize o processo de implantação como um guru da tecnologia.

8. Noções básicas de segurança:

- 🔒 Implemente autenticação e autorização: proteja seu reino com sistemas fortes de autenticação e permissão.

- 🛡 Proteja-se contra vulnerabilidades comuns da web: proteja seus aplicativos das forças da escuridão cibernética.

9. Aprenda sobre testes:

- 🧪 Testes de unidade, integração e ponta a ponta: teste suas criações com o rigor de um cientista louco.

- 🚦 Garanta a qualidade e a funcionalidade do código: ofereça experiências robustas e sem bugs.

10. Explore os conceitos de pilha completa:

- 🔄 Entenda o fluxo de dados entre front-end e back-end: domine a dança dos dados entre reinos.

- ⚖️ Equilibre o desempenho e a experiência do usuário: entrelace os fios de velocidade e prazer em suas criações.

 11. Continue aprendendo e construindo:

- 📚 Mantenha-se atualizado com as tendências do setor: Mantenha seu conhecimento afiado com o cenário da web em constante evolução.

- 👷‍♀️ Trabalhe em projetos pessoais para mostrar habilidades: Crie suas obras-primas digitais e mostre-as ao mundo.

12. Networking e habilidades sociais:

- 🤝 Conecte-se com outros desenvolvedores: Forje alianças com outros magos da web.

- 🗣 Comunicação eficaz e trabalho em equipe: Fale a linguagem da colaboração e da compreensão.

Lembre-se, o caminho para se tornar um desenvolvedor web full stack é uma jornada emocionante, cheia de desafios e descobertas. Abrace a magia da codificação e continue alcançando as estrelas! 🚀🌟

Envolva-se com uma reação para mais guias como este!❤️🤩

Melhores recursos de desenvolvimento web:  https://topmate.io/coding/930165

APRECIE APRENDENDO 👍👍

Observação: O texto original em inglês foi traduzido para o português do Brasil.

CSS Practique Gratis

Practice CSS For FREE👇🏻

1. CodePen 

➩ codepen.io/trending

2. CSS-Tricks 

➩ css-tricks.com

3. FreeCodeCamp 

➩ freecodecamp.org

4. HTML Dog 

➩ htmldog.com

5. W3Schools 

➩ w3schools.com

Learn CSS with these Github repositories: 1. CSS-reference http://lnkd.in/dFSdSYQ 2. CSS-architecture http://lnkd.in/dZPVHS3M 3. CSS-style-guide http://lnkd.in/dMC_HS4s 4. Flex-cheatsheet http://lnkd.in/dQytDtqX 5. Magic-of-css http://lnkd.in/di_qBGxz 6. Flexbox30 http://lnkd.in/dxC_brHE 7. Awesome-css-grid http://lnkd.in/dzam7nVH 8. You-need-to-know-css http://lnkd.in/db_frCRA 9. CSS-protips http://lnkd.in/dvj4wVgg 10. 30-seconds-of-css http://lnkd.in/dmq_ZDtg

Desenvolvedor web front-end

 

Developer Mozilla

Desenvolvedor web front-end

https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer

CSS (Front-end)

 

CSS (Front-end)

CSS é uma linguagem de programação usada para indicar como os documentos são oferecidos aos usuários em termos de layout e estilo. Um documento geralmente se refere a uma estrutura de arquivo de texto que utiliza uma linguagem de marcação, como o HTML amplamente usado e outras, como XML ou SVG.

CSS é usado para converter um documento em uma forma utilizável para o público. Isso é particularmente significativo para navegadores como Chrome, Firefox e Edge desenvolvidos para entregar documentos em telas, impressoras e projetores visualmente.

Recursos

• Seletores – os seletores CSS são ferramentas para os usuários escolherem e manipularem diferentes elementos em uma página da web. Eles podem ser referidos como componentes estruturais para realizar a correspondência de atributos e valores de atributos. Novos seletores são capazes de direcionar pseudo classes para estilizar elementos direcionados a URL. Os seletores também incluem uma pseudoclasse marcada para estilizar os elementos marcados, incluindo botões de opção e caixas de seleção.

• Efeitos de texto e layout – CSS3 pode ser usado para fazer diferentes ajustes, como alteração de justificação de texto, ajuste de espaços em branco de um documento e estilo de hifenização de palavras.

• Pseudo classes de primeira letra e primeira linha – CSS vem com propriedades que ajudam a ajustar os espaços de caracteres para aprimorar o efeito visual e colocar capitulares no início dos parágrafos.

Vantagens

• CSS economiza tempo – o código CSS deve ser escrito uma vez e a mesma folha pode ser usada em várias páginas HTML. Um estilo pode ser definido para cada elemento HTML e um usuário pode aplicá-lo a várias páginas da web com base nos requisitos.

• Fácil manutenção – o código CSS é fácil de manter e os usuários podem facilmente fazer alterações globais para editar o estilo. Depois que as alterações são feitas, todas as páginas da web são atualizadas automaticamente.

• Mudando os padrões da web – os atributos HTML não são mais usados amplamente, pois mais usuários estão gravitando em usar CSS. Recomenda-se que os desenvolvedores o utilizem em páginas HTML para garantir a compatibilidade com versões futuras do navegador.

Desvantagens

• Problemas entre navegadores – Fazer alterações de CSS em um site pode ser uma tarefa fácil para os desenvolvedores. Porém, há a necessidade de garantir a compatibilidade do CSS após as alterações terem sido implementadas, pois o usuário precisa verificar se todos os navegadores exibem as alterações de forma semelhante. A verificação entre os navegadores é importante, pois o CSS funciona de maneira diferente nos navegadores.

• Vários níveis levam à confusão – A linguagem de programação CSS tem vários níveis, tornando-se uma perspectiva confusa para alguns desenvolvedores. Isso inclui CSS, CSS 2 e CSS 3, todos com especificações ligeiramente diferentes.

CSS Media Screen

CSS @Media Screen / polegadas x centímetros x pixel

Nos últimos meses, eu andei testando o CSS com o @media screen, e ao olhar o site em celulares, monitores e notebooks de tamanhos diferentes de polegadas, sempre aparecia algo precisando ser reajustado na visão esquerda ou direita do video, então pensei, e achei melhor ver o tamanho em polegada, comparando com o tamanho em centímetros, e comparando com o tamanho em pixel.  

iPhone

320 x 480  | device-pixel-ratio = 2

iPhone 4

640 x 960 | device-pixel-ratio = 2

iPhone 5, 5s

640 x 1136 | device-pixel-ratio = 2

Samsung Galaxy S I and II

480 x 800

Samsung Galaxy S III

720 x 1280

iPhone 6

750 x 1334 | device-pixel-ratio = 2

iPhone 6 plus

1242 x 2208 | device-pixel-ratio = 3

iPad 1 and 2

768 x 1024

iPad 3

1536 x 2048

Amazon Kindle Fire

1024 x 600

Ao que parece, para funcionar direito o @media screen, será preciso:

1) criar uma página CSS só para visão pelo celular de 5", 6" e 6,5" polegadas

celular de 5 inch = 480px

celular de 6 inch = 576px

celular de 6,5 inch 16,5 = 624px 

/* mobile = Extra small devices (phones, 576px and down) */

/* styles for mobile browsers smaller than 480px; (iPhone) */

@media screen and (min-device-width:480px) and (max-device-width:624px) and (orientation:portrait) 

{ body { font-size: x-small; max-width: 100%; min-height: 10%; }}

2) criar uma página só para visão pelo tablet de 7" e 8" e 10" polegadas

tablet de 7 inch = 672px

tablet de 8 inch = 768px

tablet de 10 inch = 960px

/* #Tablets = IPAD devices / landscape 768px and up) */

/* different techniques for iPad screening / For portrait layouts only */

@media screen and (min-device-width: 672px) and (max-device-width: 960px) and (orientation:portrait) 

{ body { font-size: small; max-width: 100%; min-height: 10%; }} 

3) criar uma página só para visão pelo notebook de 10", 12" 14" e 15" polegadas

notebook de 12 inch = 1152px

notebook de 14 inch = 1344px

notebook de 15 inch = 1440px

/* #Laptop = Laptops devices /styles for browsers larger than 960px; */

@media screen and (min-width: 1152px) and (max-width: 1440px) and (orientation:landscape) 

{ body { font-size: normal; width: 100%; height: 100%; }}  

4) criar uma página só para visão pelos monitores de 15", 16", 17", 18", 19", 20", 21", 22" e 23" polegadas

monitor de 15 inch = 1440px

monitor de 16 inch = 1536px

monitor de 17 inch = 1632px

monitor de 18 inch = 1728px

monitor de 19 inch = 1824px

monitor de 20 inch = 1920px

monitor de 21 inch = 2016px

monitor de 22 inch = 2112px

monitor de 23 inch = 2208px

/* styles for browsers larger than 1440px; */

@media screen and (min-width: 1440px) and (max-width: 2208px) and (orientation:landscape) 

{ body { font-size: medium; width: 100%; height: 100%; }} 

4) criar uma página só para visão pelos monitores gamer de 24", 25", 26", 27", 28", 29", 32" e 42" polegadas

monitor gamer de 24 inch = 2304px

monitor gamer de 25 inch = 2400px

monitor gamer de 26 inch = 2496px

monitor gamer de 27 inch = 2592px

monitor gamer de 28 inch = 2688px

monitor gamer de 29 inch = 2784px

monitor gamer de 32 inch = 3072px

monitor gamer de 42 inch = 4032px

/* styles for browsers larger than 2208px; */

@media screen and (min-width: 2304px) and (max-width: 4032px) and (orientation:landscape) 

{ body { font-size: large; width: 100%; height: 100%; }} 

CSS: 4 recursos incríveis que você já pode usar!

https://blog.umbler.com/br/css-4-recursos-incriveis-que-voce-ja-pode-usar/

CSS 3 / Tutorial

HTML5 Tutorial (W3schools) = https://www.w3schools.com/html/default.asp

CSS Tutorial (W3schools) = https://www.w3schools.com/css/default.asp

W3.CSS Tutorial (W3schools) = https://www.w3schools.com/w3css/default.asp