Learn Front End UI Design 2020
1.0.0
學習編程/前端開發（HTML/CSS/JavaScript）
前端開發人員與後端開發人員的後端開發人員不同，可以操縱瀏覽器以創建網頁和其他交互式內容。要學習前端開發，您可以從HTML，然後是CSS開始，然後再開始JavaScript。一旦學習了這些，您就可以繼續進行其他框架（bootstrap，react，angular，vue等）之類的東西。一旦學習了這三個的基礎知識，您就可以開始學習。框架使生活更輕鬆。
一個好的程序員不必記住一切。開源代碼為Web提供動力，並允許程序員免費使用和交換代碼（請查看“掌握前端”下方的一些貢獻的開源指南）。如果您被困在Google上。您可能會找到答案。
那裡有一百萬個教程。請注意不要陷入所謂的“教程地獄”中，您只是無休止地觀看教程，但從未學到任何具體的東西。最好的學習方法是做。這樣的鍛煉網站派上用場，但您也想考慮要建立的項目。在Github上託管這些項目的投資組合。或查找項目的項目。
使用Google Chrome開發人員工具，您可以檢查任何網站背後的代碼或進行不活躍的更改。像Firefox這樣的其他瀏覽器也具有這些工具。成為你最好的朋友。
YouTube總體上是一個非常好的資源。您想知道的任何東西。它可能在那裡。像Wes Bos一樣，許多受人尊敬的程序員都在那裡。還要在Twitter上關注其他開發人員。
YouTube主列表-https：//github.com/erikch/devyoutubelist
要知道的另一個重要的事情是，您不必知道所有的事情就可以找到第一份工作或工作。編程總是在變化。一項好工作將使您在工作中學習，希望付錢給您學習一些東西，並教您不需要知道的內容。
問問題 - 毫無疑問是一個愚蠢的問題。首先使用Google。如果失敗了，請通過論壇，堆棧溢出，Facebook組或Twitter與其他程序員聯繫。有人會很樂意為您提供幫助。
我怎麼知道我準備好了？
當您可以創建一個基本網站並擁有幾個不同項目的投資組合時。
帶有靜態和原型設計的網站
展示您的代碼的github
如果您在已經居住的網站上工作，則不需要GitHub。但是它們非常適合那些不活的項目。
無論您做什麼，自由職業者或志願者項目都將幫助您獲得EXP，以防您無法獲得實習。但是，開發人員實習通常向畢業的人開放，因為很多人職業生涯swtich。您也可以開始應用於初級職位。查看開源項目，配對的編程以及與朋友的糾纏。
編程資源
（其他列表）
https://www.womenwhocode.com/resources
http://codingheroes.io/resources/
要點 -
GitHub-在線代碼存儲庫，以展示和加入開源項目
git＆github教程-https：//youtu.be/swyqp7iy_tc
codepen-探索和創建瀏覽器-https：//codepen.io/dashboard/
Sublime文本 - 簡單，免費的代碼編輯器-https：//www.sublimetext.com/
VS代碼 - 是當前的，更高級的，免費的代碼編輯器-https：//code.visualstudio.com/
Chrome Dev工具 - 直接在瀏覽器中打開，以測試，Diaogognose和Explore網站-https：//developers.google.com/web/tools/chrome-devtools
開發人員的博客-https：//dev.to/
Stack Overflow非常適合查找答案和內容，但眾所周知，社區對新手或女性不友好-https：//stackoverflow.com/
前端新聞 - 保持最新 - https：//frontendfront.com/
前端焦點 - 與此新聞通訊保持最新狀態-https：//frontendfoc.us/
基本話題和概念
互聯網和計算機的工作方式-https：//www.khanacademy.org/computing/computer-science/computers-andcomputers-and-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-responsive-web-design/
交叉瀏覽器開發-https：//developer.mozilla.org/en-us/docs/learn/learn/tools_and_testing/cross_browser_testing/introduction
敏捷方法論-https：//www.youtube.com/playlist?list=plwkjhjtqvabm0gpnunwf4pr4xv8i3i3geh--
網頁速度測試-https：//tools.pingdom.com/
保羅·福特（Paul Ford）的《什麼是代碼10,000單詞在線小說》 -https：//www.bloomberg.com/graphics/2015-paul-ford-what-is-code/
調試初學者 - 調試是查找和解決錯誤的過程-https：//docs.microsoft.com/en-us/visalstudio/debugger/debugger/debugging-absolute-beginner-
掌握前端
100天的代碼 - 其背後的想法是可靠的，重新的，問責制和進度-https：//www.100daysofcode.com/
網絡技能指南-https：//andreasbm.github.io/web-skills/
w3schools-學習編程並在上面查找內容 - 參考資源 - https://www.w3schools.com/
*Mozilla開發人員的網絡 - 就像W3Schools一樣，但更成熟，更深入的最新姐妹-https：//developer.mozilla.org/en-us/
前端開發人員在2019年使用的工具-https：//ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results
路線圖 - 2020年成為前端開發人員指南https://roadmap.sh/frontend
前端開發人員2020指南-https：//youtu.be/sppsnbqvt0k
面試前端的問題（即您可以回答這些問題嗎？）
前端開發人員訪談問題和答案-https：//www.fullstack.cafe/blog/front-end-end-developer-interview-questions
插圖開發 - 說明開發人員概念-https：//illustrated.dev/
採訪蛋糕 - 學習CS以及如何解決程序員訪談-https：//www.interviewcake.com/
編程訪談YouTube -https：//www.youtube.com/playlist?list=plwkjhjtqvablv09g3sfgrmser0jnkqmj9
貢獻開源的定義指南-https：//www.freecodecamp.org/news/the-definistive-guide-guide-to-contributing-to-open-source-900d5f9f2282/
如何做出貢獻-https：//github.com/firstcontributions/first-contributions
很棒的PR列表（拉請求）-https：//github.com/mungell/awesome-for-beginners
僅第一個計時器 - 首次為開源項目做出貢獻的資源-https：//www.firsttimersonly.com/
配對編程的優缺點（當您和隊友在同一代碼上一起工作時）-https：//www.freecodecamp.org/news/the-benefits-and-pitfits-and-pitfalls-of-pair-pair-pair-pair-programming-in-the-workplace-workplace-workplace-e68c3ed3c81f/
內容管理系統
WordPress-有很多工作需要您知道如何使用這些工作-WordPress.org / wordpress.com
Drupal
WebFlow（較新，但周圍有很多談話）
教程和其他人
Freeecode Camp-您可以使用的最佳免費資源之一-https：//www.freecodecamp.org/
Khan Academy-擁有出色的編程課程，也可以查看他們的計算機科學內容-https：//www.khanacademy.org/computing/computer-promporming
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
Coursera
技能共享
練習
練習 - 練習學習編程-https：//exercism.io/
EDABIT-學習互動挑戰的編碼-https：//edabit.com/
代碼大戰 - 每日編程挑戰-https：//www.codewars.com/
html/css/javaScript細節
html崩潰課程-https：//youtu.be/pqn-pnxpavg; https://youtu.be/ub1o30fr-ee
HTML和CSS書籍 - 一本流行的書籍，其中包含在線代碼示例-http：//www.htmlandcssbook.com/
CSS速效課程-https：//www.youtube.com/watch?v=yfoy53qxeni
CSS技巧 - CSS和其他前端開發的博客-https：//css-tricks.com/
CSS Podcast- https://pod.link/thecspodcast
CSS生成器 - 快速生成CSS -http：//css3generator.com/
CSS Diner -https：//flukeout.github.io/
CSS網格-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/
CODROPS-涼爽編碼的片段-http：//tympanus.net/codrops/
雄辯的JavaScript-一本閱讀書籍（帶有瀏覽器編程實踐）https://eloquentjavascript.net/eloquent_javascript.pdf
JavaScript和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：//vanillawebprojects.com/
完整的JavaScript基礎視頻-https：//youtu.be/pkzno7mfnfg
html在12分鐘內-https：//youtu.be/bwpmsssvdpk
CSS在12分鐘內-https：//youtu.be/0afzj1g0bie
JavaScript 12分鐘-https：//youtu.be/ukg_u3cnjwi
更高級的代碼和TopCis和計算機科學 -
Google開發人員 - 教程和其他資源-https：//developers.google.com/
選擇一個JS框架開始（React，Angular，Vue）。您選擇哪個公司並不重要，但是有些公司比其他公司更喜歡它們。反應是最受歡迎的，其次是角，然後是VUE。並不是很多人都知道Vue，但實際上確實是在尋找它。因此，也許反應或角度和vue在一起可能是一個強烈的選擇。
前端框架的歷史 - https://youtu.be/kzeog8ytfae
REECT -https：//www.youtube.com/playlist?list=plwkjhjtqvabkardmazoartnz1amwnwmvc; https://www.youtube.com/playlist?list = plc3y8-rfhvwgg3vayjghgnmodb54rxok3
angular -https：//www.youtube.com/playlist？ list = plwkjhjtqvablnvgkkkk6aqvpapajhxrrxxhts
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
來自Havard的計算機科學-https：//www.youtube.com/playlist?list=plwkjhjtqvabmgw5fn5bqlwuug-8bdmabi
計算機科學-https：//www.youtube.com/playlist?list=plwkjhjtqvabn5emq3rrg8gebqkhf_5vxd
Google材料-https：//material.io/design/
什麼是區塊鏈？ -https：//www.freecodecamp.org/news/what-is-blockchain-and-how-does-it-work/
可訪問性
Web內容可訪問性指南（WCAG）-https：//www.w.org/wai/standards-guidelines/wcag/
ADA清單（2019）-https：//medium.com/@krisrivenburgh/the-ada-checklist-website-compliance-guidelines-guidelines-for-2019-in-plain-plain-English-123c1d58fad9
A11Y清單（查看A11Y新聞通訊）-https：//a11-尼11-訪問
開發人員的Web可訪問性-https：//www.wuhcag.com/wcag-checklist/
您可以採取15件事來改善網站可訪問性-https：//websitesetup.org/web-accorcesibility-Cecklist/
只是為了好玩 -
處理 - 一種基於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/（得梅因的當地俱樂部，他們也經營地區515）
工作委員會
獸醫-https：//www.vettery.com/candidate/tech
triplebyte- https://triplebyte.com/
Angellist-啟動UPS的工作-https：//angel.co/jobs
我們遠程工作 - https：//weworkremotely.com/
骰子-https：//www.dice.com/
堆棧溢出-https：//stackoverflow.com/
codepen -https：//codepen.io/jobs/
AIGA設計工作-https：//designjobs.aiga.org/
Behance -https：//www.behance.net/joblist
設計觀察者-https：//designobserver.com/jobs/
在UX設計的神奇世界中，用戶界面，Web設計，視覺設計等，存在許多基本相同或完全相關的標題。如果您真的願意，則訂單可能是視覺設計師，Web Designer，用戶界面設計器，交互設計器....等。 （很快進入UX）。
UI與UX不同。 UX是設計和人力計算機的研究和心理學的研究。 UI處理視覺內容。
通過從諸如
粉碎雜誌，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）集團https://www.nngroup.com/
MockPlus https://www.mockplus.com/blog
嘿設計師https://heydesigner.com/
設計師新聞https://www.designernews.co/
還有更多。
參加在線課程，並從CareerFoundry，Interaction Design Foundation，LinkedIn Learning等地方獲得證書。閱讀有關UX Planet選項的更多信息。 https://careerfoundry.com/ ** https：//www.interaction-design.org/（個人喜歡，這是我正在使用的）
啟動自己的博客，並撰寫有關您所知道和推薦的內容。成為社區的思想領袖。
收聽播客，例如用戶體驗捍衛者，UX出了什麼問題等等。這是2020.https：//www.mockplus.com/blog/post/ux-podcasts的最佳25個UX播客列表
參加UX網絡聚會。 （Meetup。Com）
觀看有關UX的YouTube頻道和視頻。
AJ和Smart
應用設計提示
未來
卡勒·愛德華茲（Caler Edwards）
職業生涯
丹斯基
Invision
DesignCourse
通量
LinkedInlearning
nngroup
保持最新狀態，並觀看有關使用草圖，Invision，Figma和其他UX工具或用戶研究工具等工具的教程。
完整的模擬UX和UI挑戰，例如銳化的UX發電機，良好的簡介和100天的DailyUI挑戰。 https://www.dailyui.co/ http://goodbrief.io/ https://sharpen.design/
了解可訪問性並訂閱A11YWeekly新聞通訊等新聞通訊。
研究設計系統。 https://designsystemsrepo.com/design-systems/
研究可用性。 https://www.usibaly.gov/
研究設計思維。您可以首先觀看紀錄片或查看來自IDEO，D.SCHOOL，HCS，設計委員會，青蛙，Whatx4或Luma的不同選擇。 http://www.designthinkingmovie.com/
在社交媒體上共享資源。
加入UX Facebook和LinkedIn組。在Twitter和Instagram上關注設計師。
保持UX和UX狀態的趨勢保持最新狀態。 https://trends.uxdesign.cc/
繼續改善您的投資組合（從Sarah Doody的網站中找到一些很酷的資源）和案例研究（此處找到模板生成器）。研究其他UX投資組合。 https://www.sarahdoody.com/ https://design-stories.herokuapp.com/ux-case-study-template
尋找導師或成為導師。
閱讀有關UX/UI和其他類似主題的書籍。就像“不要讓我思考”，“日常事物的設計”，“用戶體驗的要素”，“ UX項目指南”，“精益UX”等。 https://www.mockplus.com/blog/post/ux-design-books
深入研究其他UX的其他子集，例如交互設計，信息體系結構，視覺設計，UX研究，UI，UX寫作等。
免費參加IXDA世界會議日或其他會議。 https://ixda.org/
加入當地俱樂部，組織和其他社區團體。
成為演講者或開始舉辦研討會。
獲得HCI，UX，UI或其他類似課程的大學學位。
志願您的技能或自由職業者。
練習，練習，練習。在業餘時間創建激情項目和案例研究。
