Da imagem para Web - Reproduzindo um Site com Flexbox - Criando um site de Comandas e Mesas

Fala Galinha Olha só na aul de hoje a gente vai desenvolver um site com layout específico Tá bom a gente vai usar aul como uma pequena revisão porque na disciplina Agora no curso nesse módulo nós vamos entender um pouquinho de react então para conseguir trabalhar react eu preciso que vocês tenham uma boa base de html CSS E aí entrando no JavaScript Tá bom então bora lá vou mostrar para vocês ó esse é o layout que eu peguei lá do avo tá vou também deixar disponível aqui numa pastinha no Drive para vocês que estão acompanhando as

aulas conseguirem fazer e a ideia Nossa aqui é fazer algo parecido com isso aqui a gente vai desenvolver algo que seja dividido assim ó em heer tá bom em Main e aqui eu nem vou fazer isso aqui porque não é muito nosso foco Tá mas eu quero trabalhar assim ó esse topo e esse topo aqui por que que eu vou trabalhar dessa forma o que que a gente vai construir aqui e aí eu desenvolvi com meus alunos uma ideia de comanda e mesa a gente vai trabalhar uma uma proposta de restaurante aqui pra gente controlar

os pedidos Tod toda essa questão tá bom Então olha só a gente vai ter um Topo né esse topo aqui vai ter um ícone um lzinho Eu também criei esse logo através da Inteligência Artificial tá botei lá vou aqui na descrição aqui em cima vou na descrição aqui embaixo no linkzinho aqui aaula para vocês poderem ver como é que eu crio uma logo usando Inteligência Artificial E aí a gente vai trabalhar isso aqui ó então aqui eu vou ter mesas cardápio projeto não vou por ícone agora não não é o foco vou por algo parecido

com esse aqui pra gente conseguir trabalhar e vou criar os links tá bom a página em si para mostrar um pouquinho da dificuldade e como a gente vai evoluir nisso lá no final do módulo a gente vai voltar e vai ver como a diferença que tem para trabalhar usando react né Então olha só só vamos só mostrar aqui só para contextualizar vocês no semestre passado trabalhei com os alunos a ideia que quiseram trabalhar com alunos e professores né então Nós criamos essa pagin zinha aqui ó deixa eu atualizar ela então eu tenho aluno tenho professores

aqui eu tenho visualizações diferentes quando eu clico em em aluno eu consigo alterar esse aluno quando eu ó botei outra coisa aqui quando eu clico em Professor aqui deveria alterar esse professor é isso que a gente vai brincar essa dinâmica ainda com HTML CSS e react Tá bom então vamos lá pra gente desenvolver eu preciso est ciente do seguinte ó vou criar minha pastinha nova então aqui eu vou botar aqui ó projeto mesa comanda só para vocês visualizarem e aí eu vou criar ela deixa eu colocar aqui o projeto no Alt Tab aqui que vai

ficar mais fácil tá bom para vocês seguirem Então vamos lá primeiro passo que eu tenho que fazer é criar meu index Então vamos criar um arquivo de texto vou selecionar HTML né E aí eu já sei que eu posso utilizar aqui esse macetinho do Cifrão projeto comanda e mes Vou salvar como index Opa ind só index já sal htm vou P um Oi aqui oi vamos lá visualizar C botão direito Open server então vou deixar aqui ó jogar para cá e aqui vou jogar para cá só pra gente visualizar beleza essa é a ideia então

próximo passo aqui é eu conseguir criar o meu CSS como é que eu crio meu CSS vou vir aqui link 2 SS ó ele já criou e eu vou selecionar ele botãozinho contro direito clico né faço tudo isso ponho aqui a minha meu reset margem zero e page zero vou utilizar o box box size né border box para eu ter justamente aquela questão da borda da caixinha participar do page né para facilitar e eu não ficar com as coisas quebradas e aqui eu já vou pôr aqui um bug por exemplo um background color Black só

para testar só pra gente visualizar que o CSS tá funcionando beleza essa é ideia então vamos lá pra página a página em si o HTML dela é dividido em heer né botar aqui heer e vou P aqui o bem vamos salvar pegou né Deixa eu ver as cores dela ó eu clico cliquei lá em cima clico aqui ó e aí eu consigo pegar as cores então aqui vamos P ex decimal aqui vai ser fff 42 Então olha o que que eu vou fazer vou vir aqui header observ os seletores né ó reer eu não tenho

ponto nem nada porque eu trabalho com o seletor reer e o m e agora o m aqui vai ser esse verinho aqui vamos lá vamos visualizar perfeito já jogou lá para cima tá bom então deixa eu dar um zoom aqui só pra gente visualizar legal então a ideia aqui agora que eu posso fazer é display Flex jog eles Flex Direction botar a coluna né quando eu faço isso eu posso vir aqui no Flex no Main Flex grow fazer ele crescer é comum chegar aqui fazer crescer não crescer e falar ah professor deu errado né não

mas é só vir aqui ó e botar 100 VH ó cresceu tudo e o edif Del também vou pôr aqui de 100 beleza alguns autores aí costuma P mínimo porque se ele crescer mais que isso ele obedece também bom vocês que decidem aí não não tive problema ainda aqui vou pôr uma altura de deixa eu ver 100 pixels dividir um pouquinho semig essa aqui né Deixa eu ver aqui 100 não com 80 legal e agora começa a divisão eu tenho aqui de um lado a logo e do outro lado e do outro lado os links

só que antes de começar eu quero criar um padrão com vocês aqui ó vou criar uma pasta que eu vou chamar de html Vou criar outra pasta CSS e outra pasta IMG pra gente poder guardar o que é htm no que é htm o que é CSS no que é CSS O que é imagem no que é imagem como eu troquei o índex né E se eu tentar visualizar aqui ó ele não vai achar então eu tenho que vir aqui e abrir de novo abri de novo mas ele não achou o meu CSS por quê

Porque ele tá dizendo que o CSS está na mesma pasta e não está eu tenho que voltar uma pasta entrar no CSS para entrar no estilo e salvar o projeto Ó que legal então aqui eu tenho o exemplo certinho funcionando vamos lá lá no cabeç eu vou ter aqui por exemplo vou posso pôr aqui div logo né vou ter aqui a minha imagem vou deixar aqui logo para facilitar e aqui os links né então Sei lá posso pôr aqui href eh comandas não com mesas ó projeto mesas e comandas vamos ver ó que bonitinho já

foi lá para cima funcionou E aqui depois eu faço então já vou pro topo né olha só se a gente observar como é que tá o topo tá dividido tem um pouquinho para cá um pouquinho para lá tem um espaço para cá um espaço para cá e Ó que legal perfeito que que eu posso fazer eu posso aí só vou criar os links né aqui vou trabalhar com esses links projeto mesas e eu coloquei ó dentro do reer vai ter uma classe links e vai ter aqui ó o a então a gente pode trabalhar Antes

disso Olha só eu tenho dois filhos ten pai Tenho dois filos Então já vou jogar um display Flex aqui display ó Flex né já jogou PR Flex Direction r Line item vou no centro facilidade e justify content Space around para fazer aquela ideia que nós conversamos lá beleza joguei lá para cima aí no logo que que eu vou fazer eu já vou copiar eu deixei a imagem lá para vocês fazerem download e eu já vou jogar ela aqui tá bom então eu vou abrir a pazinha lá que eu fiz o download dela e já vou

jogar aqui pronto essa aí é a logo então vou pôr aqui imagem sce ele vai vai voltar uma pasta IMG Olha só e vai ir na mesa out então volar aqui a descrição logo do projeto né logo do projeto olha ó já jogou em cima então o que que eu posso vir aqui fazer eu posso vir aqui no né e em heer eu tenho ó uma classe logo IMG Então dentro de eu tenho uma classe logo IMG e eu vou del aqui deixa eu ver de 75 ó que legal já consegui trabalhar 175 e já

vai perder né posso também deixar a altura né do tamanho da minha E aí fica certinho ó joguei para cá e agora eu vou mexer nesse meu nesses meus links aqui então se eu analisar aqui direitinho dentro de Reider eu tenho a classe links que tem os links Então posso fazer is seg ó dentro de reader eu tenho a classe links e tenho isso aqui ó test decoration já tiro ó já tiro teste decoration aqui back eh vou pôr o Color nela Black né E aqui já tem algo que eu não tô gostando que é

o seguinte é a fonte que nós temos aqui tá essa fonte não tá legal eu vou entrar no Google fontes para baixar a fonte e eu tinha achado uma bem legalzinha aqui Mas aí o que que eu recomendo vocês o que que vocês podem fazer olha só para vocês tentarem Achar algo bem parecido eu vou P isso aqui ó comida saudável gostosa e pronta em minutos ó vou vir em filtro vou jogar aqui ó o que que ela vai fazer ela vai trazer aqui ó várias fontes e você vai tentar achar a que se parece

com o seu projeto né olha só essa cabinha aqui foi o que eu achei mais parecida vim aqui cliquei nela né ó Mandei pegar a fonte agora mudou olha só que legal ele vai pegar todas né e eu venho aqui ó get embed e copio isso aqui vou vir no meu index colar esse aqui que é a referência Ou posso usar o E ele fala aqui como é que uso cab Então já vou jogar ela aqui para todo mundo ter essa fonte porque meu projeto só vai trabalhar com essa fonte Olha lá que bonitinho já

mudou aqui já melhorou né então vamos lá vamos mexer no Styles aqui então dentro do sty aqui link eu tenho links link ID links e o link beleza eu posso também dar um teste Transform nele Case ó uma fonte size de 14 pixs e aí é bom deixar do tamanho 100% para eu fonte deixar ela um pouquinho mais forte 700 posso pôr ó um espaçamento em cima e para lá tá vocês só vão ver o espaçamento se você colocar por exemplo ó um background mas eu vou deixar ele assim porque quando ele tiver em Hover

ele vai ser a mesma coisa né mas ó deixa fazer o seguinte vai ser o background del ser Black e o box shad dele deixa sem box só PR gente ver bonitinho Então eu tenho essa transformação pronto então eu tenho aqui meu link outra coisa que eu gostaria de fazer era criar um efeito né de ativo ó link ativo botar aqui ó que vai ser exatamente isso aqui sar porque aí por exemplo agora quando eu tô no projeto eu venho aqui na classe do projeto ó ó só tem que trocar né aqui é é branco

e o background até vontade de p uma borda aqui ó de um pixel Solid Black Mas vai ficar muito ruinzinho Deixa eu tirar isso aqui a então vou deixar assim tá olha só tem aqui logo tem aqui o me agora vamos ver o Main como é que o m tá estruturado ó o Main eu vou criar aqui um conteúdo né porque aqui tá dividido em dois Esse é um e esse é outro então aqui talvez seja uma Vou botar aqui a Tomb e mail né e o outro eu vou pôr aqui conteúdo ó conteúdo e

aí esse conteúdo eu já vou preencher ó ele vai ter um H1 vou botar tá aqui ó comida saudável gostosa e conta em minutos vou copiar vai ter um parágrafo Já pensou em ter um chefe cozinhando e aqui eu vou ter um link também V DKW beleza vamos ver como é que ficou legal então eu vou fazer divisão agora no m Olha só no m agora fazer um display FX agora no tenil só vocês verem V um background n e no m também tem um conteúdo eu vou o background color dele como só para testar

Olha lá eu tenho esses dois então vamos fazer display Flex display Flex né ele já jogou para um lado pro outro botar aqui align item Center n é e jfy contant e aqui ó posso fazer ele crescer e ele crescer por igual mas eu tenho que determinar o tamanho dele então eu ponho para crescer metade né e eu ponho el tamanho máximo aqui tá é interessante eu pô aqui nele também um page né 25 p e 25 para eu conseguir estruturar ele Tô organizando minhas coisas só para vocês ter a noção Então vamos lá já

fiz essa parte vou agora tirar o t meio aqui porque a gente não vai usar então não vou pô aquela imagenzinha para não complicar a vida de vocês posso chegar aqui ó viu sumiu e aí que que eu vou fazer aqui Aquamarine deixa eu vamos organizar isso aqui ó vamos lá então dentro de conteúdo Eu Tenho H1 Então dentro de conteúdo Eu Tenho H1 né Já vi que é tudo o perc fonte vou ter que mudar vou 26 pixels ainda tá grande 24 22 aí vou pôr aqui ó ela mais grossa Então são tudo coisinhas

que eu tô buscando assim no olhômetro tá bom se eu não me engano aqui tem um box Shadow tá mas aí eu tenho que pôr teste Shadow olha só que legal Lembrando que ó aqui sempre fala o quanto você quer ela em Y né em x e o desfoque dela e a cor dela e vou ter um um Alfa aqui para ela ficar meio invisível e dar esse efeito aí olha só o conteúdo tem o p também tá bom E aí eu vou dar um page ne também para não ficar tudo agarrado e o conteúdo

agora tem o a e o a eu vou copiar o link aqui ó vou colocar um page ne de 10 por 20 pixels né E aí eu vou ter que aumentar aqui p no meu bichinho ver cardápio tem aqui tem essa forma posso já tirar esse método aqui horroroso ó aqui eu vou fazer o seguinte margem top eu vou P 20 piels e o margem aqui boton vou P 20 para jogar bem lá para baixo bom então aqui a gente tem a ideia do que foi construído aqui pro nosso sisteminha aqui ó então só vou

baixar essa imagenzinha aqui já baixei já joguei aqui como jpg joguei no Google né uma imagem de marmita baixei aqui ó mais achei interessante e agora vou pôr ela no meu tamb e mail tá bom Então cadê o tamb vai vir aqui ela já vou tirar ela né deixo no FX R E aí eu vou usar ela [Música] toda vou passar o caminho dela então tenho que vir aqui voltar IMG marmita né E vamos ver como é que ficou Ah não apareceu porque ela não tava aqui né então o que que eu vou fazer vou

pôr aqui lá 800 Pixel vamos ver [Música] 450 S E aí olha só que legal tem como fazer essa quininha aqui ó tá vendo essa quininha na imagem a gente pode usar o clip pef que que eu faço eu jogo no clip F ó Maker e eu escolho como é que eu quero fazer ó então eu consigo fazer de várias formas ó esse aqui esse aqui esse aqui então eu venho aqui copio ess clip e eu consigo jogar ele aqui ó ó lá que bonitinho Então são ideias aqui que dá para ir trabalhando eu não

vou deixar imagem só quis mostrar mesmo para vocês vou deixar aqui no pódio site que aí depois fica mais fácil Se você quiser p mais detalhes aqui ó é só você trabalhar assim olha só beleza só ide mesmo só para vocês visualizarem isso que que acontece aqui jovens Olha só agora vem um dos problemas que a gente tem que é a produção de página se eu quiser fazer mesas agora que que eu preciso fazer eu preciso vir aqui ó posso vir aqui é a mesma coisa né copiar e colar e trocar aqui para mesas não

é E aí o link que eu quero ativo agora vai ser qual vai ser o mesas beleza legal mas olha o trabalho que isso vai dar né eu vou vir em index aqui e já vou mudar isso aqui aqui ó pra gente não ter problema por exemplo o projeto é no index pon HTML aqui vai ser mesas e aqui em comandas P HTML ó o que que vai acontecer vou clicar em mesas vai vir vou clicar em comandas não veio porque a gente não criou ele ainda então quando eu V mesas olha só que Que

viagem o nosso problema é isso quando a gente tá trabalhando hmg padrão eu mudei esse menu aqui certo legal mudei que que acontece se eu clicar em mesas eu tenho agora o menu de mesas que já não tá mais atualizado ó não tem os links então aqui não vai funcionar então quando eu mudo aqui eu tenho que Obrigatoriamente mudar aqui tá e obviamente trocar o link aqui para mesas Qual o problema disso é que a gente cria um vínculo um problema aqui de copiar e colar muito grande por exemplo ó Vi em mesas copiei agora

vou fazer comandas comandas então agora eu sei que comandas está funcionando ó clico aqui mesas comandas e projetos ISS aqui eu mostro que é o seguinte se eu alterar por exemplo a fonte eu vou ter que alterar nos três isso são problemas que a gente vai vendo e vai convivendo com isso na manutenção do código é muito ruim fazer isso E aí a gente vai aprender forma de como melhorar essa aqui é uma ideia de site deixa eu mostrar o que eu fiz aqui para mostrar para vocês olha só esse aqui é o exemplo que

eu tava fazendo brincando né só para mostrar para vocês mesas comandas ideias que a gente tem aqui ó tá essa aqui são V vermelhas isso aqui a gente tudo vai manipular com JavaScript a gente vai criar todas essas formas aqui de criar página de elaborar com o JavaScript então que que eu preciso que vocês façam eu preciso que vocês tentem reproduzir essa página aqui tá bom e da mesma forma que a gente criou o aluno o professor vocês criam página ali promesas e comandas tá olha só um exemplo aqui de algo já funcional ó mesas

eu eu tenho aqui a descr Ten o título da mesa a descrição da mesa e um link para futuramente a gente ver essa mesa se for necessário a mesa dois né o título da mesa dois a a descrição e o link para futuramente a gente vê essa mesa dois comandas umas comandas lançadas isso aqui são exemplos tá vocês podem criar da forma que vocês acharam melhor tá V aí eu botei comandas lançadas comandas canceladas tá vendo que não tem muito design aqui mas tem um algo já Inicial e o projeto enfim que a gente copiou

e desenvolveu aqui em sala de aula Tá bom então vou deixar para vocês aí criarem eu vou dar esse aqui como exemplo preciso que vocês criem do zero para vocês irem acostumando e aprendendo porque HTML CSS a gente já não vai ver mais nesse curso tá bom a gente só vai utilizar abração e tchau tchau até a próxima aula fui