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

Подписаться 364 тыс.

Просмотров 58 тыс.

50% 1

👩‍💻 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.notion.site/Boas-pr...
✅ 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.br/discover
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial
Linkedin: @rocketseat
Nos ouça também no Spotify:
- Podcast Faladev

Опубликовано:

22 ноя 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 85

@leo1200012 2 года назад

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 2 года назад

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.

@thaleshenrique8616 Год назад

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

@BichinhoInflavioo 2 года назад

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

@meticuloso1000 2 года назад

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

@elenilsonmaciel 2 года назад

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

@volneialvesoficial 2 года назад

Grande MaykBrito, sempre com conteúdo de muita qualidade

@eduardohenriquedeassis9729 2 года назад

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

@dev.oliveira 2 года назад

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

@marcelusmeridius 2 года назад

Grande Mayk. Didática 100% !

@marcusduarte6543 2 года назад

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

@TimeToListenBR 2 года назад

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+

@julianabasilio3 2 года назад

Vídeo sensacional. Obrigada Maik!

@anapaulaalmeidapinheiromor3542 Год назад

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

@alineeisraelporai 2 года назад

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

@enzocasamasso1606 2 года назад

Que didática incrível!

@carlosamorim94 2 года назад

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

@MateusNeryDurt 2 года назад

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

@thescriptkiddie 2 года назад

Gosto muito da didática do Mayk, tamo junto

@adrianosantos9908 2 года назад

Incrível 👏👏👏👏

@robertofilho7932 5 месяцев назад

Top. Didática sensacional. Aprendizado constante 🎉

@guilhermecacador3607 2 года назад

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

@richardparkson9053 3 месяца назад

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

@luispaulocavalcante1459 2 года назад

Que aula meus amigos, que aula!

@andrelima8462 2 года назад

Boa mayk, sensacional!!!

@edsonhh Год назад

Totalmente excelente!

@jorgebarboza290 Год назад

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

@RenanVital 2 года назад

Vídeo top Maykão, mandou ver!

@eudanielsilveira 2 года назад

Excelente conteúdo Maikao! Abraço!

@jacquelinesantos773 2 года назад

Mais uma excelente aula 😄

@jair-araujo 2 года назад

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!!!

@lucascavalcante2053 2 года назад

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

@thyagowillians 2 года назад

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 2 года назад

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

@thyagowillians 2 года назад

@@luanmori5204 vou dar uma olhada!

@rodrigomarquesdelima6134 2 года назад

Bom demais!

@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.

@zehelio4982 11 месяцев назад

muito boa aula amigo. valeu

@MarcosOliveira-pn8xm 2 года назад

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

@LucasLima-hj5sg 2 года назад

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

@studentdev2570 2 года назад

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

@meninubunitu Год назад

Obrigado!

@josileudorodrigues7818 2 года назад

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

@LucasCarvalho-pt3yd 2 года назад

Ótimo conteúdo 👌

@felipehuffner6440 2 года назад

Salve grande Maikão!

@alexandrebaccarim7505 2 года назад

Bacana 👏👏👏

@cadfgbo 2 года назад

top demais

@lino1678 2 года назад

Obrigado pelo conteudo!

@rocketseat 2 года назад

💜 🚀

@Rapha_Dev 9 месяцев назад

otimo video

@mateusluizsilva5234 11 месяцев назад

16:40 Assunto de acessibilidade.

@xaveko 2 года назад

Queria ser igual ao Mayk!!!!

@GaiProgramador 2 года назад

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

@maykbrito 2 года назад

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

@Nydrix 2 года назад

Valeu

@joseol1ve1ra22 Год назад

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

@raffaeleloi 2 года назад

Se tem mayk tem like

@marcoguilhermedebritomarti8671 2 года назад

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.

@user-wc2bw9iw3h 2 года назад

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

@FunctionDev 2 года назад

show demais!! qual sua webcam ???

@RenanSantos7 8 месяцев назад

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.

@MatheusPereira-nn9dj 2 года назад

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 .

@samueloliveira4465 2 года назад

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

@josewilsonsouzasantos3401 Год назад

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

@carlosabqf 2 года назад

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?!

@ivangoetze3094 2 года назад

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

@dautarinosvaldocarvalhodea3167 Год назад

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

@sidekool 2 года назад

Qual programa usou pra gravar o vídeo?

@luisfelipe7009 2 года назад

Fala sobre o Gulp

@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.

@ivangoetze3094 2 года назад

Jureba no mercado online.

@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?

@samueloliveira4465 2 года назад

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