Learn Front End UI Design 2020
1.0.0
Programmier-/Front-End-Entwicklung (HTML/CSS/JavaScript) lernen
Front-End-Entwickler unterscheiden sich von Back-End-Entwicklern darin, dass Front-End-Entwickler die Browser manipulieren, um Webseiten und andere interaktive Inhalte zu erstellen. Um Front-End-Entwicklung zu lernen, beginnen Sie mit HTML, dann CSS und dann JavaScript. Sobald Sie diese gelernt haben, können Sie zu anderen Dingen wie Frameworks (Bootstrap, React, Angular, Vue usw.) übergehen. Frameworks, die Sie lernen können, wenn Sie die Grundlagen der drei gelernt haben. Rahmenbedingungen erleichtern das Leben.
Ein guter Programmierer muss sich nicht an alles erinnern. Open Source Code versetzt das Web und ermöglicht es den Programmierern, kostenlos Code zu verwenden und auszutauschen (einige Open -Source -Guides unter "Mastering Front End" ansehen). Wenn Sie auf etwas festsitzen, googeln Sie es. Sie werden wahrscheinlich die Antwort finden.
Es gibt eine Million Tutorials. Achten Sie darauf, dass Sie nicht in der sogenannten "Tutorial Hell" stecken bleiben, in der Sie sich nur endlos Tutorials ansehen, aber niemals etwas Konkretes lernen. Der beste Weg, um zu lernen, ist das. Übungsseiten wie diese sind nützlich, aber Sie möchten auch an Projekte denken, die aufbauen sollen. Moderieren diese Projekte auf GitHub für Ihr Portfolio. Oder suchen Sie Projekttutortials an.
Mithilfe von Google Chrome Developer Tools können Sie den Code hinter einer Website überprüfen oder keine Änderungen vornehmen. Andere Browser wie Firefox haben ebenfalls diese Werkzeuge. Mach es zu deinem besten Freund.
YouTube ist eine wirklich großartige Ressource im Allgemeinen. Alles was du wissen willst. Es ist wahrscheinlich da. Viele angesehene Programmierer sind dort wie Wes Bos. Folgen Sie auch anderen Entwicklern auf Twitter.
YouTube Master -Liste - https://github.com/erikch/devyoutubelist
Das wichtige andere, was Sie wissen sollten, ist, dass Sie nicht alles wissen müssen, um Ihren ersten Job oder Ihre Jobs danach zu bekommen. Die Programmierung ändert sich ständig. Ein guter Job lässt Sie bei der Arbeit lernen, Sie hoffentlich für das Lernen einiger Dinge bezahlen und Ihnen beibringen, was Sie noch nicht wissen müssen.
Fragen stellen - keine Frage ist eine dumme. Verwenden Sie zuerst Google. Wenn dies fehlschlägt, wenden Sie sich an andere Programmierer über Foren, Stapelüberlauf, Facebook -Gruppen oder Twitter. Jemand hilft Ihnen gerne weiter.
Woher weiß ich, wenn ich bereit bin?
Wenn Sie eine grundlegende Website erstellen und ein Portfolio einiger verschiedener Projekte haben.
Website mit statischen und Prototypen Designs
Ein Github, der Ihren Code zeigt
Wenn Sie auf einer Website arbeiten, die bereits live ist, benötigen Sie keinen GitHub dafür. Aber sie sind gut für Projekte, die nicht leben.
Unabhängig von dem, was Sie tun, können freiberufliche oder Freiwilligenprojekte Ihnen helfen, EXP zu gewinnen, falls Sie kein Praktikum erhalten können. Entwicklerpraktika stehen jedoch in der Regel für Menschen außerhalb der Schule offen, weil so viele Menschen Karriere haben. Sie können sich auch auf die Positionen der Junior -Ebene bewerben. Schauen Sie sich Open Source -Projekte, gepaarte Programmierung und Kolroboration mit einem Freund an.
Programmierressourcen
(Andere Listen)
https://www.womenwhocode.com/resources
http://codingheroes.io/resources/
Essentials-
Github - Ein Online -Code -Code -Repository zum Präsentieren und Mitbewerben an Open -Source -Projekten
Git & Github Tutorial - https://youtu.be/swyqp7iy_tc
CodePen- Erforschen und erstellen Dinge aus Ihrem Browser - https://codepen.io/dashboard/
Sublime Text - Ein einfacher, kostenloser Code -Editor - https://www.sublimetext.com/
VS Code- ist der aktuelle, erweiterte, kostenlose Code -Editor - https://code.visualstudio.com/
Chrome Dev Tools - Öffnen Sie direkt in Ihrem Browser, um Websites zu testen, zu diagognen und zu erkunden - https://developers.google.com/web/tools/chrome-pevtools
Blog für Entwickler - https://dev.to//
Stack Overflow eignet sich hervorragend zum Nachsehen von Antworten und Dingen, aber die Community ist dafür bekannt, dass sie nicht zu Neulingen oder Frauen freundlich ist - https://stackoverflow.com/
Frontend News - Bleiben Sie auf dem neuesten Stand - https://frontendfront.com/
Fokus vorne - Bleiben Sie mit diesem Newsletter auf dem Laufenden - https://frontendfoc.us/
Wesentliche Themen und Konzepte
Wie das Internet und die Computer funktionieren-https://www.khanacademy.org/computing/computer-science/computer-and-internet-code-org#internet-works-intro
Was ist Informatik? -https://www.freecodecamp.org/news/what-is-computer-programming-defining-software-development/
Responsive Web Design-https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
Cross Browserentwicklung - https://developer.mozilla.org/en-us/docs/learn/tools_and_testing/cross_browser_testing/inTroduction
Agile Methodik - https://www.youtube.com/playlist?list=plwkjhjtqvabm0gpnunwf4Pr4xv8i3GEH-
Webseitengeschwindigkeitstest - https://tools.pingdom.com/
Paul Fords Was ist Code 10.000 Wort Online Roman-https://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/
Debugging für Anfänger-Debugging ist der Prozess, Fehler zu finden und zu beheben-https://docs
Meistering Front-End
100 Tage Code - Die Idee dahinter ist solide, Reptition, Rechenschaftspflicht und Fortschritt - https://www.100daysofcode.com/
Anleitung zu Webfähigkeiten - https://andreasbm.github.io/web-Skills/
W3Schools- Programmieren und schauen Sie sich ein.
*Mozilla -Entwickler -Netzwerk -wie W3Schools, aber die reiferere, date schwierigere Schwester -https: //developer.mozilla.org/en-us/
Tools, die Front-End-Entwickler im Jahr 2019 verwenden-https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results
Roadmap- Guide zum Front-End-Entwickler im Jahr 2020 https://roadmap.sh/frontend
Frontend -Entwickler 2020 Guide - https://youtu.be/sppsnbqvt0k
Interviewfragen für Front-End (dh können Sie diese beantworten?) Https://github.com/h5bp/front-end-developer-interview-questions
Fragen und Antworten des Front-End-Entwicklers Interviews-https://www.fullstack.cafe/blog/front-end-developer-interview-questions
Illustrated Dev - Illustration von Entwicklerkonzepten - https://illustrated.dev/
Interview Cake - Lernen Sie CS und wie Sie Programmierer -Interviews lösen - https://www.interviewcake.com/
Programmiereninterview YouTube - https://www.youtube.com/playlist?list=plwkjhjtqvablv09g3Sfgrmser0jnkqmj9
Die definitive Anleitung zum Beitrag zu Open Source-https://www.freecodecamp.org/news/the-definitive-guide-to-contributing-topen-source-900d5f9f22282/
So leisten Sie Beiträge - https://github.com/firstcontributions/first-contributions
Fantastische Liste der PR (Pull-Anfragen)-https://github.com/ungell/awesome-for-beginers
Erste Timer nur - eine Ressource zum ersten Mal, um zu Open -Source -Projekten beizutragen - https://www.firsttimersonly.com/
Vor- und Nachteile der gepaarten Programmierung (wenn Sie und ein Teamkollege zusammen im selben Code arbeiten)-https://www.freecodecamp.org/news/the-tenefits-pitfalls-of-pair-programming-the-thO-e68c3ed3c81f/
Content -Management -Systeme
WordPress- Es gibt viele Jobs, bei denen Sie wissen, wie Sie mit diesen arbeiten können- WordPress.org / WordPress.com
Drupal
Webflow (neuer, aber viel geredet)
Tutorials und andere
Freecode Camp- Eine der besten kostenlosen Ressourcen, die Sie verwenden können - https://www.freecodecamp.org/
Khan Academy - hat großartig
Codeacademy- Ein Favorit, aber Sie müssen jetzt an einem bestimmten Punkt bezahlen - https://www.codecademy.com/
Front -End Masters - Lernen Sie Front -End -Entwicklung - https://frontendmasters.com/
Udemy - Schauen Sie sich ihre kostenlosen Kurse an und warten Sie dann auf den Verkauf ihrer Klassen- https://www.udemy.com/courses/free/
Denkfache Webinare- hat eine Reihe kostenloser Anfänger-Webinars- https://www.dinkful.com/webinars/
Tree House - eine großartige Tutortial-/Portfolio-/Abschluss -Site, kann aber teuer sein - https://teamtreehouse.com/
Hackr.io- tutorials und andere Lernen - https://hackr.io/
Egghead - Tutorials - https://egghead.io/
LinkedInlearning
Coursera
Skillshare
Übungen
ÜBUNG - Programmieren mit Übungen lernen - https://exercism.io/
EDABIT - Codierung lernen mit interaktiven Herausforderungen - https://edabit.com/
Codekriege - tägliche Programmierherausforderungen - https://www.codewars.com/
HTML/CSS/JavaScript -Spezifikationen
HTML -Crash -Kurse - https://youtu.be/pqn-pnxpavg; https://youtu.be/ub1o30fr-ee
HTML- und CSS -Buch - Ein beliebtes Buch mit Code -Beispielen online - http://www.htmlandcssbook.com/
CSS -Crashkurs - https://www.youtube.com/watch?v=yfoy53qxeni
CSS -Tricks - Ein Blog für CSS und andere Front -End Dev - https://css-tricks.com/
CSS Podcast- https://pod.link/thecsspodcast
CSS -Generator - generieren Sie schnell 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-to-flexbox/
CSS-Boxmodell-https://css-tricks.com/the-css-box-model/
Bootstrap - A CSS, Front -End Framework - https://getbootstrap.com/
Codrops- snippets mit cooler codierungsmaterial - http://tympanus.net/codrops/
Eloquent javaScript - Ein Lesebuch (mit einer in Browser -Programmierungspraxis) https://eloquentjavascript.net/eloquent_javascript.pdf
JavaScript und JQuery - Ein beliebtes Buch mit Code -Beispielen - http://www.javascriptbook.com/
JSLINT- "FINTS" sind Programme, die Probleme in Ihrem Code finden - http://www.jslint.com/
JavaScript30 - Erstellen Sie 30 verschiedene Vanilla -JavaScript -Projekte - https://javascript30.com/
Anfänger JavaScript - Ein kostenpflichtiger Kurs von Wes Bos - https://besglnerjavascript.com/
Just JavaScript - Ein Newsletter, der JavaScript erklärt - https://justjavascript.com/
Vanilla JavaScript -Projekte - +20 einfache JavaScript -Projekte - https://vanillawebprojekts.com/
Full JavaScript Foundations Video - https://youtu.be/pkzno7mfnfg
Html in 12 Minuten - https://youtu.be/bwpmssvdpk
CSS in 12 Minuten - https://youtu.be/0afzj1g0bie
JavaScript in 12 Minuten - https://youtu.be/ukg_u3cnjwi
Fortgeschrittener Code und Topcis und Informatik-
Google -Entwickler - Tutorials und andere Ressourcen - https://developers.google.com/
Wählen Sie ein JS -Framework für den Start (React, Angular, Vue). Es spielt keine Rolle, was Sie wählen, aber einige Unternehmen bevorzugen sie gegenüber anderen. React ist am beliebtesten, gefolgt von Angular und dann Vue. Nicht viele Leute kennen Vue, aber es wird wirklich wirklich gesucht. Vielleicht ist reagieren oder eckig und vue zusammen eine starke Wahl.
Geschichte der 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 = plwkjhjtqvablnvgk6aqvpajhxrrxxhts
VUE - https://youtu.be/wy9q22isx3u
PHP -https: //www.youtube.com/playlist? List = plwkjhjtqvabkomsX4HGWXBJZW4AB0CBAB
SQL- https://www.khanacademy.org/Computing/Computerprogramming/SQL
APIS - https://youtu.be/gzvsyjdk-us
Informatik aus Havard - https://www.youtube.com/playlist?list=plwkjhjtqvabmgw5fn5bqlwuug-8bdmabi
Informatik
Google Materials - https://material.io/design/
Was ist Blockchain? .
Zugänglichkeit
Richtlinien für Webinhalte Accessibility (WCAG) - https://www.w3.org/wai/standards-guidelines/wcag/
ADA-Checkliste (2019)-https://medium.com/@krisrivenburgh/the-ada-checklist-website-condiance-guidelines-for-2019-in-plain-english-123c1d58fad9
A11Y -Checkliste (siehe A11Y Newsletter) - https://a11yproject.com/checklist/
Web -Accessity für Entwickler - https://www.wuhcag.com/wcagchecklist/
15 Dinge, die Sie tun können, um Ihre Website-Barrierefreiheit zu verbessern-https://websitesetup.org/web-Accessibility-checklist/
Nur zum Spaß -
Verarbeitung - Eine Java -basierte Programmiersprache, die zum Erstellen von Animationen, Spielen und interaktiven Kunst verwendet wird - https://processing.org/
General Assembly- Ein weiteres Zertifikatort, aber auch einige kostenlose Dinge- https://generalassemb.ly/blog/free-fridays/
Entwickler und Technologiegemeinschaften
https://womeninwebdev.com/
https://www.hiretechladies.com/
Sich als Entwickler engagieren - https://www.pluralsight.com/courses/get-involved
Codenewbie- https://www.codenewbie.org/
Hackernoon- Ein Community-Blog, Lernressource usw.- https://hackernoon.com/
http://ladydev.org/ (Local Club in Des Moines, sie betreiben auch die Fläche515)
Jobbörsen
Vettery - https://www.vettery.com/candidate/tech
Triplebyte- https://tripbyte.com/
Angellist- Jobs von Start ups - https://angel.co/jobs
Wir arbeiten remote - https://weworkRemotely.com/
Würfel - https://www.dice.com/
Stack -Überlauf - https://stackoverflow.com/
Codepen - https://codepen.io/jobs/
AIGA -Designjobs - https://designjobs.aiga.org/
Behance - https://www.behance.net/joblist
Design Observer - https://designobserver.com/jobs/
Benutzeroberfläche, Webdesign, visuelles Design usw. In der magischen Welt des UX -Designs leben eine Vielzahl von Titeln, die im Grunde genommen gleich oder alle miteinander verbunden sind. Wenn Sie wirklich wollten, ist die Bestellung möglicherweise visueller Designer, Webdesigner, Benutzeroberflächendesigner, Interaktionsdesigner .... usw. (geht ziemlich schnell in UX).
UI ist nicht dasselbe wie UX. UX ist die Untersuchung des Designs und des Human-Computer-Interaktion und der Psychologie. UI befasst sich mit den visuellen Sachen.
Bleiben Sie im Bereich auf dem Laufenden, indem Sie Artikel von Orten wie lesen
Smashing Magazine, https://www.smashingmagazine.com/
Muzli, https://muz.li/
UX Planet, https://uxplanet.org/
Protypr, https://blog.prototypr.io/
UX Collective https://uxdesign.cc/
Neilsen Norman Group https://www.nngroup.com/
Mockplus https://www.mockplus.com/blog
Hey Designer https://heydesigner.com/
Designernachrichten https://www.designernews.co/
und mehr.
Nehmen Sie Online -Kurse und erhalten Sie Zertifikate von Orten wie CareerFoundry, Interaction Design Foundation, LinkedIn Learning und anderen. Lesen Sie mehr über die Optionen von UX Planet. https://careerfoundry.com/ ** https: //www.interaction-design.org/ (persönlicher Favorit
Starten Sie Ihr eigenes Blog und schreiben Sie über das, was Sie wissen und empfehlen. Werden Sie ein Vordenker in der Gemeinschaft.
Hören Sie sich Podcasts wie Defenders von User Experience, was mit UX und anderen los ist. Hier ist eine Liste der besten 25 UX-Podcasts von Mockplus für 2020.https: //www.mockplus.com/blog/post/ux-podcasts
Nehmen Sie an UX -Networking -Meetups teil. (Meetup. Com)
Sehen Sie sich YouTube -Kanäle und -Videos über UX an.
AJ & Smart
App -Design -Tipps
Der Futur
Caler Edwards
CareerFoundry
Dansky
Invision
Designcourse
Fluss
LinkedInlearning
Nngroup
Bleiben Sie auf dem neuesten Stand und sehen Sie sich Tutorials an, um Tools wie Skizze, Invision, Figma und andere UX-Tools oder Benutzerforschungstools zu verwenden.
Komplette Mock UX- und UI -Herausforderungen wie den Shecen UX -Generator, den guten Brief und die 100 -Tage -Dailyui Challenge. https://www.dailyui.co/ http://goodbrief.io/ https://sharpen.design/
Erfahren Sie mehr über Barrierefreiheit und abonnieren Sie Newsletter wie den A11yyweekly Newsletter.
Studiendesignsysteme. https://designsystemsrepo.com/design-systems/
Usabilität Studie studieren. https://www.usability.gov/
Studiendesign -Denken. Sie können zunächst einen Dokumentarfilm ansehen oder verschiedene Methologien wie von IDEO, D.SCHOOL, HCS, Design Council, Frog, Whatx4 oder Luma betrachten. http://www.designthinkingmovie.com/
Ressourcen in sozialen Medien teilen.
Treten Sie den Gruppen UX Facebook und LinkedIn bei. Folgen Sie Designer auf Twitter und Instagram.
Bleiben Sie auf dem Laufenden mit Trends in UX und dem Zustand von UX. https://trends.uxdesign.cc/
Verbessern Sie Ihr Portfolio weiter (finden Sie einige coole Ressourcen von der Website von Sarah Doody) und Fallstudien (finden Sie hier einen Vorlagengenerator). Studieren Sie andere UX -Portfolios. https://www.sarahdoody.com/ https://design-stories.herokuapp.com/ux-case-study-template
Finden Sie einen Mentor oder werden Sie ein Mentor.
Lesen Sie Bücher über UX/UI und andere ähnliche Themen. Wie: "Mach mich nicht zum Nachdenken", "Das Design alltäglicher Dinge", "Die Elemente der Benutzererfahrung", "ein Projektleitfaden für UX", "Lean UX" und andere. https://www.mockplus.com/blog/post/ux-design-books
Tiefe Eintauchen in andere Untergruppen von UX -wie Interaktionsdesign, Informationsarchitektur, visuelles Design, UX -Forschung, UI, UX -Schreiben usw.
Besuchen Sie den IXDA World Conference Day kostenlos oder andere Konferenzen. https://ixda.org/
Schließen Sie sich lokalen Clubs, Organisationen und anderen Gemeinschaftsgruppen an.
Werden Sie Redner oder beginnen Sie mit der Ausrichtung von Workshops.
Machen Sie einen College -Abschluss in HCI, UX, UI oder anderen ähnlichen Programmen.
Freiwilligen Sie Ihre Fähigkeiten oder Freiberufler freiwillig.
Üben, Üben, Üben. Erstellen Sie Leidenschaftsprojekte und Fallstudien in Ihrer Freizeit.
