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 consiga aprender informações importantes de forma que ela saiba por onde começar.
Switch branches/tags
Nothing to show
Pull request Compare This branch is 167 commits behind tableless:gh-pages.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
_includes
_layouts
assets
manual
slide
.gitignore
README.md
_config.yml
index.html

README.md

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.

  1. Instale o Ruby

  2. Instale a Gem do Jekyll:

    sudo gem install jekyll
    
  3. Clone o projeto:

    git@github.com:tableless/iniciantes.git
    
  4. Vá a pasta do projeto:

    cd iniciantes
    
  5. Inicie o Jekyll:

    jekyll serve
    
  6. Acesse http://localhost:4000/iniciantes/

Escrevendo código com sintax 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 (&lt; &gt;).

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

Esta iniciativa é da comunidade para a comunidade. Prezamos pelo bom conteúdo e sabemos que encontrar conteúdo básico é muito difícil, por isso tente divulgar o máximo que puder para aqueles que estão começando. Dessa forma temos a certeza de que a qualidade da internet brasileira vai crescer ainda mais.