[Sugestão] Só uma observação

Claro que sim, como qualquer coisa que seja inicial para nossa mente, terá muitas barreiras, por mais que eu tenha um excelente conhecimento sobre coisas técnicas, existem coisas novas que foram incrivelmente chatas de entender no inicio, como:

• Trabalhar com Ilustrator.
• Figma (Construção).

Ou seja, se preocupe em repetir aquilo todos os dias possíveis, pode demorar até dias, mas saiba que tudo começa com um html e css mal feito.

Display Flex

A propriedade display: flex define o elemento pai como um contêiner flexível. Isso permite que você use outras propriedades do flexbox para controlar a forma como os elementos são distribuídos dentro do contêiner.

Por exemplo:

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

.container {
  display: flex;
}

Flex Direction

A propriedade flex-direction controla a direção em que os itens são posicionados dentro do contêiner. Os valores possíveis são row (padrão), column, row-reverse e column-reverse.

Por exemplo:

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
}

Justify Content

A propriedade justify-content controla o alinhamento horizontal dos itens dentro do contêiner. Os valores possíveis são flex-start (padrão), flex-end, center, space-between, space-around e space-evenly.

Por exemplo:

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
}

Align Items

A propriedade align-items controla o alinhamento vertical dos itens dentro do contêiner. Os valores possíveis são stretch (padrão), flex-start, flex-end, center e baseline.

Por exemplo:

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

.container {
  display: flex;
  align-items: center;
}

Flex Grow

A propriedade flex-grow controla a capacidade de um item crescer dentro do contêiner. O valor padrão é 0, o que significa que o item não crescerá. Se você definir o valor para 1, o item crescerá proporcionalmente aos outros itens.

Por exemplo:

HTML

<div class="container">
  <div class="item grow">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

.container {
  display: flex;
}

.grow {
  flex-grow: 1;
}

Claro que eu simpliquei bastante os poderes do flexbox, você pode ir muito mais além, mas acredito que isso seja um básico para sua motivação. Pode acompanhar um artigo melhor feito pela Juliana Amoasei:

https://www.alura.com.br/artigos/css-guia-do-flexbox