Estou muito interessado em aprender o desenvolvimento da Web e aprendi alguns conceitos básicos sobre HTML e CSS há alguns anos no W3Schools, mas nunca aprendi como desenvolver sites que atendem aos padrões de hoje, ou seja, sites de fluxo livre sem o uso de tabelas para governar o design do site.

Quais são alguns bons recursos com os quais posso começar?

CSS Zen Garden

Confira o CSS Zen Garden e veja vários resultados. Eles são muito versáteis e oferecem muita diferença sobre o mesmo código fonte. Você aprenderá muito sobre técnicas modernas de CSS. Mesmo se você não dissecá-los completamente, encontrará pelo menos muita inspiração e habilidades CSS contra HTML acessível normal. O melhor do CSS Zen Garden é a semântica contra o estilo. O conteúdo não é um estilo qualquer. Tudo o que você vê estilos é feito puramente por CSS, que é a maneira correta de fazê-lo, porque os dados podem ser consumidos por muitos clientes diferentes, e os estilos somente por aqueles que os visualizam.

Livros

Quando se trata de aprender com os livros, este parece um bom começo : CSS: The Missing Manual .

Internet

Eu li a Revista Smashing na internet, que fornece muitos exemplos e abordagens. Ele abrange artigos do ramo de design para ótimas abordagens em design e afins.

A melhor maneira de aprender a criar sites e aplicativos é realmente fazê-lo , o que significa que você deve criar projetos e fazê-lo o tempo todo. Este pequeno vídeo transmite as emoções de um recém-chegado e dá alguns bons conselhos sobre o assunto.

Também escrevi algumas outras recomendações para pessoas interessadas em aprender o desenvolvimento da Web que você deve ler antes de começar.

No entanto, assim como você não sabe falar idiomas em que não conhece nenhuma palavra, é necessário entender bem o básico antes de criar um projeto útil. Aqui estão alguns recursos para você aprender alguns fundamentos e sites que permitem explorar por si mesmo.

Existem ótimos lugares para aprender o básico do desenvolvimento web gratuitamente. Comece aqui, mas se ramifique deles para brincar com coisas que não ensinam diretamente. Depois de passar por alguns, tente criar outros sites / projetos por conta própria. Isso reforçará os conceitos, ensinará detalhes de implementação e provavelmente ensinará coisas adicionais. Você simplesmente não pode se tornar um bom desenvolvedor ou designer lendo apenas, você deve criar !

Fiz um curso intensivo para designers que aprendem desenvolvimento web

Confira! Eles são adaptados para um público baseado em design, mas se aplicam a qualquer pessoa que esteja aprendendo. Eles ensinam o básico nos slides / post / vídeo e depois atribuem um pequeno projeto no final de cada um para ensinar o desenvolvimento do front-end no mundo real.

• Lição 1 - O porquê e o que está por trás do desenvolvimento da web
• Lição 2 - Iniciando HTML e CSS
• Lição 3 - Iniciando JavaScript (JS)

Outros bons sites de tutoriais

• CodeAcademy - Noções básicas de conhecimento geral de várias línguas.
• Série "Aprendendo a Web" da Mozilla - Isso começa no nível inicial e pode guiá-lo para alguns tópicos mais complexos. Grande recurso, eu recomendo.
• Udacity - Classe geral de desenvolvimento web.
• Tuts + - Tutoriais sobre tópicos mais específicos.
• KhanAcademy - Eu não o usei pessoalmente, mas parece estar melhorando a cada dia.

Não use o W3Schools , pois geralmente está desatualizado e propenso a erros. Em vez disso, use um site tutorial como os acima para aprender e usar um dos sites de documentação abaixo quando estiver procurando por algo específico.

Documentação

Examinar a documentação de propriedades, bibliotecas e outras coisas é vital para se tornar um bom desenvolvedor web. A seguir, estão entre os melhores documentos que você pode usar:

• W3.org - A documentação oficial para quase tudo implementado pelos navegadores da web. Aprender a ler esses documentos é muito importante! Isso não é afiliado ao W3Schools de forma alguma.
• Mozilla Docs - Um recurso de terceiros muito confiável dos criadores do FireFox que permanece atualizado.
• WHATWG.org - Uma espécie de concorrente de código aberto para o W3; alguns navegadores implementam certas sugestões a partir daqui no W3 às vezes.
• DevDocs - Não é oficial, mas possui muitos documentos de idiomas em um site. Bastante conveniente.

Feeds úteis

• WebPlatformDaily - Uma lista de notícias que lidam com tudo o que a Web atualiza diariamente (exceto finais de semana).
• SitePoint - Artigos realmente úteis sobre várias coisas.
• WebDesignerDepot - pode estar no lado spam, mas a maioria de seus artigos reais é boa.
• Smashing Magazine - Tópicos mais avançados, mas principalmente todas as boas leituras.
• Uma lista à parte - Conhecimento um pouco mais avançado em formato de blog.

Editores

Pequenos projetos / brincando com código

• JSFiddle - Faça pequenos projetos e acompanhe-os.
• CodePen - Veja os doodles de código de outras pessoas e envie o seu próprio para que outras pessoas vejam.

Editores de texto completo

• SublimeText
• Átomo

Outros sites úteis

• Página Meus recursos - Uma lista de recursos que eu tenho compilado, desde uma introdução ao design responsivo até uma análise de diferentes maneiras de animar em um navegador da web.
• Manual do desenvolvedor de front-end - Uma coleção mais diversificada, mas útil de postagens, cobrindo uma ampla variedade de tópicos de front-end.
• WebFieldManual - Uma grande coleção de recursos úteis.
• StackOverflow - Se você tiver uma pergunta específica relacionada à programação, o StackOverflow é incomparável para obter ajuda.
• LearnLayout - Aprenda algumas noções básicas sobre como fazer layouts em CSS.
• Posicionamento em web design - parte do meu curso intensivo que talvez seja o mais útil.
• 30 seletores de CSS que você deve conhecer - Conheça-os e economize seu tempo mais tarde. Há também um joguinho legal para testar seu conhecimento sobre o seletor de CSS.
• Codrops CSS Reference - Uma página de referência concisa e útil.
• CodeMentor e Thinkful - Sites onde você pode pagar para ser orientado 1 a 1.

Procure os blogs pessoais de desenvolvedores e designers da Web que você gosta. Eles geralmente têm um ótimo conteúdo.

Também escrevi uma introdução ao design da interface do usuário, que pode ser muito útil. Liguei alguns ótimos recursos adicionais.

Não posso enfatizar o suficiente, a melhor maneira de aprender é construir coisas que ultrapassam seus limites e fazê-lo continuamente .

Para uma lista ainda maior (e talvez impressionante) de sites úteis relacionados à Web, consulte o WebDesignRepo !

Os melhores lugares para aprender sobre web design (soluções de layout, usabilidade, gráficos e soluções técnicas) são:

veja todo o site das pessoas que escreveram artigos nesses sites:

Uma lista à parte
24ways.org

Ou algo mais técnico sobre o design de listas e http://css.maxdesign.com.au/index.htm flutuante

Você precisa saber o que são padrões da web. A fonte oficial é a seguinte: World Wide Web Consortium (w3c) É um pouco complicado aprender com isso porque é altamente técnico, mas é bom dar uma olhada quando você quer saber como as coisas funcionam na Web e por que sobre os padrões. a coisa mais útil é o validador do seu código HTML.

A melhor maneira é dar uma boa olhada no código fonte de bons sites e, naturalmente, na proporção de coisas alinhadas como essas para aprender os truques: http://www.cssbeauty.com/

E veja o site de bons web designers e o que eles estão fazendo:

Jason Santa Maria
Dustin Curtis
Joshua Davis
David DeSandro
http://www.thinkingforaliving.org/
etc ...

e meus favoritos deliciosos (há uma variedade de coisas, você precisa vasculhá-las e vasculhar o que não precisa) http://www.delicious.com/Littlemad/webdesign

Antes de começar a aprender todas essas estruturas ...

Eu quero redirecionar sua atenção para o projeto parte de web design.

Obviamente, você pode criar facilmente um site com o Bootstrap ou alguma outra estrutura. Mas isso não está projetando. Uma estrutura pode ser uma base, mas se você não der sua opinião, basicamente obterá um site que é como todos os outros sites por aí .

É por isso que eu aconselho você a aprender os conceitos básicos do design e tentar aplicá-los por conta própria.

Como você cria sites (bonitos) por conta própria?

Agora, essa é uma pergunta que vale um livro, mas aqui estão algumas dicas:

1. Leia sobre os princípios básicos do design . Esta cartilha de 7 etapas no design da Web deve ajudá-lo a começar. Além disso, esta série de artigos na Smashing Magazine .
2. Observe o design de outras pessoas. Quais dos princípios básicos eles usaram e como? Mas não apenas observe, observe suas observações .
3. Projete com o objetivo de negócios em mente . Existe um design web para ajudar uma empresa a atingir seu objetivo e ajudar o usuário a atingir seu próprio objetivo. Quando os dois objetivos convergem, todos ficam felizes. Então, esse objetivo deve ser o seu ponto de partida, sempre. Você deve basear cada decisão de design que tomar nesse objetivo - opções de fonte, cores, layout etc.
4. Verifique se há harmonia em todo o seu design. Em geral, isso significa harmonia entre a mensagem que você deseja enviar, as cores, as fontes, o clima do site e a marca. Comece a incorporar harmonia em seus projetos usando uma balança modular para orientar suas decisões de dimensionamento. Esta minissérie explica mais sobre harmonia e uso de uma balança modular.
5. Leia esta incrível introdução à tipografia : Tipografia prática de Butterick ou, pelo menos, este resumo

Tente projetar do zero

Agora, quando você terminar de ler sobre todas essas coisas e conhecer HTML e CSS, poderá criar seu próprio design muito simples.

Tente criar uma única página com apenas texto, em preto e branco .

Por que apenas texto? Porque o texto é de longe o meio mais utilizado para transmitir uma mensagem na web. Portanto, é fundamental para você, como web designer, poder fazer com que o texto tenha uma boa aparência e seja um prazer ler.

Por que preto e branco? Porque escolher cores é mais uma fera. Dar pequenos passos fará com que você se sinta feliz com o progresso que está fazendo e o ajudará a aprender mais rapidamente.

Aplique os princípios básicos de design que você aprendeu + use as observações dos desenhos de outras pessoas + pense no objetivo dessa página + dimensione o texto usando uma escala modular.

A melhor maneira de aprender é fazer as coisas, então faça de você um site.

Leia os padrões , alistapart , tutsplus .

Se você precisa de um olhar livro em SitePoint 's - HTML Utopia: Designing Sem tabelas usando CSS .

Algumas reflexões sobre o csszengarden e o W3Schools .

Honestamente, eu começaria aprendendo a desenvolver sites WordPress. Sim, posso codificar um site usando HTML, CSS, PHP, ... mas posso montar um site WordPress mais rapidamente e depois personalizá-lo conforme necessário.

Se você deseja começar apenas aprendendo os padrões de hoje, eu recomendaria http://nettuts.com/ . Também seria benéfico obter a associação premium e ter acesso a alguns ótimos tutoriais. Se você está interessado em passar do PSD para o HTML, eles cobrem isso.

Nettuts faz parte do Envato. A Envato possui vários sites de tutoriais que cobrem desenvolvimento web, wordpress, vetores, edição de fotos e vídeos e muito mais. É um ótimo lugar para começar.

Apenas meus 2 centavos.

Para iniciantes do Photoshop em Web design, eu recomendaria este site http://psdvibe.com/

Existem muitos sites com toneladas de tutoriais. No entanto, a melhor plataforma para aprender webdesign é http://teamtreehouse.com/ . Espero que ajude! Nik