Como posso começar a aprender desenvolvimento web?


22

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?


4
Eu sugiro evitar o W3Schools como uma ferramenta de aprendizado. Você pode ler o porquê aqui: meta.stackexchange.com/questions/87678/…
aslum

1
Eu sugeriria que, se o w3schools funcionar para você, você o use. Sim, há uma chance de algo não ser exato, ninguém é perfeito. Eu relatei a eles alguns problemas em algumas páginas em que detectamos um erro. Muitas pessoas corrigiram minhas habilidades primitivas em inglês neste site. Até participei de algumas edições alguns anos antes do próprio w3C, quando um novo rascunho foi lançado. Não há ponto em tentar "banir" um site, mas melhorá-lo.
Rafael Rafael

Respostas:


12

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.


25

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.


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


Outros sites úteis

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 !


1
Eu adicionaria o Lynda.com. Quanto aos editores, se você estiver em um Mac, você deve obter o BBEdit ou usar a versão gratuita textmate.
D MarVᴀᴅᴇʀ

1
Concordo plenamente, mas gostaria de acrescentar que aconselho a evitar as estruturas no início. Aprenda a rastrear antes de aprender a andar. Isso fornecerá uma base muito melhor e sólida para continuar aprendendo a forma no futuro e ajudará a criar páginas da web bonitas, estruturadas e semânticas.
Verão

@ JaneDoe1337 que depende de quem você pergunta. Às vezes, uma estrutura é mais fácil de aprender e ajuda a uma implantação mais rápida. Além disso, depois de aprender o básico de uma estrutura, você também pode voltar e ajustar as horas extras como deveria, se a estrutura for bem adotada e houver melhores opções.
DᴀʀᴛʜVᴀᴅᴇʀ

@Darth_Vader é por isso que eu disse que era meu conselho;) Minha experiência pessoal é que as pessoas geralmente não voltam e aprendem o básico, deixando-as com falta de conhecimento em certas partes.
Verão

4

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


3

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.


"Quero redirecionar sua atenção para a parte de design do web design" Oh meu Deus, quanta sabedoria nesta sentença! Há rostos felizes não é suficiente neste site para isso: o)
Rafael


0

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.


2
"Honestamente, eu começaria aprendendo a desenvolver sites WordPress. Sim, posso codificar um site usando HTML, CSS, PHP ..." Você precisará trabalhar com CSS e HTML para desenvolver um site WordPress, com certeza?
e100

Eu discordo, o OP tenderia a aprender regras e fundamentos focados no wordpress. Um conhecimento básico e limpo do idioma o ajudará a longo prazo, ao tentar aprender outros idiomas ou resolver problemas.
Verão


-3

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


2
Embora isto possa teoricamente responder à pergunta, seria preferível se você poderia incluir algumas palavras a respeito de por que este site particular é melhor do que outros ...
Farray
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.