Olá, futuros mestres do Shopify! 👋 Sejam muito bem-vindos à nossa Aula 99! Que jornada incrível, não é? Chegamos a um ponto onde todo o conhecimento que acumulamos vai ser posto à prova. Esta é a aula que marca o início do nosso projeto prático mais ambicioso: vamos construir uma loja Shopify completa, do zero, aplicando tudo o que aprendemos até agora, mas com uma pegada avançada!

Preparem-se, porque a partir de agora, vamos sujar as mãos com código e estratégia, transformando teoria em uma loja online real e funcional. Vamos lá! 🚀

—

Aula 99 – Loja Shopify do Zero ao Avançado: Projeto prático – Criando loja completa do zero

📚 O que você vai aprender nesta aula

Nesta aula fundamental, você vai:

• Compreender o escopo e os objetivos do nosso projeto prático final: a loja “Artesanatos da Vila”.
• Revisitar e aprofundar as etapas de planejamento estratégico para o desenvolvimento de uma loja complexa, focando em UX, funcionalidades e arquitetura de conteúdo.
• Configurar seu ambiente de desenvolvimento para este projeto, utilizando as melhores práticas para temas Shopify.
• Iniciar a estruturação do nosso tema personalizado, começando pela base e organização de arquivos.
• Desenvolver e estilizar os componentes essenciais de Header e Footer personalizados, utilizando Liquid, HTML e CSS.
• Aplicar e integrar Metafields para gerenciar conteúdo dinâmico de forma avançada nestes componentes.
• Incorporar dicas valiosas de boas práticas de organização de código e otimização de performance desde o início do projeto.

🔗 Conectando com aulas anteriores

Ao longo das últimas aulas, mergulhamos fundo em tópicos avançados do Shopify. Nesta aula, vamos amarrar tudo isso:

• Aulas de Liquid (Objetos, Filtros, Tags, Estruturas): Serão a espinha dorsal de todo o nosso código, permitindo a exibição dinâmica de dados. Lembram-se de como manipular product ou collection? E de como usar if, for e assign? Tudo isso será crucial!
• Aulas de Seções e Blocos: Usaremos a arquitetura de seções para modularizar nosso tema, garantindo flexibilidade e facilidade de manutenção para o lojista.
• Aulas de Metafields: Aprenderemos a criar e utilizar Metafields da loja, produtos, coleções e clientes para armazenar dados personalizados e exibi-los em nosso tema, tornando-o extremamente flexível e potente.
• Aulas de HTML, CSS e JavaScript: Serão a base para a estruturação do layout, estilização e interatividade dos nossos componentes.
• Aulas de Performance e SEO: Desde o planejamento, já vamos pensar em uma estrutura que favoreça o carregamento rápido e seja amigável para motores de busca.
• Aulas de Configuração de Tema (settings_schema.json): Vamos criar opções no Customizer para que o lojista possa gerenciar elementos do nosso header e footer sem tocar no código.

Esta aula é a ponte onde toda a teoria se transforma em uma realidade tangível. Preparem-se para aplicar o que aprenderam! 🌉

📖 Conteúdo Principal

Chegou a hora de dar vida ao nosso grande projeto! Vamos construir uma loja incrível.

1. Boas-vindas ao Projeto “Artesanatos da Vila”: O Nosso Desafio Final! 🏡✨

Nosso projeto prático será a criação da loja “Artesanatos da Vila”. Imagine um e-commerce que vende produtos artesanais personalizados: cerâmicas feitas à mão, bordados exclusivos, joias customizadas, etc.

Por que este tema?

• Permite explorar diferentes layouts de produtos e coleções.
• Exige uma forte ênfase em design e estética.
• Nos dará a oportunidade de implementar funcionalidades avançadas de personalização de produtos (que abordaremos nas próximas aulas).
• Demanda uma atenção especial à experiência do usuário (UX) para destacar a singularidade de cada item.

Principais Requisitos e Desafios que Abordaremos:

• Design Único: Criar um visual que transmita a essência artesanal e personalizada.
• Exibição Detalhada do Produto: Mostrar cada detalhe e as opções de personalização.
• Navegação Intuitiva: Facilitar a busca por categorias e tipos de artesanato.
• Performance Otimizada: Garantir que a beleza visual não comprometa a velocidade.
• Conteúdo Dinâmico: Utilizar Metafields para gerenciar descrições, características extras e opções de personalização.

2. Planejamento Estratégico da Loja (Revisão e Avanço) 🗺️💡

Antes de qualquer linha de código, um bom planejamento é essencial, especialmente em projetos complexos.

a) Wireframing e Prototipagem

Revisitem suas habilidades de design e experiência do usuário. Para este projeto, é crucial:

• Definir o Fluxo do Usuário: Como o cliente navega da página inicial até a finalização da compra?
• Esboçar Layouts: Desenhe (mesmo que à mão) os principais layouts: Página Inicial, Página de Produto, Página de Coleção, Carrinho, Checkout. Ferramentas como Figma, Adobe XD ou até mesmo um papel e caneta são ótimas para isso.
• Definir Hierarquia Visual: Onde estarão os elementos mais importantes (chamadas para ação, informações de produto)?

b) Definição de Funcionalidades Avançadas

Pense em tudo que sua loja precisa. Para “Artesanatos da Vila”, já sabemos que a personalização de produtos será chave. Outras funcionalidades podem incluir:

• Filtros de Coleção Avançados: Por cor, material, artesão.
• Sistema de Avaliações Personalizado: Com fotos, talvez.
• Blocos de Conteúdo Reutilizáveis: Seções dinâmicas para a página inicial.

c) Arquitetura de Conteúdo

Como os dados serão organizados no Shopify?

• Produtos: Campos padrão (título, descrição, preço, imagens) + Metafields para detalhes como “Material Principal”, “Técnica Usada”, “Opções de Gravação/Bordado”.
• Coleções: Como agrupar? Por tipo de artesanato, por artesão, por ocasião?
• Páginas: “Sobre Nós”, “Política de Trocas”, “FAQ Personalização”.
• Blogs: Para contar a história dos artesãos, tutoriais, inspirações.

d) Experiência do Usuário (UX) e Interface do Usuário (UI)

• UX: Garantir que a navegação seja fluida, as informações claras e o processo de compra intuitivo.
• UI: Escolher uma paleta de cores que remeta ao artesanal, tipografias legíveis e que transmitam a identidade da marca. Vamos buscar um design clean, mas com toques de calor e autenticidade.

3. Configuração do Ambiente de Desenvolvimento 🛠️

Para um projeto avançado, trabalhar diretamente no tema “Ao vivo” é um risco enorme. Usaremos um tema de desenvolvimento.

a) Duplicando o Tema Base (Dawn)

Vamos começar com o tema Dawn, que é o tema padrão do Shopify, otimizado para performance e flexibilidade. Ele será nossa “tela em branco” com uma boa base.

1. No seu admin Shopify, vá em Loja Virtual > Temas.

2. Encontre o tema Dawn na sua biblioteca de temas (se não tiver, adicione-o).

3. Clique nos três pontinhos (...) ao lado do Dawn e selecione “Duplicar”.

4. Renomeie o tema duplicado para algo como "Artesanatos da Vila - Desenvolvimento".

Este será o tema onde faremos todas as nossas modificações. Ele ficará oculto para os clientes até que esteja pronto.

b) Ferramentas para Edição de Código

• Editor de Código Online do Shopify: Bom para edições rápidas. Vá em Temas > Tema de Desenvolvimento > Ações > Editar código.

Shopify CLI (Command Line Interface): Para projetos avançados, o CLI é altamente recomendado*. Ele permite que você baixe o tema para sua máquina local, edite com seu editor de código preferido (VS Code, Sublime Text, etc.) e sincronize as mudanças em tempo real. Se você ainda não o instalou, considere fazê-lo. É um divisor de águas na produtividade!

• shopify theme init (para criar um tema do zero) ou shopify theme pull (para baixar um tema existente).
• shopify theme dev (para rodar um servidor local e sincronizar).

(Não vamos aprofundar na instalação do CLI nesta aula, mas tenha-o em mente como uma ferramenta poderosa para seu fluxo de trabalho.)

c) Dica Profissional: Controle de Versão com Git 🐙

Para qualquer projeto sério de desenvolvimento, o Git é indispensável. Ele permite que você:

• Rastreie todas as mudanças: Saiba quem mudou o quê e quando.
• Reverta para versões anteriores: Corrigir erros é muito mais fácil.
• Trabalhe em equipe: Gerencie colaborações sem conflitos.

Crie um repositório Git local para o seu tema e faça commits frequentes.

4. Estrutura do Tema Personalizado: Limpando e Organizando 🧹📦

Começar com o Dawn é ótimo, mas para um projeto “do zero”, vamos “limpar” um pouco para ter mais controle.

a) Identificando Arquivos Essenciais

Um tema Shopify tem pastas chave:

• assets/: Imagens, arquivos CSS (.css ou .scss), arquivos JS (.js).
• config/: settings_schema.json (configurações do tema), settings_data.json (valores das configurações).
• layout/: theme.liquid (o invólucro principal de todas as páginas).
• locales/: Arquivos de tradução.
• sections/: Arquivos .liquid que definem seções editáveis pelo Theme Customizer.
• snippets/: Pequenos pedaços de código Liquid reutilizáveis.
• templates/: Arquivos .liquid para layouts de páginas específicas (ex: product.json, collection.json, page.liquid).

b) Removendo ou Desativando Componentes Não Utilizados

Para sentir que estamos “começando do zero”, podemos desativar ou remover seções do Dawn que não usaremos imediatamente.

• Vá no Theme Customizer do seu tema de desenvolvimento.
• Na página inicial, você verá muitas seções padrão (Rich text, Multi-column, etc.). Você pode ocultá-las ou removê-las para ter uma tela inicial mais limpa.
• No código, podemos começar a modificar theme.liquid e criar nossas próprias seções e snippets.

c) Organizando Pastas e Snippets Customizados

• assets: Crie subpastas se necessário (ex: assets/css/, assets/js/).
• snippets: Crie snippets para componentes que serão reutilizados (ex: icon-social.liquid, product-card.liquid).

5. Desenvolvendo o Header Personalizado ⬆️

O header é um dos componentes mais importantes. Ele precisa ser funcional, responsivo e refletir a marca.

Vamos modificar a seção sections/header.liquid existente do Dawn ou até criar uma nova (se quisermos total controle). Para esta aula, vamos modificar a existente para simplificar, mas tratá-la como uma tela quase em branco.

a) Estrutura HTML/Liquid Básica do Header

Nosso header terá:

1. Logo: Usaremos a logo da loja (configurável).

2. Menu Principal: Navegação para as principais categorias.

3. Ícones de Ação: Carrinho de compras, talvez busca ou conta de usuário.

{% comment %}
sections/header.liquid - Header personalizado para Artesanatos da Vila
{% endcomment %}



{% if section.settings.logo != blank %}



{% else %}
{{ shop.name }}
 
📚 Informações da Aula
 
Nível: Intermediário
 
Tempo estimado: 15-20 minutos
 

{% endif %}




🛒 Carrinho ({{ cart.item_count }})

☰



{% schema %}
{
"name": "Header Artesanal",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo da Loja"
},
{
"type": "link_list",
"id": "menu",
"label": "Menu Principal",
"default": "main-menu"
}
],
"presets": [
{
"name": "Header Artesanal"
}
]
}
{% endschema %}

Explicação do Código:

• header-artesanal: Nossa classe principal para estilização.
• section.settings.logo: Pega a imagem da logo que o lojista configurar no Theme Customizer.
• shop.name: O nome da loja, um objeto global.
• section.settings.menu.links: Percorre os links da lista de links (menu) selecionada no Theme Customizer.
• cart.item_count: Objeto global que exibe a quantidade de itens no carrinho.
• settings no {% schema %}: Define as opções configuráveis para esta seção: image_picker para a logo e link_list para o menu.

b) Estilização CSS Básica do Header

Vamos adicionar um CSS inicial para dar vida ao nosso header. Crie um arquivo assets/custom.css e inclua-o no seu theme.liquid (veja o item 7.b).

css

/ assets/custom.css /
.header-artesanal {
background-color: #f8f0e3; / Um bege clarinho, remetendo a papel artesanal /
padding: 1.5rem 0;
border-bottom: 1px solid #e0d0b0;
}
.header-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px; / Largura máxima do conteúdo /
margin: 0 auto;
padding: 0 20px;
}
.header-logo img {
max-height: 50px; / Altura máxima da logo /
width: auto;
}
.header-logo-text {
font-family: 'Playfair Display', serif; / Fontes que remetem ao artesanal /
font-size: 2rem;
margin: 0;
}
.header-logo-text a {
color: #5a4b3f; / Marrom escuro /
text-decoration: none;
}
.header-nav {
/ Para desktop, o menu será visível /
display: block;
}
.header-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 2rem; / Espaço entre os itens do menu /
}
.header-menu-link {
text-decoration: none;
color: #5a4b3f;
font-weight: 500;
padding: 0.5rem 0;
transition: color 0.3s ease;
}
.header-menu-link:hover {
color: #a07d56; / Cor de destaque /
}
.header-actions {
display: flex;
gap: 1.5rem;
align-items: center;
}
.header-action-cart {
text-decoration: none;
color: #5a4b3f;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
}
.header-action-menu-mobile {
display: none; / Escondido em desktop /
background: none;
border: none;
font-size: 1.8rem;
cursor: pointer;
color: #5a4b3f;
}
/ Responsividade básica - Para telas menores /
@media (max-width: 768px) {
.header-nav {
display: none; / Esconde o menu em mobile por enquanto, implementaremos o menu hamburguer depois /
}
.header-action-menu-mobile {
display: block; / Mostra o botão do menu mobile /
}
}

(Lembre-se de adicionar https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Raleway:wght@400;500;700&display=swap ao seu tema ou usar fontes padrão para evitar erros.)

6. Desenvolvendo o Footer Personalizado ⬇️

O footer também é essencial para informações de contato, links importantes e credibilidade.

Vamos modificar a seção sections/footer.liquid.

a) Estrutura HTML/Liquid Básica do Footer

Nosso footer terá:

1. Blocos de Links: Navegação secundária (Institucional, Ajuda).

2. Informações de Contato: Email, telefone (via Metafields).

3. Redes Sociais: Ícones.

4. Copyright: Da loja.

{% comment %}
sections/footer.liquid - Footer personalizado para Artesanatos da Vila
{% endcomment %}

{% schema %}
{
"name": "Footer Artesanal",
"settings": [
{
"type": "richtext",
"id": "sobre_nos_texto",
"label": "Texto 'Sobre a Loja'",
"default": "
A Artesanatos da Vila traz a alma do artesão para a sua casa. Peças únicas e personalizadas com amor.
"

},
{
"type": "url",
"id": "facebook_url",
"label": "Link do Facebook"
},
{
"type": "url",
"id": "instagram_url",
"label": "Link do Instagram"
},
{
"type": "url",
"id": "pinterest_url",
"label": "Link do Pinterest"
},
{
"type": "link_list",
"id": "footer_menu",
"label": "Menu do Footer",
"default": "footer"
},
{
"type": "email",
"id": "email_contato",
"label": "Email de Contato",
"default": "[email protected]"
},
{
"type": "text",
"id": "whatsapp_numero",
"label": "Número de WhatsApp",
"info": "Ex: +55 (11) 98765-4321"
}
],
"presets": [
{
"name": "Footer Artesanal"
}
]
}
{% endschema %}

Explicação do Código:

• richtext: Permite um editor de texto rico no Customizer.
• url, email, text: Tipos de entrada para os links de redes sociais, email e WhatsApp.
• shop.metafields.custom.horario_atendimento: Aqui está a mágica! Estamos buscando um Metafield da loja chamado custom.horario_atendimento. Isso nos leva ao próximo ponto.

b) Estilização CSS Básica do Footer

Adicione ao seu assets/custom.css:

css

/ assets/custom.css - Footer /
.footer-artesanal {
background-color: #5a4b3f; / Marrom escuro /
color: #f8f0e3;
padding: 3rem 0;
margin-top: 4rem;
}
.footer-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); / Responsivo /
gap: 2.5rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.footer-block h3 {
color: #f8f0e3;
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.footer-block p,
.footer-block ul li a {
font-family: 'Raleway', sans-serif;
font-size: 0.95rem;
line-height: 1.6;
}
.footer-block ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-block ul li {
margin-bottom: 0.7rem;
}
.footer-block ul li a {
color: #f8f0e3;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-block ul li a:hover {
color: #a07d56;
}
.footer-social-icons {
display: flex;
gap: 1.5rem;
margin-top: 1.5rem;
}
.footer-social-icons li a {
font-size: 1.5rem;
color: #f8f0e3;
text-decoration: none;
}
.footer-bottom {
border-top: 1px solid rgba(248, 240, 227, 0.2);
margin-top: 3rem;
padding-top: 2rem;
text-align: center;
font-size: 0.85rem;
color: rgba(248, 240, 227, 0.7);
}
.footer-contact a {
color: #f8f0e3;
text-decoration: underline;
}

7. Utilizando Metafields para Dados Dinâmicos no Header/Footer 🌟

Aqui entra o poder dos Metafields para tornar nosso tema verdadeiramente flexível!

a) Criação do Metafield para o Horário de Atendimento

1. No seu admin Shopify, vá em Configurações > Metafields.

2. Escolha o tipo de Metafield: Loja.

3. Clique em “Adicionar definição”.

4. Nome: Horário de Atendimento

5. Namespace e chave: custom.horario_atendimento (importantíssimo que seja exatamente este, pois é o que usamos no código do footer).

6. Tipo de conteúdo: Texto de linha única.

7. Validação: Deixe como padrão, mas você pode definir limites de caracteres.

8. Opções: Marque “Apresentar essa definição em seções de admin para”.

9. Clique em “Salvar”.

b) Preenchendo o Metafield

1. Vá em Configurações > Detalhes da loja.

2. Role até o final da página. Você verá uma seção para “Metafields”.

3. Encontre o Metafield “Horário de Atendimento” e preencha com o texto desejado, por exemplo: Seg-Sex: 9h às 18h | Sáb: 9h às 13h.

4. Clique em “Salvar”.

Agora, o {{ shop.metafields.custom.horario_atendimento }} no seu footer exibirá este texto dinamicamente! Isso é muito mais limpo do que “hard-codar” a informação ou criar mais uma setting no settings_schema.json para algo que é um dado puro da loja.

8. Integrando CSS e JS no theme.liquid 🔗

Para que nosso CSS e JavaScript funcionem, precisamos incluí-los no arquivo principal do tema, layout/theme.liquid.

1. Abra layout/theme.liquid.

2. Localize a tag . Adicione a inclusão do seu CSS personalizado depois da inclusão dos estilos padrão do Shopify, mas antes do fechamento do .

...
{{ content_for_header }}

...

Dica: Se você estiver usando fontes personalizadas do Google Fonts, inclua o delas aqui também.

3. Localize a tag . Adicione a inclusão do seu JS personalizado antes do fechamento do .

...

{{ content_for_layout }}
...

Crie um arquivo assets/custom.js mesmo que esteja vazio por enquanto.

💻 Exemplos Práticos

Passo a passo com Screenshots (Mentalmente):

1. Duplicando o Tema:

Screenshot:* Admin Shopify > Loja Virtual > Temas > Ações > Duplicar.

Screenshot:* Renomeando o tema duplicado.

2. Editando o Código do Tema:

Screenshot:* Admin Shopify > Temas > Tema de Desenvolvimento > Ações > Editar Código.

Screenshot:* Abrindo sections/header.liquid e sections/footer.liquid.

3. Adicionando CSS e JS (assets/custom.css e assets/custom.js):

Screenshot:* Criando novos arquivos em assets.

Screenshot:* Modificando layout/theme.liquid para incluir os arquivos.

4. Criando o Metafield:

Screenshot:* Configurações > Metafields > Loja > Adicionar Definição.

Screenshot:* Preenchendo os detalhes do Metafield custom.horario_atendimento.

5. Preenchendo o Valor do Metafield:

Screenshot:* Configurações > Detalhes da loja > Rolando para a seção Metafields.

Screenshot:* Inserindo o valor do horário de atendimento.

6. Resultado no Customizer:

Screenshot:* Abrindo o Theme Customizer do tema de desenvolvimento.

Screenshot:* Selecionando a seção “Header Artesanal” e configurando logo e menu.

Screenshot:* Selecionando a seção “Footer Artesanal” e configurando texto, links de redes sociais e email/WhatsApp.

(Considerando a limitação de não poder gerar imagens reais, descrevi como seriam os screenshots para o aluno visualizar o processo. Em um curso real, esses seriam prints da tela.)

🎯 Exercícios e Desafios

Hora de colocar a mão na massa e solidificar o aprendizado!

1. Crie seu Tema de Desenvolvimento: Duplique o tema Dawn, renomeie-o para “Artesanatos da Vila – SeuNome” e acesse o editor de código.

2. Implemente o Header Personalizado:

• Copie e cole o código Liquid e CSS do Header que apresentamos.
• No Theme Customizer, adicione uma logo à sua escolha e selecione um menu existente (ou crie um novo) para o header.
• Desafio Extra: Adicione um ícone de “Busca” (🔍) ao lado do carrinho no header.

3. Implemente o Footer Personalizado:

• Copie e cole o código Liquid e CSS do Footer.
• No Theme Customizer, preencha o texto “Sobre a Loja”, adicione links fictícios para redes sociais e seu email/WhatsApp.

4. Crie e Utilize o Metafield:

• Crie o Metafield custom.horario_atendimento para a loja, como demonstrado.
• Preencha-o em “Detalhes da loja”.
• Verifique se a informação aparece corretamente no footer da sua loja.

5. Otimização Inicial: Certifique-se de que os arquivos CSS e JS estão sendo carregados corretamente no theme.liquid. Use as ferramentas de desenvolvedor do navegador (F12) para verificar se não há erros no console e se os estilos estão sendo aplicados.

📝 Resumo da Aula

Nesta aula crucial, demos o pontapé inicial no nosso projeto prático “Artesanatos da Vila”! 🥳

• Definimos o escopo da nossa loja, que será um e-commerce de produtos artesanais personalizados.
• Relembramos a importância do planejamento estratégico, desde o wireframing até a arquitetura de conteúdo.
• Configuramos nosso ambiente de desenvolvimento, duplicando o tema Dawn e iniciando a organização de arquivos.
• Construímos a estrutura base do Header e Footer personalizados usando Liquid, HTML e CSS, e os tornamos configuráveis via settings_schema.json.
• Dominamos a criação e integração de Metafields da loja para gerenciar dados dinâmicos, como o horário de atendimento, tornando nosso tema mais flexível e fácil de gerenciar pelo lojista.
• Reforçamos as boas práticas de organização e inclusão de arquivos CSS/JS no theme.liquid.

Começamos a ver como todas as peças do quebra-cabeça Shopify se encaixam para construir algo verdadeiramente customizado e robusto!

🚀 Preparação para próxima aula

Ufa! O corpo da loja já tem cabeça e pés. Na próxima aula (Aula 100!), vamos mergulhar na página inicial da nossa loja “Artesanatos da Vila”. Será onde o cliente terá a primeira impressão e onde exibiremos nossos produtos mais encantadores!

• Aprenderemos a criar e configurar seções dinâmicas personalizadas para a página inicial (slider de banners, coleções em destaque, produtos em promoção, etc.).
• Vamos aplicar ainda mais o uso de Metafields para dar ao lojista total controle sobre o conteúdo das seções.
• Focaremos em um layout responsivo e atraente para garantir uma ótima experiência em qualquer dispositivo.

Tragam suas ideias e muita energia, pois a página inicial é o coração da loja! 💪

📚 Recursos Adicionais

• Documentação Shopify para Liquid: https://shopify.dev/docs/api/liquid
• Documentação Shopify para Metafields: https://shopify.dev/docs/apps/custom-data/metafields
• Documentação Shopify para settings_schema.json: https://shopify.dev/docs/themes/architecture/settings/settings-schema
• Shopify CLI: https://shopify.dev/docs/themes/tools/cli (Altamente recomendado para desenvolvedores avançados!)
• Guia de Design UX/UI (Básico): https://www.interaction-design.org/literature/topics/ux-design (Em inglês)

Até a próxima, pessoal! Continuem codificando e explorando! 🤓👩‍💻👨‍💻