ANÁLISE DE PORTFOLIO - COISA LINDA!😍 ACESSIBILIDADE e SEMÂNTICA HTML5
HTML-код
- Опубликовано: 1 окт 2024
- 🔴Seja membro deste canal e ganhe BENEFÍCIOS EXCLUSIVOS:
/ @serliv
🔴Quer ter seu portfolio ou projeto avaliado aqui no canal? Preencha o formulário: forms.gle/JPLK...
🎁 CURSO WEB DESIGN FRONTEND COMPLETO HTML + CSS + Javascript
serfrontend.co...
🎁 Curso do Figma ao código. O Design de Interfaces web completo
serfrontend.co...
Livros sobre programação e algoritmo que eu indico
-----------------------------------------------------------------------------------
📚Entendendo Algoritmos: Um Guia Ilustrado Para Programadores e Outros Curiosos
amzn.to/3tR34Xq
📚Lógica de Programação e Algoritmos com JavaScript: uma Introdução à Programação de Computadores com Exemplos e Exercícios Para Iniciantes
amzn.to/3SgmM8d
📚Estruturas de Dados e Algoritmos com JavaScript: Escreva um Código JavaScript Complexo e Eficaz Usando a Mais Recente ECMAScript
amzn.to/3SgN36c
🌟 Links comentados no vídeo e outros interessantes 🌟
---------------------------------------------------------------------------------------
📺 Playlist VÍDEOS EM DESTAQUE.
• VÍDEOS EM DESTAQUE
📺 Siga a playlist CURSO WEB FUNDAMENTOS HTML +: CSS
• CURSO Web Fundamentos:...
📺 Playlist Análise de Portfolio / Projeto de iniciante
• Análise de Portfolio /...
✅ Analisando o CÓDIGO HTML e CSS de DEV FRONT-END INICIANTE
• Analisando o CÓDIGO HT...
✅ Análise de PORTFOLIO: Dessa vez o FRONT-END de um DEV BACK-END. Será que deu BOM?
• Análise de PORTFOLIO: ...
✅ 5 MOTIVOS para o PROGRAMADOR FRONT-END aprender FIGMA
• 5 MOTIVOS para o PROGR...
✅ O que é React JS? Saiba o PORQUÊ e QUANDO você deve (ou não) utilizar essa biblioteca JAVASCRIPT
• O que é React JS? Saib...
✅ ANÁLISE DE PORTFOLIO + TUTORIAL SURPRESA
• ANÁLISE DE PORTFOLIO +...
✅ ANÁLISE DE PORTFOLIO DE ALUNO
• ANÁLISE DE PORTFOLIO D...
✅7 DICAS para criar seu PORTFOLIO de PROGRAMAÇÃO
• 7 DICAS para criar seu...
✅ ANÁLISE DE PROJETO: Por que o design UI/UX é essencial para o sucesso do seu projeto digital
• ANÁLISE DE PROJETO: Po...
✅ Analisando DESIGN de portfolio de iniciante
• Analisando DESIGN de p...
✅ Como criar PÁGINAS WEB com HTML e CSS a partir de design do FIGMA
• Como criar PÁGINAS WEB... 
Наука
![Analisando 3 PORTFÓLIOS [FRONT-END] #html #css](http://i.ytimg.com/vi/MASZT0bJkPA/mqdefault.jpg)
![Analisando 3 PORTFÓLIOS [FRONT-END] #html #css](/img/tr.png)
![[SUPER DICAS] HTML e Acessibilidade. 6 erros comuns que até devs mais experientes podem cometer](http://i.ytimg.com/vi/ZfUwFCCCDh0/mqdefault.jpg)
Vem aprender HTML, CSS, Javascript ou Figma comigo. SEM MENSALIDADE. ACESSO VITALÍCIO. Tem 30 dias para pedir o dinheiro de volta caso não fiquei totalmente satisfeito
serfrontend.com/cursos/
Quer ter seu portfolio ou projeto avaliado aqui no canal? Preencha o formulário: forms.gle/JPLKuhYs6o248ZKK8
Seja membro deste canal e ganhe BENEFÍCIOS EXCLUSIVOS:
ruclips.net/channel/UCPstMzE8bHIah0swMZL2mIgjoin
Curso Web Front-end Fundamentos. Aprenda HTML CSS e Javascript:
serfrontend.com/cursos/web-fundamentos-html-css/aplicando-desconto.html?d=31&m=09
Curso Javascript Completo:
serfrontend.com/cursos/javascript-completo/aplicando-desconto.html?d=31&m=09
Curso do Figma ao código. O Design de Interfaces web completo
serfrontend.com/cursos/do-figma-ao-codigo/aplicando-desconto.html?d=31&m=09
O que eu eu indico para gravar produzir vídeos:
Logitech BRIO 4K - amzn.to/3S0FbVh
Microfone Condensador USB Blue Yeti X - amzn.to/48zZcsW
Microfone Condensador USB com Suporte de Suspensão Blue Yeticaster - amzn.to/4213k2G
Livros sobre programação e algoritmo que eu indico
Entendendo Algoritmos: Um Guia Ilustrado Para Programadores e Outros Curiosos - amzn.to/3tR34Xq
Lógica de Programação e Algoritmos com JavaScript: uma Introdução à Programação de Computadores com Exemplos e Exercícios Para Iniciantes - amzn.to/3SgmM8d
Estruturas de Dados e Algoritmos com JavaScript: Escreva um Código JavaScript Complexo e Eficaz Usando a Mais Recente ECMAScript - amzn.to/3SgN36c
Canais em redes sociais:
Twitter: twitter.com/serlivcursos
Linkedin: www.linkedin.com/in/serliv
Instagram: instagram.com/serlivcursos
Facebook: facebook.com/serlivcursos
Tiktok: www.tiktok.com/serlivcursos
Caramba, eu estudei com ele, que orgulho de ver esse cara sendo elogiado aqui! Foi um dos mais dedicados no curso e merece voar ainda mais longe pra conquistar grandes coisas, mandou bem demais no portfólio.
Que massa. Muito obrigado pela mensagem. Fico feliz em saber disso
Muito bom! Parabéns pelo trabalho de ambos! 👏👏👏
Muito obrigado Henrique 😁
Mestre, se eu colocar na tag a um title como por exemplo no link = icon do LinkedIn por exemplo, um title assim : Ir para o LinkedIn, o leitor de tela não iria ler para o deficiente visual?
Excelente pergunta @marcussacco2384 . O problema aqui é a consistência. Alguns leitores de tela podem ler sim, mas não é garantido uma vez que isso não faz parte da especificação, por isso essa não é a abordagem correta, apesar de ser útil em alguns casos que vou descrever mais à frente.
No seu caso, uma abordagem melhor seria trocar o title por aria-label. Porém, se dentro do link existe uma imagem, você pode colocar o alt na imagem também para reforçar ainda mais.
Agora que eu já falei que para esse propósito de acessibilidade o aria-label é muito melhor do que o title, você pode estar se perguntando pra que ser então o title na tag a. A resposta é: SEO e Usabilidade. Com relação ao SEO (otimização para sites de buscas) acho que é fácil entender, mas ainda assim vou explicar rs... o atributo title fornece informações adicionais que podem ser indexadas pelos motores de busca. Mas tenha em mente que SEO é muito mais do só isso, ou seja, o impacto não é tão grande se comparado com outros métodos de SEO. (essa não é a minha área de atuação, mas eu conheço superficialmente).
Usabilidade (ou UX): muitas vezes o texto do title aparece no browser quando o usuário "pousa" o mouse sobre o link, se assemelhando muito com um tooltip. Mas tenha em mente que isso não vai ocorrer em mobiles (obviamente, pq não tem mouse envolvido).
Sei que a resposta ficou extensa, mas coloquei tudo que eu sei...
Aproveito para agradecer seu apoio aqui no canal. Forte abraço
Tem algum dica para acessibilidade, plugin que ajuda no desenvolvimento e testar a acessibilidade
Há dois plugins que dão dicas boas. O primeiro é o axe o segundo é do próprio Google, se não tiver enganado, que é o lighthouse
@@serliv axe DevTools - Web Accessibility e lighthouse vou testar os dois
@@serliv axe DevTools - Web Accessibility e lighthouse vou testar os dois
Modo escuro automático deveria ser a única forma de usar. Não faz sentido pedir pro usuário escolher entre modo claro e escuro em cada site que ele entra. Se ele já escolheu no sistema, simplesmente respeite essa escolha.
Pois é Renan. Mas tudo é uma evolução. Acredito que com o tempo esse será o padrão
@@serliv O pior são sites como Facebook e Linkedin onde a opção tá escondida nas configurações do site. Ridículo isso.
na section sobre, o dev escreveu "manjo" de html... então, gírias já perde pontos caso procure emprego ou serviços. fica a dica.
opa. Obrigado Fabio
Uma dúvida; Ele hospedou o site em algum luagar e te enviou o link, ou ele te mandou o projeto e você simplesmente o abriu em sua máquina?
Esse portfólio está online. Portanto, me mandou o link, assim como outros portfólios q avalio
Eu
Pode mandar portfolio react ou só analisa os mais iniciantes?
Dou preferência pra quem está começando. Mas manda lá no Google forms. Não tem nada a perder 😉
Boa tarde, como posso enviar meu portfolio para vc?zap? Email? Obrigado.
Tem um Google forms na descrição dos vídeos. Só lembrando q alunos e membros tem prioridade
Professor, sei que vc vem melhorando as questões mais técnicas do vídeo e tudo tem seu tempo, mas, a questão da música de fundo, a meu ver, ficou muito alta. Chamou mais a atenção do que deveria.
Valeu xablau. Muito obrigado pelo feedback