Skip to content

šŸƒ NFT Card Preview: a utilizaĆ§Ć£o de display flex para criaĆ§Ć£o e ediĆ§Ć£o do primeiro desafio do Frontend Mentor

Notifications You must be signed in to change notification settings

fabiodeandrade/NFT_Card

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Ā 

History

3 Commits
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 
Ā 

Repository files navigation

Frontend Mentor Challenger - NFT preview card component [done] āœ… PT-BR

Design preview for the NFT preview card component coding challenge

šŸƒ Desafio do Frontend Mentor - Card de exibiĆ§Ć£o NFT

Esse foi meu primeiro desafio concluĆ­do do Frontend Mentor FeM; para quem nĆ£o sabe o FeM Ć© um site de desafios voltados tanto para estilizaĆ§Ć£o de UI's quanto funcionalidade das mesmas.

O Frontend Mentor Ć© um dos melhores sites para se colocar na prĆ”tica tudo aqui que se tem na teoria, ele simula uma requisiĆ§Ć£o de um possĆ­vel cliente para um trabalho em front end.

Desde a passagem de briefing com as especificaƧƵes dos projetos atĆ© a simulaĆ§Ć£o de alteraƧƵes durante o processo para deixar mais realista ainda.

Basta acessar o site escolher o desafio de acordo com o seu nĆ­vel e praticar.

šŸŽÆ Objetivo

O objetivo do desafio foi medir o quanto minha teoria estava alinhada a prƔtica, acredito que isso seja uma das coisas mais importantes na hora de se estudar qualquer coisa, seja na area de tecnologia ou outra, pois isso no final das contas, vai trazer a seguranƧa de saber distinguir:

"Eu sei sobre isso" de "Eu sei fazer isso"

šŸ§‘ā€šŸ³ Como foi feito?

O desafio consiste em utilizar um HTML jĆ” escrito pelo FeM e estilizar de acordo com o briefing passado pelo prĆ³prio site.

Os arquivos iniciais sĆ£o fornecidos em um arquivo zipado de onde vocĆŖ pode aproveitados para o seu cĆ³digo.

Pra esse primeiro desafio eu levei em torno de 1h para concluir a primeira parte - sem os efeitos solicitados pelo briefing, como os de hover e transition - e mais 30m para finalizar o projeto todo.

šŸŽØ Principais atributos para estilizaĆ§Ć£o

  • Display: flex;
  • Conceito de Wrap para elementos filhos
  • Chamadas para o hover de pseudo elementos (::before e ::after)
  • ReestruturaĆ§Ć£o das divs do HTML, para melhor alocar elementos filhos e pai.

Link para o desafio

Preview Card NFT

About

šŸƒ NFT Card Preview: a utilizaĆ§Ć£o de display flex para criaĆ§Ć£o e ediĆ§Ć£o do primeiro desafio do Frontend Mentor

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published