Web Dev Labs

Base de conhecimento sobre Desenvolvimento Web da Caramelo Tech, com foco em aprendizado pratico para iniciantes.

Bem-vindo ao Web Dev Labs. Este repositorio reune notas publicadas com Astro + Starlight, exercicios e projetos para apoiar a jornada de quem esta aprendendo fundamentos da web e topicos de system design.

Sobre o projeto

O Web Dev Labs foi pensado para combinar teoria e pratica em uma trilha progressiva:

• Notas sobre HTML, CSS, JavaScript e system design
• Exercicios hands-on para fixacao
• Projetos pequenos para aplicar conceitos
• Material publicado em um site com navegacao organizada

Estrutura do repositorio

web-dev-labs/
├── src/content/docs/   -> Anotacoes e estudos publicados no site
├── examples/           -> Exemplos de codigo, exercicios e projetos praticos
├── public/assets/      -> Imagens e arquivos estaticos publicados no site
└── .github/            -> Workflows, templates e guias de contribuicao

Como usar

1. Comece pela trilha em src/content/docs/indice.md
2. Leia a primeira nota disponivel: HTML
3. Avance para CSS
4. Resolva os desafios em examples/exercises.md
5. Aplique os conceitos em examples/projects.md
6. Consulte o site publicado para navegar pelo conteudo em formato Starlight

Conteudo atual

Notas publicadas

• Indice das anotacoes
• HTML
• CSS
• Consistencia Transacional
• Encurtador de URL
• Dual-Write Problem

Pratica

• Exercicios
• Projetos

Rodando localmente

npm install
npm run dev

O servidor local fica em http://localhost:4321.

Outros comandos uteis:

npm run build
npm run preview

Versao publicada:

https://caramelotech.github.io/web-dev-labs

Adicionando notas

Novas anotacoes devem ser criadas em src/content/docs/. Use nomes claros e prefixos numericos quando fizer parte da trilha.

Exemplo de frontmatter padrao Starlight:

---
title: "Titulo da nota"
description: "Resumo curto explicando o foco da pagina."
lastUpdated: 2026-01-01
sidebar:
  order: 4
tags: ["web", "tema", "iniciante"]
---

Boas praticas:

• Escreva em portugues
• Comece pelo conceito antes do detalhamento tecnico
• Use links relativos entre notas quando houver continuidade
• Coloque imagens publicas em public/assets/

Contribuicao

Contribuicoes sao bem-vindas. Voce pode ajudar com:

• Melhorias nas notas em src/content/docs/
• Novos exemplos em examples/
• Novos exercicios em examples/exercises.md
• Novos projetos em examples/projects.md
• Melhorias no site Astro + Starlight

Veja o Guia de Contribuicao para detalhes.

Licenca

MIT