Learn Front End UI Design 2020
1.0.0
Aprenda programação/desenvolvimento front-end (HTML/CSS/JavaScript)
Os desenvolvedores de front-end são diferentes dos desenvolvedores de back-end, pois os desenvolvedores de front-end manipulam os navegadores para criar páginas da Web e outros conteúdos interativos. Para aprender o desenvolvimento do front-end, você começa com HTML, depois CSS e depois JavaScript. Depois de aprender, você pode passar para outras coisas como estruturas (bootstrap, reagir, angular, vue etc.). Estruturas que você pode começar a aprender depois de aprender o básico dos três. As estruturas facilitam a vida.
Um bom programador não precisa se lembrar de tudo. O código -fonte aberto lidera a Web e permite que os programadores usem e trocem código gratuitamente (confira alguns guias de código aberto contribuintes sob "dominar o front -end"). Se você está preso a algo, pesquise no Google. Você provavelmente encontrará a resposta.
Existem um milhão de tutoriais por aí. Cuidado para não ficar preso no que é conhecido como "Tutorial Hell", onde você apenas assiste tutoriais sem parar, mas nunca aprende nada concreto. A melhor maneira de aprender é fazer. Sites de exercícios como esse são úteis, mas você também deseja pensar em projetos para serem construídos. Hospede esses projetos no Github para seu portfólio. Ou procure os tutoriais do projeto.
Usando o Google Chrome Developer Tools, você pode inspecionar o código por trás de qualquer site ou fazer alterações não-viver. Outros navegadores como o Firefox também têm essas ferramentas. Faça disso seu melhor amigo.
O YouTube é realmente um ótimo recurso em geral. Qualquer coisa que você queira saber. Provavelmente está lá. Muitos programadores bem respeitados estão lá como Wes Bos. Siga também outros desenvolvedores no Twitter.
Lista mestre do YouTube - https://github.com/erikch/devyoutubelist
A outra coisa importante a saber é que você não precisa saber tudo para conseguir seu primeiro emprego ou emprego depois disso. A programação está sempre mudando. Um bom trabalho permitirá que você aprenda no trabalho, esperançosamente pague para aprender algumas coisas e ensinará o que você ainda não precisa saber.
Faça perguntas - nenhuma pergunta é idiota. Use o Google primeiro. Se isso falhar, entre em contato com outros programadores por meio de fóruns, Stack Overflow, Grupos do Facebook ou Twitter. Alguém ficará feliz em ajudá -lo.
Como vou saber quando estiver pronto?
Quando você pode criar um site básico e ter um portfólio de alguns projetos diferentes.
Site com projetos estáticos e protótipos
Um github mostrando seu código
Se você trabalha em um site que já está ao vivo, não precisa de um github para isso. Mas eles são bons para projetos que não estão vivendo.
Independentemente do que você faz, projetos freelancers ou voluntários o ajudarão a ganhar o EXP, caso você não consiga um estágio. Mas os estágios dos desenvolvedores geralmente são abertos a pessoas fora da escola, porque tantas pessoas na carreira. Você também pode começar a se inscrever em posições de nível júnior. Confira projetos de código aberto, programação emparelhada e coloboração com um amigo.
Recursos de programação
(Outras listas)
https://www.womenwhocode.com/resources
http://codingheroes.io/resources/
Itens essenciais
Github - Um repositório on -line de código para mostrar e participar de projetos de código aberto
Tutorial Git & Github - https://youtu.be/swyqp7iy_tc
Codepen- Explore e crie coisas do seu navegador - https://codepen.io/dashboard/
Texto sublime - um editor de código fácil e livre - https://www.sublimetext.com/
Vs code- é o editor de código livre atual, mais avançado - https://code.visualstudio.com/
Ferramentas Chrome dev - Abra diretamente no seu navegador para testar, diagognóstico e explorar sites - https://developers.google.com/web/tools/chrome-devtools
Blog para desenvolvedores - https://dev.to/
O Fack Overflow é ótimo para procurar respostas e outras coisas, mas a comunidade é conhecida por não ser amigável com iniciantes ou mulheres - https://stackoverflow.com/
Notícias do front -end - Fique atualizado - https://frondendfront.com/
Foco no front -end - Fique atualizado com este boletim informativo - https://frondendfoc.us/
Tópicos e conceitos essenciais
Como os computadores e os computadores funcionam-https://www.khanacademy.org/computing/computer-science/computers-and-internet-code-org#internet-works-intro
O que é ciência da computação? -https://www.freecodecamp.org/news/what-is-computer-programming-defining-seftware-development/
Web Design responsivo-https://www.smingmagazine.com/2011/01/guidelines-for-sponsive-web-design/
Desenvolvimento do navegador cruzado - https://developer.mozilla.org/en-us/docs/learn/tools_and_testing/cross_browser_testing/introduction
Metodologia Agile - https://www.youtube.com/playlist?list=plwkjhjtqvabm0gpnunwf4pr4xv8i3geh-
Teste de velocidade da página da web - https://tools.pingdom.com/
Paul Ford's What Is Code 10.000 Word Online Novel-https://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/
Depuração para iniciantes-Debugging é o processo de encontrar e consertar erros-https://docs.microsoft.com/en-us/visualstudio/debugger/debugging-absolute-beginners?view=vs-2019
Dominar o front-end
100 dias de código - A idéia por trás dela é sólida, reptição, responsabilidade e progresso - https://www.100Daysofcode.com/
Guia para Habilidades da Web - https://andreasbm.github.io/web-skills/
W3Schools- Aprenda programação e procure coisas- um recurso de referência- https://www.w3schools.com/
*Rede de desenvolvedores Mozilla -como W3Schools, mas a irmã mais madura, mais atualizada da irmã -https: //developer.mozilla.org/en-us/
Ferramentas que os desenvolvedores de front-end usam em 2019-https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results
Roteiro- Guia para se tornar um Dev Front-End em 2020 https://roadmap.sh/frondend
Guia do desenvolvedor de front -end 2020 - https://youtu.be/sppsnbqvt0k
Perguntas da entrevista para o front-end (ou seja, você pode responder?) Https://github.com/h5bp/front-end-developer-interview-questions
Perguntas e respostas à entrevista do desenvolvedor do front-end-https://www.fullstack.cafe/blog/front-end-developer-interview-questions
Dev ilustrado - ilustrando conceitos de desenvolvedor - https://illustrated.dev/
Bolo de entrevista - Saiba CS e como resolver entrevistas com programador - https://www.interviewcake.com/
Entrevista de programação YouTube - https://www.youtube.com/playlist?list=plwkjhjtqvablv09g3sfgrmser0jnkqmj9
O guia definitivo para contribuir para o código aberto-https://www.freecodecamp.org/news/the-definitive-guide-to-contributing-to-open-source-900d5f9f22282/
Como fazer contribuições - https://github.com/firstcontributions/first-contributions
Lista impressionante de PR (Pull Solictans)-https://github.com/mungell/awesome-s-beginners
Apenas os iniciantes - um recurso para sua primeira vez contribuindo para os projetos de código aberto - https://www.firsttimersonly.com/
Prós e contras da programação emparelhada (quando você e um companheiro de equipe trabalham juntos no mesmo código)-https://www.freecodecamp.org/news/the-benefits-and-pitfalls-of-pair-programing-in-the-workplace-e68c3ed3c81f/
Sistemas de gerenciamento de conteúdo
WordPress- Há muitos trabalhos que exigirão que você saiba como trabalhar com eles- wordpress.org / wordpress.com
Drupal
Webflow (mais recente, mas tem muita conversa sobre isso)
Tutoriais e outros
Freecode Camp- Um dos melhores recursos gratuitos que você pode usar - https://www.freecodecamp.org/
Khan Academy - tem ótimas aulas de programação e confira suas coisas de ciência da computação - https://www.khanacademy.org/computing/computer-programming
Codeacademy- Um favorito, mas você tem que pagar agora em um determinado ponto - https://www.codecademy.com/
Masters do front -end - Learn Front -end Development - https://frontendmasters.com/
Udemy - Confira seus cursos gratuitos e aguarde as vendas em suas aulas- https://www.udemy.com/courses/free/
Webinars Thinkful- tem um monte de webinars iniciantes gratuitos- https://www.thinkful.com/webinars/
Tree House - Um ótimo site de tutorial/portfólio/grau, mas pode ser caro - https://teamtreehouse.com/
Hackr.io- tutoriais e outros aprendizados - https://hackr.io/
EGGHEAD - Tutoriais - https://egghead.io/
LinkedInlearning
Coursera
SkillShare
Exercícios
Exercismo - Aprenda programação com exercícios - https://exercism.io/
Edabit - Aprenda a codificação com desafios interativos - https://edabit.com/
Code Wars - Desafios diários de programação - https://www.codewars.com/
Especificações HTML/CSS/JavaScript
Cursos de Crash HTML - https://youtu.be/pqn-pnxpavg; https://youtu.be/ub1o30fr-ee
Livro HTML e CSS - Um livro popular com exemplos de código online - http://www.htmlandcssbook.com/
CURSO CRIDADE CSS - https://www.youtube.com/watch?v=yfoy53qxeni
Truques do CSS - um blog para CSS e outros dev -end - https://css-tricks.com/
CSS podcast- https://pod.link/thecssspodcast
Gerador CSS - gerar rapidamente CSS - http://css3generator.com/
CSS Diner - https://flukeout.github.io/
CSS Grid - https://cssgrid.io/; https://learncssgrid.com/
CSS Flexbox- https://css-tricks.com/snippets/css/a-guide-toflexbox/
CSS Box Model-https://css-tricks.com/the-css-box-model/
Bootstrap - Uma estrutura CSS, front -end - https://getbootstrap.com/
Codrops- trechos de coisas legais de codificação - http://tympanus.net/codrops/
JavaScript eloquente - um livro de leitura (com uma prática de programação no navegador) https://eloquentjavascript.net/eloquent_javascript.pdf
JavaScript e JQuery - Um livro popular com exemplos de código - http://www.javascriptbook.com/
JSLINT- "Lints" são programas que encontram problemas em seu código - http://www.jslint.com/
JavaScript30 - Crie 30 projetos diferentes de baunilha javascript - https://javascript30.com/
Javascript para iniciantes - um curso pago de Wes Bos - https://beginnerjavascript.com/
Just JavaScript - um boletim que explica JavaScript - https://justjavascript.com/
Projetos de Javascript de baunilha - +20 Projetos de Javascript Plain - https://vanillawebprojects.com/
Vídeo de Fundamentos JavaScript completo - https://youtu.be/pkzno7mfnfg
Html em 12 minutos - https://youtu.be/bwpmssvdpk
CSS em 12 minutos - https://youtu.be/0afzj1g0bie
JavaScript em 12 minutos - https://youtu.be/ukg_u3cnjwi
Código mais avançado e TopCis e ciência da computação-
Google Developers - Tutoriais e outros recursos - https://developers.google.com/
Escolha uma estrutura JS para começar (React, Angular, Vue). Realmente não importa o que você escolhe, mas algumas empresas os preferem a outros. O React é o mais popular, seguido por Angular e depois vue. Muitas pessoas não conhecem Vue, mas é realmente procurado. Então, talvez reaja ou angular e vue juntos, pode ser uma escolha forte.
História das estruturas do front end- https://youtu.be/kzeog8ytfae
React - https://www.youtube.com/playlist?list=plwkjhjtqvabkardmazoartnz1amwnwmvc; https://www.youtube.com/playlist?list=plc3y8-rfhvwgg3vayjghgnmodb54rxok3
Angular -https: //www.youtube.com/playList? LIST = PLWKJHJTQVABLNVGKK6AQVPAJHXRRXXHTS
Vue - https://youtu.be/wy9q22isx3u
Php -https: //www.youtube.com/playList? LIST = PLWKJHJTQVABKOMSX4HGWXBJZW4AB0CBAB
Sql- https://www.khanacademy.org/computing/computer-programming/sql
APIS - https://youtu.be/gzvsyjdk-us
Ciência da Computação de Havard - https://www.youtube.com/playlist?list=plwkjhjtqvabmgw5fn5bqlwuug-8bdmabi
Ciência da Computação - https://www.youtube.com/playlist?list=plwkjhjtqvabn5emq3rrg8gebqkhf_5vxd
Google Materials - https://material.io/design/
O que é blockchain? -https://www.freecodecamp.org/news/what-is-blockchain-and-owow-does-it-work/
Acessibilidade
Diretrizes de acessibilidade ao conteúdo da Web (WCAG) - https://www.w3.org/wai/standards-guidelines/wcag/
Lista de verificação ADA (2019)-https://medium.com/@krisrivenburgh/the-ada-checklist-website-compliance-guidelines-for-2019-in-plain-english-23c1d58fad9
Lista de verificação A11y (confira o boletim informativo A11y) - https://a11yproject.com/checklist/
Acessibilidade da Web para desenvolvedores - https://www.wuhcag.com/wcag-checklist/
15 coisas que você pode fazer para melhorar a acessibilidade do seu site-https://websitesetup.org/web-accessibility-checklist/
Só por diversão -
Processamento - Uma linguagem de programação baseada em Java usada para criar animações, jogos e arte interativa - https://processing.org/
Assembléia Geral- Outro local de certificado, mas também tem algumas coisas gratuitas- https://generalassemb.ly/blog/free-fridays/
Desenvolvedor e comunidades de tecnologia
https://womeninwebdev.com/
https://www.hiretechladies.com/
Envolva -se como desenvolvedores - https://www.pluralsight.com/courses/get-involved
Codenewbie- https://www.codenewbie.org/
Hackernoon- Um blog da comunidade, recursos de aprendizado, etc.- https://hackernoon.com/
http://ladydev.org/ (Clube Local em Des Moines, eles também correm Area515)
Placos de trabalho
Vettery - https://www.vettery.com/candidate/tech
Triplebyte- https://tripebyte.com/
AngelList- Jobs de Start -Ups - https://angel.co/jobs
Trabalhamos remotamente - https://weworkremotely.com/
DICE - https://www.dice.com/
Stack Overflow - https://stackoverflow.com/
Codepen - https://codepen.io/jobs/
Jobs de design da AIGA - https://designjobs.aiga.org/
Behance - https://www.behance.net/joblist
Design Observer - https://designobserver.com/jobs/
Interface do usuário, design da web, design visual, etc. No mundo mágico do design UX, vive uma série de títulos que são basicamente os mesmos ou todos relacionados entre si. Se você realmente quis, o pedido pode ser designer visual, designer da web, designer de interface do usuário, designer de interação ... etc. (entra em UX rapidamente).
UI não é o mesmo que ux. UX é o estudo do desenho e da interação humana-computador e psicologia. A UI lida com as coisas visuais.
Mantenha -se atualizado no campo lendo artigos de lugares como
Smashing Magazine, https://www.smingmagazine.com/
Muzli, https://muz.li/
UX Planet, https://uxplanet.org/
Protypr, https://blog.prototypr.io/
UX coletivo https://uxdesign.cc/
Grupo Neilsen Norman https://www.nngroup.com/
MockPlus https://www.mockplus.com/blog
Ei designer https://heydesigner.com/
Notícias de designer https://www.designews.co/
e mais.
Faça aulas on -line e obtenha certificados de lugares como CareerFoundry, Interaction Design Foundation, LinkedIn Learning e outros. Leia mais sobre as opções do UX Planet. https://careerfoundry.com/ ** https: //www.interaction-design.org/ (favorito pessoal, é o que estou usando) https://uxplanet.org/top-10-online-platforms-to-learn-ui-ux
Comece seu próprio blog e escreva sobre o que você sabe e recomenda. Torne -se um líder de pensamento na comunidade.
Ouça podcasts como defensores da experiência do usuário, o que há de errado com o UX e outros. Aqui está uma lista dos 25 melhores podcasts de UX da MockPlus para 2020.https: //www.mockplus.com/blog/post/ux-podcasts
Participe dos encontros de rede UX. (Meetup. Com)
Assista canais e vídeos do YouTube sobre UX.
AJ & SMART
Dicas de design de aplicativos
O futuro
Alegado Edwards
Careerfoundry
Dansky
Invision
DesignCourse
Fluxo
LinkedInlearning
Nngroup
Mantenha-se atualizado e assista aos tutoriais sobre o uso de ferramentas como Sketch, Invision, Figma e outras ferramentas de UX ou ferramentas de pesquisa de usuários.
Desafios completos de UX e UI, como o gerador UX Sharp, o bom resumo e o desafio de 100 dias Dailyui. https://www.dailyui.co/ http://goodbrief.io/ https://sharpen.design/
Aprenda sobre acessibilidade e assine boletins como o boletim informativo da A11yWeekly.
Sistemas de projeto de estudo. https://designsystemsrepo.com/design-systems/
Estude usabilidade. https://www.usability.gov/
Pensamento do projeto do estudo. Você pode começar assistindo a um documentário ou analisando diferentes metologias, como da IDEO, D.School, HCS, Design Council, Frog, Whatx4 ou Luma. http://www.designthinkingmovie.com/
Compartilhe recursos nas mídias sociais.
Junte -se aos grupos UX Facebook e LinkedIn. Siga os designers no Twitter e Instagram.
Mantenha-se atualizado com as tendências no UX e no estado do UX. https://trends.uxdesign.cc/
Continue melhorando seu portfólio (encontre alguns recursos legais do site de Sarah Doody) e estudos de caso (encontre um gerador de modelos aqui). Estude outras portfólios de UX. https://www.sarahdoody.com/ https://design-nsories.herokuapp.com/ux-case-study-template
Encontre um mentor ou se torne um mentor.
Leia livros sobre UX/UI e outros tópicos semelhantes. Como "Não me faça pensar", "o design das coisas do dia a dia", "os elementos da experiência do usuário", "um guia do projeto para UX", "Lean UX" e outros. https://www.mockplus.com/blog/post/ux-design-books
Mergulhe profundo em outros subconjuntos de UX, como design de interação, arquitetura de informações, design visual, pesquisa UX, interface do usuário, redação de UX, etc.
Participe do Dia da Conferência Mundial da IXDA para conferências gratuitas ou outras. https://ixda.org/
Junte -se aos clubes, organizações e outros grupos comunitários locais.
Torne -se um orador ou comece a hospedar workshops.
Obtenha um diploma universitário em HCI, UX, UI ou outros programas semelhantes.
Ofereça suas habilidades ou freelancers.
Pratique, pratique, pratique. Crie projetos de paixão e estudos de caso em seu tempo livre.
