Boas práticas para escrever um HTML profissional - Root #26

👩‍💻 Reunimos dicas de boas práticas para você seguir e usar na hora de escrever seu HTML, para que tenha um resultado profissional.
Junto com nosso educador Mayk Brito vamos conhecer habilidades e comportamentos que vão melhorar seu código, incluindo dicas de como escrever melhor seu HTML ou como funciona um HTML mais semântico, como criar páginas com melhores resultados nas páginas de busca do Google (SEO) e com melhor acessibilidade para os usuários.
💻 Acesse a página da aula no Notion:
maykbrito.noti...
✅ Melhores vídeos relacionados com esse:
✅ Dicas para praticar e evoluir na programação web
• Dicas para praticar e ...
✅ Como organizar um cronograma de estudos de programação com Notion?
• Como organizar um cron...
✅ JAVASCRIPT: Vamos construir um WEB Component e aprender Shadow DOM
• JAVASCRIPT: Vamos cons...
✅ Embarque agora no Discover e melhore suas habilidades como profissional WEB
rocketseat.com...
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial
Linkedin: @rocketseat
Nos ouça também no Spotify:
- Podcast Faladev

[@leo1200012]

Pesquisei o que o Mayk comentou no vídeo e pra quem ficou com curiosidade: a diferença é que o atributo *defer* faz com que o script da página seja baixado paralelamente ao parsing da página e é executado somente após o fim deste processo, o *async* também faz o download do script junto com o parsing, mas é executado assim que possível.

[@ThiagoLucioBittencourt]

Um fato importante é que o defer informa que a montagem da DOM tem prioridade na execução em relação ao arquivo que contém o defer declarado.

[@mateusluizsilva5234]

16:40 Assunto de acessibilidade.

[@thaleshenrique8616]

Ensinou em meia hora o que uma faculdade não ensina em 1 mês. Muito bom

[@studentdev2570]

Inglês é fácil quero ver saber escrever o português corretamente rsrs... Vc é demais...

[@RenanSantos7]

Já que não encontrei ninguém falando: 16:35 tbm não era pra usar onclick. O mais apropriado é usar addEventListener lá no script.

[@BichinhoInflavioo]

Maikão sempre dando show nas aulas. Amo a leveza que ele ensina. Sou aluna no Discovery e super recomendo!

[@leopsantosrj]

Olá meu amigo, no seu vídeo vc comenta sobre o Prettier, mas ao salvar com a formatação dele algumas tags recebem espaço e barra antes do seu fechamento " />" como pode ser observado tb no seu vídeo momento 23:18 nas linhas de meta - 4, 5, 7, link - 9, img 21.
Essas tags sem a formatação pelo prettier mantém seu fechamento de maneira simples, mas com o prettier sempre são adicionados " />".
Qual o problema de ter as tags com essa formatação?

[@marcoguilhermedebritomarti8671]

esse script que foi colocado na linha 14 é um hack para impedir alguns problemas só que é uma pratica ruim, porem como boa pratica se coloca ele no head mesmo e utilizando o async como padrão, porque funciona assim "parsing do html/request do arquivo - execução do javascript - termino do parsing do html". (caso seu script tenha uma codiçao de onload ele vai carregar no final porem)
Caso você precisa que o dom esteja todo carregado para assim carregar o javascript ai você usa o defer, que tem esse comportamento. "parsing do html/request do arquivo - execução do javascript".
Com a tecnica usada no video ele vai ter esse comportamento. "parsing do html - request do arquivo js - execução do arquivo javascript".
Porem na maioria dos casos, colocar o defer vai ser mais eficiente.

[@dautarinosvaldocarvalhodea3167]

Acho que pretier não funciona bem se ativarmos o auto-save do vsCode

[@eduardohenriquedeassis9729]

Este canal é sensacional!!! Ou melhor ainda, é supimpa!!!

[@joseol1ve1ra22]

Excelente aprendizado
obs: aquela borda no canto da tela me assustou demais

[@jair-araujo]

Maykão top o vídeo, trás sim um vídeo sobre Gulp e Webpack se possível também... Vou curtir muito o conteúdo, como desse vídeo aqui... vlw um forte abraço!!!

[@lucasmelo1039]

Interessante, pensei que esse onclick apenas era inserido dentro de um documento javascript separado. Também não conhecia a respeito do tabindex, legal como sempre tem um detalhe novo.

[@josewilsonsouzasantos3401]

Eu uso o Doctype em todas as minhas páginas html

[@carlosamorim94]

Booooooooooooooooa Mayk! Já estou modificando alguns projetinhos meus com base no que vc ensinou! Obrigado!

[@meticuloso1000]

PARABÉNS MAIK PELA EXCELÊNCIA DE AULA EM HTML SHOW DEMAIS MESMO !!!

[@GaiProgramador]

Mais um vídeo incrível do nosso querido Maykão... Mayk oque você usar pra criar esses slides lindos? Abraço!

[@maykbrito]

Notion. Eu criei um projeto em Electron pra injetar css e js no Notion. O projeto está aberto no meu GitHub github.com/maykbrito

[@MateusNeryDurt]

exatamente o que eu estava procurando, agora so falta boas praticas no CSS :)

[@MarcosOliveira-pn8xm]

Ótimo vídeo, Mayk. Trás vídeos sobre Compress HTML sim, seria muito bom.

[@sidekool]

Qual programa usou pra gravar o vídeo?

[@adrianosantos9908]

Incrível 👏👏👏👏

[@Rapha_Dev]

otimo video

[@volneialvesoficial]

Grande MaykBrito, sempre com conteúdo de muita qualidade

[@ivangoetze3094]

Uma vez um guru de semantica em português ensinou; todos que buscavam aprender HTML.
Guri se você errar na semantica de português todos iram chamá-lo de analfabeto, mas caso erres na semantica de HTML; no problema! Seu imprego é garantido. F11

[@gocu_saiajeans]

Obrigado!

[@MrPanrox]

Mayk, parabéns pelo video de boas práticas. E com isso, tenho uma dúvida que talvez você consiga responder de forma definitiva.
Vejo pelo youtube muita gente fazendo formulários separando inputs com divs. Sei que funciona perfeitamente, mas isso não seria uma má prática, já que o form tem sua semântica?
Obrigado por disponibilizar teu conhecimento.

[@thyagowillians]

Sou iniciante neste universo e estou em uma imersão louca. Achei incrível essa aula, que por sinal é a primeira que vi deste canal. Já salvei para assistir novamente e já me inscrevi para assistir outros.
Parabéns pela didática.

[@luanmori5204]

ve o canal do rodolfo mori, um dos que tem a melhor didatica

[@thyagowillians]

@@luanmori5204 vou dar uma olhada!

[@robertofilho7932]

Top. Didática sensacional. Aprendizado constante 🎉

[@anapaulaalmeidapinheiromor3542]

Excelente video. Parabéns rocket, o Mayk dando show como sempre!

[@josileudorodrigues7818]

Vocês precisam trazer conteúdo de Angular também !!!

[@samueloliveira4465]

Defer faz o script ser executado depois que o HMTL tenha carregado. Async(Assíncrono) é executado em paralelo ao HTML. 👍

[@renan7785]

Tabindex

[@jorgebarboza290]

Parabéns pelo vídeo, foi muito didático e explicativo.

[@johnycruz3631]

"pt-br"

[@richardparkson9053]

Essa última dica foi ótimo, obrigado professor !! 👏

[@user-wc2bw9iw3h]

cara, nunca imaginei que eu estaria comendo um lamen tão gostoso antes, gosto impressionante que leva sua alma a declineo por ser um gosto maravilhoso

[@MatheusPereira-nn9dj]

muito bom esse conteudo
deixa eu perguntar : acha que seria uma boa pratica ou um metodo sob demanda trabalhar a sua aplicação web com referencia em um saas como wordpress junto com editor elementor ?
um exemplo , estou fazendo um site via wordpress, ele vai me entregar semanticas e codigos css , e uma estrutura facilitada por uma interface , quando isso vou analisando como vai ficando o site e a partir dai vou criando do zero aprendendo com a aplicação saas .

[@elenilsonmaciel]

Como sempre, Maikão dando um shoe de aula e dicas legais para iniciantes como eu. Parabéns!

[@dev.oliveira]

Didática impecável e um show de aula, obrigado professor.

[@carlosabqf]

Fiquei curioso sobre a ferramenta que usa para manter a imagem da câmera sempre no topo... pareceu bem mais simples que OBS.
Pode compartilhar o nome?!

[@eudanielsilveira]

Excelente conteúdo Maikao! Abraço!

[@alineeisraelporai]

Excelente vídeo! Vou começar a utilizar o Lighthouse e medir mais os desempenhos das minhas aplicações, show!

[@acm.marques]

Muito bom Mayk Brito e eu já trabalho com desenvolvimento há 8 anos e algumas coisas eu já aprendi a fazer correto.
LightHouse é uma mão na roda. Top D+

[@LucasLima-hj5sg]

Eu todo feliz por saber pra que serve async e defer porque escrevi um post sobre isso semana passada :>

[@Belotec]

E eu que coloquei pra escutar em quanto estou dormindo

[@pedro99nice]

Aquele T faltando no section foi uma tortura kkkkkkkkkk

[@guilhermecacador3607]

Muito fera, parabens pelo conteúdo, ces sao brabo!

[@FunctionDev]

show demais!! qual sua webcam ???

[@RenanVital]

Vídeo top Maykão, mandou ver!

[@marcusduarte6543]

Maykão é excelente! Obrigado por mais essa aula.

[@julianabasilio3]

Vídeo sensacional. Obrigada Maik!

[@lucascavalcante2053]

Ótimo video Mayk, como sempre! Traz um vídeo sobre Gulp e Webpack

[@xaveko]

Queria ser igual ao Mayk!!!!

[@ivangoetze3094]

Jureba no mercado online.

[@marcelusmeridius]

Grande Mayk. Didática 100% !

[@felipehuffner6440]

Salve grande Maikão!

[@zehelio4982]

muito boa aula amigo. valeu

[@samueloliveira4465]

Mayk trás conteúdo sobre o Gulp e Webpack, seria muito bom. Obrigado!

[@luisfelipe7009]

Fala sobre o Gulp

[@andrelima8462]

Boa mayk, sensacional!!!

[@edsonhh]

Totalmente excelente!

[@thescriptkiddie]

Gosto muito da didática do Mayk, tamo junto

[@rodrigomarquesdelima6134]

Bom demais!

[@LimaGabriel1]

#Gulp pls

[@LucasCarvalho-pt3yd]

Ótimo conteúdo 👌

[@alexandrebaccarim7505]

Bacana 👏👏👏

[@cadfgbo]

top demais

[@enzocasamasso1606]

Que didática incrível!

[@Nydrix]

Valeu

[@luispaulocavalcante1459]

Que aula meus amigos, que aula!

[@jacquelinesantos773]

Mais uma excelente aula 😄

[@wyslanalves6704]

Olá, tudo bem ? Gostaria de uma dica, como pego meu código e faço um post para mostrar o que aprendi

[@wyslanalves6704]

@@Junior-pe8rz não pow, eu digo posts mostrando o código explicando oq o código faz. Seria tipo eu mostrando o que eu aprendi !

[@qwertt14]

@@wyslanalves6704 um blog? as tags e ?

[@wyslanalves6704]

@@qwertt14 sim

[@lino1678]

Obrigado pelo conteudo!

[@rocketseat]

💜 🚀

[@raffaeleloi]

Se tem mayk tem like