Testando o HTML e CSS do ESTAGIÁRIO
Вставка
- Опубліковано 30 лип 2024
- Nesse vídeo testamos o HTML e CSS do nosso estagiário. Mostramos um layout para que ele pudesse replicar da forma mais exata possível. Será que ele conseguiu resolver mais esse desafio? Da play e confere!
Baixe Nosso E-book do Guia do Programador Iniciante:
www.devmedia.com.br/marketing...
Confira nosso vídeo sobre HTML e saiba mais sobre HTML semântico:
• HTML o ESSENCIAL pra p...
Acesse a playlist da saga do estagiário:
• Testando a lógica do e...
Ainda não conhece a DevMedia? Acesse: www.devmedia.com.br/pro/?utm_...
== Sigam-nos nas redes sociais:
LinkedIn: / devmedia
Facebook ➞ / devmedia.com.br
Twitter ➞ / devmedia
Instagram ➞ / devmedia.com.br - Наука та технологія
Só acho que esse estagiário merece toda a grana arrecadada da série
#MonetizaçãoproEstagiario hahahha
Grana? Chorei só de imaginar😢
Hahahahah, aí eu vi vantagem. 🤣
Apoio
Nem pô , cara já tá ganhando conhecimento e experiência...se pah deviam cobrar o estagiário 👀
É meme, paga o cara kkkk
Uma dica de exercício bom, é pegar sites grandes, e você mesmo criar do zero o front-end.
Ótima dica!
Ate printei aqui pra fazer
vlw pela dica
Verdade funciona mto, fiz com o site da Netflix e aprendi mta coisa
Acho que seria interessante passar um design como esse para profissionais de vários níveis, como júnior, sênior, etc. A comparação de "código" criado por eles poderia dar uns insights legais.
Vou contestar um ponto:
1. Dá sim para usar unidades dinâmicas mesmo com @media queries, é inclusive o desejado. Basta alinhar com o designer como os elementos irão se comportar entre cada layout/query desenhada.
Dicas (para quem estiver vendo):
1. Aprendam o significado das palavras que vocês usam para programar. Será meio caminho andado. "flex-evenly" traduz para "flexionar uniformemente", nisto o espaçamento foi distribuído de forma igual.
2. Não usem @media queries de intervalos (min ... / max ...) usem uma abordagem mobile-first (min-width) ou desktop-first (max-width). E lembrem que o CSS é lido de cima pra baixo, da mesma forma que lemos livros. Mantenha a mesma abordagem em todo o CSS do código. Tudo isso para evitar o caos.
3. Sempre consulte o "caniuse" de alguma regra CSS. object-fit não tem suporte para IE 11. Muitos clientes ainda pedem suporte pra IE. Dá pra resolver isso com um wrapper ou background-image.
4. Não dependa apenas de @media query para controlar o seu layout. É raro precisar de @media queries. Tente CSS avançado para layout: flexbox (suporte amplo) e CSS grid (se o cliente não precisar de IE).
Esse sim foi um ótimo comentário, parabéns
até salvei teu comentário para estudo!
sobre nao usar @media queries de intervalos, caso eu precise pra tornar o codigo mais responsivo mais de uma como eu faria?
@@carlosdeucher131 Usando Flex, Grid, e unidades responsivas (%, vw). Constrói um layout no Codepen e me manda o link.
Não é que não podemos usar media queries, é que muita gente usa umas 7+ quando dava para usar apenas 1 ou 2.
@@warkentien2 Estou aprendendo sobre Grid e Flexbox, e de fato da pra poupar muito trabalho. Você que já é experiente, acha que eu devo saber todas as funções pra deixar um site responsivo? ou apenas com flexbox e grid já consigo suprir todos os projetos?
Continuem com essa saga. Não parem. Estou aprendendo muito. Se esse teste é de estagiário é melhor eu estudar mais.
nossa, achei esse vídeo sensacional
uma das coisas que mais sinto falta quando estou estudando é ver essa correção de erros na prática, porque faz vc analisar melhor o porquê alguma coisa não tá saindo como esperado.
parabéns
Esses vídeos são demais! O Meu muito obrigado a DevMedia por nos proporcionar algo assim.
O estagiário já está estudando a quanto tempo HTML e CSS, pra fazer desse jeito, com erros e acertos ?
A saga continua! Parabéns Eric 👏👏
DevMedia, poderiam disponibilizar o desafio em forma de exercício para comunidade treinar? vai ajudar muito. Valeu!
Esse código aí não é de estagiário o cara merece uma promoção haha.
Merece mesmo
Né mano kkkk que poha de estágio é esse kkkkk
Esse vascaíno é meio nojentinho
@@VictorHugo-so7yb zzy 😒dizg 😒zgzgzigguxg diz pra xi
Merece mesmo!
Obrigado DevMedia pelo conteúdo de qualidade! Estou aprendendo a parte de front end, e vendo esse vídeo fiquei mais tranquilo pois consegui entender tudo na hora de analisar o codigo, e tambem pude ver que a maneira que estou aprendendo condiz com a maneira profissional de fazer projetos.
Nós iniciantes e estudantes por muitas vezes ficamos inseguros, e esse conteudo ajuda muito!
Felizão de já estar conseguindo fazer sites e ter entendimento perfeito do HTML e CSS usados, to na mesma saga do estagiário de vocês!!
Muito legal ver a evolução do estagiário de vcs. Aqui na minha cidade eles querem conhecimento de júnior pra ser estagiário
Muito legal esse tipo de conteúdo, e boa sorte pro Eric continue se esforçando amigo!
Parabéns a DevMedia pelo vídeo, é de muita importância para os Dev. Iniciantes saberem como é feito os testes e avaliação do seu desempenho em criar e solucionar cases do dia a dia.
Vou até compartilhar na minha rede do Linkedin com meus amigos esse vídeo.
Gente, que cara grosso... Gzuis.. Parabens Estagiario, mandou muito bem mesmo.
não achei ele grosso não, ele falou bem na boa e elogiou o trabalho dele
Achei tbm
????? Kkk
hahahahahahha
O Fernando é gente boa! Ele é muito zueiro.
Sou programador frontend a 17 anos vim do HTML 4.0 na época dos sites em tablet e vi nascer o tabless, o rapaz está no caminho certo. Adoro o que eu faço vai fundo rapaz.
Acho muito legal essa analise de codigo online da pra gente uma ideia de melhor e de quem tem mais esperiência de como fazer de uma maneira correta. Parabens para voces ae e sucesso!
Como um desenvolvedor iniciante, agradeço muito pelo conteúdo de vcs !!!
🥰
muito massa essa saga. aprendi pra caramba só com esse vídeo! boaaa estagiário
Cara, sentir que o estágiario foi mto bem, muito bem mesmo, e o cara qe estava analisando so fez bater no inicio. Parabéns, estágiario! Em breve você será o cara que analisa.
Qnd eu digo bater, digo no sentido que fez muita critica por besteira, na minha opinião. Encheu o estágiario de teoria de coisas que o mesmo já sabia e algumas coisas so faria diferente por opiniao própria ou por estética e nao por ser uma regra do negócio.
De verdade mano, achei ele mó babaca, falando de espaçamento putaço WTF kkk como se o cara tivesse dado um delete sem where kkkk
Dahora, top mesmo, agente ajuda o canal com o like e comentario e vcs ajudam o estagiário com a grana da serie
Cara esses caras são muito bons,mas o erro que vejo e que muitos deles procuram alterar as imagens com CSS,e oq eu aprendi no começo do meu curso foi,deixar o mínimo trabalho pra programação,tudo oq puder fazer fora para usar menos código faça,assim o trabalho fica bem mais limpo,tipo editando imagens, vídeos,com apps externos.
Espero não ter ofendido ninguém ❤️
Está absolutamente certo.
Boa sorte Erick! ansioso pela a saga do estagiário
Ele começou fugindo um pouco do que foi pedido, o que é questão de ver e interpretar o que foi pedido e reproduzir exatamente igual. Mas em questão de estrutura e entendimento de semântica do HTML o cara foi muito bem !
Ponto mais forte do stag não é só o código, isso se aprende mais fácil. O ponto forte dele é comunicação! Fala bem d+ e isso é difícil d+. Esse cara tem um futuro incrível. :) sucesso ai gigante!
Obrigado, Pedro. ;-)
@@ericfreitas88 eu tbm constatei isso, eu acredito ter bem mais conhecimento de CSS que tu, mas tua dicção e forma de falar são invejáveis. Parabéns bro, o principal tu já tem, o código é fácil.
Que saga massa ! Que ideia maneira vocês tão de parabéns
esse cara deveria fazer parte do canal do YT, ele é muito bom em comunicação.
Sensacional este vídeo. Se houver oportunidade mais um ou dois com este tipo de conteúdo. Enstimulando a observação. Ótimo vídeo.
Cara esse cara já é um ótimo programador, sacou a lógica fácil, tomara q a linguagem seja JavaScript do próximo vídeo da série
Assim q eu comprar uma fonte de alimentação pro PC q foi pro caralho eu vou comprar o curso da dev
Se toda empresa proporcionasse esse nível de mentoria pros estagiários desse jeito....com certeza esse cara vai sentir essa diferença no decorrer da carreira...
imagino daqui um ano o Eic desenvolvendo coisas fodas pra a DevMedia e eu poder dizer que vi a trajetória dele desde o primeiro dia !
😭 Me emocionei. Obrigado Lázaro.
@@ericfreitas88 Não consigo aprender
@@vanderleymassinga3130 Como assim? Qual a sua dificuldade?
Muito bom! Verdadeira aula. To estudando html, php e bootstrap (CSS muito pouco por enquanto ahahah). Pra quem acha que contratar alguem pra fazer um site basta chamar "o sobrinho pra criar o site", o vídeo mostra que é necessário bastante estudo em design, layout, diagramação e programação pra se fazer um site que seja eficiente.
esses vídeos são muito bons pq por mais que pareça bobo ajuda d+++ só vendo um vídeo de 19 min já me ajudou muito parabéns a empresa!!!
Mais saga do estagiário pelo amor se Deus. Haha
Gostando demais
Esse estagiário é top. Caraca merece toda a grana da saga msm haha. Espero que ele tenha ganhado!
Achei super leve e engraçado esse video
Parabens ERIK Sucesso irmão!
Muito bom. Na prox disponibilizem o layout :)
Sensacional, muito boa a série, mesmo p quem já tem mais experiência vale a pena ver
HTML de primeira, muito bem estruturado, faltou só ver melhor o uso de classes css e nas colunas para ja garantir o espaçamento e tamanho eu teria usado o display grid na seção e ja dividiria na quantidade de elementos para cada linha pelo template do grid
que aula!!! Parabéns meninos!! show de bola!!
Ancioso para chegar em Angular..que o Estagiário continue !!
Vou comentar para dar uma força para o estágiario. Merece!
2:38 "P**** nenhuma" ksksksksks
Morri de rir nessa parte kkkskskks
Show de mais! Parabéns pelo video!
Obrigado de verdade pelas dicas. Estagiario e gente fina.
O vídeo me ajudou em um projetinho da facul. Vlw pela dica do "object-fit: cover" :D
Seria legal se vcs deixassem o projeto disponivel pra gente baixar e tentar fazer tbm... queria muito tentar fazer esse projeto rss. Sou iniciante tbm kk
up
Verdade
Vai na origamid. Material e vídeos muito bom !!!
@@nortonlui1 ok
Up
Façam um video ensinando extensões do chrome que ajudam no Front-end. "Color Picker" e "WhatFont" são ótimas!
A serie ta muito show, espero que continue até o Estagiário desenvolver uma IA que resolva todos os nossos problemas
Hahahahaa
Quero desenvolver um J.A.R.VS. Tipo o do Stark.
Estagiário monstro
O estágiario ta mandando bem Mano. Tais com tudo. Bota pra vuar as banda. 👍 tamo junto.
Adoro o Canal e o trabalho que tem feito, gostaria de saber que não vão disponibilizar o layout e os matérias para praticar
4:10
display: grid;
grid-template-collums: px px px;
grid-template-rows: px;
grid-gap: px;
usa isso que tu vai conseguir fazer tudo lindo e perfeito =)
Viva o grid
Achei o video muito legal, mas daria uma dica para o estagiário: Escrever o código em inglês (incluindo os comentários). Não por se achar ou qualquer outra coisa do tipo, mas para criar o habito e aumentar as chances em outras oportunidades. Valeu.
cara muito obrigado pelo conteúdo, aprendo um monte
que serie dahora, parabens pelo trabalho vcs são foda !!!!!!!!!!
Ganhou um inscrito por mostra as soluções e explicar como faz
Parabén Erik continue assim cara!
O cara é carisma puro
2:00 , podia ter feito assim:
que junta os dois cards do quartos oculpar 100% da tela (vw), display : flex, justify content: center, e aplicar um gap... Daí assim tem um controle maior do espaçamento
Eu comecei a estudar e esse vídeo ajuda bastante no que eu não devo fazer dmdkfkdj muito obrigado
o cara é empenhado, ele merece .
manu erick ta se puxando mesmo .. parabens.. depois dessa o erick ja vai ta empregado em .. so gloria ..
Esse estagiário está muito avançado ... Estou começando agora e salvei o vídeo para ver futuramente.
Parabéns a todos vcs.
Ficou muito bom o vídeo, parabéns!
Manooooooooo o caraaa é bom .... paraaaade enrolar o cara e leva ele a Júnior. Topppp
Seria bacana, se após testar o HTML e CSS e falar sobre os erros, você nos mostrar tbm qual seria a forma correta já colocando no código, já refatorando!!
Caraca quem diria te ver nu UA-cam Erik, não sei se tu lembra trabalhei com vc numa Empresa de Call center. Meus parabéns pela evolução mano. Vai fundo.
Esse vídeo é bom para entender como é a vida de alguém na área
anotando as dicas aqui pra quando for fazer os projetos da trybe
Porra o canal de vocês é sensacional!!! parabéns !!!!
Essa série do estagiário é muito boa, puta merda.
Parabéns DevMedia!!!!!!
Cara mandou bem!!! Além de ficar fera como Dev também está ficando famoso... deve fazer selfies com a galera quando sai na rua!!! hehehehe
Aprender usar o "CSS grid layout" facilita muito a vida na hora de dividir os cards, e mais ainda na hora de escrever os media queries. Vai escrever bem menos código.
Flex e Css Grid layout reduzem mesmo. O grande lance mesmo é juntar os dois
Sim, grid Layout e Flexbox. Tem vezes que a simplicidade do flex é a melhor opção e outros casos a complexidade do Grid Layout é a melhor opção.
@@stomperhk9107 maioria dos casos Grid para mim é bem aplicado quando temos mosaicos no site, onde temos muitos elementos de diferentes tamanhos, distribuição uniforme igual do vídeo é display flex sem dúvidas, só não entendo o pq dele não usar gap no flex, resolveria uns 5 problemas que ele teve, também flex-wrap, naquele caso que não estava havendo quebra...
@@rapaz1163 É que gap só funciona mais em browsers novos, isso é oq eu lembro.
@@stomperhk9107 em safari, apenas layout Multi-column, mas em flex pode usar sem medo
Seloco agora tô vento que tô alguma passos evoluído tô muito feliz
Muito legal tua explicação adorei cara obrigado
Que show de vídeo... Adorei
Slk,aprendi muita coisa nova só vendo 7min de vídeo. Pfv trás mais ❤️ Manja dmais de frond-end
Mano, você tem algum vídeo falando sobre as diferenças de comando? Por exemplo : id e div, header e main, id e class. Agora pensando bem, você explicou um pouco ali mas gostaria de saber se tem algum vídeo como mais detalhes
Esse cara é fera !
Top essa saga ❤👏
Parabéns pelos vídeos ! ! !
Eu amo a série do estagiário
Deu até vontade de voltar aprender HTML e css
Vale lembrar que o SVG não se aplica só na questão desempenho (quando comparado a uma imagem). Ele é mais indicado para icones e imagens "chapadas" por ser um gráfico vetorial. Isso faz com que ele nunca perca a definição. E não dá pra substituir uma foto por um SVG. Podia ter explicado isso melhor. Seria bacana aplicar o mesmo desafio, porém usando uma biblioteca como Bootstrap, que é o que de fato o mercado pede! Muito bacana!
7:10 - Pra resolver esse problema de distorção use a propriedade object-fit (possue o mesmo comportamento da propriedade background-size), com os valores cover ou content .
Ps: eu não ví ele dizendo a propriedade.
Ele disse
@@marciomrb Eu sei que ele disse isso, mas eu já sabia.
isso ae,a diferença é que o background-size ela define o tamanho da imagem independente se ela ira distorcer ou não,já o object-fit ira por o tamanho da imagem na proporção ideal para não ocorrer a distorção e manter a qualidade da imagem.
@@jhonatan3910 Sim, background-size dependendo dos valores que você usar, pode distorcer uma imagem, mas valores cover e contain exibem a imagem em seu tamanho natural. No final ambos só tem pequenas diferençazinhas.
Torcendo pra ele conseguir!
o cara é foda patroa.
Pô o mano estagiário mitouuuuu!!!!
Lembro de quando estava começando no HTML. A cada incluso, mais uma dor no coração kkk
Depois me liguei que a prática DRY não se encaixa nesse conceito.
Arrasta pra cima!
Mto bom mto bom =D
Awesome video, keep up the amazing work! :)
Oh Yeeeeessss!!!!!
conteúdo do caralho!!! pode crere! Parabéns Erik
muito legal o video !!!!
Bom trabalho cara, faz parce não acertar 100% logo de primeira, vou dar um like pra fortalecer pq imagino q deve ser foda bota a cara a tapa assim e ainda "errando"
Maior detalhe que falto foi o wrapper do site, mas no geral fico legal!
Mano que dahora queria estagiar assim tbm :((
Nossa se meu professor pegasse esse codigo ele ficaria doido, Header com ID sendo que tu nao precisa por ID pq a header ja eh um elemento unico e tu vai usar somento um, mesmo esquema pro nav e etc, fora as DIVS, ele nos deixava usar somente uma DIV por projeto! e era so pra fazer o wrapper da page e ja era! o resto tudo era semantic tags. Mais belo trabalho! eh assim mesmo quando comeca, todo dia tu vai aprendendo algo novo! focaa mlk!
Que quadro legal!