DEV Community: Gustavo Scarpim

🚀 Elementar Pocket-Sized Logic Challenge! Meet Elementar: Your New Favorite Puzzle Game – Free and Offline! [EN]

Gustavo Scarpim — Sun, 22 Jun 2025 17:38:06 +0000

Hey everyone! Who doesn’t love a good puzzle game to pass the time — whether you're in line, on the bus, or anywhere else?

That’s exactly why I decided to create Elementar!

I was inspired by classic logic games like Tohu wa-bohu and even the famous LinkedIn Tango, but I added some unique twists and exclusive modes to make the experience even more fun and engaging!

The core challenge is simple: fill the grid with an equal number of Fire 🔥 and Water 💧 symbols in each row and column. But watch out — you can’t place 3 of the same symbol in a row, either horizontally or vertically. That’s the golden rule!

And the best part? I built Elementar as a Progressive Web App (PWA), so you can install it directly on your phone and play offline anytime — or just open it in your browser! 📱💻

You’ll find the full rules and mode details on the game’s page. Try it out and let me know what you think!

👉 Play Elementar now: https://elementar.vercel.app

Got ideas for new modes, improvements, or puzzles you'd love to see? Feel free to message me here!

[Boost]

Gustavo Scarpim — Sun, 22 Jun 2025 17:37:14 +0000

Gustavo Scarpim

Jun 22 '25

🚀 Elementar Desafio Lógico no seu Bolso! Conheça Elementar: Seu Novo Puzzle Game Favorito, Offline e Grátis! [PT-BR]

#programming #gamedev #javascript #react

Comments

1 min read

🚀 Elementar Desafio Lógico no seu Bolso! Conheça Elementar: Seu Novo Puzzle Game Favorito, Offline e Grátis! [PT-BR]

Gustavo Scarpim — Sun, 22 Jun 2025 17:36:23 +0000

[PT - BR]
Fala, pessoal! Quem não adora um bom puzzle game para passar o tempo, seja na fila, no ônibus ou em qualquer outro lugar?

Pensando exatamente nisso, resolvi desenvolver o Elementar!

Me inspirei em jogos clássicos de lógica como Tohu wa-bohu e até no famoso Tango do LinkedIn, mas adicionei algumas modificações e modos exclusivos para deixar a experiência mais interessante!

Basicamente, o desafio é preencher as grades com a mesma quantidade de símbolos de Fogo 🔥 e Água 💧 por linha e coluna, com uma regra crucial: nunca deixe 3 símbolos iguais juntos na horizontal ou vertical. Simples assim!

E a melhor parte? Desenvolvi o Elementar como PWA (Progressive Web App), então você pode baixá-lo diretamente no seu celular para jogar offline a qualquer momento, ou acessar e jogar direto pelo navegador! 📱💻

As regras completas e todos os detalhes dos modos estão na página do jogo.Vem jogar e me contar o que achou!

👉 Jogue Elementar agora: https://elementar.vercel.app

Se tiverem sugestões de novos modos, melhorias ou quebra-cabeças que adorariam ver, me mandem uma mensagem por aqui!

ElementarGame #PuzzleGame #JogosDeLogica #DesenvolvimentoDeJogos #PWA #OfflineGame #Frontend #Angular #Vue #React #Next #WebDevelopment #Passatempo #BrainTeaser;

Layout Patterns - EN

Gustavo Scarpim — Wed, 10 Jan 2024 21:07:18 +0000

Hello, my name is Gustavo Scarpim, and today I will talk a about Layout Patterns.

Post in PT-BR: https://dev.to/guscarpim/layout-patterns-pt-45c5

What are Layout Patterns?

Layout Patterns are best practices in design approaches used to organize elements in a user interface.

These patterns are excellent solutions in the field of web design, whether for websites, applications, or other digital products. They are fundamental standards to provide a consistent and intuitive experience for users.

Why use layout patterns?

Using a layout pattern in your project offers several benefits, such as:

Why Use

Using a layout pattern in your project offers several benefits, such as:

Visual Consistency
Usability
Design Efficiency
Adaptability
Accessibility
User Acceptance
Development Efficiency

Some Examples of Layout Patterns

Mostly Fluid

The Mostly Fluid layout provides a dynamic grid with ample margins, smoothly adapting to the screen's width. It allows a continuous response to size changes, ensuring a visually pleasing experience across various devices and resolutions.

Example: https://layoutpatterns.netlify.app/

Collumn Drop

This layout involves multiple columns that stack as the screen width decreases, condensing into a single column on devices with limited space.
On desktop, it expands to occupy the full width of the available column.

Example: https://layoutpatterns.netlify.app/column-drop

Layout Shifter

The Layout Shifter adjusts in distinct ways on large, medium, and small screens. It is more complex to implement due to the need for a specific design for each screen size, ensuring a consistent and optimized experience across various resolutions.

Example: https://layoutpatterns.netlify.app/shifter

Off Canvas

The Off-Canvas Layout consists of columns that hide certain sections as the device width decreases, allowing the user to efficiently switch between these diverse sections.

Example: https://layoutpatterns.netlify.app/off-canvas

Tiny Tweaks

The Tiny Tweaks layout is one of the simplest, making small adjustments to content and confining itself to a few elements in a single column. Its simplicity promotes a minimalist experience, ideal for emphasizing crucial information in a direct and effective manner.

Example: https://layoutpatterns.netlify.app/tiny-tweaks

GitHub repo: Design Patterns - https://github.com/GuScarpim/Layout-Patterns

Thank you for reading.
See you soon!

Site: https://gustavoscarpim.com/
GitHub: https://github.com/GuScarpim
Linkedin: https://www.linkedin.com/in/gustavoscarpim/

Layout Patterns - PT

Gustavo Scarpim — Wed, 10 Jan 2024 21:07:12 +0000

Olá, me chamo Gustavo Scarpim e hoje irei falar um pouco sobre Layout Patterns.

Post em Inglês: https://dev.to/guscarpim/layout-patterns-en-2p27

O que são Layout Patterns?

Layout Patterns são boas práticas de abordagens de design que são utilizadas para organizar elementos em uma interface de usuário.

Esses padrões são ótimas soluções no campo de web design, sendo websites, aplicativos e outros produtos digitais, eles são padrões fundamentais para proporcionar uma experiência consistente e intuitiva aos usuários.

Porque utilizar layout patterns?

Utilizar um layout patterns no seu projeto oferece uma série de benefícios, como:

Consistência Visual
Usabilidade
Eficiência no Design
Adaptabilidade
Acessibilidade
Aceitação do Usuário
Eficiência no Desenvolvimento

Alguns exemplos de layout patterns

Mostly Fluid

O layout Mostly Fluid oferece uma grade dinâmica com amplas margens, adaptando-se de maneira fluida à largura da tela. Ele permite uma resposta contínua às mudanças de tamanho, garantindo um visual agradável em diferentes dispositivos e resoluções

Exemplo: https://layoutpatterns.netlify.app/

Collumn Drop

Esse layout envolve várias colunas que se empilham à medida que a largura da tela diminui, tornando-se uma única coluna em dispositivos com espaço reduzido.
Em desktop, ele se expande para ocupar toda a largura da coluna disponível.

Exemplo: https://layoutpatterns.netlify.app/column-drop

Layout Shifter

O Layout Shifter se ajusta de maneiras distintas em telas grandes, médias e pequenas. Ele é mais complexo de se utilizar pela necessidade de um design específico para cada tamanho de tela, garantindo uma experiência consistente e otimizada em diversas resoluções.

Exemplo: https://layoutpatterns.netlify.app/shifter

Off Canvas

O Layout Off-Canvas consiste em colunas que ocultam determinadas seções à medida que a largura do dispositivo é reduzida, proporcionando ao usuário a capacidade de alternar entre essas diversas seções de forma eficiente.

Exemplo: https://layoutpatterns.netlify.app/off-canvas

Tiny Tweaks

O Tiny Tweaks é um dos layouts mais simples, por realizar pequenos ajustes no conteúdo, restringindo-se a poucos elementos em uma única coluna. Sua simplicidade promove uma experiência minimalista, ideal para enfatizar informações cruciais de forma direta e eficaz.

Exemplo: https://layoutpatterns.netlify.app/tiny-tweaks

GitHub repo: Design Patterns - https://github.com/GuScarpim/Layout-Patterns

Agradeço por ter lido até aqui.
Até mais!

Site: https://gustavoscarpim.com/
GitHub: https://github.com/GuScarpim
Linkedin: https://www.linkedin.com/in/gustavoscarpim/

CSS Architecture (BEM - OOCSS - Functional CSS - CSS in Js) - EN

Gustavo Scarpim — Thu, 04 May 2023 01:00:29 +0000

When talking about software architecture, we usually focus on the architecture of the frontend or backend, but there is an equally important architecture that developers often overlook: CSS architecture

Although many people believe that CSS is just a set of visual styling rules, the truth is that it also needs to be organized and structured in a clear and coherent way to ensure long-term code maintenance and evolution.

CSS architecture involves defining standards and guidelines for organizing, naming, and structuring style rules in order to create cohesive and sustainable code. The most commonly used techniques include the use of methodologies such as BEM, OOCSS, Functional CSS, and CSS-in-JS, which propose ways to divide the code into reusable and independent modules, as well as the use of preprocessors such as Sass and Less, which allow for more modular and dynamic CSS writing.

A good CSS architecture can bring many benefits to a project, such as reducing code duplication, making maintenance easier, increasing team productivity, and significantly improving application performance. Therefore, it is important to value CSS architecture and invest in good practices for organizing and structuring code.

Here is an image summarizing some of the characteristics of each architecture:

Font: PUC

BEM Style Guide

*BEM *(Block-Element-Modifier) is a Style Guide where we do not need an external library and it has compatibility with any kind of frameworks. It is used to standardize class names:

Block: Header, Container, Menu, Checkbox, Input...
Element: Menu item, list item, header title...
Modifier: Disabled, Active, Fixed...
Example:

<style>
.main-nav {...}
.main-nav__item {...}
.main-nav__item--is-active {...}
</style>

<nav class="main-nav" >
  <li class="main-nav__item">Item menu</li>
  <li class="main-nav__item--is-active">Item menu Active</li>
</nav>

Pros:

Clear and intuitive organization
Reusability
Standardized and consistent naming
Scalability

Cons:

Very verbose
Overuse of BEM can lead to code redundancy
The need to define many classes can lead to increased CSS file size

OOCSS Style Guide

*OOCSS *(Object Oriented CSS) is a CSS development methodology that focuses on creating reusable and context-independent classes. The idea is to separate the style properties into classes that can be applied to any HTML element, regardless of the context in which they appear.

The goal of **OOCSS **is to create scalable, sustainable, and easy-to-maintain CSS code. It aims to reduce code duplication, improve code readability, and allow for more efficient creation of new styles.

Example:

<style>
.button {
  font-size: 14px;
  font-weight: 600;
}

.button--primary {
  background-color: #007bff;
  color: #fff;
}

.button--secondary {
  background-color: #fff;
  border: 1px solid #007bff;
  color: #007bff;
}

.button--alert {
  background-color: #dc3545;
  color: #fff;
}
</style>

<button class="button button--primary">primary</button>
<button class="button button--secondary">secondary</button>
<button class="button button--alert">alert</button>

OOCSS is a CSS writing methodology, not a library or framework. However, some CSS libraries adopt the principles of OOCSS:

Bootstrap
Foundation
Semantic UI
Materialize CSS
Bulma

Pros:

Code reusability
Flexibility
Scalability
Maintainability

Cons:

Learning curve
Complexity
Inconsistency
File size

CSS Functional Style Guide

This Style Guide uses micro classes to compose other components, where each micro class modifies a single CSS property.

Example:

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1em;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5em;
}

.col {
  flex: 1;
  margin: 0 0.5em;
}

Algumas bibliotecas que utilizam o CSS Funcional:

Tachyons
Tailwind CSS
Basscss
Functional CSS
Primer CSS

Pros:

Reduced CSS file size
Style reusability
Flexibility
Clarity

Cons:

High learning curve
Difficulty in control
Limitations
Need for planning

Style-in-JS Style Guide

This Style Guide is the styling technique using Javascript. Instead of separating CSS into an external file or embedding it in a separate HTML document, the style is created and applied directly to the component using a JavaScript styling library or framework.

Example using Styled Components:

import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  &:hover {
    background-color: #0069d9;
  }
`

function App() {
  return (
    <div>
      <Button>Click me!</Button>
    </div>
  )
}

Some libraries that use CSS-IN-JS:

styled-components
Emotion
JSS
Glamorous
Radium

How to improve the performance of your CSS code:

Avoid overriding repeated styles
Avoid using !important as it causes multiple re-renders in the "Painting" phase
Reduce the size of the CSS file
Use specific selectors
Use separate files
Minimize the number of reflows and repaints
Use caching techniques
Always use image optimization techniques

I hope this has been helpful.

Author: Gustavo Scarpim
Linkedin: https://www.linkedin.com/in/gustavoscarpim/
GitHub: https://github.com/guscarpim
Portfolio: https://gustavoscarpim.com/

Arquitetura CSS (BEM - OOCSS - Functional CSS - CSS in Js) - PT

Gustavo Scarpim — Thu, 04 May 2023 00:51:40 +0000

Ao falar sobre arquitetura de software, geralmente nos concentramos na arquitetura do frontend ou backend, mas há uma arquitetura igualmente importante que os desenvolvedores muitas vezes negligenciam: a arquitetura CSS.

Embora muitas pessoas acreditem que o CSS seja apenas um conjunto de regras de estilo visual, a verdade é que ele também precisa ser organizado e estruturado de maneira clara e coerente para garantir a manutenção e evolução do código a longo prazo.

A arquitetura CSS envolve a definição de padrões e diretrizes para a organização, nomenclatura e estruturação das regras de estilo, com o objetivo de criar um código coeso e sustentável. As técnicas mais utilizadas incluem o uso de metodologias como BEM, OOCSS, CSS Funcional e CSS-in-js, que propõem maneiras de dividir o código em módulos reutilizáveis e independentes, além do uso de pré-processadores como Sass e Less, que permitem escrever CSS de maneira mais modular e dinâmica.

Uma boa arquitetura de CSS pode trazer muitos benefícios para um projeto, como a redução de duplicação de código, maior facilidade de manutenção, aumento da produtividade da equipe e melhorias significativas na performance da aplicação. Por isso, é importante valorizar a arquitetura de CSS e investir em boas práticas de organização e estruturação do código.

Aqui está uma imagem que resumo um pouco as características sobre cada uma delas:

Fonte: PUC

BEM Style Guide

O BEM (Block-Element-Modifier) é um Style Guide onde não precisamos de uma lib externa e possuí uma compatibilidade com qualquer tipo de frameworks, ela serve para padronizar nomes de classes:

Block: Header, Container, Menu, Checkbox, Input...
Element: Menu item, list item, titulo de cabeçalho...
Modifier: Disabled, Active, Fixed...

Exemplo:

<style>
.main-nav {...}
.main-nav__item {...}
.main-nav__item--is-active {...}
</style>

<nav class="main-nav" >
  <li class="main-nav__item">Item menu</li>
  <li class="main-nav__item--is-active">Item menu Active</li>
</nav>

Prós:

Organização clara e intuitiva
Reutilização
Nomenclatura padronizada e consistente
Escalabilidade

Contras:

Muito verbose
Uso excessivo de BEM pode levar a uma redundância de código
A necessidade de definir muitas classes pode levar a um aumento do tamanho do arquivo CSS

OOCSS Style Guide

OOCSS (Object Oriented CSS) é uma metodologia de desenvolvimento de CSS que se concentra na criação de classes reutilizáveis e independentes de contextos específicos. A ideia é separar as propriedades de estilo em classes que podem ser aplicadas a qualquer elemento no HTML, independentemente do contexto em que aparecem.

O objetivo do OOCSS é criar um código CSS escalável, sustentável e fácil de manter. Ele busca reduzir as duplicações de códigos, melhorar a legibilidade do código e permitir a criação de novos estilos de forma mais eficiente.

Exemplo:

<style>
.button {
  font-size: 14px;
  font-weight: 600;
}

.button--primary {
  background-color: #007bff;
  color: #fff;
}

.button--secondary {
  background-color: #fff;
  border: 1px solid #007bff;
  color: #007bff;
}

.button--alert {
  background-color: #dc3545;
  color: #fff;
}
</style>

<button class="button button--primary">primary</button>
<button class="button button--secondary">secondary</button>
<button class="button button--alert">alert</button>

OOCSS é uma metodologia de escrita de CSS, não uma biblioteca ou framework. Porém, algumas bibliotecas CSS adotam os princípios do OOCSS:

Bootstrap
Foundation
Semantic UI
Materialize CSS
Bulma

Prós:

Reutilização de código
Flexibilidade
Escalabilidade
Manutenção

Contras:

Curva de aprendizado
Complexidade
Inconsistência
Tamanho do arquivo

CSS Funcional Style Guide

Esse Style Guide utiliza micro classes, para compor outros componentes, cada micro classe altera uma única propriedade do CSS.

Exemplo:

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1em;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5em;
}

.col {
  flex: 1;
  margin: 0 0.5em;
}

Algumas bibliotecas que utilizam o CSS Funcional:

Tachyons
Tailwind CSS
Basscss
Functional CSS
Primer CSS

Prós:

Redução do tamanho do arquivo CSS
Reutilização de estilos
Flexibilidade
Clareza

Contras:

Curva de aprendizado alta
Dificuldade de controle
Limitações
Necessidade de planejamento

Style-in-JS Style Guide

Esse Style Guide é a técnica de estilização utilizando Javascript. Em vez de separar o CSS em um arquivo externo ou incorporá-lo em um documento HTML separado, o estilo é criado e aplicado diretamente no componente usando uma biblioteca ou framework de estilo em JavaScript.

Exemplo utilizando Styled Components:

import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  &:hover {
    background-color: #0069d9;
  }
`

function App() {
  return (
    <div>
      <Button>Click me!</Button>
    </div>
  )
}

Algumas bibliotecas que utilizam CSS-IN-JS:

styled-components
Emotion
JSS
Glamorous
Radium

Como melhorar a performance do seu código css

Evitando overrides de estilos repetidos
Evitar sempre de utilizar !important porque ele causa um número de re-render na fase de "Painting"
Reduza o tamanho do arquivo CSS
Use seletores específicos
Utilize arquivos separados
Minimize o número de reflows e repaints
Utilize técnicas de cache
Sempre utilize técnicas de otimização de imagens

Espero que tenha agregado em algo.

Autor: Gustavo Scarpim
Linkedin: https://www.linkedin.com/in/gustavoscarpim/
GitHub: https://github.com/guscarpim
Portfolio: https://gustavoscarpim.com/

Animation React - Bem-te-vi

Gustavo Scarpim — Fri, 03 Sep 2021 03:09:54 +0000

Today I'm bringing another animation made with GSAP / React, you can see in my github all the code.

This animation is for those who like the bird "Bem-te-vi", if you have ideas for improvements, the code is open, I'll be happy to receive your PR.

When accessing the site, I recommend opening the sound.

Hope you like it:

See the complete code here on GitHub Click here

Check out the Project in action Deploy

Thanks for reading.

Animation React

Gustavo Scarpim — Sat, 21 Aug 2021 18:08:27 +0000

Today I'm bringing an animation made with GSAP/React, I won't post the entire code because it got a little big, but you can see in my github all the code.

GSAP is a library that facilitates the creation of animations, making it simple and intuitive.
With it we can animate (CSS properties, canvas library objects, SVG, React, Vue, Angular, generic objects, whatever) and also resolve countless browser inconsistencies, all with incredible speed (up to 20x faster than jQuery ), including automatic GPU acceleration of transforms.

The GSAP community is very active, and for those who have doubts about creating some animation, I recommend posting it on the GSAP forum https:/ /greensock.com/forums/

Here's an example of an animation that I managed to create using GSAP to help me, I hope you like it:

See the complete code here on GitHub Click here

Check out the Project in action Deploy

Thanks for reading!

How to deploy Netlify

Gustavo Scarpim — Wed, 02 Jun 2021 02:12:26 +0000

Heeeeey guys, quick tip for those of you who need to deploy your app, there are several ways to deploy your app for free, but what I like the most is Netlify because it's so simple and fast:

1- Once logged in, click on

New site from Git

to be able to choose which site you want to upload:

2- Choose where your code is stored:

3- Choose your repository (GitHub):

4- He will ask to set up your build information inBase directory you must put the path to your main page,, Build command this is where you put the command that will generate your project build, I always put it CI= npm run build

CI = <b>CI</b> means continuous integration

5- If everything is ok, it will show this page saying that your application was successfully uploaded.
To change your domain name, click on Domain settings:

6- Click Add custom domain to place a domain you have purchased or click Edit site name to change only the Netlify domain name:

And voila, your application is already online and 100% free.

Thanks for reading.

Context Api React

Gustavo Scarpim — Sat, 17 Apr 2021 04:40:39 +0000

Heeeeeey guys!

My name is Gustavo Scarpim, and I will show you how to add Context Api simply and quickly to your project.

1º Create a folder called context inside your src folder, example:

2º Inside index we will create your global context, example:

import React from "react"

import { ColorDefaultContextProvider } from "./template/components/colors"

const GlobalContext = ({ children }) => {
  return (
    <>
      <ColorDefaultContextProvider>{children}</ColorDefaultContextProvider>
    </>
  )
}

export default GlobalContext

3º I created a folder called components to separate my states, in my colors.js folder I create all my global states related to color, I'm taking the value of localStorage but the correct thing is to get the data from an API.
Well the example below is a "pattern of the context", just follow this step that is in the code below that will work

import React, { createContext, useState } from "react";

const colorCard = localStorage.getItem('colorCard')
const colorBackAvatar = localStorage.getItem('colorBackAvatar')
const colorTitle = localStorage.getItem('colorTitle')
const colorSubTitle = localStorage.getItem('colorSubTitle')

const DEFAULT_VALUE = {
  state: {
    colorCard: colorCard,
    colorBackAvatar: colorBackAvatar,
    colorTitle: colorTitle,
    colorSubTitle: colorSubTitle
  },
  setState: () => { },
};

const Context = createContext(DEFAULT_VALUE);

const ColorDefaultContextProvider = ({ children }) => {
  const [state, setState] = useState(DEFAULT_VALUE.state);
  return (
    <Context.Provider
      value={{
        state,
        setState,
      }}
    >
      {children}
    </Context.Provider>
  );
};

export { ColorDefaultContextProvider };
export default Context;

4º Finally, just import the context that we will use in your component, down here I show you how to call and edit its global state.

import React, { useContext, useRef } from 'react'
import * as S from './styles/custom'

import ContextColors from '../context/template/components/colors'

export default function Custom() {
  const { setState: setGlobalState } = useContext(ContextColors)
  const { state } = useContext(ContextColors);

  const colorCard = useRef(state.colorSubTitle)

  const handleChangeColorBackCard = (e) => {
    setTimeout(() => {
      //Here I’m taking all the state I have in my 
      // context and I’m changing a specific state, 
      // then save it in localStorage
      //(not required to save in localStorage)
      setGlobalState({ ...state, colorCard: e.target.value })
      localStorage.setItem('colorCard', state.colorCard)
    }, 300)
  }

  return (
    <S.Container>

      <S.ContentColor>
        <input ref={colorCard} defaultValue={state.colorCard}
          type={'color'} onChange={(e) => handleChangeColorBackCard(e)} />
        <S.Label>Background card</S.Label>
      </S.ContentColor>

    </S.Container>
  )
}

5º Most importantly, for the context to work throughout your application you need to import it into your main index

import React from 'react';
import ReactDOM from 'react-dom';
import Context from './context';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <Context>
      <App />
    </Context>
  </React.StrictMode>,
  document.getElementById('root')
);

And ready, you applied your context api to your project:

See the project working:

See the complete code here on GitHub Click here

Check out the Project in action Deploy

Thanks for reading.

Brave Creators

Gustavo Scarpim — Thu, 01 Apr 2021 03:17:27 +0000

Heeeeey guys!!

My name is Gustavo Scarpim, and today I’m going to show you how to be a digital creator verified by Brave.

I particularly enjoyed the Brave browser a lot and I believe that it's not just me, besides being identical to Google Chrome it still has some more features that make it even better, and one of those features that in my view draws a lot of attention is the possibility you are able to receive payments on your own website through the Brave wallet.
If you still don't know how to assign this to your website, I'll show you how to quickly and easily add this functionality to your website.

1- Go to https://creators.brave.com/sign-up and register your email to access your creator area.

2- Click here "+Add Channel"

3- Choose the type of account you want to assign to your wallet (We will only focus on WebSite)

4- Insert your domain

5- Choose one of the options to configure (I will choose Download a trusted file here)

6- Download the well-known file, go to your website's repository and create a folder at the root of your project called .well-known

And ready, the process takes about a maximum of 48 hours to be approved, after it is approved, your website will show that you are a creator verified by Brave and any amount you receive on it, will fall directly into your Brave wallet.