Iniciantes

Em uma conversa no Twitter, algumas pessoas identificaram que faltava conteúdo para iniciantes. Resolvemos então criar um conteúdo básico, mínimo, para que alguém que esteja iniciando na área tenha alguma bagagem para aprender informações importantes de forma que ela saiba por onde começar.

Guia básico para iniciantes

Se você quiser ajudar a melhorar este guia, escrevendo, corrigindo ou aprimorando a experiência de utilização, por favor, faça um FORK do projeto e mãos à obra.

Como funciona

Utilizamos Jekyll uma Gem do Ruby para gerar páginas estáticas.

Instale o Ruby
Instale a Gem do Bundler:
```
gem install bundler
```

Clone o projeto:

git@github.com:tableless/iniciantes.git

Vá a pasta do projeto:
```
cd iniciantes
```
Instale as dependências através do Bundler:
```
bundle install
```
Inicie o Jekyll:
```
jekyll serve -w
```
Acesse http://localhost:4000/iniciantes/

Escrevendo código com syntax highlight

Para escrever código, usamos o Google Prettify, que já é conhecido de todos. Uma estrutura para código básica segue abaixo:

<pre class="lang-html prettyprint linenums">
    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;pt-br&quot;&gt;
      &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;/head&gt;
      &lt;body&gt;

      &lt;/body&gt;
    &lt;/html&gt;
</pre>

A classe lang-x define a linguagem do código, onde x é a linguagem (javascript, css, php, asp, ruby e assim por diante). Lembre-se de escapar sinais como < > colocando em entidades HTML (< >).

Estrutura básica de diretórios

Dentro de manual você encontra todos os textos do guia. Lá está separado em 4 pastas básicas: obasico onde agrupa textos sobre o conceito da área. A pasta HTML contém textos sobre HTML e seu funcionamento. A pasta CSS tem textos sobre CSS. E por último mas não menos importante, a pasta JS guarda textos sobre JavaScript e afins.

A pasta assets guarda o CSS, o JS e as imagens usadas no projeto.

| iniciantes/
|
|-- _includes/
|
|-- _layouts/
|
|-- assets/
|   |-- imgs
|   |-- javascripts
|   |-- stylesheet
|
|-- manual/
|   |-- css
|   |-- html
|   |-- js
|   |-- obasico
|
|-- slide/
|   |-- css
|   	|-- fonts
|   	|-- galery-sass
|   	|-- galery
|   |-- img
|   |-- js
|   |-- layout

Da comunidade para a comunidade