Testando o HTML e CSS do ESTAGIÁRIO
Вставка
- Опубліковано 19 жов 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.c...
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.c...
== Sigam-nos nas redes sociais:
LinkedIn: / devmedia
Facebook ➞ / devmedia.com.br
Twitter ➞ / devmedia
Instagram ➞ / devmedia.com.br
![[UA] NAVI vs MOUZ | BO5 | IEM Rio 2024](http://i.ytimg.com/vi/CMBYk0cbGoA/mqdefault.jpg)
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
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.
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
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
O estagiário já está estudando a quanto tempo HTML e CSS, pra fazer desse jeito, com erros e acertos ?
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
Como um desenvolvedor iniciante, agradeço muito pelo conteúdo de vcs !!!
🥰
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?
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
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
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
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.
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.
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.
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.
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
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
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?
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
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!
2:38 "P**** nenhuma" ksksksksks
Morri de rir nessa parte kkkskskks
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.
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.
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!
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.
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 super leve e engraçado esse video
Parabens ERIK Sucesso irmão!
Esse estagiário está muito avançado ... Estou começando agora e salvei o vídeo para ver futuramente.
Parabéns a todos vcs.
Façam um video ensinando extensões do chrome que ajudam no Front-end. "Color Picker" e "WhatFont" são ótimas!
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!!!
Tem que revisar o código, o estagiário escreveu: section class="quarto - PRINCIPLAL-, putz, ai não dá.
Além disso, seria melhor ter colocado o conteúdo do dentro de uma div-container.
Tem muitos erros. O culpado não é o estágiario mas sim de quem orienta ele. Desisti de comentar aqui porque o objetivo é so vender assinaturas.
A saga continua! Parabéns Eric 👏👏
DevMedia, poderiam disponibilizar o desafio em forma de exercício para comunidade treinar? vai ajudar muito. Valeu!
Comecei no html e css semana passada, meu Deus eu tenho q aprender muita tag ainda kkk
Vai na Origamid !!!
To na mesma kkkk fiz só um site básico ainda🤣
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...
O cara é carisma puro
4:04 Acredito q era só deixar a secção pai com width 100%. E as imagens com width : calc(100% / 3) para ficar calculado igualmente os tamanhos
Seloco agora tô vento que tô alguma passos evoluído tô muito feliz
Ganhou um inscrito por mostra as soluções e explicar como faz
Manooooooooo o caraaa é bom .... paraaaade enrolar o cara e leva ele a Júnior. Topppp
asksaksakska muito top kaksaskksa esta rindo antes da hora brow qual foi kkkkkkkkk
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.
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!
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
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.
Esses vídeos são demais! O Meu muito obrigado a DevMedia por nos proporcionar algo assim.
Show de mais! Parabéns pelo video!
Esse vídeo é bom para entender como é a vida de alguém na área
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!!
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!
esse cara deveria fazer parte do canal do YT, ele é muito bom em comunicação.
Vou comentar para dar uma força para o estágiario. Merece!
Arrasta pra cima!
Esse estagiário é top. Caraca merece toda a grana da saga msm haha. Espero que ele tenha ganhado!
Eu comecei a estudar e esse vídeo ajuda bastante no que eu não devo fazer dmdkfkdj muito obrigado
Ancioso para chegar em Angular..que o Estagiário continue !!
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
Nossa bom de mais para quem é iniciante, estou querendo aprender HTML! Mas uma dúvida o que é o que tanto ouso falar?
div( divisão) como um caixa dentro do código para facilitar na hora de codificar e por no layout. por exemplo. a barra de pesquisa do youtube e uma div dentro do cabeçalho( que e um div tb)
@@matheusbarretto3244 a entendi, vlw de mais mano
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.
Muito legal esse tipo de conteúdo, e boa sorte pro Eric continue se esforçando amigo!
Deixando meu comentário então, só por causa desse bigode maravilha! Avua!
Incentiva não...kkkk
Muito bom. Na prox disponibilizem o layout :)
o cara é empenhado, ele merece .
Boa sorte Erick! ansioso pela a saga do estagiário
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 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!!
Dahora, top mesmo, agente ajuda o canal com o like e comentario e vcs ajudam o estagiário com a grana da serie
Deu até vontade de voltar aprender HTML e css
que aula!!! Parabéns meninos!! show de bola!!
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.
Sensacional este vídeo. Se houver oportunidade mais um ou dois com este tipo de conteúdo. Enstimulando a observação. Ótimo vídeo.
esse problema dos tamanhos foi pq nao foi definido um container com tamanho maximo, pode ver que o menu e as imagens debaixo estão no limite lateral da pagina
Não para essa saga, muito bom kkkkk
É verdade
Já pode incluir essa saga no catálogo do Disney+ 😂
Kkkkkkkk adorei!!
🤣🤣🤣🤣🤣🤣
Disney + ainda é ruim pra receber uma série tão boa
Que saga massa ! Que ideia maneira vocês tão de parabéns
Massa demais, o conteúdo! Quanto tempo o estagiário levou?
Porra o canal de vocês é sensacional!!! parabéns !!!!
Isso aí não foi feito por estagiário. Está bom demais.
muito boa essa aula mobile
muito massa essa saga. aprendi pra caramba só com esse vídeo! boaaa estagiário
Eu amo a série do estagiário
17:35 Agora que eu reparei que o wallpaper do desktop é do kratos boladão kkkkkk
😎😎😎
Muito bom, Partiu PHP agr estagiário
Uma pergunta sobre SVG:
Uma das vantagens dele é, também, o fato de ser "desenhado on-demand" e com isso não tem perca de resolução?
sim, pode aumentar a tela o quanto quiser que não vai perder qualidade, é como um texto
Mais saga do estagiário pelo amor se Deus. Haha
Gostando demais
Estagiário monstro
Muito zika essa série
Valeu, mano. Tmj 🤜🤛
anotando as dicas aqui pra quando for fazer os projetos da trybe
conteúdo do caralho!!! pode crere! Parabéns Erik
O estágiario ta mandando bem Mano. Tais com tudo. Bota pra vuar as banda. 👍 tamo junto.
Muito legal tua explicação adorei cara obrigado
manu erick ta se puxando mesmo .. parabens.. depois dessa o erick ja vai ta empregado em .. so gloria ..
Parabéns pelos vídeos ! ! !
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!
Pô o mano estagiário mitouuuuu!!!!
Muito bom parabéns DevMedia
É sim
cara muito obrigado pelo conteúdo, aprendo um monte
Torcendo pra ele conseguir!