Desenvolvimento Web com Front-End - Aprendendo do Zero" HTML, CSS e JS - Card Responsivo e Designer UI | HTML E CSS

#LayoutResponsive #FrontEnd #CascadingStyleSheets #SiteResponsivo #HypertextPreprocessor #LinguagemMarcaçãoHipeTexto #DesignerUI MINUTAGEM 00:00 - INTRODUÇÃO 00:33 - LINK PARA USAR FONT AWESOME 00:37 - CORPO DO HTML O2:42 - ESTILIZANDO OS CARDS 05:45 - SELETOR NTH-CHILD 08:05 - ESTILIZANDO IIMAGEM 09:00 - ÍCONE DE FONTE AWESOME Neste vídeo, você aprenderá como fazer cartões responsivos com CSS Flexbox e o Seletor filho ntd child para ordenar o card na posição que queremos. No cabeçalho do HTML colocamos o link para chamar a fonte dos ícones que vamos utilizar no nosso projeto. No corpo faremos uma div e depois um section e quatro article, dentro dele colocamos uma imagem e também colocaremos nomes nos cards com h1 e cargo da pessoa com h5 , também colocamos os ícones para redes sociais de cada colaborador. Nos cards colocamos número para identificar cada um, no primeiro card colocamos o nº 03, no segundo o nº 04, no terceiro card o nº 01 e o quarto card o nº02. No CSS vamos começar com um reset, depois vamos colocar imagem fundo no corpo da página. Na div container uma posição e alinhamento no centro, também utilizamos essa propriedades na section e colocamos altura e forçamos(wrap) para ficar em coluna. No article definimos largura, altura, tamanho de fonte, sombra, bordas arredondadas, alinhamento de texto e uma margem entre eles. Agora com o seletor ntd child vamos ordenar os cards na ordem numérica crescente, já que colocamos desordenados no nosso html. Nela também colocaremos cor de fundo e cor no texto para diferenciar um do outro. Agora vamos configurar a imagem com largura, altura , bordas e uma margem. 🎵 Música: Sunny Travel - Nico Staf Imagem utilizadas no vídeo: Imagem de Anastasiya Babienko por Pixabay https://pixabay.com/pt/photos/mulher-retrato-modelo-sorriso-657753/ Imagem de Pexels por Pixabay https://pixabay.com/pt/photos/barba-rosto-homem-modelo-bigode-1845166/ Imagem de Pexels por Pixabay https://pixabay.com/pt/photos/adulto-careca-barba-corporativa-1868750/ Imagem de Jorge Guillen por Pixabay https://pixabay.com/pt/illustrations/fundo-moderna-computador-design-1747777/ https://pixabay.com/pt/photos/mulher-de-neg%C3%B3cio-mulher-secret%C3%A1rio-2756210/ Imagem de Angelo Esslinger por Pixabay IDE: ( Integrated Development Environment )Microsoft Visual Studio. IDE: ( Integrated Development Environment ) Visual Studio Code. EXTENSÕES VISUAL STUDIO CODE: LIVE SERVER: Carrega a página automaticamente. BEAUTIFY : Padroniza a formatação do código COLOR HIGHLIGHT : Mostra as cores que você está criando no arquivo css. INTELLISENSE FOR CSS: Fornece o auto completo da classe que você escreveu no seu código. Software Editor de videos: Shotcut. Software para gravar a tela do computador: OBS Studio. Fontes de ícones https://fontawesome.com/v5.15/icons?d=gallery&p=2 HTML E CSS https://www.w3schools.com/default.asp https://fontawesome.com/ Tabelas de cores: https://www.flextool.com.br/tabela_cores.html Imagem para baixar: https://pixabay.com/pt/ Site para criar Thumbnails: https://www.canva.com/