Arquivos e Pastas

Instalando o VSCode ⌨️

Fique à vontade para usar seu editor de texto de preferência, mas, para facilitar a vida de quem não tem muita experiência, vamos recomendar usar o Visual Studio Code.

Para começar, clique aqui para baixar o VSCode e selecione a opção de acordo com seu sistema operacional.

Depois de instalar o VSCode, você vai precisar instalar o Git. Então clique aqui para fazer download e instale também de acordo com seu sistema operacional.

O VSCode é um editor de texto, é tipo o Word só que voltado para programadores. Já o Git é o que vai te ajudar a enviar suas atualizações para o GitHub, ou seja, você vai conseguir salvar o seu código usando comandos no terminal.

Fazendo fork do repositório 🍴

A primeira coisa que precisamos fazer para escrever uma aula é baixar o repositório, isso significa que você vai ter acesso à todos os cursos e vai começar a escrever o seu no mesmo padrão dos cursos que já existem.

Para isso, entre no repositório de cursos e clique em Fork (imagem abaixo).

Depois disso só clicar em Create fork.

Ao criar um fork você está literalmente copiando um repositório público para o seu GitHub pessoal, então você pode fazer mudanças à vontade nesse repositório pessoal antes de abrir uma pull request.

Copiar a url do seu repositório para fazer um clone no seu computador clicando aqui:

Agora abra o VSCode e abra o terminal pressionando Ctrl + '. Então digite o comando git clone url_que_vc_copiou, depois cd courses para acessar a pasta de cursos clonada e depois um code . para abrir os cursos em outra aba do VSCode.

Criando a estrutura de pastas 📂

Para facilitar o ensino de como você deve estruturar as pastas, vou seguir o mesmo exemplo do tópico anterior da estrutura do curso de CSS Básico. Então faz de conta que o curso que estamos criando tem esses tópicos e essas aulas:

Tópico 1: Introdução

1. Aula 1: O que você vai aprender
2. Aula 2: Antes de começar

Tópico 2: CSS Básico

1. Aula 1: Criando o primeiro estilo
2. Aula 2: Diferença de id e classe
3. Aula 3: Principais propriedades

Para isso, você vai abrir a pasta content e criar os arquivos nessa estrutura:

Então aqui nós temos a pasta "pai" do curso chamada css-basico, dentro dela temos os dois tópicos chamados 1.introducao e 2.css-basico e dentro de cada tópico temos os arquivos markdown que vamos escrever as aulas.

Perceba que em todas as pastas possuem um arquivo _dir.yml, esse arquivo contém algumas informações de contempla o curso em si ou um tópico. O _dir.yml dos tópicos só contém o nome do tópico (que vai aparecer na plataforma), já o do curso contém algumas informações:

1. image: Imagem do curso (nós usamos um prompt para o midjourney gerar imagens semelhantes, solicite uma imagem no canal #creators)
2. title: Nome do curso (máximo 32 caracteres)
3. description: Descrição do curso (máximo 120 caracteres)
4. tags: Aqui vai ser um array que pode conter os seguintes valores (ethers, github, html, nuxt, playwright, solidity, supabase, tailwind, turborepo, vercel, vue), se precisar de um valor que não tem aqui (ex: react) nos sinalize no canal do discord #creators
5. areas: Aqui vai ser um array que pode conter os seguintes valores (front-end, back-end, devops, full-stack, android, postgresql, ai, blockchain, qa, ux, interview)
6. level: Aqui vai ser um dos seguintes leveis (easy, intermediate, advanced, expert)
7. discordRole: Aqui vai ser o id do canal do discord para os alunos tirarem dúvidas (solicite no canal #creators)

Se você não tem acesso ao canal #creators no nosso discord, entre no nosso discord e pingue @Bernardo Simonassi no canal #geral.

Então seu arquivo _dir.yml dentro da pasta do curso vai ficar mais ou menos assim:

image: https://raw.githubusercontent.com/menthorlabs/courses/main/images/html-basico/html-course.png
title: CSS, Flexbox e Grid
description: Estilize sites e aplicações de forma profissional
tags: ["html", "css"]
areas: ["front-end"]
level: easy
discordRole: "1154384585937916075"

Parabéns, agora a estrutura do seu curso está pronta! Se algo não ficou muito claro não deixe de nos chamar no discord.