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.
Roteiro de Estudos
Antes de começarmos qualquer coisa, vamos definir um bom plano de estudo:
- Entender o que o CSS e sua importância no desenvolvimento web
- Estudar a linguagem, entendo como funciona e sua sintaxe
- Desenvolver os primeiros layouts ou modificar alguns, para fixar os aprendizados anteriores.
- Apreender técnicas para produzir diversos efeitos desde menus há galeria de imagens.
- 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.
- 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.
- 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.
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.
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.
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.
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
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
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
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
Criando sites com HTML
Profissional Padrões de Projeto com CSS e HTML
The Art & Science of CSS
CSS Mastery
Futuro
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.
