- 11
- 16 529
UICODE
เข้าร่วมเมื่อ 26 มิ.ย. 2021
UI Design + Código - Desenvolvimento Front-End com foco na Experiência do Usuário!
CSS GRID LAYOUTS NA PRÁTICA! Como Aplicar da maneira certa! Slider HTML, CSS Grid e JavaScript Puro!
Aula Prática com os conceitos mais importantes sobre Grid e como aplicar em um projeto prático. Aula Mão na massa!
👉 Não esqueça de dar um like e deixar um comentário se você achou este tutorial útil. Seu feedback nos ajuda a criar mais conteúdo que você ama!
📺 Vídeo CSS GRID LAYOUTS: th-cam.com/video/AwO7s8Po9aM/w-d-xo.html
📸 Instagram: uicodeoficial
👨💻 Código Fonte: github.com/uicode-education/Hands-on-Grid-CSS.git
Doc MDN CSS Grid: developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout
👉 Não esqueça de dar um like e deixar um comentário se você achou este tutorial útil. Seu feedback nos ajuda a criar mais conteúdo que você ama!
📺 Vídeo CSS GRID LAYOUTS: th-cam.com/video/AwO7s8Po9aM/w-d-xo.html
📸 Instagram: uicodeoficial
👨💻 Código Fonte: github.com/uicode-education/Hands-on-Grid-CSS.git
Doc MDN CSS Grid: developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout
มุมมอง: 218
วีดีโอ
CSS Grid Layouts: Guia Atualizado e Definitivo! Não tem como sair dessa aula sem dominar CSS GRID!
มุมมอง 3818 หลายเดือนก่อน
🔥 Garanto que você nunca viu alguém explicar CSS Grid Layouts dessa forma. Este vídeo é seu guia completo para dominar um dos sistemas de layout mais poderosos no design web moderno. Aula CSS GRID LAYOUTS na Prática: th-cam.com/video/JkgFnNBNV3o/w-d-xo.html 👉 Não esqueça de dar um like e deixar um comentário se você achou este tutorial útil. Seu feedback nos ajuda a criar mais conteúdo que você...
Como identificar uma fonte tipográfica para utilizar nos seus projetos
มุมมอง 137ปีที่แล้ว
Nesse vídeo eu te ensino como você pode saber o nome das fontes utilizadas em qualquer site e como fazer pra utilizar essas fontes no seu site ou utilizar como inspiração.
Margin Collapsing CSS! Como isso funciona?
มุมมอง 202ปีที่แล้ว
Alguns conceitos do CSS podem parecer confusos à primeira vista e sem o entendimento adequado, você pode acabar se atrapalhando. Esse é um caso recorrente quando o assunto é o margin collaping, mas agora nesse vídeo com explicação simples e direta, eu te mostro o que é e como funciona o margin collapsing e como isso pode afetar o layout do seu site. Guia atualizado sobre FlexBox CSS: th-cam.com...
UI VS UX: Entenda a Diferença e Importância para o Desenvolvimento de um Produto!
มุมมอง 275ปีที่แล้ว
Se você quer entender a diferença entre UI e UX Design, esse é o único vídeo que você precisa assistir. E como bônus, descubra como você pode se destacar na carreira de desenvolvimento Front-End, por saber aplicar os conceitos de UI/UX nos seus projetos.
FlexBox CSS! Guia atualizado para dominar de uma vez por todas.
มุมมอง 12Kปีที่แล้ว
🚀 Bem-vindo ao nosso Guia Atualizado para Dominar o FlexBox CSS! Neste tutorial, você será guiado passo a passo pelas principais características do FlexBox, permitindo criar layouts flexíveis com facilidade. Eu vou abordar desde os conceitos básicos até técnicas avançadas, o que torna esse vídeo perfeito tanto para iniciantes quanto para desenvolvedores experientes.
Instalar OH-MY-ZSH no Terminal do MacOS
มุมมอง 1.2Kปีที่แล้ว
O Oh-My-ZSH pode melhora muito a produtividade ao utilizar o terminal, se você não conhecia essa ferramenta, então não perca mais tempo. Nesse vídeo eu mostro como instalar OH-MY-ZSH no Terminal do MacOS. Artigo de instalação no medium: medium.com/@uideveloper/tutorial-descomplicado-para-instalar-oh-my-zsh-no-terminal-do-macos-e-dobrar-a-sua-produtividade-68cd6341f5e comandos Verificar versão: ...
Como criar uma página completa só com HTML e CSS puro!
มุมมอง 982ปีที่แล้ว
Neste vídeo, eu vou te ensinar como codificar uma página completa apenas usando HTML e CSS. Nós vamos usar o Figma para criar o design e apenas com HTML e CSS puro, daremos vida ao layout que fizemos no vídeo anterior. E você vai ver que apenas usando conceitos básicos de design de interfaces e código, você pode criar uma página harmônica e funcional. Vídeo Parte 01 (Design): th-cam.com/video/Z...
Como criar uma PÁGINA WEB DO UI DESIGN AO CÓDIGO
มุมมอง 545ปีที่แล้ว
Neste vídeo, você aprenderá passo a passo como criar uma página web do layout ao código. Nós vamos usar o Figma para criar o design e apenas com HTML e CSS puro, daremos vida ao layout através do código. E você vai ver que apenas usando conceitos básicos de design de interfaces, você pode criar uma página harmônica e funcional. 🔗 Link para os arquivos usados no tutorial: drive.google.com/drive/...
Guia para APRENDER PROGRAMAÇÃO do ZERO! Dicas para iniciantes, Diferença de Front-end e Back-end
มุมมอง 214ปีที่แล้ว
Nesse vídeo eu vou falar dos conceitos básicos de programação, qual a diferença entre Front-end e Back-end, quais linguagens aprender, versionamento de código com git, etc. Além disso, eu vou te falar como você pode se destacar e conseguir uma vaga como desenvolvedor, mesmo sendo iniciante. 00:00 - Intro 01:02 - Qual a diferença entre Front-end e Back-end 01:12 - Front-end 01:46 - Back-end 02:3...
Dúvidas e Orientações para quem quer ESTUDAR PROGRAMAÇÃO
มุมมอง 322ปีที่แล้ว
Nesse vídeo eu vou responder as principais dúvidas de quem quer entrar para área de programação. Se você já pensou em aprender a programar, seja pelas oportunidades de bons salários, trabalhar de casa (Home Office) ou para construir um novo projeto, mas sente medo de não conseguir ou acredita que não tem habilidades para isso, este vídeo é para você. Aprender a programar pode parecer assustador...
O menu responsivo era algo que eu esperava, belo trabalho.😄
Muito obrigado! Pretendo fazer outro video focado no responsivo, obrigado pelo feedback!
😁
👏🏻 muito bom
Muito bom. Parabéns.
Muito obrigado 😁
Um dos melhores vídeos sobre design de Layout (con Figma) aplicado a HTML/CSS que já vi no TH-cam. Olha, eu vi muito. Abraços do Paraguai, Gostaria de ver um video de uma Landinpage relacionadas à semântica web. Com un <nav> dentro do <header>. Confirmando se o <main> vai debaixo do <header> ou tem varias formas semanticas de se fazer. Ou o <main> sempre vai dabaixo do <header> ou ele embolve desde o <header> até o <footer>. Tamben podemos ver quando usar FlexBox, CSS Grid, ou quando usar os dois. Tendo o mesmo layout das imagens usadas neste video, Temos acceso ao arquivo do Figma? Voçé tem un perfil no Figma? Grato demáis!
Muito obrigado! Fico muito feliz com o seu comentário. Abraços do Brasil. Obrigado pela sugestão de video, vou tentar gravar em breve, mas dando uma resposta rápida... não é uma regra absoluta que o <main> vai debaixo do <header>, mas é uma prática comum e lógica na estruturação de uma página HTML... Vou deixar aqui o link do arquivo do Figma, bons estudos: www.figma.com/file/cjvWWmRpHFgxeQVz72ZzAr/Hands-on-Grid?type=design&node-id=0%3A1&mode=design&t=QA94e5ypCO1rOG3A-1
Mano. Eu ainda me confundo com os flex: “1”, “2” etc… Tipo em distribuir divs no “container” dando um tamanho maior para uma e um menor pra outra, e trabalhar também nos itens centros das divs.
Opa, desulpe pela demora, eu tive que dar uma pausa no canal, mas estou de volta. Não sei se ainda tem dúvida mas... No CSS Flexbox, a propriedade flex como flex: 1 ou flex: 2 é uma abreviação para flex-grow, flex-shrink, e flex-basis. flex: 1 equivale a flex: 1 1 0%, o que significa que o item pode crescer e encolher proporcionalmente dentro do contêiner, partindo de uma base de 0%. Já flex: 2 significa flex: 2 2 0%, permitindo que o item cresça o dobro em relação ao item com flex: 1 se houver espaço extra disponível... Ou seja, olhe para esse numero como o peso que você deseja que ele tenha, quanto maior o número, maior peso ele vai ter. Na teoria é meio difícil de entender mesmo, tente testar e praticar varias vezes que uma hora vc entende o funcionamento. Para centralizar itens dentro do contêiner, use justify-content: center para alinhamento horizontal e align-items: center para vertical. Isso ajuda a manter seu layout responsivo e bem organizado!
Obrigado Leandro!
Adorei o vídeo. Parabéns!!
Obrigado 😃
Excelente aula. Nota 1000
Muito obrigado
Parabéns pela proposta do conteúdo, mais um inscrito.
Muito obrigado
ótimo video! Estou iniciando no Flexbox e minha dúvida seria sobre inserir texto deixando o mesmo responsivo! Eu devo inserir texto no arquivo HTML ou CSS? Se fizer um vídeo básico mostrando como é feito seria excelente!!!
Opa, muito obrigado! Desculpe pela demora, tive que dar uma pausa, mas agora estou voltando. Você pode inserir texto no arquivo HTML e pode configurar o estilo desse texto usando CSS. As configurações de responsividade, você também pode usar CSS.
show
ate hoje eu nunca vi uma aula tao boa feito a sua nao essa aula foi a melhor aula de flexbox que eu ja vi no youtube😎😎👏👏👏
opa, Muito obrigado!! 😃
hi
👏 'Promo SM'
Good
Excelente amigo. Agora entendi o conceito de flex. Obrigado
Top. 👊👏
🤙
Aula de CSS Grid na Prática: th-cam.com/video/JkgFnNBNV3o/w-d-xo.html
Flexbox veio para acabar com float.😅
Exatamente hahahaha float era um pesadelo! 😂
Não tem jeito.. TH-cam melhor lugar pra estudar !
Sempre haha 🙌 valeu por comentar!
Melhor guia de flexbox do youtube.
Muito obrigado pelo comentário!! Valeu mesmo!
Muito boa aula! Poderia explicar o uso do flex? Ex: quero aplicar um flex: 1 em determinado flex-item. Valeu!!
Muito obrigado pelo feedback. Quanto ao flex, vamos lá: A propriedade flex para um flex-item é uma abreviação de 3 outras propriedades... { flex-grow flex-shrink flex-basis } Então se você quisesse um { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } nesse caso você poderia usar o atalho { flex: 1 1 0%; } Quando você usa um { flex: 1 } você vai estar encurtando ainda mais e vai ser a mesma coise de usar { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } .................................. Como funciona o Flex-grow: Imagine que você tenha um container com largura de 400px e 4 itens com largura de 50px cada... então os itens somados estariam ocupando 200px e sobraria 200px, certo? Se você aplicar um flex-grow nos 4 itens, eles vão crescer de acordo com o espaço que está sobrando... então se todos os itens receberem flex-grow 1, então cada item vai crescer + 50px. Mas agora vamos supor que você coloque flex-grow 2 apenas para o primeiro item e flex-grow 1 para os outros 3, nesse caso os 200px que estão sobrando vai ser dividido em 5 partes, porque ele vai somar todos os flex-grows (200px / 5 = 40px) ... então o primeiro item vai receber 2 partes, ou seja, +80px e os outros 3 vai receber uma parte cada, ou seja +40px pra cada. (Por padrão o flex-grow é igual a 0) Como funciona o Flex-shrink: É a mesma ideia do flex-grow, mas ao invés de crescer os espaços quando está sobrando, vai ser o contrário... se faltar espaço, ele vai ver quanto é o espaço que falta e diminuir o tamanho dos itens de acordo com o número que você definiu o flex-shrink. (Por padrão o flex-shrink é igual a 1) Como funciona o Flex-basis: O flex-basis define qual é o tamanho inicial do item, então mesmo se a largura de um item for 100px, mas se tiver um flex-basis de 150px, então a largura do item será 150px, mas de qualquer forma se o flex-basis for de 50px e o width do item for 100px, então o tamanho será 100px porque o flex-basis define o tamanho inicial, mas ele ainda pode crescer ou diminuir. E você pode usar qualquer unidade de medida para ele, sendo px, em, rem, auto, % etc (Por padrão o flex-basis é auto) A documentação dessa propriedade não é das melhores, mas depois de ler essa explicação talvez fique melhor de entender os exemplos que tem nessas docs: www.w3schools.com/cssref/css3_pr_flex.php developer.mozilla.org/pt-BR/docs/Web/CSS/flex Espero ter ajudado, se ainda tiver dúvidas é só chamar! Grande abraço! tmj
@@uicodeoficial Show de bola professor!! Vc poderia até fazer um layout real aplicando essas tecnicas. Fica massa!
Acompanhei codando junto, dando pause e vááários replays. Tirei várias dúvidas. Parabéns pelo vídeo.
Poxa, muito obrigado. Fico feliz que tenha curtido!! Isso aí, quanto mais repetir, melhor pra fixar o conhecimento!! Abraço, qualquer coisa é só chamar. Tmj
ganhou mais um inscrito, uma recomendação amigo, tente separar por partes(aqueles cortezinhos que a gente consegue ver quando esta assistindo) o video, para a gente saber de qual assunto se trata
Muito Obrigado pelo feedback e valeu pelas dicas, já vou tentar aplicar para os próximos! Vlw tmj
... mais um inscrito !!! 👨🏽💻😉
Aeeeh!! Obrigado 🤙 tmj
caramba que aula incrível esta de parabéns, mais um novo seguidor
Muito obrigado!! Agradeço seu comentário e a sua inscrição!! Grande abraço! Tmj
6mil visualizações 531 inscritos, foi uma aula fantastica não tem como nao se inscrever e agradecer com um gostei, youtube é injusto.
Valeu demais por esse comentário e por se inscrever! Mesmo com poucos inscritos, esse tipo de feedback faz vale a pena!! Grande abraço!
Ótima explicação!!!
Muito obrigado!
muito bom seu conteudo
Valeu pelo apoio!
Muito bom seu trabalho mano. Estou na graduação de ADS e ao mesmo tmempo estudando na EBAC Full Stake Python. Seu conteúdo está me ajudando muito.
Que massa, cara. Fico feliz em saber. Obrigado pelo feedback e desejo sucesso pro seus estudos! Valeu
ajudou muito, valeu!
Opa, Que bom que ajudou! Valeu pelo comentário!!
boa
Valeu!!
Que aula top, nunca vi ninguém explicando essa relação dos eixos com as propriedades. Valeu ♥
Fico feliz de ler isso hahaha. Realmente, essa relações dos eixos não é muito falada, mas simplifica demais o entendimento dessas propriedades!! Estou preparando uma super aula sobre CSS Grid e vou trazer mais uma explicação bem fácil de entender. Fica de olho no canal e não vai se arrepender kkkk! Valeu, mano! Abraço e até mais o/
@@uicodeoficial incrível, pode ter certeza que estarei de olho. Me inscrevi aqui e ativei os sininhos. Aguardando um cursinho de CSS hein hahaha
Fala mestre, tudo bem?? Venho acompanhando seus vídeos aqui e já maratonei todos eles. Primeiramente PARABÉNS pelo conteúdo, você manda muito bem! Já indiquei pra diversos amigos que estão ingressando na área. Segundamente, teria como você fazer um vídeo sobre Designer Responsivo? Apesar de já compreender sobre HTML, CSS, JS um pouco de React e Bootstrap, a responsividade é um ponto que estou deixando muito a desejar nos meus projetos, em outras telas/resoluções que não seja a do meu monitor fica uma porcaria kkkkkk. Também se der pra fazer mais projetos do FIGMA ao código eu ficaria muito agradecido, venho aplicando os conhecimentos adquiridos nos meus projetos e esta dando certo :). Desde já agradeço a compreensão e um abraço também aqui de Brasília :D
Fala mestre, muito obrigado pelo feedback. Muito bom ver um conterrâneo por aqui no canal! Fico muito feliz em saber que o conteúdo te ajudou, de verdade mesmo, valeu demais. E sobre as sugestões de vídeos, posso fazer sim e agradeço, pois isso já me ajuda bastante sobre quais temas eu posso falar. No momento eu estou preparando uma aula bem massa sobre CSS Grid, vou soltar em breve e na sequência, já vou tentar abordar os vídeos sobre responsividade. Agradeço mais uma vez e continue acompanhando que logo sai vídeo novo. Grande abraço e sucesso nos seus estudos!
@@uicodeoficial Eu que agradeço ai pelo conteúdo de qualidade, realmente um achado aqui no TH-cam, focado exatamente nas questões que eu tinha dúvida, nota 10! Outra pergunta, você não tem Linkedin pra fazer conexão ou outra rede além do Insta do canal? Estou bastante interessado nesse Networking, tu manda muito bem no Front, INCRÍVEL DE MAAAIS. Sucesso, irmão.
@@marcosadriano2650 Valeu demais, mano! Muito bom ler isso hahaha. Pode me mandar um convite no meu Linkedin pessoal então: www.linkedin.com/in/leandrofigueiredo-uideveloper/ me chama lá e a gente troca ideia. Tmj, valeu mano!
Muito bom, parabéns!
Muito obrigado! Valeu pelo feedback.
Gostei sem enrolação, já me escrevi.
Obrigado! Valeu pelo feedback e por sua inscrição!!
Muito bom, sucesso para ti. Já me fiz a inscrição no canal.
Muito obrigado. Valeu por se inscrever!
<3
Muito bom, me ajudou muito, parabéns.
Que bom que ajudou! Valeu pelo comentário.
Mais um inscrito. Abraço!
Valeu, muito obrigado!!
Adorei esse vídeo, me ajudou demais!! Parabéns pelo conteúdo!
Muito, obrigado pelo comentário. Fico feliz em saber que ajudou!!
video fantástico irmão
Poxa, muito obrigado pelo comentário, mano!! Valeu!
Excelente didática!!! Nem em cursos caros tive explicações como essas. Meus parabéns! Me inscrevi e vou indicar seu canal para todos os iniciantes como eu.
Woouu! Muitíssimo obrigado pelo excelente feedback, fico feliz que tenha gostado. Em breve vou trazer mais conteúdos como esse. Valeu, grande abraço!!
Gostei também da ditática, ganhou mais um inscrito!
@@CawiroADM Massa demais, obrigado pela sua inscrição! Grande abraço o/
Excelente. Parabéns 👍
Muito obrigado, valeu pelo apoio!
Parabens! Exelente conteudo foi muito bom para meu conhecimento e estudos. Obrigado!
Poxa, fico feliz em saber que gostou da aula, muito obrigado!
Muito bom...continue dando dicas de css por favor!
Opa, muito obrigado pelo seu comentário. Pode deixar, já estou preparando mais conteúdo nesse mesmo estilo!!
Me inscrevi para te ajudar a alcançar seu objetivo e também aproveitar a aula
Muito obrigado pela força ! Pode ficar de olho que logo logo sairá mais aulas. Grande abraço.
Excelente conteúdo e didática. Muito esclarecedor. Parabéns!
Muito obrigado pelo feedback, muito bom ler isso. Valeu mesmo!
up!