Guia para estudar CSS



Vire e meche alguém me pergunta como aprendi CSS. Eu sempre respondo que foi sozinho e a maioria fica me olhando com uma cara de nossa ele é bom.
Porém de bom tenho muito pouco, há muito material de qualidade na internet, bastando apenas força de vontade e oportunidade para aplicar seus aprendizados.
Esta oportunidade apareceu quando recebi a oferta do meu primeiro emprego, e no tempo ocioso que ficava no escritório me atracava em links para no futuro ser desenvolvedor dos sites que fazia manutenção. Quanto mais lia mais entendia a importância do CSS, neste momento resolvi comprar um livro para me aprofundar e esta foi à melhor decisão que tomei, fazendo acelerar meu processo de aprendizado.

Este guia tem como intuito guiar aqueles que desejam estudar CSS e indicar bons links para aqueles que desejam se aprofundar. Não irei escrever tutoriais e sim indicar boas leituras de páginas na internet e de livros. E claro compartilhando um pouco da minha experiência que adquiri e das dificuldades que tive.

Atenção: Muitos dos links estão em inglês. Acredito que para quem deseja seguir nesta profissão é irrefutável não ter conhecimentos no mínimo intermediários na língua.

Roteiro de Estudos

Antes de começarmos qualquer coisa, vamos definir um bom plano de estudo:

  1. Entender o que o CSS e sua importância no desenvolvimento web
  2. Estudar a linguagem, entendo como funciona e sua sintaxe
  3. Desenvolver os primeiros layouts ou modificar alguns, para fixar os aprendizados anteriores.
  4. Apreender técnicas para produzir diversos efeitos desde menus há galeria de imagens.
  5. Ao estar seguro das habilidades dos passos anteriores, esta na hora de aprender boa praticas de codificação, evitando a maioria dos problemas com diferentes navegadores e melhorando o rendimento da pagina.
  6. Chegando ao final do processo de estudo, vamos aprender quais são as dores de cabeças na hora de produzir um site e aprender a concertá-las.
  7. O sétimo passo é seguir bons sites que trazem sempre novidades sobre CSS, pois o aprendizado nunca acaba.

O CSS

Cascading Style Sheets por extenso é uma linguagem de estilo usada para construir o layout de uma pagina. Separando os estilos do conteúdo. O HTML é responsável por marcar e mostrar o conteúdo e o CSS rederiza ele de acordo com suas instruções. Ou seja, uma exibição em camada.
Uma comparação fútil é o CSS está para a roupa assim como o ser humano está para o conteúdo.

css_three-layers

Hoje o uso de folhas de estilo na produção de sites é uma pratica comum e podemos ver seu potencial em vários sites. Como o Zen Garden, Galeria Design.blog.br, CSS Demos

Neste ultimo link são experimentos interessantes. Aconselho olharem a CSS house, incrível.

O começo

Escrevi uma breve introdução, porem existem bons links que exemplificam e justificam o uso as folhas de estilo. Aconselho a leitura.

css

Maujour – Pagina inicial do maujour, possui um texto curto explicando o porquê do CSS.

Webdesigner tem que dominar css – Grande texto do Frederick van Amstel, mostrando também que CSS é sim coisa de designers.

A importância do CSS – Tradução de um texto com nove vantagens de ler. Rápido e fácil de ler.

Tutoriais Básicos

Agora que você já sacou o que é as folhas de estilo e o que ele faz. Esta na hora de por em pratica todas essas maravilhas. Segue bons links que tratam do básico.

beginners_html

Introdução ao CSS - A maior referencia aqui no Brasil. Majour ensina todos os fundamentos e mais um pouco em formato de aulas. Obrigatório.

HTML, CSS the very basics – Para aqueles que preferem vídeo-aula. Muito recomendado

HTML CSS beginners guide,
Getting started with css a practical exercise – Para aqueles que preferem uma explicação mais rápida.

CSS from the ground up – Interessante este material, boas explicações com exemplos bem úteis.

Layouts

Já temos em mãos a sintaxe e como funciona a construção de uma pagina. Vamos entender como funciona os vários tipos de layouts, suas vantagens e desvantagens. Uma duvida comum.

080112-12-standard-css-layouts

Fixed vs Fluid vs Elastic – A melhor referencia para tirar todas as duvidas do que é um layout fixo, fluido, elástico e suas misturas.

Intensivstation Templete- Vários layouts prontos

Técnicas

Já entendemos toda a estrutura do CSS, vamos agora apreender a incrementar nosso layout com menus mais caprichados e apreender utilizar melhor as varias propriedades disponíveis.

CSS Sprite

CSS Tricks – Referencia do conteúdo sobre esta técnica

Imaster - texto em português.

Cantos redondos

CSS Globe – Um dos melhores links, trás varias maneiras de realizar esta técnica

CSS Reset

Pincelada na Web – Uma das principais formas para evitar dor de cabeça com as diferentes rederizações dos broserws. Vários resets.

Conditional Comentários

CSS no Lanche – Explicação completa de como funcionam e quais são os condiontal comments.

Transparência

Pincelada na Web – Solução definitiva

Centralizar layout

Tableless - Técnica usando margens negativas para centralização

Felipe Correa – Outro modo usando a margem automática

Geral

Abaixo dois links com várias outras técnicas muito úteis, algumas já listei acima outras não. Vale a pena dar uma olhadinha.

15 css tricks that must be learned

101 css techniques of all time part 1

Boas Praticas

Depois que você se sentir firme em criar um layout completo sem problemas. Está na hora de começar a pensar em como melhorar seu código para você e para o navegador

example2-wrong

10 principles of the css masters – Escute quem entenda e aprenda. Obrigatório

5 usefull css tricks – Um resumo de noções importantes na hora de criar os estilos. Obrigatório

5 tips to writing better css – Dicas para melhorar a organização do seu documento

10 html tag crimes you really shouldnt commit – HTML está ligado com as folhas de estilo. Uma boa marcação é fundamental

Principles of css everyone should know – 13 dicas fundamentais.

Como você escreve seus arquivos – Excelente artigo sobre como escrever seus códigos. São três partes, neste há link para as outras duas.

Optimizing css tutorial – Boas dicas para evitar a repetição de elementos.

Dores de cabeças

internet-explorer-logo-with-pins

Um dos grandes problemas com na produção de um website é a incompatibilidade com os browsers. Estes links irão lhe ajudar quando você já estiver desesperado por alguma solução.

Using css to fix anything 20 common bugs and fixes – Uma excelente listagem de vários erros comuns.

How to get cross browser compatibility – Maneiras de evitar essas diferenças

Solving 5 common css headaches – Um interessante artigo, sobre as dores de cabeças.

Sites

tabless

Depois desse intensivo estudo, posso te chamar de um programador CSS. Agora está na hora de você praticar tudo o que aprendeu e obviamente ficar sempre ligado as novidades. Vão alguns sites muito bons para serem seguidos:

CSS Tricks
Tableless
CSS no Lanche
CSS Helppile
import Zeh.Design

Dicas Diversas

Olhe o código de outros

Este é um bom modo para aprendermos. Até hoje dou uma olhada no CSS de bons sites para aprender como eles codificam.

Leia e leia. Não se desatualize

Leia e mantenha-se atualizado. Desse modo você estará sempre apreendendo e aumentando sua criatividade.

Validação não é tudo, mas otimização e semântica sim!

Validar e escrever seu código de acordo com as normas W3C é muito importante, porem nem sempre isso é possível. Mantenha o foco em ter um código semântico e otimizado para o usuário.

Planeje Antes

Muitos desenvolvedores gostam de trabalhar com o HTML e o CSS juntos. Aconselho você antes fazer a marcação e depois estilizar. Desse modo você evitará usar marcações desnecessárias.

Pergunte e participe das comunidades

No começo o caminho é mais penoso, então não tenha medo de perguntar e utilizar as comunidades como apoio. Indico a Imaster, MXstudio, Forum de Design e a Webly.

Teste enquanto desenvolve

Não deixe para testar seu site nos principais navegadores depois de terminar de codificar. Faça isso durante o processo. Evitando uma bola de neve

Livros

Estudar a partir de livros é sempre bom, por serem revisados antes de publicados e possuírem uma didática de ensino. Eu mesmo apreendi através de livros, construindo assim uma base sólida, sem me perder no caminho de tanto material na internet. Abaixo vão alguns livros muito bons. Le-los irá acelerar seu processo de aprendizado e você terá uma formação teórica e pratica.

Construíndo sites com CSS e (x)HTML

construindo-sites-com-css-xhtml


Criando sites com HTML

criando-sites-com-html

Profissional Padrões de Projeto com CSS e HTML
padroes-de-projeto-com-css-e-html

The Art & Science of CSS

theart

CSS Mastery

css-mastery

Futuro

css3

Atualmente alguns navegadores já estão disponibilizando rederização ao CSS3, está na hora de nos atualizarmos. Seguem bons links sobre o assunto.
Mas calma não precisam se desesperar que o CSS2 vai durar um bom tempo ainda, pois para realmente adotarmos a nova plataforma é preciso que a maioria dos browsers se adaptem a ele corretamente. Ou seja, só o usuário vai nos dizer quando isto poderá ser feito, já que eles precisam fazer as atualizações dos mesmos.

Push your web design into the future with css3 – Excelente guia para se informar das novidades do css3 e aprende-las

30 essential css3 resources – Uma enxurrada de links.

Espero que este guia seja util, ser você tiver algum link interessante sobre o assunto comente que edito o post dependendo.


Gostou deste post?