Тёмный

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

Serliv
Подписаться 42 тыс.
Просмотров 18 тыс.
50% 1

Наука

Опубликовано:

 

2 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 83   
@serliv
@serliv Год назад
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
@douglasalmeida9263
@douglasalmeida9263 Год назад
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
@mohameddellal5228
@mohameddellal5228 9 месяцев назад
Figma file please ?
@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!
@coisasuteis9815
@coisasuteis9815 Год назад
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 Год назад
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 Год назад
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.
@igorrocha5385
@igorrocha5385 Год назад
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 😊
@leopsantosrj
@leopsantosrj Год назад
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 Год назад
Obrigado pela sugestão Leandro. Anotado
@hatempire
@hatempire Год назад
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
@sabrinaoliveiradeveloper
@sabrinaoliveiradeveloper Год назад
Amei!! Ótimo conteúdo 👏❤
@serliv
@serliv Год назад
Muito obrigado Sabrina. Abraços
@SrMedeiros82
@SrMedeiros82 Год назад
É 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
@marlinho206
@marlinho206 Год назад
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 Год назад
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 Год назад
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.
@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
@mateusdossantos5463
@mateusdossantos5463 Год назад
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 Год назад
Muito obrigado pelo feedback Mateus. Valeu mesmo
@cleitoncristo214
@cleitoncristo214 Год назад
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 Год назад
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
@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
@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.
@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 Год назад
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
@JoseAScherer
@JoseAScherer Год назад
Rapaiz! Que vídeo senhores! Que vídeo! Também tenho duas palavras pra você. Para béns!
@serliv
@serliv Год назад
hahahaha. Muito obrigado José Augusto. Valeu mesmo
@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 Год назад
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
@Wilhians
@Wilhians Год назад
Para quem estar aprendendo você recomenda o uso do Chatgpd?
@serliv
@serliv Год назад
Acho que pode ser usado sim, com algum critério, pois o gpt as vezes responde com respostas erradas ou parcialmente incorretas
@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
@antarys3085
@antarys3085 Год назад
Muito obrigado
@toyscaco7312
@toyscaco7312 Год назад
up!
@emersonoliver8572
@emersonoliver8572 Год назад
Obrigado pessoas que colocaram comentários no outro!
@serliv
@serliv Год назад
Kkkkkk. Boa
@planob9201
@planob9201 Год назад
Muito bom meu amigo tirou muita dúvida e me deixou mais tranqüilo.
@serliv
@serliv Год назад
Que notícia boa. Muito obrigado pelo feedback
@JuliandroLessa
@JuliandroLessa 11 месяцев назад
Estamos aqui pra aprender !! estamos todos no mesmo barco!
@serliv
@serliv 11 месяцев назад
Concordo 100% com isso
@monicarosa5292
@monicarosa5292 Год назад
As vezes ocorre comigo nossa é muito louco....
@serliv
@serliv Год назад
Pois é Mônica. É assim mesmo. O segredo é manter a calma .
@faustinofrancisco8138
@faustinofrancisco8138 Год назад
Muito bom conteúdo, espero mais conteúdos assim 👏👏
@serliv
@serliv Год назад
Muito obrigado :)
@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 Год назад
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.
@LuisFalllic
@LuisFalllic 8 месяцев назад
cara que didatica incrivel, a melhor aula que ja assisti
@serliv
@serliv 8 месяцев назад
Muito obrigado Luis
@MrFelipeTutoriais
@MrFelipeTutoriais Год назад
Mais uma vez, obrigado professor!
@serliv
@serliv Год назад
Opa. Imagina. Eu que agradeço pela mensagem
@Quem.n.seincreveregay
@Quem.n.seincreveregay Год назад
Fantástico !!! Parabéns !!
@serliv
@serliv Год назад
Obrigado jr melo. Valeu mesmo
@josimarmiranda9722
@josimarmiranda9722 Год назад
Ótima aula professor.
@serliv
@serliv Год назад
Maravilha Josimar. Muito obrigado
Далее
AULÃO DE FIGMA - Criando uma Landing Page do zero!
1:33:32
OYUNCAK DİREKSİYON İLE ARABAYI SÜRDÜ 😱
00:16
Please stop using px for font-size.
15:18
Просмотров 173 тыс.
Learn CSS Flexbox in 20 Minutes (Course)
20:37
Просмотров 141 тыс.
Figma para programadores
13:59
Просмотров 7 тыс.
Desvendando o Dev Mode do Figma
34:08
Просмотров 8 тыс.
The Easiest Way to Build Websites
10:56
Просмотров 506 тыс.
Explaining CSS Grid (in practice!) | with Mayk Brito
53:40
Become A Master Grid CSS In 13 Minutes
13:46
Просмотров 45 тыс.
Learn CSS Subgrid in 14 minutes
14:19
Просмотров 77 тыс.
3x 2x 1x 0.5x 0.3x... #iphone
0:10
Просмотров 2,7 млн