Learn Front End UI Design 2020
1.0.0
プログラミング/フロントエンド開発（HTML/CSS/JavaScript）を学ぶ
フロントエンド開発者は、フロントエンド開発者がブラウザを操作してWebページやその他のインタラクティブコンテンツを作成するという点で、バックエンド開発者とは異なります。フロントエンドの開発を学ぶには、HTML、次にCSS、そしてJavaScriptから始めます。それらを学んだら、フレームワーク（ブートストラップ、反応、角度、ヴォエなど）などの他のものに進むことができます。フレームワーク3の基本を学んだら、学習を開始できます。フレームワークは生活を楽にします。
優れたプログラマーは、すべてを覚えておく必要はありません。オープンソースコードはWebにパワーを与え、プログラマーが無料でコードを使用および交換できるようにします（「マスタリングフロントエンド」の下にあるいくつかの貢献するオープンソースガイドをチェックしてください）。あなたが何かをグーグルに貼り付けているなら。あなたはおそらく答えを見つけるでしょう。
そこには百万のチュートリアルがあります。 「チュートリアルヘル」として知られているものにとらわれないように注意してください。そこでは、チュートリアルを際限なく視聴しますが、具体的なことを決して学ぶことはありません。学ぶための最良の方法は、することです。このようなエクササイズサイトは便利ですが、構築するプロジェクトについても考えたいと思います。ポートフォリオのGitHubでこれらのプロジェクトをホストします。または、プロジェクトの講師を調べます。
Google Chrome開発者ツールを使用して、Webサイトの背後にあるコードを検査したり、Lit Not Live変更を行ったりできます。 Firefoxのような他のブラウザにもこれらのツールがあります。それをあなたの親友にしてください。
YouTubeは一般的に本当に素晴らしいリソースです。あなたが知りたいことは何でも。おそらくそこにあります。多くの尊敬されるプログラマーがWes Bosのようにそこにいます。また、Twitterで他の開発者をフォローしてください。
YouTubeマスターリスト-https：//github.com/erikch/devyoutubelist
知っておくべき重要なことは、その後、最初の仕事や仕事を得るためにすべてを知る必要がないということです。プログラミングは常に変化しています。良い仕事はあなたが仕事で学ぶことを可能にし、うまくいけばいくつかのことを学ぶためにあなたにお金を払うことを可能にし、あなたがまだ知る必要のないことをあなたに教えます。
質問してください - 疑いの余地はありません愚かなものです。最初にGoogleを使用してください。それが失敗した場合は、フォーラム、スタックオーバーフロー、Facebookグループ、またはTwitterを介して他のプログラマーに連絡してください。誰かがあなたを喜んで助けてくれるでしょう。
準備ができたらどうやって知るの？
基本的なWebサイトを作成し、いくつかの異なるプロジェクトのポートフォリオを作成できる場合。
静的およびプロトタイプのデザインを備えたWebサイト
コードを紹介するgithub
すでにライブのウェブサイトで作業している場合、GitHubは必要ありません。しかし、彼らは生きていないプロジェクトに良いです。
あなたが何をしているかに関係なく、フリーランスやボランティアプロジェクトは、インターンシップを取得できない場合に備えてEXPを獲得するのに役立ちます。しかし、開発者のインターンシップは通常、学校の外にいる人々に開かれています。なぜなら、非常に多くの人々がキャリアを獲得しているからです。ジュニアレベルのポジションへの申請を開始することもできます。オープンソースプロジェクト、ペアのプログラミング、友人とのコロボレーションをご覧ください。
プログラミングリソース
（他のリスト）
https://www.womenwhocode.com/resources
http://codingheroes.io/resources/
エッセンシャル -
GitHub-オープンソースプロジェクトに紹介して参加するコードのオンラインリポジトリ
git＆githubチュートリアル-https：//youtu.be/swyqp7iy_tc
codepen-ブラウザから物を探索して作成する-https：//codepen.io/dashboard/
崇高なテキスト - 簡単で無料のコードエディター-https：//www.sublimetext.com/
vsコード - は、現在の、より高度な無料のコードエディター-https：//code.visualstudio.com/です。
Chrome Dev Tools -Browserで直接開いて、Webサイトをテスト、Diagognose、および探索するためにhttps：//developers.google.com/web/tools/chrome-devtools
開発者向けブログ-https：//dev.to/
スタックオーバーフローは答えやものを調べるのに最適ですが、コミュニティは初心者や女性に友好的ではないことが知られています-https：//stackoverflow.com/
フロントエンドニュース - 最新の状態-https：//frontendfront.com/
フロントエンドフォーカス - このニュースレターで最新情報を入手 - https：//frontendfoc.us/
重要なトピックと概念
インターネットとコンピューターの仕組み-https：//www.khanacademy.org/computing/computer-science/computers-and-internet-org#internet-works-intro
コンピューターサイエンスとは何ですか？ -https：//www.freecodecamp.org/news/what-is-computer-promgraming-defining-software-development/
レスポンシブWebデザイン-https：//www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
クロスブラウザー開発-https：//developer.mozilla.org/en-us/docs/learn/tools_and_and_testing/cross_browser_testing/introduction
アジャイル方法論-https：//www.youtube.com/playlist？list = plwkjhjtqvabm0gpnunwf4pr4xv8i3geh-
Webページ速度テスト-https：//tools.pingdom.com/
Paul FordのWhat Is Code 10,000 Word Online Novel-https：//www.bloomberg.com/graphics/2015-paul-ford-what-is-code/
初心者向けのデバッグ - デバッグはエラーを見つけて修正するプロセスです-https：//docs.microsoft.com/en-us/visualstudio/debugger/debugging-absolute-beginners？view=vs-2019
フロントエンドのマスター
100日間のコード - その背後にあるアイデアは堅実で、補充、説明責任、および進捗状況です-https：//www.100daysofcode.com/
Webスキルのガイド-https：//andreasbm.github.io/web-skills/
w3schools-プログラミングを学び、リファレンスリソースを調べる - https://www.w3schools.com/
*Mozilla Developer's Network -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://github.com/h5bp/front-developer-interview-questions
フロントエンドの開発者インタビューの質問と回答-https：//www.fullstack.cafe/blog/front-developer-interview-questions
イラストDEV-開発者の概念の図-https：//illustrated.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
PRの素晴らしいリスト（プル要求）-https：//github.com/mungell/awesome-for-beginners
最初のタイマーのみ - オープンソースプロジェクトに初めて貢献するためのリソース-https：//www.firsttimersonly.com/
ペアのプログラミングの長所と短所（あなたとチームメイトが同じコードで一緒に作業するとき）-https：//www.freecodecamp.org/news/the-benefits-and-pitfalls-of-pairplogramming-in-workplace-e68c3ed3c81f/
コンテンツ管理システム
WordPress-これらの作業方法を知る必要がある多くの仕事があります-WordPress.org / wordpress.com
Drupal
webflow（新しいが、それについて多くの話があります）
チュートリアルなど
FreeCode Camp-使用できる最高の無料リソースの1つ-https：//www.freecodecamp.org/
Khan Academy-優れたプログラミングレッスンがあり、コンピューターサイエンスのレッスンもチェックしています-https：//www.khanacademy.org/computing/computer-programming
CodeAcademy-お気に入りですが、特定の時点で今すぐ支払う必要があります-https：//www.codecademy.com/
フロントエンドマスター - フロントエンド開発を学ぶ-https：//frontendmasters.com/
udemy-無料のコースをチェックしてから、クラスの販売を待つ-https：//www.udemy.com/courses/free/
Thinkful Webinars-無料の初心者のウェビナーがたくさんあります - https://www.thinkful.com/webinars/
ツリーハウス - 優れた講師/ポートフォリオ/学位サイトですが、高価になる可能性があります-https：//teamtreehouse.com/
hackr.io-チュートリアルとその他の学習-https：//hackr.io/
Egghead -Tutorials -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 Book-オンラインでコードの例を掲載した人気の本-http：//www.htmlandcssbook.com/
CSSクラッシュコース-https：//www.youtube.com/watch?v=yfoy53qxeni
CSSトリック-CSSおよびその他のフロントエンド開発のブログ-https：//css-tricks.com/
CSS Podcast- https://pod.link/thecsspodcast
CSSジェネレーター - すばやくCSS -http：//css3generator.com/
CSSダイナー-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/
ブートストラップ-CSS、フロントエンドフレームワーク-https：//getBootstrap.com/
codrops-クールなコーディングのスニペット-http：//tympanus.net/codrops/
Eloquent JavaScript-読み取り本（ブラウザプログラミングの練習を含む）https://eloquentjavascript.net/eloquent_javascript.pdf
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：//vanillawebprojects.com/
完全なJavaScript Foundationsビデオ-https：//youtu.be/pkzno7mfnfg
12分でhtml -https：//youtu.be/bwpmsssvdpk
12分のCSS -https：//youtu.be/0afzj1g0bie
12分でJavaScript -https：//youtu.be/ukg_u3cnjwi
より高度なコードとTopCisとコンピューターサイエンス -
Google開発者 - チュートリアルやその他のリソース-https：//developers.google.com/
1つのJSフレームワークを選択して、（React、Angular、Vue）から始めます。どちらを選んだのかは重要ではありませんが、一部の企業は他の企業よりもそれらを好みます。 Reactは最も人気があり、Angularが続き、次にVueが続きます。多くの人がVueを知っているわけではありませんが、実際には実際に求められています。したがって、おそらく反応や角度とvueが一緒になって強い選択かもしれません。
フロントエンドフレームワークの歴史 - https://youtu.be/kzeog8ytfae
React -https：//www.youtube.com/playlist?list=plwkjhjtqvabkardmazoartnz1amwnwmvc; https://www.youtube.com/playlist?list=plc3y8-rfhvgg3vayjghgnmodb54rxok3
Angular -https：//www.youtube.com/playlist？list = plwkjhjtqvablnvgkkkvpajhxrrxxhts
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
ハバードからのコンピューターサイエンス-https：//www.youtube.com/playlist?list=plwkjhjtqvabmgw5fn5bqlwuug -8bdmabi
コンピューターサイエンス-https：//www.youtube.com/playlist?list = plwkjhjtqvabn5emq3rg88gebqkhf_5vxd
Googleマテリアル-https：//material.io/design/
ブロックチェーンとは何ですか？ -https：//www.freecodecamp.org/news/what-is-blockchain-and-how-does-it-work/
アクセシビリティ
Webコンテンツアクセシビリティガイドライン（WCAG） - https：//www.w3.org/wai/standards-guidelines/wcag/
ADAチェックリスト（2019）-https：//medium.com/@krisrivenburgh/the-ada-checklist-website-compliance-guidelines-2019-in-english-123c1d58fad9
A11yチェックリスト（A11yニュースレターをチェックしてください）-https：//a11 -project.com/checklist/
開発者向けのWebアクセシビリティ-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/（デモインの地元のクラブ、彼らもエリア515を実行します）
求人掲示板
Vettery -https：//www.vettery.com/candidate/tech
TripleByte- https://triplebyte.com/
Angellist- Start UpsからのJobs -https：//angel.co/jobs
私たちはリモートで作業します-https：//weworkremotely.com/
サイコロ-https：//www.dice.com/
スタックオーバーフロー-https：//stackoverflow.com/
Codepen -https：//codepen.io/jobs/
Aiga Design Jobs -https：//designjobs.aiga.org/
Behance -https：//www.behance.net/joblist
デザインオブザーバー-https：//designobserver.com/jobs/
ユーザーインターフェイス、Webデザイン、ビジュアルデザインなど、UXデザインの魔法の世界の中で、基本的に同じまたはすべてが互いに関連するタイトルが多数住んでいます。本当に望むなら、注文はビジュアルデザイナー、Webデザイナー、ユーザーインターフェイスデザイナー、インタラクションデザイナーなどです。 （すぐにUXに入ります）。
UIはUXと同じではありません。 UXは、デザインとヒューマンコンピューターの相互作用と心理学の研究です。 UIは視覚的なものを扱います。
のような場所から記事を読んで、フィールドに最新の状態を保つ
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
ちょっとデザイナーhttps://heydesigner.com/
デザイナーニュースhttps://www.designernews.co/
もっと。
オンラインクラスを受講し、CareerFoundry、Interaction Design Foundation、LinkedIn Learningなどの場所から証明書を取得します。 UX Planetのオプションの詳細をご覧ください。 https://careerfoundry.com/ ** https：//www.interaction-design.org/（個人的なお気に入り、それは私が使用しているものです）https://uxplanet.org/top-10-online-platforms-to-learn-u-ux-design-dcfb613d097a
あなた自身のブログを始めて、あなたが知っていることと推奨について書いてください。コミュニティの思想的リーダーになります。
ユーザーエクスペリエンスディフェンダーのようなポッドキャスト、UXの何が問題なのかを聞いてください。これは、2020.https：//www.mockplus.com/blog/post/ux-podcastのMockplusからの最高の25のUXポッドキャストのリストです。
UXネットワーキングミートアップに参加してください。 （Meetup。Com）
UXに関するYouTubeチャンネルとビデオをご覧ください。
AJ＆Smart
アプリのデザインのヒント
未来
Caler Edwards
キャリアファウンドリー
ダンスキー
Invision
DesignCourse
フラックス
LinkedInLearning
nngroup
最新の状態を保ち、Sketch、Invision、Figma、その他のUXツールやユーザー調査ツールなどのツールを使用してチュートリアルをご覧ください。
Sharpen UXジェネレーター、良いブリーフ、100日間のDailyUIチャレンジなど、完全なモックUXとUIの課題。 https://www.dailyui.co/ http://goodbrief.io/ https://sharpen.design/
アクセシビリティについて学び、A11yweekly Newsletterなどのニュースレターを購読してください。
研究デザインシステム。 https://designsystemsrepo.com/design-systems/
使いやすさを研究します。 https://www.usability.gov/
学習デザイン思考。開始したり、ドキュメンタリーを見たり、IDEO、D.School、HCS、Design Council、Frog、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リサーチ、UI、UXライティングなど、UXの他のサブセットに深く潜ります。
IXDAワールドカンファレンスデーに無料またはその他の会議で参加してください。 https://ixda.org/
地元のクラブ、組織、その他のコミュニティグループに参加してください。
スピーカーになるか、ワークショップのホストを開始します。
HCI、UX、UI、またはその他の同様のプログラムで大学の学位を取得します。
あなたのスキルやフリーランスをボランティアしてください。
練習、練習、練習。自由時間に情熱プロジェクトとケーススタディを作成します。
