Como criar PÁGINAS WEB com HTML e CSS a partir de design do FIGMA

Поделиться
HTML-код
  • Опубликовано: 30 сен 2024

Комментарии • 83

  • @serliv
    @serliv  Год назад +3

    Vem aprender HTML, CSS e Javascript comigo. SEM MENSALIDADE. Tem 30 dias para pedir o dinheiro de volta caso não fiquei totalmente satisfeito
    Curso Web Design Fundamentos. Aprenda HTML CSS e Javascript:
    serfrontend.com/cursos/web-fundamentos-html-css/index.html
    Curso Javascript Completo:
    serfrontend.com/cursos/javascript-completo/index.html
    Outros links que podem ser interessantes:
    Blog: serfrontend.com/blog/
    Meus cursos: serfrontend.com/cursos/
    Canais em redes sociais:
    Twitter: twitter.com/serlivcursos
    Linkedin: www.linkedin.com/in/serliv
    Instagram: instagram.com/serlivcursos
    Facebook: facebook.com/serlivcursos
    Instrutor: Daniel Tapias Morales
    Twitter: twitter.com/tapmorales
    Linkedin: www.linkedin.com/in/daniel-tapias-morales-87145621/
    Medium: medium.com/@tapmorales
    Github: github.com/tapmorales

    • @locerj
      @locerj Год назад

      To fazendo seu curso da Udemy, ta muito bom!!!

    • @leandrocruz6621
      @leandrocruz6621 Год назад

      Top demais, comprei e estou muito satisfeito

  • @mohameddellal5228
    @mohameddellal5228 9 месяцев назад +1

    Figma file please ?

  • @douglasalmeida9263
    @douglasalmeida9263 Год назад +7

    Estou estudando... e sem dúvidas essa foi a melhor aula que eu assisti... pois a página desenvolvida não é um simples formulário com label e input.
    Você está de parabéns!

    • @serliv
      @serliv  Год назад

      Muito obrigado pelo feedback Douglas. Forte abraço

  • @MarcosSmith-py4jk
    @MarcosSmith-py4jk Месяц назад

    Professor o senhor poderia me ajudar? Se eu fosse construir uma aplicação web nesse mesmo modelo que o senhor fez, onde os dados vão vim de uma API e alimentar os gráficos, qual grau de dificuldade e apenas uma estimativa, quantas horas demoraria? Um abração para o senhor!

  • @leopsantosrj
    @leopsantosrj Год назад +3

    Prof não sei se vc já tem algum vídeo mas caso não tenha, seria bom ter algum conteúdo explicando oq uma empresa normalmente espera de um profissional iniciante como front end jr. Oq seria cobrado de conhecimento aplicado no mundo real, pq técnicas existem aos montes mas são de níveis de conhecimento e experiência diferentes. Obgd.

    • @serliv
      @serliv  Год назад +3

      Obrigado pela sugestão Leandro. Anotado

  • @igorrocha5385
    @igorrocha5385 Год назад +4

    Muito bom vídeo. Ajuda muito ver como alguém estrutura e codifica um projeto, mesmo que simples. Gostaria muito de mais vídeos assim.

    • @serliv
      @serliv  Год назад

      Opa. Pode deixar Igor. Muito obrigado pela mensagem 😊

  • @coisasuteis9815
    @coisasuteis9815 Год назад +1

    Para ser UI Designer preciso saber Java Script? Ou dá só HTML e CSS? Eu não consigo ir bem em Java Script, detestei !!!

    • @serliv
      @serliv  Год назад +1

      Não precisa. Muitas vagas de UI Designer não exigem conhecimento de programação, mas em contra partida exigem bons conhecimentos dos princípios do design além de domínio de ferramentas como Figma, Photoshop, Illustrator ou similares.

    • @coisasuteis9815
      @coisasuteis9815 Год назад

      ​@@serliv Ai q bom!!🙏🙏 Sempre dá pra usar só HTML e CSS? Pra ser UI tem q ser UX tbm ou dá só UI?

    • @serliv
      @serliv  Год назад +1

      Mais comum é achar vagas com UI/UX. Mas aconselho você verificar, na região que mora ou quer trabalhar, o que as vagas estão pedindo. Linkedin é uma boa fonte de consulta. Abraços

    • @coisasuteis9815
      @coisasuteis9815 Год назад

      @@serliv Obrigado! Sua resposta me ajudou ir direto no ponto onde preciso para começar.

  • @SrMedeiros82
    @SrMedeiros82 Год назад +2

    É realmente a pressão e o nervosismo atrapalha muita gente, exercício de respiração é bom para se alcançar calma...

    • @serliv
      @serliv  Год назад

      Boa. É isso. Muito obrigado por compartilhar

  • @hatempire
    @hatempire Год назад +1

    Já fui demitido de um estágio por essa dificuldade falada no começo do vídeo. Tenho medo de não conseguir outro e estou em mudança de área, tenho 33 anos e sei que o preconceito por idade na hora de procurar emprego no Brasil é absurdo.
    Por isso, se não conseguir nada aqui, vou direcionar meus esforços pra fora.

    • @serliv
      @serliv  Год назад

      Espero ter ajudado com o video

  • @marlinho206
    @marlinho206 Год назад +1

    Gostei muito da forma que fez esse vídeo.
    Nós que estamos aprendendo e queremos colocar em pratica o layout que pegamos na internet, ou ate alguns design feito no figma, e da forma como você desmembrou o projeto e foi fazendo a estrutura no html e depois no css ficou muito didatico e assim consegui compreender melhoro aninhamento do html e depois a melhor aplicação do css. Poderia depois desse projeto, nos ensinar a colocar responsivo.
    Poderia continuar com esses tipos de vídeos com projeto vindo do figma ou até mesmo os projetos pego pela a internet e fazendo nesse estilo que fez nesse vídeo?
    Estou aguardando a segunda parte desse vídeo.
    Parabéns pelo belo trabalho!
    Desde já te agradeço. Forte abraço.

    • @serliv
      @serliv  Год назад

      Muito obrigado pela sugestão. A segunda parte já está aqui no canal. Dê uma procurada aqui e me avise se tiver problemas pra encontrar. Mais uma vez, muito obrigado

  • @LeonardoSantos-jk1tp
    @LeonardoSantos-jk1tp Год назад

    Eu fico todo perdido nessa parte já sei mt tag em html e css mas essa coisa de dicidir no html eu fico perdido engraçado q já sei tanta tag e fico perdido nessas partes de estruturar ...

    • @serliv
      @serliv  Год назад

      A prática leva a perfeição Leonardo. Siga em frente

  • @canalfernandooliveira
    @canalfernandooliveira Год назад +1

    Professor. Um pouco fora do conteudo da aula. Mas vejo alguns tutoriais ensinando criar menu responsivo com html e CSS. Isso é a melhor prática? Ou devo colocar javascript?
    Obrigado.

    • @serliv
      @serliv  Год назад +1

      Não precisa necessariamente do Javascript Fernando. Se o projeto não pede, não coloca. O meu menu mesmo no meu site serfrontend.com não tem javascript algum. Abraços

    • @canalfernandooliveira
      @canalfernandooliveira Год назад

      @@serliv Entendi. Então não tem uma regra para isso. Obrigado Professor.

  • @Wilhians
    @Wilhians Год назад

    Para quem estar aprendendo você recomenda o uso do Chatgpd?

    • @serliv
      @serliv  Год назад +1

      Acho que pode ser usado sim, com algum critério, pois o gpt as vezes responde com respostas erradas ou parcialmente incorretas

  • @mateusdossantos5463
    @mateusdossantos5463 Год назад +1

    Excelente vídeo, ótima explicação, muito bom mesmo, diferente de alguns por aí que falam e explicam muito rápido, fazendo as pessoas apenas copiarem o código sem aprender nada.

    • @serliv
      @serliv  Год назад +1

      Muito obrigado pelo feedback Mateus. Valeu mesmo

    • @cleitoncristo214
      @cleitoncristo214 Год назад +1

      Verdade em outros lugares descubro que existe ai venho aqui e aprendo de verdade, ele é um excelente professor.

    • @serliv
      @serliv  Год назад

      @@cleitoncristo214 fiquei muito feliz com seu feedback. Muito obrigado mesmo

  • @carlosvinicius905
    @carlosvinicius905 Год назад +1

    Essa aula parece mágica, fiz um curso que não demonstrou pelo menos o básico de design, ficava todo perdido sem conseguir planejar uma página se quer, mas depois que assisti essa aula foi como se tivesse destravado tudo

    • @serliv
      @serliv  Год назад

      Boa Carlos. Fico feliz em ajudar. Muito obrigado pelo feedback

  • @trapaleao6655
    @trapaleao6655 4 месяца назад

    Pra quê essa música de fundo?

    • @serliv
      @serliv  4 месяца назад

      Os vídeos mais recentes do canal já não possuem música de fundo. Te convido a maratonar os demais vídeos só com o doce e reconfortante tom da minha voz hahahahaha

  • @carloosbryan
    @carloosbryan Год назад

    puts fui tentar fazer o desafio do br challenges da Empire Burger e fiquei horas e horas pra nao conseguir sair nem da nav... foi bem frustrante

    • @serliv
      @serliv  Год назад +1

      Mas calma. É assim mesmo. Tem algo que eu possa fazer pra tentar ajudar?

    • @carloosbryan
      @carloosbryan Год назад

      @@serliv bom dia mestre, acredito que se você continuar com essa serie de fazer layouts a partir de projetos do figma ja ajuda muito. Da uma olhada nos projetos do BR Challenge acho que seria uma boa! valeu

    • @serliv
      @serliv  Год назад

      @@carloosbryan Obrigado.

  • @luisstraatmann8746
    @luisstraatmann8746 Год назад

    eu vi o curso de HMTL, e obrigado pois vc me ensinou a colocar a FIG. na pasta HTML.

  • @jonathalopes3141
    @jonathalopes3141 Год назад

    😅😅 mano que alivio, achava que era so eu kkkk

  • @JoseAScherer
    @JoseAScherer Год назад

    Rapaiz! Que vídeo senhores! Que vídeo!
    Também tenho duas palavras pra você. Para béns!

    • @serliv
      @serliv  Год назад +1

      hahahaha. Muito obrigado José Augusto. Valeu mesmo

  • @rogerio8710
    @rogerio8710 Год назад

    Valeu pela grande aula, professor. A propósito, estou estudando também Wordpress com Elementor, mas tendo a consciência que devo aprender também HTML5, CSS e JavaScript. Nessas aulas de Wordpress e Elementor, vejo professores injetando códigos HTML5 e CSS dentro do Elementor e escrevendo a tag important logo após. Aquela sua recomendação de não se usar importante, vale pra Wordpress e Elementor e onde posso encontrar esse vídeo do Sr. falando a respeito?

    • @serliv
      @serliv  Год назад +2

      Oi Rogério. Eu trabalhei muito pouco com wordpress há muito tempo. Em geral, usar o !important como se não houvesse amanhã é prejudicial por questões de manutenção e e principalmente acessibilidade. Vou preparar algo e mandar aqui. Valeu

  • @igorrocha5385
    @igorrocha5385 Год назад

    Professor, me surgiu uma dúvida. Nesse caso em específico, fazia diferença eu atribuir a altura do body como 100vh ao invés de 100% como o senhor fez.

    • @serliv
      @serliv  Год назад

      Pode sim Igor. É outra abordagem. Valeu.

  • @filipesantos2503
    @filipesantos2503 Год назад

    Parabéns pelo conteúdo... muito bom... está a ser uma grande ajuda como compelmento de estudo ... sou iniciante em html/css/js ... Parabéns mais uma vez!!👍

    • @serliv
      @serliv  Год назад

      Boa Filipe. Muito obrigado. Abração

  • @weverton.jaques
    @weverton.jaques 10 месяцев назад

    Parabéns

    • @serliv
      @serliv  10 месяцев назад

      Valeu weverton. Forte abraço

  • @biancavieira6732
    @biancavieira6732 Год назад

    Algo que eu tenho muita dificuldade e em criar layouts, sempre parece que eu estou copiando de alguem e nunca sinto que crio algo realmente autêntico.

    • @serliv
      @serliv  Год назад

      Nesse caso, aconselho desenhar algo primeiro no figma ou até mesmo no papel e caneta. Procure várias referências visuais e depois junte o que mais gostou de cada uma e crie o seu próprio design

  • @Ryuk_oOmen
    @Ryuk_oOmen Год назад

    quê vídeo excelente, professor pode dar uma analisada na pagina que eu fiz do seu site como exercício?

    • @serliv
      @serliv  Год назад +1

      Opa. Mando o link do GitHub para o insta serlivcursos faz favor

  • @18Akyra
    @18Akyra Год назад

    Professor, tbm daria para fazer com Grid Layout, certo?

    • @serliv
      @serliv  Год назад

      Com certeza. Esse é o próximo passo

  • @josimarmiranda9722
    @josimarmiranda9722 Год назад

    Sugestão: Explicar a aula com a tela lado a lado com VScode e a tela do navegador. Mostrando as alterações em tempo real.

    • @youngdll7
      @youngdll7 Год назад

      é a boa mesmo, tomo um pau em grid

  • @emersonoliver8572
    @emersonoliver8572 Год назад

    Obrigado pessoas que colocaram comentários no outro!

    • @serliv
      @serliv  Год назад +1

      Kkkkkk. Boa

  • @faustinofrancisco8138
    @faustinofrancisco8138 Год назад

    Muito bom conteúdo, espero mais conteúdos assim 👏👏

    • @serliv
      @serliv  Год назад

      Muito obrigado :)

  • @JuliandroLessa
    @JuliandroLessa 11 месяцев назад

    Estamos aqui pra aprender !! estamos todos no mesmo barco!

    • @serliv
      @serliv  11 месяцев назад

      Concordo 100% com isso

  • @planob9201
    @planob9201 Год назад

    Muito bom meu amigo tirou muita dúvida e me deixou mais tranqüilo.

    • @serliv
      @serliv  Год назад +1

      Que notícia boa. Muito obrigado pelo feedback

  • @antarys3085
    @antarys3085 Год назад

    Muito obrigado

  • @LuisFalllic
    @LuisFalllic 8 месяцев назад

    cara que didatica incrivel, a melhor aula que ja assisti

    • @serliv
      @serliv  8 месяцев назад

      Muito obrigado Luis

  • @monicarosa5292
    @monicarosa5292 Год назад

    As vezes ocorre comigo nossa é muito louco....

    • @serliv
      @serliv  Год назад

      Pois é Mônica. É assim mesmo. O segredo é manter a calma .

  • @toyscaco7312
    @toyscaco7312 Год назад

    up!

  • @MrFelipeTutoriais
    @MrFelipeTutoriais Год назад

    Mais uma vez, obrigado professor!

    • @serliv
      @serliv  Год назад +1

      Opa. Imagina. Eu que agradeço pela mensagem

  • @josimarmiranda9722
    @josimarmiranda9722 Год назад

    Ótima aula professor.

    • @serliv
      @serliv  Год назад

      Maravilha Josimar. Muito obrigado

  • @sabrinaoliveiradeveloper
    @sabrinaoliveiradeveloper Год назад

    Amei!! Ótimo conteúdo 👏❤

    • @serliv
      @serliv  Год назад

      Muito obrigado Sabrina. Abraços

  • @Quem.n.seincreveregay
    @Quem.n.seincreveregay Год назад

    Fantástico !!! Parabéns !!

    • @serliv
      @serliv  Год назад

      Obrigado jr melo. Valeu mesmo