Criando PORTFÓLIO Web responsivo DO ZERO [+ SORTEIO]

Подписаться 99 тыс.

Просмотров 63 тыс.

50% 1

Nessa live vamos construir um Portfólio Web do zero usando React Js, Next Js, Sass e Typescript. Vamos replicar o layout construído no Figma, seguindo as definições para dispositivos mobile e desktop, criando as regras de responsividade necessárias. Esse porfólio você poderá usar como base para a construção do seu próprio portfólio ou apenas para aprender um pouco mais sobre as tecnologias que usaremos durante a live.
Além disso, teremos um sorteio exclusivo 👀
---------------------------
👉 Aprenda React JS e Next JS
www.rocketseat.com.br/one?utm...
🎁 USE O CUPOM: KIPPERDEV
----------------------------------
🔗 Figma com layout
www.figma.com/file/wEuUcXmq0d...
🔗 Repositório no GitHub
github.com/Fernanda-Kipper/po...
🔗 Ferramenta de testes unitários Wallaby.js
wallabyjs.com/?referrer=Kippe...
🔗 Extensão Vs Code Console-Ninja
console-ninja.com/?referrer=K...
🔗 Extensão Vs Code React Dev Snippets
marketplace.visualstudio.com/...
👉 Me siga no instagram!
/ kipper.dev

Наука

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

10 июн 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 68

@andrenevesjunior5714 5 месяцев назад

Top Fê parabéns pelo conteúdo e carisma!

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

Você ajuda muito nós iniciantes. Obrigado e Parabéns

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

Aí Fêe, tava assistindo tua live, e está simplesmente sensacional o conteúdo, continua por favor, tá me ajudando muito, sou especializado em BackEnd Java, e estou aperfeiçoando o FrontEnd pra ter mais noção dos dois lados, você tem me ajudado muito, Você é incrível! Sucessssoo! 😘

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

você é minha inspiração, Fê

@Sam-Abyz 10 месяцев назад

A garota de programa mais braba, manda MUUITO! Está agregando bastante em meus estudos, só agradece.

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

Ahahaha valeu Samuel! Fico feliz que os conteúdos tem te ajudado 💜

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

Ahahaha valeu Samuel! Fico feliz que os conteúdos tem te ajudado 💜

@smartpaulo0176 9 дней назад

"Garota de programa" kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

@guilhermeventurimdev 2 месяца назад

Bem legal esse projeto. Fernanda Kipper, obrigado por disponibilizar seu tempo e conhecimento. Conteúdo excelente. Agora vou procurar aprender react e ts, já que não consegui publicar na hospedagem e não conseguir fazer a "build", vou pesquisar mais sobre.

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

show Fernanda, arrasou ! vlw d+

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

Que bom que gostouu 💜

@miltonneto2817 6 месяцев назад

Suas aulas são perfeitas.

@kipperdev 6 месяцев назад

Muito obrigadaa, Milton 😃

@mundo_todo 9 месяцев назад

Olá! Primeiramente quero lhe agradecer pelos conteúdos passados aqui no seu canal. Estou iniciando na área e fiquei com uma pulga atrás da orelha no sentido de como você conseguiu colocar um ícone diretamente no código HTML? Tentei copiar lá do Figma e colar no VSCode mas não consegui. Você pode me explicar como faço? Obrigado!

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

LINDA

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

vc é uma maquina

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

Muito foda seu videos ou!!!!

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

51:37 eu prefiro usar 'rem', pois quando pega em px do figma, é só fazer o tamanho em px / pela base, tipo 32px / 16px = 2rem, eu acredito que fique mais responsivel assim... geralmente uso px hoje apenas pra limite de tela, max-width: 1280px por exemplo.

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

o único problema com o uso de pixels, é que ele não escala com o zoom no navegador pixels - estático rem = relativo ao tamanho da fonte do navegador (a fonte do navegador muda de acordo com o zoom da página) em = relativo ao tamanho da fonte de seu elemento pai

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

Like e inscrito Fernandinha.

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

didatica maravilhosa

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

Valeuu! 💜

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

35:18 - esse é o meu principal motivo de usar somente e apenas tailwind agora, além de ser muuuuito mais rápido, não fico 5 minutos em cada div, escolhendo nome de classe mais.. rsrs

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

Tailwind polui o código com aquele tanto de classe fica ilegível, tailwind deveria ser banido da face da terra rsrs

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

@@desneurado concordo e discordo, sem falar que o que eu fazia com css/sass/scss... em 10 minutos, com tailwind faz em 3. É muito eficiente. Mas gosto é gosto... Sobre poluir, eu achava isso, mas depois que acostuma, chega dar ate coceira de ter que ficar nomeando classe e mudando de arquivo.. Pra mim compensa demais! Muito mais prós do que contras.

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

o sass do css não teria colocar com o nome module ?

@Alakazuu 9 месяцев назад

Oi! Só uma dúvida, passei pro github e hospedei no netlify... mas aparece página não encontrada, erro 404.

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

Oi Fê, vi que você usou algumas extensões do VSCode, poderia fazer um video ou dizer sobre quais você usou? Pois acho que ajudaria muito

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

Oii Dh, claro posso fazer um vídeo sim! Lá meu insta ja compartilhei algumas caso você queira dar uma olhada 😊 instagram.com/reel/CmoeAYRJ1Po/?igshid=MzRlODBiNWFlZA== instagram.com/reel/CtRxPLDAwdl/?igshid=MzRlODBiNWFlZA==

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

oei fé, nao consigo mandar ele pro meu figma os portfolio da dribble . vc tem algum video explicando ou me dar uma sugestão

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

O css do componente sass não teria que por anderline na frente do nome ?

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

É um crime assistir esse conteúdo e não sentar o dedo no like

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

Ahahahah 💜

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

Realmente ❤

@juniorapeles5215 Месяц назад

47:02

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

Fernanda ainda nao estou no seu nível mas gostaria de saber uma coisa onde vc aprendeu, ou quais cursos vc viu para fazer essa integração entre o next, react e sass

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

tem na descrição amigo

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

Usar Sass ou Styled Components? (sou iniciante em react)

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

Tem muita questão de gosto quando falamos de CSS e frameworks. Mas eu prefiro SASS por ser o que costumo utilizar no meu trabalho

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

Muito bom gostei bastante. Aonde está o repositório do git desse projeto ?

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

Obrigada Robson!! Aqui o link do repositório :) github.com/Fernanda-Kipper/portfolio-project

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

NO Next Utilizando o SASS deve criar uma variável criando um arquivo .scss ou no global colocar -- e o nome da variável ?

@denneraladim6190 4 месяца назад

como você colocou a sua foto no circulo ?

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

nossa vc é linda. com todo respeito

@GabrielRodrigues-gb2zs 11 месяцев назад

ola Fê, estou querendo montar um portfolio e tenho essas habilidades que estão nesse template do figma, posso montar em cima desse exemplo seu usando esse projeto?

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

Claro! Pode sim 😊 O objetivo com esse vídeo era justamente ajudar com ideias e mostrar como executar pra vocês criarem os portfólios de vocês!

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

alguém sabe qual tema ela usa?

@denneraladim6190 6 месяцев назад

Podia fazer um video explicado a media querie de um site responsivo ?

@kipperdev 6 месяцев назад

Oii, @denneraladim6190. Ótima ideia! Vou anotar ela aqui para trazer em algum vídeo

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

pra uso no portfólio, é de boa utilizar fotos de perfil assim, num estilo mais casual, tanto quanto uma foto mais formal, estillo mais coporativo?

@andersongomes4138 5 месяцев назад

!ef que crio um interface pre pronta é um estenção ? se sim qual ?

@kipperdev 5 месяцев назад

É uma extensão que eu criei! marketplace.visualstudio.com/items?itemName=FernandaKipper.reactcodesnippets

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

Ai fer como vc está ?me da help, que recurso é esse que vc usou para para configurar os arquivos e as linguagens via terminal ?

@jean_cl 6 месяцев назад

npm amigo, só dar um 'npm create-next-app' aí ele vai te dazendo as perguntas pra configurar, tem que ter o node instalado, claro!

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

Qual o tema do vscode fe? (Muito estiloso)

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

Oii, é o Emerald versão Dark 😊

@thiagomorais6263 6 месяцев назад

Os emojis. Não estão saíndo no meu

@alisonoliveira-wz2bk 11 месяцев назад

primeiro

@Aracnideo. 11 месяцев назад

E daí mano?1

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

Ganhou o que com isso?

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

@@Aracnideo. qual a necessidade de querer acabar com a alegria de alguem? Te fez melhor?

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

Gente l, mas ela fala certo o "pixeis" assim como pastel e pastéis

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

eu não acostumo de jeito nenhum, acho mt estranho kkkk só penso como "pixels"

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

@@jucijuicy eu também acho estranho, mas até onde ja conversei com pessoas, realmente o correto é pixeis. acho que fica mais estranho pq estamos "abrasileirando" a palavra pixel.