Uma coisa que poucos sabem é que não é preciso de um diploma ou conhecimento em Hacking para saber utilizar o Terminal de um computador.

Com o terminal você pode fazer praticamente tudo que um usuário comum faz, porém de uma forma mais rápida e eficiente através de comandos em texto. Você pode abrir, mover, renomear, copiar e deletar arquivos. Inclusive com diretórios(pastas). Organizamento de arquivos é somente o começo. O Terminal é uma ferramenta poderosa, e sabendo utilizar é possivel fazer de tudo.

- Você pode instalar e rodar programas.
- Você pode versionar arquivos.
- Você pode ler documentos offline.
- Você pode escrever scripts para automatizar tarefas.
- Você pode editar programas.
- Você pode configurar opções escondidas do sistema operacional.
- Você pode se conectar a servidores.
- Você pode ter vantagem total sobre conteúdos de código aberto.

<br />

Se você está utilizando alguma tecnologia para desenvolvimento como React, Vue,
Angular, entre outros... Você consegue inciar de forma rápida seu projeto, instalar Pacotes como Design System's. Se você está utilizando Git, você consegue contribuir com o desenvolvimento de projetos.

O Terminal é uma ferramenta poderosa. É Uma ferramenta poderosa para desenvolvedores. É uma ferramenta poderosa para Designers. É uma ferramenta poderosa para qualquer pessoa.

![Terminal](/content/blog/neofetch.png "Terminal")

O Terminal também pode ser um pouco assustador logo de inicio. Por isso eu recomendo fazer com que pareça bonito primeiro. Baixe um bom tema. Extraia o arquivo zip e importe-o para o seu terminal.

1. Abra seu Terminal.
2. `CMD`(no Mac) ou `CTRL`(outros sistemas) + `,` para abrir as configurações.
3. Importe o arquivo .terminal e defina-o como padrão.
4. Reinicie o Terminal.

<br />

Se você não estiver satisfeito com a fonte Monospace padrão, há muitas boas opções para escolher:

- SF Mono (Pré-instalado no Mac)
- [Input](https://input.djr.com/)
- [Inconsolata](https://fonts.google.com/specimen/Inconsolata)
- [Space Mono](https://fonts.google.com/specimen/Space+Mono)
- [Office Code Pro](https://github.com/nathco/Office-Code-Pro)
- [PragmataPro (pago)](https://fsd.it/shop/fonts/pragmatapro/)
- [Operator (pago)](https://www.typography.com/blog/introducing-operator)
- [Cartograph (pago)](https://connary.com/cartograph.html)

<br />

## Comandos Básicos

O Terminal pode ajudar você a navegar e modificar os arquivos do sistema. Aqui estão 7 comandos que são importantes quando você começa:

### **1. Lista — `ls`**

`ls` mostra os arquivos e pastas dentro da pasta que você está.

### **2. Alterar diretório — `cd`**

`cd` é para você navegar entre pastas. `cd ..` o levará a pasta anterior. `cd Documents` irá levá-lo para a pasta `Documents`. Para que isso funcione, você precisa estar em um local que contenha uma pasta `Documents`.

### **3. Mover - `mv`**

`mv` é usado para mover arquivos de uma pasta para outra. `mv arquivo.txt novo/arquivo.txt` move um arquivo da sua pasta atual para uma nova pasta. `mv arquivo.txt mnovo.txt` renomeará `arquivo.txt` para `novo.txt`.

### **4. Criar — `touch`**

`touch` é usado para criar arquivos. `touch ola.md` criará um arquivo chamado `ola.md` na sua pasta atual.

### **5. Criar pasta — `mkdir`**

`mkdir` serve para cria pastas. `mkdir images` cria uma pasta chamada `images` em sua pasta atual.

### **6. Remover — `rm`**

`rm` remove um arquivo. `rm -d` remove uma pasta. `rm -rf node_modules` excluirá recursivamente a pasta `node_modules` e todos os arquivos/pastas dentro dele. A maioria dos comandos executados em seu terminal são inofensivos. Tenha cuidado com este comando. Os objetos excluídos não são armazenados na Lixeira e não há como desfazer!

### **7. Abrir - `open`**

`open` abrirá um arquivo usando o programa padrão para esse tipo de arquivo. `open index.html` iniciará seu navegador padrão com a página html na barra de URL. `open README.md` abrirá seu editor de markdown padrão.

## Localizações importantes

Se você estiver em um Mac, alguns locais têm uma "abreviação".

`/` é uma abreviação para sua pasta raiz.
`~` é uma abreviação para sua pasta de usuários.
`.` é uma abreviação para sua pasta atual.

Você pode alterar a pasta de qualquer local para o diretório do usuário (`cd ~`) ou para raiz (`cd /`) usando esses comandos abreviados. Além disso, o `cd` sem um local fornecido o moverá para a pasta do usuário.

Você pode usar uma ferramenta como [bashmarks](https://github.com/huyng/bashmarks "bashmarks") para salvar e visitar diretórios visitados com frequencia.

Digitar nomes de locais longos fica cansativo. Além da abreviação, você pode preencher automaticamente os locais usando o `tab`.

## Prompts e comandos personalizados

Por padrão, seu Terminal inclui informações do computador e do usuário no prompt.

```bash
Rychillie-MacBook:Documentos rychillie$
```

É comum removê-lo e substituí-lo pelo local atual seguido por um sinal `$`.

```bash
Documentos $
```

Para fazer isso, precisamos editar um arquivo `.bash_profile` (`.zprofile` se você estiver executando o MacOS Catalina) que ira nos permitir personalizar ainda mais nosso terminal no futuro. O arquivo `.bash_profile` está localizado no diretório raiz `~`. Se você executar `ls` e não o vêr, é porque é um arquivo `dot`. Os arquivos `dot` estão ocultos por padrão, mas podemos vê-los se adicionarmos parâmetros ao nosso comando `ls`.

Parâmetros para comandos de terminal geralmente são passados após um `-`(traço). Por exemplo o `ls -alhG` mostra todos os arquivos (incluindo arquivos que inciam com ponto) em um formato mais fácil de ver, com tamanho de arquivo e pastas coloridas.

É assim que o `ls` normal se parece.

![Lista](/content/blog/list.png "Lista")

E assim vemos com parametros adicionais.

![Lista Formatada](/content/blog/list-formatted.png "Lista Formatada")

Se você não vir um `.bash_profile` em seu diretório inicial, precisará criá-lo.

```bash
touch .bash_profile
```

Uma vez que você tenha o arquivo, você pode abri-lo em um editor de texto.

```bash
code .bash_profile
```

Depois que o arquivo for aberto, você poderá adicionar a seguinte string para substituir o "prompt cruft"(nome do computador, local e usuário) pelo local e um sinal de dinheiro `$`.

```bash
export PS1="\W \$ "
```

Além disso, em vez de lembrar todos os parâmetros para `ls -alhG`, você pode adicionar um "alias"(uma alternativa) para que `ls` o use por padrão.

```bash
alias ls="ls -alhG"
```

Salve o arquivo `.bash_profile`, execute o comando `source ~/.bash_profile` e reinicie o terminal para começar a usar as novas configurações.

Você pode criar aliases(alternativas) para todos os comandos que costuma usar. Eu criei aliases diversas coisas. Aqui está alguns "aliases" do meu .bash_profile para você se inspirar.

```bash
export PS1="\W \$ "
alias ls="ls -alhG"

# NPM
alias ns="npm start"

# ReactJS
alias cra="create-react-app"

# Git
alias g="git"
alias gs="git status"
alias gc="git commit -m"
alias gp="git push"
alias gd="git diff"
```

## O Poder das Ferramentas

Além dos comandos básicos do shell, há uma série de ferramentas poderosas que permitem que você faça mais em seu terminal. Listei alguns abaixo. Cada um leva tempo para aprender. Cada um tem algo valioso a oferecer.

- **[git](https://git-scm.com/)** para controle de versão e colaboração.
- **[npm](https://www.npmjs.com/)** ou **[yarn](https://yarnpkg.com/lang/en/)** para instalação e controle de versão de pacotes Node.
- **[homebrew](https://brew.sh/)** para instalação de programas e aplicativos.
- **ssh** para conexão com servidores.
- **[vim](https://www.vim.org/docs.php)** para editar arquivos via terminal.
- **[create-react-app](https://github.com/facebook/create-react-app)** para criar aplicativos react

## sudo aprender é um processo contínuo

O terminal é um aplicativo poderoso, mas não precisa ser intimidador. Se você tiver dúvidas sobre como usar o terminal ou apenas desejar alguma orientação para configuração, entre em contato comigo. Eu ficaria feliz em ajudar. Além disso tenho **[um curso](/series)** no qual vamos abordar o assunto de forma mais detalhada diversas vezes, assim você poderá praticar e aprender mais sobre o assunto.

Uma coisa que poucos sabem é que não é preciso de um diploma ou conhecimento em Hacking para saber utilizar o Terminal de um computador.

Terminal: Um guia para leigos

Quando comprei um iPad Pro eu queria poder programar inteiramente por tal para coisas simples, usar o mesmo para emergências ou pequenas correções pelo fato do iPad ser mais portátil que um notebook. Quando comprei já conhecia alguns Apps e utilizava os mesmos pelo meu iPhone, por isso migrar para o iPad não é difícil, já que estava em uma tela maior.

Um destes aplicativos, era o Play.js uma IDE que rodava de forma nativa no sistema e possui foco em desenvolvimento Javascript, no qual eu conseguia desenvolver e modificar todo tipo de código, além de versionar meu código através do Git que estava integrado no Aplicativo! Eu conseguia até mesmo testar a aplicação que estava desenvolvendo com um preview local! Ou seja, o app que eu estava desenvolvendo através do meu iPhone ou iPad estava rodando diretamente no meu dispositivo.

![Codesandbox Gitflow](/content/blog/codesandbox-gitflow.gif "Codesandbox Gitflow")

Ano passado este aplicativo o Play.js foi comprado pelo Codesandbox, um empresa que desenvolve uma IDE que roda no navegador e carrega o mesmo nome da empresa. Com isso eles possuem no seu portfólio uma IDE web e mobile nativo. Algo que não vemos muito
na nossa área de desenvolvimento.

Com o Play.js e Codesandbox já apresentado agora posso falar do recente anuncio da Codesandbox, o "Codesandbox Projects" que traz melhorias no design, deixando o mesmo minimalista, um foco maior no Multiusuário como vemos no [Live Share do VSCode](https://code.visualstudio.com/collaboration/live-share), que no Codesandbox permite programar tanto no VSCode, Codesandbox na Web e Mobile. Ou seja, um desenvolvedor no iPad pode colaborar em uma Branch com um desenvolvedor no Computador através do VSCode ou do próprio Codesandbox na Web.

![Codesandbox VSCode](/content/blog/codesandbox-vscode.gif "Codesandbox VSCode")

Tenho trabalhado em diversos projetos utilizando o Codesandbox Projects, antes já estava feliz utilizando o Play.js e agora com o novo update estou mais animado ainda. As possibilidades de debug, colaboração de equipe, estão todas muito muito boas para se trabalhar, basicamente não tive problemas para trabalhar com a ferramenta.

Um projeto que tenho trabalhado muito é este blog que compartilho opinião e conhecimento com vocês, enquanto desenvolvo ele tenho compartilhado minha experiencia através de uma [Thread no Twitter](https://twitter.com/rychillie/status/1529296046391705601) e como pode ser visto, eu gostei muito da experiencia, poder desenvolver um website completo em uma ferramenta como está é muito bom, principalmente pela praticidade de acessar em qualquer lugar um projeto.

![Codesandbox Inspector](/content/blog/codesandbox-inspector.gif "Codesandbox Inspector")

Como eu escrevi no meu [último artigo](/pt-BR/blog/eu-quero-migrar-para-o-iPad), eu adoraria poder trabalhar inteiramente pelo iPad, e com está nova versão do Codesandbox poderei programar tranquilamente através do meu iPad Pro. Não tem nada como o Codesandbox para dispositivos móveis, desde que adquiri meu iPad a quase um ano venho testando tudo que encontro pelo caminho para poder programar, e nada se compara a experiência de uso do Codesandbox. Tudo funciona tão bem, ele possui tudo que preciso para poder trabalhar com apenas uma ferramenta.

![Codesandbox iOS](/content/blog/codesandbox-ios.gif "Codesandbox iOS")

Como estou em processo de migrar para o iPad e passar a trabalhar inteiramente com ele, tambem estou migrando meus projetos para o Codesandbox, comecei pelo meu blog mesmo para ver se conseguiria trabalhar inteiramente na plataforma e a resposta foi sim, com um sistema bacana para Variaveis de Ambiente que funcionam somente em repositórios privados assim trazendo uma maior segurança para o desenvolvimento dos nossos projetos.

![Codesandbox Readme](/content/blog/codesandbox-readme.gif "Codesandbox Readme")

Tenho usado o Beta do Codesandbox Projects desde seu anuncio, tive o prazer de ser convidado para testar e tenho que falar que a experiência foi ótima, mesmo sendo um Beta Aberto ele está muito fluido, o report e compartilhamento de Bugs está muito bom, a resposta do time do Codesandbox quanto a Bugs e resolução de problemas está maravilhoso!

Além de compartilhar este app no qual eu confesso que virei Fã, eu queria escrever principalmente como uma forma de agradecimento por essa equipe maravilhosa criar uma ferramenta tão boa! Para a equipe Codesandbox eu digo meus Parabéns! Vocês são muito bons!

Recem anunciada o Codesandbox Projects vem com uma repaginada e novas funções para equipes de desenvolvedores.

Codesandbox minha IDE definitiva

No final de 2021 eu adquiri um iPad Pro M1 de 11 Polegadas e 128gb pensando em usar como um computador pessoal, pensei muito na possibilidade de usar ele em viagens ao invés de levar meu Macbook que é minha maquina principal de trabalho.

A ideia de usar o iPad como um notebook vem pelo fato de ele com seu teclado funcionarem muito bem como um notebook, e supondo que "poderia" acontecer um acidente seria muito mais barato trocar ou o teclado ou o iPad do que um Macbook inteiro.

Quando comecei a usar eu sabia que poderia ter algumas barreiras para poder programar 100% pelo iPad, porem, acredito que pelo meu conhecimento como desenvolvedor isso não foi um problema, até por que quanto mais tempo utilizo e pesquiso sobre, mais eu conheço novas ferramentas para me ajudar a trabalhar pelo iPad.

Primeiro fui atrás de ver como usaria um Terminal que para muitos vai ser conhecido como CMD. Está é a ferramenta principal para eu começar um projeto ou gerência-lo, pois assim consigo acessar remotamente código, baixar, instalar, editar… Fazer tudo!

![Terminal Photo by MacMagazine](/content/blog/terminal-photo-from-macmagazine.png "Terminal Photo by MacMagazine")

O primeiro app que conheci foi o [iSH](https://apps.apple.com/us/app/ish-shell/id1436902243) um ótimo app de terminal mas com algumas limitações devido ao sistema. Navegando um pouco mais Conheci o [Play.JS](https://playdotjs.com) que neste tempo foi adquirido pelo [CodeSandbox](https://codesandbox.io/), ao conhecer o Play.JS percebi que seria possível trabalhar tranquilamente com o iPad, pois nele eu poderia programar tudo que preciso atualmente com um pouco de configuração.

O Play.JS quando conheci era um Aplicativo construído para funcionar nativamente no iPhone e iPad, uma ferramenta para devs poderem programar sem travamentos nem limitações. Com a compra do CodeSandbox tenho que dizer que isso ficou melhor ainda, pois recentemente realizaram a atualização que mudou tudo!

Agora o Play.JS se chama CodeSandbox… Nesta nova atualização gigantesca temos uma nova forma de programar. Além de poder programar localmente como no antigo Play.JS agora temos a possibilidade de programar remotamente com o a plataforma CodeSandbox, o nome dessa nova atualização se chama Projects, tem um foco bem grande de trabalho remoto e de com vários programadores ao mesmo tempo, como em um Google Docs com varias pessoas editando o mesmo documento.

Neste novo CodeSandbox Projects o aplicativo roda na Nuvem, editamos remotamente o código, sendo assim estamos programando e testando nosso projeto inteiramente na plataforma CodeSandbox. A configuração é bem simples e com uma ótima integração com o Github consigo ver este mesmo funcionando em equipes grandes, podendo ser trabalhado tanto no VSCode normal, CodeSandbox Web e CodeSandbox mobile no iPhone e iPad.

Basicamente com esse novo Codesandbox é possível programar todo tipo de aplicação Web, eu mesmo criei todo este website usando o CodeSandbox! Não tive nenhuma dificuldade com em utilizar e fiquei mais interessado ainda em migrar do Mac para iPad, existe já algumas pessoas que utilizam o iPad como um computador pessoal, o melhor exemplo disso no Brasil acredito que seja o [Barba](https://twitter.com/barbaaa) do canal no Youtube [Barba Sou Eu](https://www.youtube.com/c/BarbaSouEu).

![Barba Sou Eu](/content/blog/barba.png "Barba Sou Eu")

Este carinha eu já admiro a anos, e tem alguns anos que ele vem usando um iPad como computador pessoal para trabalhar e criar conteúdo. E digo, quero chegar neste nível! Criando conteúdo e utilizando um iPad para tudo que seja necessário no meu Trabalho.

Hoje a única coisa que me impede de trabalhar 100% com iPad é realmente meu trabalho, para quem não entende de desenvolvimento de software e aplicações, temos Padrões para desenvolvimento, seja estrutura de código ou arquivos até mesmo o ambiente que utilizamos(vulgo o a configuração do nosso computador), no meu caso não depende de mim para decidir se vamos usar ou não o CodeSandbox, depende muito da necessidade do cliente e se ela é capaz de ser usada na plataforma.

Porem em projetos pessoais, eu consigo utilizar tranquilamente, pois sou eu que vou escolher a tecnologia que vou utilizar. Não é atoa que decidi desenvolver meu website inteiramente pelo iPad, para mostrar que é possível a criação de coisas complexas como construir um website do zero inteiramente pelo iPad, testar e lançar!

Minha maior dificuldade hoje é basicamente convencer outros desenvolvedores que vale a pena investir nisso. Penso muito na acessibilidade das pessoas a entrarem na area utilizando seus dispositivos móveis, como Smartphone ou Tablet que em muitos casos são mais baratos que um Notebook.

Peço que após a leitura deste artigo procure um pesquise sobre Samsung Dex, recomendo exclusivamente que conheça também o canal no Youtube [ProdutiviDEX](https://www.youtube.com/c/ProdutiviDEX) que mostra esse sistema que acho o essencial para Devs focarem em criar soluções para usuários.

O Samsung Dex é uma interface adaptada de Desktop(ou computador), que os smartphones e tablets da Samsung trazem integrado no sistema. Ele permite que o smartphone seja conectado a um monitor, teclado e mouse e assim pode ser utilizado como um computador.

![Dex Setup from Brandon Le Proktor @bprkt](/content/blog/dex-setup-bprkt.jpeg "Dex Setup from Brandon Le Proktor @bprkt")

Eu acho primeiramente isso muito legal, pelo fato de não precisar de um computador, a pessoa pode ter em casa um monitor, teclado e mouse em uma escrivaninha preparado para quando necessário o usuário simplesmente conectar seu celular e utilizar um computador…

Para 90% das pessoas no Brasil, o Smartphone é o único computador Pessoal, penso em caso de trabalho e vida pessoal, tudo poderia ser colocado ali. E quando necessário ser acessado como um computador.

Acredito que se nós desenvolvedores e até usuários compartilhássemos mais a ideia de utilizar dispositivos como Tablet e Smartphone como um computador, mais teríamos investimento por parte das empresas.

A Samsung eu vejo hoje como a maioria esmagadora que investe nessa possiblidade e sempre que possível terá meu apoio. A única coisa que espero é o mesmo vindo de outros desenvolvedores, criando soluções e compartilhando sobre para assim difundir essa possibilidade, teste e compartilhe seu conhecimento com tal!

Pelo lado de empreendedorismo eu vejo que aqueles que investirem nesta área agora no começo terão sucesso pois é algo que tem uma base de usuários grande porem com poucos falando e produzindo para tal.

Basicamente os poucos que produzirem conteúdo e serviços para estas ferramentas mobile estarão entrando em um ambiente com pouca concorrência e muita busca.

Extremamente portátil, poderoso, o setup minimalista que eu precisava porem com alguns problemas.

Eu quero migrar para o iPad

Depois de um tempo trabalhando com NextJS e estudando o mesmo encontrei uma forma de implementar `Imports` de uma forma mais dinâmica, deixando o código mais limpo.

Uma coisa que me incomodava muito era o fato de ter que escrever uma tripa de imports como: `import * from "../../../../o-que-quero-importar"`, em alguns casos meu código ficava extremamente grande para algo que não era necessário.

Então em um belo dia de Outubro eu estava navegando pelas `Issues do NextJS` e me deparei com este novo [Pull Request](https://github.com/vercel/next.js/pull/11293) que vem com a proposta de adicionar suporte aos `Paths` no `tsconfig.json` e no `jsconfig.json` por padrão.

O bacana é que com essa possibilidade eu poderia resolver meu problema que me afligia a muito tempo. Implementado a partir da versão 9.4 do NextJS eu simplesmente precisaria definir um `baseURL` no meu arquivo de configuração para ter suporte a importações absolutas.

```json:tsconfig.json
{
  "compilerOptions": {
    "baseURL": "."
  }
}

// Vai me resultar em: import Button from 'components/button'
```

Além disso posso utilizar um prefixo customizado, basta adicionar um `paths` na configuração:

```json:tsconfig.json
{
  "compilerOptions": {
    "baseURL": ".",
    "paths": {
      "@components/*": ["components/*"]
    }
  }
}

// Vai me resultar em: import Button from '@components/button'
```

Vale lembrar que editores de código como VSCode tem suporte automático a suas configurações no `jsconfig.json` então basta clicar Command+Click para ir direto ao arquivo que ali foi definido e edita-lo tranquilamente. E vale apontar que [Atom e IntelliJ](https://github.com/tleunen/babel-plugin-module-resolver#editors-autocompletion) também tem suporte para edições.

Gostaria de deixar como referencia um artigo do [Paco](https://paco.me/writing/better-nextjs-imports) que me inspirou em escrever este artigo e compartilhar de uma forma simples.

Chega de imports detalhando por cada pasta que você está navegando, seu código mais limpo, legivel e interessante.

Melhore seus imports no NextJS

Nos ultimos meses eu venho trabalhando com SCSS em diversos tipos de projetos, e como eu tenho cada vez mais me interessado pelo NextJS, e eu gostaria de integra-lo. Por isso venho através deste super simples mini-tutorial explicar como eu realizo tal atividade.

Já com nosso projeto iniciado vamos começar instalando alguns pacotes, neste exemplo estarei usando o `yarn` como meu _Package Manager_, porem, fique a vontade em usar com `npm` caso prefira.

Para começar vamos instalar o pacote do Sass usando um destes dois comandos:

```bash
yarn add sass
ou
yarn add node-sass
```

Logo após vamos instalar o Plugin do Next. Para quem não esta familiarizado os Plugins do Next, basicamente eles adicionam funcionalidades sem necessidade de configuração extra.

Para instalar o Plugin do SASS/SCSS criado pelo time do Next vamos usar o seguinte comando no terminal do projeto:

```bash
yarn add @zeit/next-sass
```

Agora vamos definir o padrão do SASS/SCSS no nosso projeto, fazendo algumas alterações no arquivo `next.config.js`, caso seu projeto não tenha este arquivo, basta criar com este mesmo nome. Então vamos colocar neste arquivo a seguinte configuração:

```js:next.config.js
const path = require("path");
const withSass = require("@zeit/next-sass");

module.exports = withSass({
  cssModules: true,
});

module.exports = {
  /* Adicione sua pasta padrão de SCSS aqui! */
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
};
```

Agora você pode começar a criar e usar arquivos SCSS/SASS que os mesmos funcionaram perfeitamente.

Lembre-se de sempre importar seus arquivos com a extensão `.scss` ao invés de `.css`.

Um mini-tutorial super simples, ensinando como configurar SASS/SCSS no NextJS

Como usar SASS/SCSS no NextJS

Criar um blog, e ou, um portfólio na minha opinião é dever de todo desenvolvedor, tenho essa opinião, sejá para ser encontrado com mais facilidade por recrutadores, quanto para compartilhar conhecimento, a fim de evoluir o conhecimento da comunidade como um todo de desenvolvimento.

A ideia de ser encontrado por recrutadores vem a calhar com a comunidade, pois quanto mais você é conhecido entre a comunidade, recrutadores certamente notaram você dentro dela, alem de ser um bom espaço para acompanharem seu progresso e evolução como desenvolvedor.

Já a ideia de compartilhar o conhecimento, por mais que sejá um aprendizado vai ser muito util para quem esta começando ou buscando algo diferente para uma resolução de problema, como um erro bem especifico ou uma implementação de um código que dificilmente será encontrado em um Stack Overflow da vida.

![Don't let your dreams become dreams, just do it!](https://i.gifer.com/3cuw.gif)

Inspirado no blog do [Willian Justen](https://willianjusten.com.br/), resolvi criar o meu blog pessoal, para compartilhar conhecimento, sejá ele que encontrei através de estudos ou da resolução de um problema encontrado no meu dia-a-dia.

Uma coisa que tenho que ressaltar é meu interesse em compartilhar conteúdo em Português e inglês, pois vejo que muito do conteúdo que leio é em inglês, e vejo uma falta de conteúdo em português sobre os assuntos que eu venho aplicando e estudando. Além de tudo isso vai ser um bom espaço para eu praticar a escrita.

O blog certamente ira evoluir com o tempo, com novas coisas sendo implementadas, novos conteúdos sendo criado, coisas nele sendo melhoradas e bugs sendo resolvidos, espero sempre poder sempre trazer tudo isso com a melhor qualidade possivel para aqueles que acompanham, desde já, obrigado por fazer parte disso! ❤️

Conheça o meu espaço para compartilhar trabalhos, estudos, conhecimento e marcar minha presença na web de uma forma que faça a diferança para as pessoas.

Olá Mundo, este é meu blog!

Este curso divide os fundamentos do CSS em partes para serem mais fáceis de se entender. Nos próximos módulos, você aprenderá como os principais aspectos do CSS funcionam e como usá-los efetivamente em seus projetos.

Você aprenderá os fundamentos do CSS, como o _box model_, _cascata_ e _especificidade_, _flexbox_, _grid_ e _z-index_. E, juntamente com esses fundamentos, você aprenderá sobre _funções_, _tipos de cores_, _gradientes_, _propriedades lógicas_ e _herança_ para torná-lo um desenvolvedor **front-end** completo, pronto para assumir qualquer interface de usuário.

Cada módulo está repleto de demonstrações interativas. Além de aprender por meio de leitura e demonstrações.

Este curso foi criado para desenvolvedores CSS iniciantes e avançados. Você pode navegar pela série de aulas do início ao fim para obter uma compreensão geral do CSS de cima para baixo ou pode usá-la como referência para assuntos de estilo específicos. Para quem é novo no desenvolvimento da Web em geral.

Um curso de CSS de bolso, interativo, para aumentar o seu nível de experiência na criação e estilização de páginas web.

Tudo exibido pelo CSS é uma caixa. Entender como o CSS Box Model funciona é, portanto, uma base fundamental do CSS.

Box Model

Para aplicar CSS a um elemento, você precisa selecioná-lo. O CSS fornece várias maneiras diferentes de fazer isso e você pode explorá-las neste módulo.

Seletores

Às vezes, duas ou mais regras CSS concorrentes podem ser aplicadas a um elemento. Neste módulo, descubra como o navegador escolhe qual usar e como controlar essa seleção.

A Cascata

Este módulo analisa mais profundamente a especificidade, uma parte fundamental da cascata.

Especificidade

Algumas propriedades CSS são herdadas se você não especificar um valor para elas. Descubra como isso funciona e como usá-lo a seu favor neste módulo.

Herança

Existem várias maneiras diferentes de especificar cores em CSS. Neste módulo, vamos dar uma olhada nos valores de cores mais comumente usados.

Neste módulo, descubra como dimensionar elementos usando CSS, trabalhando com o meio flexível da web.

Unidades de Medida

Uma visão geral dos vários métodos de layout que você deve escolher ao criar um componente ou layout de página.

Layout

Flexbox é um mecanismo de layout projetado para dispor grupos de itens em uma dimensão. Aprenda como usá-lo neste módulo.

Flexbox

CSS Grid Layout fornece um sistema de layout bidimensional, controlando o layout em linhas e colunas. Neste módulo descubra tudo o que a grade tem a oferecer.

Grid

As propriedades e os valores lógicos relativos ao fluxo estão vinculados ao fluxo do texto, em vez da forma física da tela. Saiba como tirar proveito dessa abordagem mais recente do CSS.

Propriedades Lógicas

Descubra como selecionar o melhor método de espaçamento de elementos, levando em consideração o método de layout que você está usando e o componente que você precisa construir.

Espaçamento

Um Pseudo-elemento é como adicionar ou direcionar um elemento extra sem precisar adicionar mais HTML. Eles têm uma variedade de papéis e você pode aprender sobre eles neste módulo.

Pseudo-Elementos

As Pseudo-classes permitem que você aplique CSS com base nas mudanças de estado. Isso significa que seu design pode reagir à entrada do usuário, como um endereço de e-mail inválido.

Pseudo-Classes

Uma borda fornece um quadro para suas caixas. Neste módulo, descubra como alterar o tamanho, estilo e cor das bordas usando CSS.

Bordas

Existem várias maneiras de adicionar sombras ao texto e elementos em CSS. Neste módulo, você aprenderá como usar cada opção e as tarefas para as quais foram projetadas.

Sombras

Aprenda a gerenciar o foco em seus aplicativos web para garantir acessibilidade tanto para usuários de mouse quanto de teclado.

Focus

Neste módulo, descubra como controlar a ordem em que as coisas se sobrepõem, usando z-index e o contexto de empilhamento.

Z-index e contextos de empilhamento

CSS tem uma gama de funções embutidas. Neste módulo, você conhecerá algumas das principais funções e como usá-las.

Funções

Aprenda a usar gradientes em CSS neste módulo. Crie efeitos úteis sem precisar de um aplicativo gráfico.

Gradientes

Anime seus designs com CSS! Neste módulo, aprenda a adicionar e controlar efeitos de animação.

Animações

Os filtros em CSS permitem aplicar efeitos gráficos surpreendentes. Descubra as opções disponíveis neste módulo.

Filtros

Aprenda a criar efeitos de composição usando modos de mesclagem com múltiplas camadas e isolar imagens com fundo branco neste módulo.

Blend Modes

Uma lista é composta por um contêiner e seus itens. Neste módulo, você aprenderá a estilizar uma lista por completo.

Listas

Neste módulo, aprenda como definir transições entre estados de um elemento. Use transições para melhorar a experiência do usuário, fornecendo feedback visual para a interação do usuário.

Transições

Overflow é como você lida com o conteúdo que não se encaixa em um tamanho pai definido. Neste módulo, você pensará fora da caixa e aprenderá como estilizar o conteúdo transbordante.

Overflow

Neste módulo, aprenda como você pode estilizar planos de fundo de caixas usando CSS.

Backgrounds

Neste módulo, aprenda como estilizar texto na web.

Texto e Tipografia

Mais recursos para ajudá-lo a dar os próximos passos.

Conclusão e próximos passos

Aprenda CSS: Seu livro de bolso

O curso Frontend Base é um curso introdutório de desenvolvimento frontend que ensina os fundamentos de HTML, CSS e JavaScript. Ele é perfeito para pessoas sem nenhum conhecimento prévio em programação e tem como objetivo fornecer uma base sólida para que os alunos possam começar a criar sites e aplicativos web de forma eficiente.

Ao longo do curso, os alunos aprenderão a estruturar o conteúdo de um site com HTML, a dar estilo a ele com CSS e a adicionar funcionalidades dinâmicas com JavaScript. Eles também aprenderão sobre as últimas tendências e boas práticas na indústria de desenvolvimento frontend.

O curso é composto por aulas teóricas e práticas, com muitos exercícios e exemplos para ajudar os alunos a colocar em prática o que estão aprendendo. Ao final do curso, os alunos terão desenvolvido suas próprias páginas web e estarão prontos para seguir em frente em seus estudos de desenvolvimento web.

Aprenda o necessário de HTML, CSS e Javascript para começar a desenvolver suas aplicações web sem dificuldades.

Olá e bem-vindo ao curso de frontend! Este curso é destinado a iniciantes e tem como objetivo ensinar os fundamentos de HTML, CSS e JavaScript.

Introdução do curso

Nesta aula a ideia é fazer você escrever seus códigos sem precisar baixar nada ou escrever um monte de linhas em um Terminal para realmente fazer algo legal!

Eu sou Rychillie — UI Designer.Frontend Engineer.Mobile Developer.Content creator.

Cursos

Aprenda CSS: Seu livro de bolso

Frontend Base

Artigos

Terminal: Um guia para leigos

Codesandbox minha IDE definitiva

Eu quero migrar para o iPad

Melhore seus imports no NextJS

Como usar SASS/SCSS no NextJS

Olá Mundo, este é meu blog!

Aprenda com o Mestre você também

Mestre é o um espaço para todas as nossas ideias. Eventualmente, ele terá centenas de vídeos premium e uma comunidade próspera, mas agora é o começo!

Cursos

Aprenda CSS: Seu livro de bolso

Frontend Base

Artigos

Terminal: Um guia para leigos

Codesandbox minha IDE definitiva

Eu quero migrar para o iPad

Melhore seus imports no NextJS

Como usar SASS/SCSS no NextJS

Olá Mundo, este é meu blog!

Aprenda com o Mestre você também

Mestre é o um espaço para todas as nossas ideias. Eventualmente, ele terá centenas de vídeos premium e uma comunidade próspera, mas agora é o começo!

Acesso total a todos os vídeos do Mestre

Comunidade Discord

Resumos de vídeo com trechos de código

Código fonte