Learn Front End UI Design 2020
1.0.0
تعلم البرمجة/تطوير الواجهة الأمامية (HTML/CSS/JavaScript)
يختلف المطورون الأماميون عن Devs الخلفية في أن المطورين الأماميين يعالجون المتصفحات لإنشاء صفحات ويب وغيرها من المحتوى التفاعلي. لتعلم التطوير الأمامي ، تبدأ مع HTML ، ثم CSS ، ثم JavaScript. بمجرد تعلمها ، يمكنك الانتقال إلى أشياء أخرى مثل الأطر (Bootstrap ، React ، Angular ، Vue ، إلخ). الأطر يمكنك البدء في التعلم بمجرد تعلم أساسيات الثلاثة. الأطر تجعل الحياة أسهل.
المبرمج الجيد لا يجب أن يتذكر كل شيء. تعمل رمز المصدر المفتوح على تشغيل الويب ويسمح للمبرمجين باستخدام رمز وتبادله مجانًا (راجع بعض أدلة المصدر المفتوحة المساهمة تحت "Mastering Front Lind"). إذا كنت عالقًا على شيء Google. ربما ستجد الجواب.
هناك مليون برامج تعليمية هناك. احرص على عدم التعثر في ما يعرف باسم "الجحيم التعليمي" حيث تشاهد دروسًا إلى ما لا نهاية ولكن لا تتعلم أي شيء ملموس. أفضل طريقة للتعلم هي العمل. مواقع التمرين مثل هذا في متناول يدي ، لكنك تريد أيضًا التفكير في مشاريع للبناء. استضافة تلك المشاريع على github لمحفظتك. أو البحث عن project tutortials.
باستخدام أدوات Google Chrome Developer ، يمكنك فحص الكود خلف أي موقع ويب أو إجراء تغييرات غير محددة. المتصفحات الأخرى مثل Firefox لديها أيضا هذه الأدوات. اجعلها أفضل صديق لك.
يوتيوب هو مورد رائع حقا بشكل عام. أي شيء تريد معرفته. ربما هناك. هناك الكثير من المبرمجين المحترمين بشكل جيد مثل Wes BOS. أيضا اتبع المطورين الآخرين على تويتر.
قائمة YouTube الرئيسية - https://github.com/erikch/devyoutubelist
الشيء الآخر المهم الذي يجب معرفته هو أنه لا يتعين عليك معرفة كل شيء للحصول على وظيفتك الأولى أو وظائفك بعد ذلك. البرمجة تتغير دائما. ستتيح لك وظيفة جيدة أن تتعلم في الوظيفة ، ونأمل أن تدفع لك لتعلم بعض الأشياء ، وستعلمك ما لا تحتاج إلى معرفته بالفعل.
اطرح أسئلة - لا سؤال هو غبي. استخدم Google أولاً. إذا فشل ذلك ، فتواصل مع المبرمجين الآخرين عبر المنتديات أو Stack Overflow أو Facebook أو Twitter. شخص ما سيكون سعيدا لمساعدتك.
كيف أعرف عندما أكون مستعدًا؟
عندما يمكنك إنشاء موقع ويب أساسي والحصول على مجموعة من مشاريع مختلفة.
موقع الويب مع تصميمات ثابتة ونماذج أولية
github يعرض الرمز الخاص بك
إذا كنت تعمل على موقع ويب مباشر بالفعل ، فلن تحتاج إلى github لذلك. لكنها جيدة للمشاريع غير المباشرة.
بغض النظر عما تفعله ، ستساعدك المشاريع المستقلة أو المتطوعين على كسب EXP في حال لم تتمكن من الحصول على تدريب داخلي. لكن التدريب على المطورين عادة ما تكون مفتوحة للناس خارج المدرسة لأن الكثير من الناس مهنيين. يمكنك أيضًا البدء في التقدم إلى مواقع المستوى المبتدئين. تحقق من مشاريع المصدر المفتوح ، والبرمجة المقترنة ، و colloboration مع صديق.
موارد البرمجة
(قوائم أخرى)
https://www.womenwhocode.com/resources
http://codingeroes.io/resources/
أساسيات-
Github - مستودع عبر الإنترنت من الكود لعرضه والانضمام إليه في مشاريع مفتوحة المصدر
Git & Github Tutorial - https://youtu.be/swyqp7iy_tc
Codepen- استكشاف وإنشاء أشياء من متصفحك - https://codepen.io/dashboard/
نص سامي - محرر رمز سهل ومجاني - https://www.sublimetext.com/
VS Code- هو محرر التعليمات البرمجية الحالي ، أكثر تقدماً ، مجانًا - https://code.visualstudio.com/
أدوات Dev Chrome - افتح مباشرة في متصفحك لاختبار ومواقع Diagognose واستكشافها - https://developers.google.com/web/tools/chrome-devtools
مدونة للمطورين - https://dev.to/
يعد Stack Overflow رائعًا للبحث عن الإجابات والأشياء ، ولكن من المعروف أن المجتمع ليس ودودًا للمبتدئين أو النساء - https://stackoverflow.com/
أخبار الواجهة الأمامية - ابق على اطلاع دائم - https://frontendfront.com/
Front End Focus - ابق على اطلاع على هذه النشرة الإخبارية - https://frontendfoc.us/
الموضوعات والمفاهيم الأساسية
كيف تعمل الإنترنت وأجهزة الكمبيوتر-https://www.khanacademy.org/computing/computer-science/computers-ing-internet-code-org#internet-works-intro
ما هو علوم الكمبيوتر؟ -https://www.freecodecamp.org/news/what-is-computer-programming-defining-software-development/
تصميم الويب المتجاوب-https://www.smashingmagazine.com/2011/01/guidelines-for-sponsive-web-design/
تطوير المتصفح المتقاطع - https://developer.mozilla.org/en-us/docs/learn/tools_and_testing/cross_browser_testing/introduction
منهجية Agile - https://www.youtube.com/playlist؟list=plwkjhjtqvabm0gpnunwf4p4xv8i3geh-
اختبار سرعة صفحة الويب - https://tools.pingdom.com/
Paul Ford's What is Code 10،000 Word Online Novel-https://www.bloomberg.com/graphics/2015-paul-ford-hat-is-code/
تصحيح الأخطاء للمبتدئين-تصحيح الأخطاء هو عملية العثور على الأخطاء وإصلاحها-https://docs.microsoft.com/en-us/visualstudio/debugger/debugging-absolute-beginners؟view=vs-2019
إتقان الواجهة الأمامية
100 يوم من التعليمات البرمجية - الفكرة وراءها هي صلبة ، الزواحف ، المساءلة ، والتقدم - https://www.100daysofcode.com/
دليل لمهارات الويب - https://andreasbm.github.io/web-skills/
W3Schools- تعلم البرمجة وابحث عن موارد مرجعية- https://www.w3schools.com/
*شبكة مطور Mozilla -مثل W3Schools ، ولكن الأكثر نضجًا ، وأكثر انتكاسًا ، أخت -https: //developer.mozilla.org/en-us/
الأدوات التي تستخدمها Devs في عام 2019-https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-Results
دليل طريق الطريق لتصبح DEV واجهة أمامية في عام 2020 https://roadmap.sh/frontend
دليل المطور الأمامي 2020 - https://youtu.be/sppsnbqvt0k
أسئلة المقابلة لـ Front-End (أي هل يمكنك الإجابة على هذه؟) https://github.com/h5bp/front-end-developer-
أسئلة وأجوبة مقابلة مطور الواجهة الأمامية-https://www.fullstack.cafe/blog/front-end-developer-interview-questions
DEVIRATION DEV - توضيح مفاهيم المطورين - https://illustrate.dev/
كعكة المقابلة - تعلم CS وكيفية حل المقابلات المبرمجة - https://www.interviewcake.com/
مقابلة البرمجة youtube - https://www.youtube.com/playlist؟list=plwkjhjtqvablv09g3sfgrmser0jnkqmj9
الدليل المحدد للمساهمة في المصدر المفتوح-https://www.freecodecamp.org/news/the-definitive-guide-to-contributing-to-open-source-900d5f9f2282/
كيفية تقديم مساهمات - https://github.com/firstContributions/first-contributions
قائمة رائعة من العلاقات العامة (طلب السحب)-https://github.com/mungell/awesome-for-beginners
الموقت الأول فقط - مورد لأول مرة تساهم في فتح المشاريع المصدر - https://www.firsttimersonly.com/
إيجابيات وسلبيات البرمجة المقترنة (عندما تعمل أنت وزميل في الفريق معًا على نفس الرمز)-https://www.freecodecamp.org/news/the-benefits-and-pitfalls-of-pair-programming-in-the-workplace-e68c3ed3c81f/
أنظمة إدارة المحتوى
WordPress- هناك الكثير من الوظائف التي تتطلب منك معرفة كيفية العمل مع هذه- WordPress.org / WordPress.com
دروبال
WebFlow (أحدث ولكن لديه الكثير من الحديث حوله)
دروس وغيرها
Freecode Camp- واحدة من أفضل الموارد المجانية التي يمكنك استخدامها - https://www.freecodecamp.org/
أكاديمية خان - لديها دروس برمجة رائعة وتحقق
Codeacademy- مفضل ولكن عليك أن تدفع الآن في نقطة معينة - https://www.codecademy.com/
الماجستير في الواجهة الأمامية - تعلم التطوير الأمامي - https://frontendmasters.com/
udemy - تحقق من دوراتهم المجانية ثم انتظروا المبيعات في فصولهم - https://www.udemy.com/courses/free/
ندوات الويب الفكرية- لديها مجموعة من ندوات المبتدئين المجانية- https://www.thinkful.com/webinars/
Tree House - موقع تبرز/محفظة/درجة رائعة ولكن يمكن أن يكون الثمن - https://teamtreehouse.com/
Hackr.io- دروس وتعلم آخر - https://hackr.io/
egghead - دروس - https://egghead.io/
LinkedInlearning
كورسيرا
Skillshare
تمارين
التمارين - تعلم البرمجة مع التمارين - https://exercism.io/
Edabit - تعلم الترميز مع التحديات التفاعلية - https://edabit.com/
Code Wars - تحديات البرمجة اليومية - https://www.codewars.com/
HTML/CSS/JavaScript تفاصيل
HTML Crash Courses - https://youtu.be/pqn-pnxpavg ؛ https://youtu.be/ub1o30fr-ee
HTML و CSS Book - كتاب شهير مع أمثلة رمز عبر الإنترنت - http://www.htmlandcssbook.com/
CSS Crash Course - https://www.youtube.com/watch؟v=yfoy53qxeni
CSS Tricks - مدونة لـ CSS وغيرها من Dev - https://css-tricks.com/
CSS Podcast- https://pod.link/thecsspodcast
مولد CSS - قم بإنشاء 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-https://css-tricks.com/the-css-box-model/
Bootstrap - A CSS ، إطار عمل أمامي - https://getbootstrap.com/
قصاصات الترميز الباردة - http://tympanus.net/codrops/
JavaScript البليغ - كتاب قراءة (مع ممارسة برمجة المتصفح) https://eloquentjavascript.net
JavaScript and Jquery - كتاب شهير مع أمثلة رمز - http://www.javaScriptbook.com/
JSlint- "lints" هي برامج تجد مشاكل في الكود الخاص بك - http://www.jslint.com/
JavaScript30 - إنشاء 30 مشاريع مختلفة من الفانيليا JavaScript - https://javaScript30.com/
المبتدئين JavaScript - دورة مدفوعة من قبل Wes Bos - https://beginnerjavaScript.com/
Just JavaScript - رسالة إخبارية تشرح JavaScript - https://justjavascript.com/
مشاريع Vanilla JavaScript - +20 مشاريع JavaScript العادية - https://vanillawebrojects.com/
Full JavaScript Foundations Video - https://youtu.be/pkzno7mfnfg
html في 12 دقيقة - https://youtu.be/bwpmsssvdpk
CSS في 12 دقيقة - https://youtu.be/0afzj1g0bie
JavaScript في 12 دقيقة - https://youtu.be/ukg_u3cnjwi
رمز أكثر تقدمًا وعلوم الكمبيوتر وعلوم الكمبيوتر-
مطورو Google - دروس وموارد أخرى - https://developers.google.com/
اختر إطار عمل JS واحد للبدء بـ (React ، Angular ، Vue). لا يهم حقًا الذي تختاره ولكن بعض الشركات تفضلها على الآخرين. React هو الأكثر شعبية ، تليها الزاوي ، ثم Vue. لا يعرف الكثير من الناس Vue ولكنه يتم البحث عنه حقًا بالفعل. لذلك ربما يكون الرد أو الزاوي و Vue معًا خيارًا قويًا.
تاريخ الأطر الأمامية- 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
علوم الكمبيوتر من Havard - https://www.youtube.com/playlist؟list=plwkjhjtqvabmgw5fn5bqlwuug-8bdmabi
علوم الكمبيوتر - https://www.youtube.com/playlist؟list=plwkjhjtqvabn5emq3rrg8gebqkhf_5vxd
مواد Google - https://material.io/design/
ما هو blockchain؟ -https://www.freecodecamp.org/news/what-is-blockchain--how-does-it-work/
إمكانية الوصول
إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) - https://www.w3.org/wai/standards-guidelines/wcag/
قائمة مراجعة ADA (2019)-https://medium.com/@krisrivenburgh/the-ada-checklist-website-compliance-guidelines-for-2019-plain-english-123c1d58fad9
قائمة مراجعة A11Y (تحقق من النشرة الإخبارية A11Y) - https://a11yproject.com/checklist/
إمكانية الوصول إلى الويب للمطورين - https://www.wuhcag.com/wcag-checklist/
15 أشياء يمكنك القيام بها لتحسين إمكانية الوصول إلى موقع الويب الخاص بك-https://websitesetup.org/web-accessibility-checklist/
فقط للمتعة -
المعالجة - لغة برمجة تعتمد على Java تستخدم لإنشاء الرسوم المتحركة والألعاب والفن التفاعلي - https://processing.org/
الجمعية العامة- مكان شهادة آخر ولكن يحتوي أيضًا على بعض الأشياء المجانية- https://generalassemb.ly/blog/free-fridays/
المطورين والمجتمعات التقنية
https://womeninwebdev.com/
https://www.hiretechladies.com/
المشاركة كمطورين - https://www.pluralsight.com/courses/get-involved
CodeNewbie- https://www.codenewbie.org/
Hackernoon- مدونة مجتمعية ، مورد تعليمي ، إلخ .- https://hackernoon.com/
http://ladydev.org/ (النادي المحلي في دي موين ، يديرون أيضًا Area515)
مجالس الوظائف
Vettery - https://www.vettery.com/candidate/tech
Triplebyte- https://triplebyte.com/
Angellist- Jobs من ups ups - https://angel.co/jobs
نحن نعمل عن بُعد - https://weworkremotely.com/
DICE - https://www.dice.com/
stack overflow - https://stackoverflow.com/
Codepen - https://codepen.io/jobs/
وظائف تصميم AIGA - https://designjobs.aiga.org/
Behance - https://www.behance.net/joblist
مراقب التصميم - https://designobserver.com/jobs/
واجهة المستخدم ، وتصميم الويب ، والتصميم المرئي ، وما إلى ذلك في العالم السحري لتصميم UX ، هناك مجموعة كبيرة من العناوين التي ترتبط بشكل أساسي أو كلها ذات الصلة ببعضها البعض. إذا كنت ترغب حقًا في ذلك ، فقد يكون الطلب مصممًا مرئيًا ، مصمم ويب ، مصمم واجهة المستخدم ، مصمم التفاعل .... إلخ. (يذهب إلى UX بسرعة كبيرة).
واجهة المستخدم ليست هي نفسها UX. UX هي دراسة التصميم والتفاعل بين الإنسان والحاسوب وعلم النفس. واجهة المستخدم يتعامل مع المواد المرئية.
ابق على اطلاع دائم في هذا المجال من خلال قراءة مقالات من أماكن مثل
مجلة Smashing ، https://www.smashingmagazine.com/
Muzli ، https://muz.li/
UX Planet ، https://uxplanet.org/
protypr ، https://blog.prototypr.io/
ux collective https://uxdesign.cc/
مجموعة نيلسن نورمان https://www.nngroup.com/
mockplus https://www.mockplus.com/blog
مرحبًا مصمم https://heydesigner.com/
Designer News https://www.designernews.co/
وأكثر.
خذ دروسًا عبر الإنترنت واحصل على شهادات من أماكن مثل CareerFoundry ، ومؤسسة تصميم التفاعل ، و LinkedIn Learning وغيرها. اقرأ المزيد عن الخيارات من UX Planet. https://careerfoundry.com/ ** https: //www.interaction-design.org/ (الشخص المفضل ، هذا ما أستخدمه)
ابدأ مدونتك الخاصة واكتب عما تعرفه وتوصي به. كن قائدًا فكريًا في المجتمع.
استمع إلى podcasts مثل Defenders تجربة المستخدم ، ما هو الخطأ في UX ، وغيرهم. فيما يلي قائمة بأفضل 25 Podcasts من Mockplus لعام 2020.https: //www.mockplus.com/blog/post/ux-podcasts
حضور Meetups شبكات UX. (Meetup. com)
شاهد قنوات YouTube ومقاطع الفيديو حول UX.
AJ و SMART
نصائح تصميم التطبيق
فوتور
كالير إدواردز
CareerFoundry
دانسكي
Invision
DesignCourse
تدفق
LinkedInlearning
nngroup
ابق على اطلاع دائم وشاهد البرامج التعليمية حول استخدام أدوات مثل Sketch و Invision و Figma وأدوات UX الأخرى أو أدوات أبحاث المستخدم.
إكمال تحديات UX و UI MOCK مثل مولد UX Sharpen ، The Good Brief ، وتحدي Dailyui الذي 100 يوم. https://www.dailyui.co/ http://goodbrief.io/ https://sharpen.design/
تعرف على إمكانية الوصول والاشتراك في النشرات الإخبارية مثل النشرة الإخبارية A11yweekly.
أنظمة تصميم الدراسة. https://designsystemsrepo.com/design-systems/
دراسة قابلية الاستخدام. https://www.usability.gov/
دراسة التفكير في التصميم. يمكنك البدء بمشاهدة فيلم وثائقي أو النظر إلى الميثولوجيا المختلفة مثل من IDEO أو D.School أو HCS أو CONCTION COUNCITION أو FROG أو Whatx4 أو LUMA. http://www.designthinkingmovie.com/
مشاركة الموارد على وسائل التواصل الاجتماعي.
انضم إلى مجموعات UX Facebook و LinkedIn. اتبع المصممين على Twitter و Instagram.
ابق على اطلاع مع الاتجاهات في UX وحالة UX. https://trends.uxdesign.cc/
استمر في تحسين محفظتك (ابحث عن بعض الموارد الرائعة من موقع سارة دودي) ودراسات الحالة (ابحث عن مولد قالب هنا). دراسة محافظ UX الأخرى. https://www.sarahdoody.com/ https://design-stories.herokuapp.com/ux-case-study-template
ابحث عن معلمه أو يصبح مرشدًا.
اقرأ الكتب على UX/UI وغيرها من الموضوعات المماثلة. مثل ، "لا تجعلني أفكر" ، "تصميم الأشياء اليومية" ، "عناصر تجربة المستخدم" ، "دليل مشروع إلى UX" ، "Lean UX" ، وغيرها. https://www.mockplus.com/blog/post/ux-design-books
الغوص العميق في مجموعات فرعية أخرى من UX مثل تصميم التفاعل ، بنية المعلومات ، التصميم المرئي ، أبحاث UX ، واجهة المستخدم ، الكتابة UX ، إلخ.
حضور يوم المؤتمر العالمي IXDA للمؤتمرات المجانية أو غيرها من المؤتمرات. https://ixda.org/
انضم إلى الأندية المحلية والمنظمات ومجموعات المجتمع الأخرى.
كن متحدثًا أو ابدأ في استضافة ورش العمل.
الحصول على شهادة جامعية في HCI أو UX أو واجهة المستخدم أو غيرها من البرامج المماثلة.
تطوع مهاراتك أو مستقلة.
الممارسة والممارسة والممارسة. إنشاء مشاريع العاطفة ودراسات الحالة في وقت فراغك.
