Learn Front End UI Design 2020
1.0.0
Aprenda el desarrollo de programación/front-end (HTML/CSS/JavaScript)
Los desarrolladores front-end son diferentes de los desarrolladores de back-end en que los desarrolladores front-end manipulan los navegadores para crear páginas web y otro contenido interactivo. Para aprender el desarrollo front-end, comienza con HTML, luego CSS y luego JavaScript. Una vez que hayas aprendido, puedes pasar a otras cosas como marcos (Bootstrap, React, Angular, Vue, etc.). Frameworks Puede comenzar a aprender una vez que haya aprendido los conceptos básicos de los tres. Los marcos facilitan la vida.
Un buen programador no tiene que recordar todo. El código de código abierto alimenta la web y permite a los programadores usar e intercambiar código de forma gratuita (consulte algunas guías de código abierto que contribuyen debajo de "Mastering Front End"). Si estás atrapado en algo Google It. Probablemente encontrarás la respuesta.
Hay un millón de tutoriales por ahí. Tenga cuidado de no quedarse atrapado en lo que se conoce como "infierno de tutorial", donde solo ves tutoriales, pero nunca aprendes nada concreto. La mejor manera de aprender es hacer. Los sitios de ejercicio como este son útiles, pero también quieres pensar en proyectos para construir. Organice esos proyectos en GitHub para su cartera. O buscar tutortials del proyecto.
Usando las herramientas de desarrollador de Google Chrome, puede inspeccionar el código detrás de cualquier sitio web o hacer cambios no vivos. Otros navegadores como Firefox también tienen estas herramientas. Hazlo tu mejor amigo.
YouTube es un gran recurso en general. Cualquier cosa que quieras saber. Probablemente esté ahí. Muchos programadores muy respetados están allí como Wes Bos. También siga a otros desarrolladores en Twitter.
Lista maestra de YouTube - https://github.com/erikch/devyoutubelist
Lo importante que debe saber es que no tiene que saber todo para obtener su primer trabajo o trabajos después de eso. La programación siempre está cambiando. Un buen trabajo le permitirá aprender en el trabajo, espero que le pague algunas cosas y le enseñará lo que no necesita saber.
Haga preguntas: ninguna pregunta es tonta. Use Google primero. Si eso falla, comuníquese con otros programadores a través de foros, desbordamiento de pila, grupos de Facebook o Twitter. Alguien estará encantado de ayudarte.
¿Cómo sabré cuándo estoy listo?
Cuando puede crear un sitio web básico y tener una cartera de un par de proyectos diferentes.
Sitio web con diseños estáticos y de prototipos
Un Github que muestra su código
Si trabaja en un sitio web que ya está en vivo, no necesita un GitHub para ello. Pero son buenos para proyectos que no son en vivo.
Independientemente de lo que haga, los proyectos independientes o de voluntariado lo ayudarán a obtener EXP en caso de que no pueda obtener una pasantía. Pero las pasantías de desarrolladores generalmente están abiertas a las personas fuera de la escuela porque muchas personas profesan SWTICH. También puede comenzar a aplicar a las posiciones de nivel junior. Consulte proyectos de código abierto, programación emparejada y coloboración con un amigo.
Recursos de programación
(Otras listas)
https://www.womenwhocode.com/resources
http://codingheroes.io/resources/
Esencial-
GitHub: un repositorio de código en línea para exhibir y unirse a proyectos de código abierto
Tutorial Git & Github - https://youtu.be/swyqp7iy_tc
CodePen- Explore y crea cosas desde su navegador - https://codepen.io/dashboard/
Texto sublime: un editor de código fácil y fácil - https://www.subrecextext.com/
VS Code- es el editor de código gratuito actual, más avanzado, https://code.visualstudio.com/
Herramientas de Dev Chrome: abre directamente en su navegador para probar, diagargnose y explorar sitios web - https://developers.google.com/web/tools/chrome-devtools
Blog para desarrolladores - https://dev.to/
Stack Overflow es ideal para buscar respuestas y cosas, pero se sabe que la comunidad no es amigable con los novatos o las mujeres: https://stackoverflow.com/
Front End News - Permanezca actualizado - https://frontendfront.com/
Enfoque frontal - Manténgase al día con este boletín - https://frontendfoc.us/
Temas y conceptos esenciales
Cómo funcionan Internet y las computadoras-https://www.khanacademy.org/computing/computer-science/Computers-and-internet-code-org#internet-worksintro-intro
¿Qué es la informática? -https://www.freecodecamp.org/news/what-is-computer-programming-defining-software-development/
Diseño web receptivo-https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
Desarrollo del navegador cruzado - https://developer.mozilla.org/en-us/docs/learn/tools_and_testing/cross_browser_testing/Introduction
Metodología ágil - https://www.youtube.com/playlist?list=plwkjhjtqvabm0gpnunwf4pr4xv8i3geh-
Prueba de velocidad de la página web - https://tools.pingdom.com/
La novela en línea de Paul Ford's What Is Code 10,000 Word-https://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/
La depuración para principiantes-La depuración es el proceso de encontrar y corregir errores-https://docs.microsoft.com/en-us/visualstudio/debugger/debugging-absolute-beginners?view=vs-2019
Dominar el front-end
100 días de código: la idea detrás de esto es sólida, reptición, responsabilidad y progreso: https://www.100daysofcode.com/
Guía de habilidades web - https://andreasbm.github.io/web-skills/
W3Schools- Aprenda programación y busque cosas: un recurso de referencia- https://www.w3schools.com/
*Red de desarrollador de Mozilla: como W3Schools, pero el más maduro y más actualizado -https: //developer.mozilla.org/en-us/
Herramientas que los desarrolladores frontales usan en 2019-https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-represals
Roadmap- Guía para convertirse en un desarrollador frontal en 2020 https://roadmap.sh/frontend
Guía del desarrollador frontal 2020 - https://youtu.be/sppsnbqvt0k
Preguntas de la entrevista para front-end (es decir, ¿puedes responder a estas?) Https://github.com/h5bp/front-end-developer-interview- QUestions
Preguntas y respuestas de la entrevista del desarrollador front end-https://www.fullstack.cafe/blog/front-end-developer-interview-Questions
Dev Illustrated - Ilustrando conceptos de desarrollador - https://illustrated.dev/
Cake de entrevista - Aprenda CS y cómo resolver entrevistas de programador - https://www.interviewcake.com/
Entrevista de programación YouTube - https://www.youtube.com/playlist?list=plwkjhjtqvablv09g3sfgrmser0jnkqmj9
La guía definitiva para contribuir a Open Source-https://www.freecodecamp.org/news/the-definitive-guide-to-tributing-to-open-source-900d5f9f2282/
Cómo hacer contribuciones - https://github.com/firstContributions/first-contributions
Impresionante lista de PR (solicitudes de extracción)-https://github.com/mungell/awesome-for-beginners
Primeros Timers: un recurso por primera vez que contribuye a proyectos de código abierto: https://www.firsttimersonly.com/
Pros y contras de la programación emparejada (cuando usted y un compañero de equipo trabajan juntos en el mismo código)-https://www.freecodecamp.org/news/the-benefits-and-pitfalls-of patramming-in-the-workplace-e68c3ed3c81f/
Sistemas de gestión de contenido
WordPress- hay muchos trabajos que requerirán que sepa cómo trabajar con estos: wordpress.org / wordpress.com
Drupal
WebFlow (más nuevo pero tiene mucho que hablar)
Tutoriales y otros
Freecode Camp- Uno de los mejores recursos gratuitos que puede usar: https://www.freecodecamp.org/
Khan Academy - Tiene excelentes lecciones de programación y consulte sus cosas de informática también - https://www.khanacademy.org/computing/computer-programming
Codeacademy- Un favorito pero tienes que pagar ahora en cierto punto - https://www.codecademy.com/
Front -end Masters - Learn Front -end Development - https://frontendmasters.com/
Udemy: consulte sus cursos gratuitos y luego espere las ventas en sus clases: https://www.udemy.com/courses/free/
Sabirlar en webinarios: tiene un montón de seminarios web para principiantes gratuitos: https://www.thinkful.com/webinars/
Tree House - Un gran sitio tutortial/cartera/grado, pero puede ser costoso - https://teamtreehouse.com/
Hackr.io- tutoriales y otro aprendizaje - https://hackr.io/
Egghead - tutoriales - https://egghead.io/
LinkedInlearning
Cursera
Sábado
Ceremonias
Ejercicio: aprenda programación con ejercicios - https://exercism.io/
Edabit - Aprenda codificación con desafíos interactivos - https://edabit.com/
Code Wars - Desafíos de programación diaria - https://www.codewars.com/
HTML/CSS/JavaScript Sploss
Cursos de choque html - https://youtu.be/pqn-pnxpavg; https://youtu.be/ub1o30fr-ee
Libro HTML y CSS - Un libro popular con ejemplos de código en línea - http://www.htmlandcssbook.com/
Curso CSS Crash - https://www.youtube.com/watch?v=yfoy53qxeni
CSS TRICTS: un blog para CSS y otro desarrollo front -end - https://css-tricks.com/
Podcast css- https://pod.link/thecsspodcast
Generador CSS - Genere rápidamente CSS - http://css3generator.com/
CSS Diner - https://flukeout.github.io/
Grid CSS - https://cssgrid.io/; https://learncssgrid.com/
CSS Flexbox- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Modelo de caja CSS-https://css-tricks.com/the-css-box-model/
Bootstrap - A CSS, Front -end Framework - https://getbootstrap.com/
Codrops- fragmentos de cosas de codificación geniales - http://tympanus.net/codrops/
Eloquent JavaScript: un libro de lectura (con una práctica de programación en el navegador) https://eloquentjavascript.net/eloquent_javascript.pdf
Javascript y jQuery - Un libro popular con ejemplos de código - http://www.javascriptbook.com/
Jslint- "Lints" son programas que encuentran problemas en su código: http://www.jslint.com/
JavaScript30 - Cree 30 proyectos diferentes de Vanilla JavaScript - https://javascript30.com/
JavaScript para principiantes - Un curso pagado de Wes Bos - https://beginnerjavascript.com/
Just JavaScript - Un boletín que explica JavaScript - https://justjavascript.com/
Proyectos JavaScript de vainilla - +20 Proyectos JavaScript Plain - https://vanillawebprojects.com/
Video completo de cimientos de JavaScript - https://youtu.be/pkzno7mfnfg
Html en 12 minutos - https://youtu.be/bwpmsssvdpk
CSS en 12 minutos - https://youtu.be/0afzj1g0bie
JavaScript en 12 minutos - https://youtu.be/ukg_u3cnjwi
Código más avanzado y topcis e informática
Desarrolladores de Google - Tutoriales y otros recursos - https://developers.google.com/
Elija un marco JS para comenzar con (reaccionar, angular, vue). Realmente no importa cuál elija, pero algunas compañías los prefieren sobre otras. React es el más popular, seguido de Angular, y luego Vue. No mucha gente sabe Vue, pero en realidad se busca en realidad. Entonces, tal vez reaccionar o angular y vue juntos podría ser una elección fuerte.
Historia de Front End Frameworks- 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
API - https://youtu.be/gzvsyjdk-us
Informática de Havard - https://www.youtube.com/playlist?list=plwkjhjtqvabmgw5fn5bqlwuug-8bdmabi
Informática - https://www.youtube.com/playlist?list=plwkjhjtqvabn5emq3rrg8gebqkhf_5vxd
Google Materials - https://material.io/design/
¿Qué es blockchain? -https://www.freecodecamp.org/news/what-is-lackchain-and-how-does-it-work/
Accesibilidad
Pautas de accesibilidad al contenido web (WCAG) - https://www.w3.org/wai/standards-guidelines/wcag/
Lista de verificación de ADA (2019)-https://medium.com/@krisrivenburgh/the-ade-checklist-website-matiance-guidelines-for-2019-in-plain-aglish-123c1d58fad9
Lista de verificación A11y (consulte el boletín A11y) - https://a11yproject.com/checklist/
Accesibilidad web para desarrolladores - https://www.wuhcag.com/wcag-checklist/
15 cosas que puede hacer para mejorar la accesibilidad de su sitio web: https://websitesetup.org/web-accessibility-checklist/
Solo por diversión -
Procesamiento: un lenguaje de programación basado en Java utilizado para crear animaciones, juegos y arte interactivo: https://processing.org/
Asamblea general: otro lugar de certificado pero también tiene algunas cosas gratis: https://generalassemb.ly/blog/free-fridays/
Desarrollador y comunidades tecnológicas
https://womeninwebdev.com/
https://www.hiretechladies.com/
Involucrarse como desarrolladores - https://www.pluralsight.com/courses/get-involved
CodeNewbie- https://www.codenewbie.org/
Hackernoon- Un blog comunitario, recursos de aprendizaje, etc.- https://hackernoon.com/
http://ladydev.org/ (Club local en Des Moines, también corren el área515)
Tablas de trabajo
Vettery - https://www.vettery.com/candidate/tech
Triplebyte- https://triplebyte.com/
Angellist- Jobs de inicio - https://angel.co/jobs
Trabajamos de forma remota - https://weworkremotely.com/
Dice - https://www.dice.com/
Stack Overflow - https://stackoverflow.com/
CodePen - https://codepen.io/jobs/
AIGA Design Jobs - https://designjobs.aiga.org/
Behance - https://www.behance.net/JoBlist
Design Observer - https://designobserver.com/jobs/
Interfaz de usuario, diseño web, diseño visual, etc. Dentro del mundo mágico del diseño UX, vive una gran cantidad de títulos que son básicamente los mismos o todos relacionados entre sí. Si realmente quisiera, el pedido podría ser diseñador visual, diseñador web, diseñador de interfaz de usuario, diseñador de interacción ... etc. (entra en UX bastante rápido).
UI no es lo mismo que UX. UX es el estudio del diseño y la interacción humana y la psicología. UI trata con las cosas visuales.
Manténgase al día en el campo leyendo artículos de lugares como
Smashing Magazine, https://www.smashingmagazine.com/
Muzli, https://muz.li/
UX Planet, https://uxplanet.org/
Protypr, https://blog.prototypr.io/
UX colectivo https://uxdesign.cc/
Neilsen Norman Group https://www.nngroup.com/
Mockplus https://www.mockplus.com/blog
Hola diseñador https://heydesigner.com/
Diseñador Noticias https://www.designernews.co/
y más.
Tome clases en línea y obtenga certificados de lugares como CareerFoundry, Interaction Design Foundation, LinkedIn Learning y otros. Lea más sobre las opciones de UX Planet. https://careerfoundry.com/ ** https: //www.interaction-design.org/ (favorito personal, es lo que estoy usando) https://uxplanet.org/top-10-online-platforms-to-learn-ui-ux-design-dcfb613d097a
Comience su propio blog y escriba sobre lo que sabe y recomienda. Conviértete en un líder de pensamiento en la comunidad.
Escuche podcasts como los defensores de la experiencia del usuario, lo que está mal con UX y otros. Aquí hay una lista de los mejores 25 podcasts UX de Mockplus para 2020.https: //www.mockplus.com/blog/post/ux-podcasts
Asista a las reuniones de redes UX. (Meetup. Com)
Mira los canales y videos de YouTube sobre UX.
AJ & Smart
Consejos de diseño de aplicaciones
El futuro
Caler Edwards
Carrera Foundry
Dansky
Invisión
DesignCourse
Flujo
LinkedInlearning
Nngroup
Manténgase actualizado y vea tutoriales sobre el uso de herramientas como Sketch, Invision, Figma y otras herramientas de investigación de UX o herramientas de investigación de usuarios.
Complete los desafíos simulados de UX y UI como el generador de agujeros de aguas, el buen resumen y el desafío de 100 días de Dailyui. https://www.dailyui.co/ http://goodbrief.io/ https://sharpen.design/
Aprenda sobre accesibilidad y suscríbase a boletines como el boletín A11yweekly.
Sistemas de diseño de estudio. https://designsystemsrepo.com/design-systems/
Estudiar usabilidad. https://www.usability.gov/
Estudio de pensamiento de diseño. Puede comenzar viendo un documental o mirando diferentes metologías como IDEO, D.School, HCS, Design Council, Frog, Whatx4 o Luma. http://www.designthinkingmovie.com/
Compartir recursos en las redes sociales.
Únase a los grupos de UX Facebook y LinkedIn. Siga a los diseñadores en Twitter e Instagram.
Manténgase actualizado con las tendencias en UX y el estado de UX. https://trends.uxdesign.cc/
Siga mejorando su cartera (encuentre algunos recursos interesantes del sitio de Sarah Doody) y los estudios de casos (encuentre un generador de plantillas aquí). Estudie otras carteras de UX. https://www.sarahdoody.com/ https://design-stories.herokuapp.com/ux-case-study-template
Encuentra un mentor o conviértete en un mentor.
Lea libros sobre UX/UI y otros temas similares. Como "No me hagas pensar", "El diseño de las cosas cotidianas", "Los elementos de la experiencia del usuario", "Una guía de proyecto para UX", "Lean UX" y otros. https://www.mockplus.com/blog/post/ux-design-books
Diviéndose profundamente en otros subconjuntos de UX como diseño de interacción, arquitectura de información, diseño visual, investigación de UX, UI, escritura UX, etc.
Asista al Día de la Conferencia Mundial de IXDA gratis u otras conferencias. https://ixda.org/
Únase a clubes locales, organizaciones y otros grupos comunitarios.
Conviértase en altavoz o comience a organizar talleres.
Obtenga un título universitario en HCI, UX, UI u otros programas similares.
Voluntario sus habilidades o independientes.
Practicar, practicar, practicar. Cree proyectos de pasión y estudios de casos en su tiempo libre.
