Boas práticas para escrever um HTML profissional - Root #26
HTML-код
- Опубликовано: 10 фев 2025
- 👩💻 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
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.
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.
Ensinou em meia hora o que uma faculdade não ensina em 1 mês. Muito bom
Top. Didática sensacional. Aprendizado constante 🎉
Este canal é sensacional!!! Ou melhor ainda, é supimpa!!!
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.
ve o canal do rodolfo mori, um dos que tem a melhor didatica
@@luanmori5204 vou dar uma olhada!
Não conhecia esse canal. Múuuuuuuuito ótimo!!!
tudo bem? seja muito bem-vindo! conte com a gente para o que precisar, ein 💜
Essa última dica foi ótimo, obrigado professor !! 👏
Maikão sempre dando show nas aulas. Amo a leveza que ele ensina. Sou aluna no Discovery e super recomendo!
Incrível 👏👏👏👏
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+
muito boa aula amigo. valeu
Excelente video. Parabéns rocket, o Mayk dando show como sempre!
16:40 Assunto de acessibilidade.
Totalmente excelente!
Parabéns pelo vídeo, foi muito didático e explicativo.
Grande Mayk. Didática 100% !
Grande MaykBrito, sempre com conteúdo de muita qualidade
PARABÉNS MAIK PELA EXCELÊNCIA DE AULA EM HTML SHOW DEMAIS MESMO !!!
Excelente conteúdo Maikao! Abraço!
Excelente vídeo! Vou começar a utilizar o Lighthouse e medir mais os desempenhos das minhas aplicações, show!
Didática impecável e um show de aula, obrigado professor.
Vídeo sensacional. Obrigada Maik!
Boa mayk, sensacional!!!
Maykão é excelente! Obrigado por mais essa aula.
Booooooooooooooooa Mayk! Já estou modificando alguns projetinhos meus com base no que vc ensinou! Obrigado!
Muito fera, parabens pelo conteúdo, ces sao brabo!
Como sempre, Maikão dando um shoe de aula e dicas legais para iniciantes como eu. Parabéns!
Obrigado!
otimo video
Bom demais!
Gosto muito da didática do Mayk, tamo junto
Que didática incrível!
exatamente o que eu estava procurando, agora so falta boas praticas no CSS :)
Ótimo conteúdo 👌
Vídeo top Maykão, mandou ver!
Eu todo feliz por saber pra que serve async e defer porque escrevi um post sobre isso semana passada :>
Que aula meus amigos, que aula!
Obrigado pelo conteudo!
💜 🚀
Mais uma excelente aula 😄
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.
Bacana 👏👏👏
Inglês é fácil quero ver saber escrever o português corretamente rsrs... Vc é demais...
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!!!
Ótimo vídeo, Mayk. Trás vídeos sobre Compress HTML sim, seria muito bom.
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
Vocês precisam trazer conteúdo de Angular também !!!
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.
Queria ser igual ao Mayk!!!!
top demais
Excelente aprendizado
obs: aquela borda no canto da tela me assustou demais
Salve grande Maikão!
Ótimo video Mayk, como sempre! Traz um vídeo sobre Gulp e Webpack
Eu uso o Doctype em todas as minhas páginas html
Se tem mayk tem like
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.
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?
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
Valeu
Fala sobre o Gulp
Mais um vídeo incrível do nosso querido Maykão... Mayk oque você usar pra criar esses slides lindos? Abraço!
Notion. Eu criei um projeto em Electron pra injetar css e js no Notion. O projeto está aberto no meu GitHub github.com/maykbrito
show demais!! qual sua webcam ???
Qual programa usou pra gravar o vídeo?
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 .
Mayk trás conteúdo sobre o Gulp e Webpack, seria muito bom. Obrigado!
Acho que pretier não funciona bem se ativarmos o auto-save do vsCode
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?!
Defer faz o script ser executado depois que o HMTL tenha carregado. Async(Assíncrono) é executado em paralelo ao HTML. 👍
Aquele T faltando no section foi uma tortura kkkkkkkkkk
Jureba no mercado online.
E eu que coloquei pra escutar em quanto estou dormindo
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.
Olá, tudo bem ? Gostaria de uma dica, como pego meu código e faço um post para mostrar o que aprendi
@@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 !
@@wyslanalves6704 um blog? as tags e ?
@@qwertt14 sim
#Gulp pls
Tabindex
"pt-br"