Por onde começar e como aprender na "prática'?


(Steve Alisson) #1

Tenho muitas dúvidas de como começar e por onde começar, qual jeito mais rápido e prático pra eu conseguir criar um site bonito e funcional.

Eu gosto de criar tudo do zero, gosto da parte de criar o design de um site, mas ai é que tá, eu estou tentando aprender HTML e CSS, eu não sei por onde começar, eu perco o foco fazendo uma página no PS (levo muito tempo) e depois passar pra HTML, pesquisar tags por tags de forma individual pra saber todas as minhas possibilidades (eu sei o básico)

O tempo que leva é muito frustante porque perco o foco, devo tentar recriar páginas já prontas antes de criar uma do zero desde o design? como começar? como aprender de forma eficiente?


(Robson Vital) #2

@stevealisson,

Aqui no próprio Tableless tem uma área Para Iniciantes para o front-end, acho que seria legal você dar um rolê por la, vale a pena.

E qualquer duvida chama nóis :wink:

Abrass.


(Steve Alisson) #3

Acho que postei na área errada

Nos cursos que já fiz, focam apenas nos códigos, mas não dão enfase no design e etc.. (ex: planejamento, sketch, wireframe, visual e code)
Um mestre de obras sabe levantar uma parede, mas e depois? Ele vai levantar várias paredes de forma aleatória e fim? Eu quero entender os processos criativos, não só code.


(Nick Lima) #4

Os processos criativos não são coisas que se aprendem apenas lendo. Você pode até ler em algum fórum sobre o processo criativo de determinados desenvolvedores e se inspirar para desenvolver o seu método pois processo criativo é algo individual.

Veja também que se pensar em design e códigos teremos duas áreas distintas. Um curso de frontend não necessariamente vai te preparar para ter noções de design. Ele pode até abordar práticas de design e/ou UX mas dependendo do curso, o foco será "só código mesmo".

O problema deve estar no tipo de curso que está fazendo. Se está buscando aprender sobre planejamento, sketch e wireframe faça algum curso nessa área ou vá beber nas fontes dessas áreas pela web. Existem muitos sites e/ou blogs que abordam esse assuntos. Dá uma googlada :wink:

Se você quer fazer o design do seu site, você pode procurar inspiração em sites de templates e visitando sites similares ao seu projeto. Além disso visitando sites de códigos como Codrops e CodePen você pode conferir modelos de animações, templates de slides e muitos exemplos de códigos para usar no seu projeto.

O processo não é simples e não existe um caminho mais fácil, o único jeito é praticando mesmo. Só assim se "aprende na prática".

Espero ter ajudado.


(Steve Alisson) #5

os exemplos foram só exemplos mesmo..
Mas você conseguiu entender a pergunta, eu gosto de praticar tanto o design quanto os códigos
A pergunta é: Praticar os dois criando o visual e depois o código, ou de forma individual?

Eu gostava de tentar recriar o layout dos sites que eu curtia (só códigos) mas sinto falta de abrir o PS (o editor que tenho experiência) e criar algo meu pra aprender os dois de uma só vez, mas eu me pego focando em coisas que não deveria como por exemplo ficar procurando um banner legal pra o meu layout (exemplo extremo)

E como eu vejo uma linha de tempo em quase todas as disciplinas, acredito que no web design não seja diferente, não nos apresentam o CSS depois o HTML.

Espero que tenha entendido meu ponto :relaxed:


(sergio) #6

Stevealisson aconselho então, para ir pegando prática e fazer esta junção do útil ao agradável de você começar a fazer alguns projetos próprios simples mas com uma linha de raciocínio já desenvolvida. Por exemplo, algo que me ajudou bastante em minha carreira:
Comece criando um template de administração (adm / dashboard), faça ele no layout (PS) mas assim que você fizer a primeira página já crie um guia de design ( ex: https://d13yacurqjgara.cloudfront.net/users/104117/screenshots/2677541/rbs_1x.png ) já pensando nas implementações dos itens nas próximas páginas (tabelas, formulários, etc..).. pois você já estará pensando no HTML e no CSS instintivamente e em uma padronização de que 'uma borda pode servir para todos os elementos então irei criar uma classe para usar esta borda de forma mais dinâmica".. ai na hora de montar o html e css vai seguindo esta linha..

É uma ótima prática, que te trará uma visão melhor de forma geral e te garanto que na hora que finalizar você irá observar "N" formas que você poderia ter feito melhor ou diferente.. e assim vai praticando.

Dica: Na hora do banner, para poupar tempo você pode achar um banner legal pronto deixa la como exemplo, criar o espaço no html e trabalhar no banner depois. Apenas para praticar mesmo, não que seja o ideal.

Cuidado, não reprima a sua criatividade já pensando na facilidade o HTML/CSS.


(Steve Alisson) #7

Você aconselha a fazer sketch ou wireframe agora? Ou mais pra frente quando tiver com mais experiência e etc?

Obrigado a todos pelas respostas :wink:


(Baiano) #8

Recomendo tentar fazer seu site inicialmente em um template "limpo", por exemplo:

https://v4-alpha.getbootstrap.com/examples/
e
https://getmdl.io/templates/index.html

Se escolher essa opção, você além de já começar aprendendo da maneira atual, você ainda aprende um framework de frontend atual, que vai contribuir com seus estudos e carreira :wink:

Quando você terminar o seu site utilizando um dos templates acimas, você vai ter uma noção melhor do que você pode e consegue construir, quanto tempo leva e etc. Aí Recomendo você ir ao Photoshop, fazer o design com essa experiência e know how, e aí sim partir por esse caminho (fazer o código a partir da imagem). É que fica muito mais fácil fazer um design, sabendo quais as ferramentas você tem para transformar aquilo em código. Comecei a ensinar um colega de outro setor aqui na empresa, e em dois meses ele já recebeu uma proposta de estágio aqui mesmo, no setor de TI.

Espero ter ajudado, abraços!