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.
HTML JavaScript CSS Other
Latest commit 8095a6f Nov 7, 2016 @tiobobs tiobobs committed with wbruno Corrigindo tag apontamento do Jquery (#122)
Permalink
Failed to load latest commit information.
_includes
_layouts Adicionando editorconfig Mar 3, 2014
assets Merge pull request #113 from thiago-mendes/gh-pages Apr 6, 2016
manual Corrigindo tag apontamento do Jquery (#122) Nov 7, 2016
slide Adicionando editorconfig Mar 3, 2014
.editorconfig
.gitignore adicionando conteúdo de padding e corrigindo linguagem de exemplo da … Mar 4, 2014
Gemfile Adicionando gerenciador de dependências Mar 3, 2014
Gemfile.lock
README.md Update README.md Mar 5, 2014
_config.yml arrumando baseurl para github Jul 14, 2013
index.html Alterei html de alguns c cedilhas e outros para testes. Parabéns pela… Aug 16, 2014

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 Bundler:

    gem install bundler
    
  3. Clone o projeto: git@github.com:tableless/iniciantes.git
  4. Vá a pasta do projeto: cd iniciantes
  5. Instale as dependências através do Bundler: bundle install
  6. Inicie o Jekyll: jekyll serve -w
  7. 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 (&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.