Learn Front End UI Design 2020
1.0.0
Pelajari pemrograman/pengembangan front-end (HTML/CSS/JavaScript)
Pengembang front-end berbeda dari pengembang back-end di bahwa pengembang front-end memanipulasi browser untuk membuat halaman web dan konten interaktif lainnya. Untuk mempelajari pengembangan front-end, Anda memulai dengan HTML, lalu CSS, dan kemudian JavaScript. Setelah Anda mempelajarinya, Anda dapat beralih ke hal -hal lain seperti kerangka kerja (bootstrap, bereaksi, sudut, vue, dll). Kerangka kerja Anda dapat mulai belajar setelah Anda mempelajari dasar -dasar ketiganya. Kerangka kerja membuat hidup lebih mudah.
Seorang programmer yang baik tidak harus mengingat segalanya. Kode sumber terbuka memberi kekuatan pada web dan memungkinkan pemrogram untuk menggunakan dan bertukar kode secara gratis (lihat beberapa panduan sumber terbuka yang berkontribusi di bawah "Mastering Front End"). Jika Anda terjebak pada sesuatu Google itu. Anda mungkin akan menemukan jawabannya.
Ada sejuta tutorial di luar sana. Berhati -hatilah untuk tidak terjebak dalam apa yang dikenal sebagai "neraka tutorial" di mana Anda hanya menonton tutorial tetapi tidak pernah belajar apa pun yang konkret. Cara terbaik untuk belajar adalah dengan melakukan. Situs olahraga seperti ini berguna, tetapi Anda juga ingin memikirkan proyek untuk dibangun. Host proyek -proyek tersebut di GitHub untuk portofolio Anda. Atau mencari tutortial proyek.
Menggunakan alat pengembang Google Chrome, Anda dapat memeriksa kode di belakang situs web mana pun atau membuat perubahan yang tidak hidup. Browser lain seperti Firefox juga memiliki alat ini. Jadikan sahabat Anda.
YouTube adalah sumber yang sangat bagus secara umum. Apapun yang ingin Anda ketahui. Mungkin ada di sana. Banyak programmer yang dihormati ada di sana seperti Wes Bos. Ikuti juga pengembang lain di Twitter.
Daftar Master YouTube - https://github.com/erikch/devyoutubelist
Hal penting yang perlu diketahui adalah bahwa Anda tidak harus tahu segalanya untuk mendapatkan pekerjaan atau pekerjaan pertama Anda setelah itu. Pemrograman selalu berubah. Pekerjaan yang baik akan memungkinkan Anda belajar di tempat kerja, semoga membayar Anda untuk mempelajari beberapa hal, dan akan mengajari Anda apa yang belum perlu Anda ketahui.
Ajukan pertanyaan - Tidak ada pertanyaan yang bodoh. Gunakan Google terlebih dahulu. Jika itu gagal, hubungi programmer lain melalui forum, stack overflow, grup Facebook atau Twitter. Seseorang akan dengan senang hati membantu Anda.
Bagaimana saya tahu kapan saya siap?
Saat Anda dapat membuat situs web dasar dan memiliki portofolio beberapa proyek yang berbeda.
Situs web dengan desain statis dan prototipe
Github yang menampilkan kode Anda
Jika Anda mengerjakan situs web yang sudah hidup, Anda tidak perlu github untuk itu. Tapi mereka baik untuk proyek yang tidak hidup.
Terlepas dari apa yang Anda lakukan, proyek lepas atau sukarelawan akan membantu Anda mendapatkan exp jika Anda tidak bisa mendapatkan magang. Tetapi magang pengembang biasanya terbuka untuk orang -orang di luar sekolah karena begitu banyak orang yang berkarier. Anda juga dapat mulai mendaftar ke posisi tingkat junior. Lihatlah proyek open source, pemrograman berpasangan, dan koloborasi dengan seorang teman.
Sumber Daya Pemrograman
(Daftar lainnya)
https://www.womenwhocode.com/resources
http://codingheroes.io/resources/
Esensi-
GitHub - Repositori Kode Online untuk Dipamerikan dan Bergabung dalam Proyek Sumber Terbuka
Git & Github Tutorial - https://youtu.be/swyqp7iy_tc
Codepen- Jelajahi dan buat sesuatu dari browser Anda - https://codepen.io/dashboard/
Teks Sublime - Editor Kode Gratis yang Mudah - https://www.sublimetext.com/
VS Code- adalah editor kode gratis saat ini, lebih canggih, https://code.visualstudio.com/
Chrome Dev Tools - Buka langsung di browser Anda untuk menguji, diagognosa, dan menjelajahi situs web - https://developers.google.com/web/tools/chrome-devtools
Blog for Developers - https://dev.to/
Stack Overflow sangat bagus untuk mencari jawaban dan barang -barang, tetapi komunitas ini diketahui tidak ramah kepada pemula atau wanita - https://stackoverflow.com/
Front End News - Tetap up to date - https://frontendfront.com/
Front End Focus - Tetap up to date dengan buletin ini - https://frontendfoc.us/
Topik dan konsep penting
Bagaimana cara kerja Internet & Komputer-https://www.khanacademy.org/computing/computer-cience/computer-and-ternet-code-org#internet-works-intro
Apa itu Ilmu Komputer? -https://www.freecodecamp.org/news/what-is-computer-programming-defining-software-development/
Desain Web Responsif-https://www.smasanshingmagazine.com/2011/01/guidelines-for-responsive-web-design/
Cross Browser Development - https://developer.mozilla.org/en-us/docs/learn/tools_and_testing/cross_browser_testing/introduction
Agile Metodologi - https://www.youtube.com/playlist?list=plwkjHjtqvabm0gpnunwf4pr4xv8i3geh-
Tes Kecepatan Halaman Web - https://tools.pingdom.com/
Paul Ford's What Is Code 10.000 Word Online Novel-https://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/
Debugging for Beginners-Debugging adalah proses menemukan dan memperbaiki kesalahan-https://docs.microsoft.com/en-us/visualstudio/debugger/debugging-absolute-beginners?view=vs-2019
Menguasai front-end
Kode 100 Hari - Gagasan di baliknya adalah solid, reptisi, akuntabilitas, dan kemajuan - https://www.100daysofcode.com/
Panduan Keterampilan Web - https://andreasbm.github.io/web-skills/
W3schools- belajar pemrograman dan lihat barang- sumber daya referensi- https://www.w3schools.com/
*Jaringan Pengembang Mozilla -Seperti W3Schools, tetapi Sister yang lebih matang, lebih mutakhir -htttps: //developer.mozilla.org/en-us/
Alat yang digunakan Devs Front-End pada 2019-https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-selults
Roadmap- Panduan untuk Menjadi Dev Front-End di 2020 https://roadmap.sh/frontend
Panduan Pengembang End End 2020 - https://youtu.be/sppsnbqvt0k
Pertanyaan Wawancara untuk Front-end (IE Bisakah Anda menjawab ini?)
Depan End Developer Wawancara Pertanyaan dan Jawaban-https://www.fullstack.cafe/blog/front-end-developer-interview-questions
Illustrated Dev - Ilustrasi Konsep Pengembang - https://illustrated.dev/
Wawancara Kue - Pelajari CS dan Cara Memecahkan Wawancara Programmer - https://www.interviewcake.com/
Wawancara Pemrograman YouTube - https://www.youtube.com/playlist?list=plwkjHjtqvablv09g3sfgrmser0jnkqmj9
Panduan yang pasti untuk berkontribusi pada open source-https://www.freecodecamp.org/news/the-definitive-guide-to-contributing-to-open-source-900d5f9f2282/
Cara Membuat Kontribusi - https://github.com/firstcontribusi/first-contributions
Daftar PR yang luar biasa (permintaan tarik)-https://github.com/mungell/awese-for-beginners
Pengatur waktu pertama- Sumber daya untuk pertama kalinya berkontribusi pada proyek open source - https://www.firsttimersonly.com/
Pro dan kontra dari pemrograman berpasangan (ketika Anda dan rekan setimnya bekerja bersama dengan kode yang sama)-https://www.freecodecamp.org/news/the-benefits-and-pitfalls-of-pair-programming-in-the-workplace-e68c3c8c81f/
Sistem Manajemen Konten
WordPress- Ada banyak pekerjaan yang akan mengharuskan Anda untuk mengetahui cara bekerja dengan ini- wordpress.org / wordpress.com
Drupal
Webflow (lebih baru tetapi banyak bicara di sekitarnya)
Tutorial dan lainnya
Freecode Camp- Salah satu sumber daya gratis terbaik yang dapat Anda gunakan - https://www.freecodecamp.org/
Khan Academy - Memiliki pelajaran pemrograman yang bagus dan juga memeriksa hal -hal ilmu komputer mereka - https://www.khanacademy.org/computing/computer-programming
CodeAcademy- Favorit tetapi Anda harus membayar sekarang pada titik tertentu - https://www.codecademy.com/
Front -end Masters - Pelajari Pengembangan Front -End - https://frontendmasters.com/
Udemy - Lihat kursus gratis mereka dan kemudian tunggu penjualan di kelas mereka- https://www.udemy.com/courses/free/
Berpikir webinar- memiliki banyak webinar pemula gratis- https://www.thinkful.com/webinars/
Tree House - situs tutortial/portofolio/gelar yang bagus tetapi bisa mahal - https://teamtreehouse.com/
Hackr.io- Tutorial dan Pembelajaran Lainnya - https://hackr.io/
Egghead - Tutorial - https://egghead.io/
LinkedInLearning
Coursera
Skillshare
Latihan
Latihan- Pelajari pemrograman dengan latihan - https://exercism.io/
EDABIT - Pelajari pengkodean dengan tantangan interaktif - https://edabit.com/
Kode Perang - Tantangan Pemrograman Harian - https://www.codewars.com/
Spesifik HTML/CSS/JavaScript
HTML Crash Courses - https://youtu.be/pqn-pnxpavg; https://youtu.be/ub1o30fr-ee
Buku HTML dan CSS - Buku Populer dengan Contoh Kode Online - http://www.htmlandcssbook.com/
CSS Crash Course - https://www.youtube.com/watch?v=yfoy53qxeni
Trik CSS - Blog untuk CSS dan Dev Front -End Lainnya - https://css-tricks.com/
CSS Podcast- https://pod.link/thecsspodcast
CSS Generator - Cepat menghasilkan 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 Box Model-https://css-tricks.com/the-css-box-model/
Bootstrap - kerangka kerja CSS, front -end - https://getboottrap.com/
Codrops- cuplikan barang -barang pengkodean keren - http://tympanus.net/codrops/
Fasih Javascript - Buku Baca (dengan Praktik Pemrograman Browser) https://eloquentjavascript.net/eloquent_javascript.pdf
Javascript and JQuery - Buku populer dengan contoh kode - http://www.javascriptbook.com/
Jslint- "lints" adalah program yang menemukan masalah dalam kode Anda - http://www.jslint.com/
Javascript30 - Buat 30 Proyek Vanilla Javascript yang berbeda - https://javascript30.com/
Pemula Javascript - Kursus berbayar oleh Wes Bos - https://beginnerjavascript.com/
Just Javascript - buletin yang menjelaskan JavaScript - https://justjavascript.com/
Proyek Vanilla Javascript - +20 Proyek JavaScript biasa - https://vanillawebprojects.com/
Video Yayasan JavaScript Lengkap - https://youtu.be/pkzno7mfnfg
Html dalam 12 menit - https://youtu.be/bwpmsssvdpk
CSS dalam 12 menit - https://youtu.be/0afzj1g0bie
Javascript dalam 12 menit - https://youtu.be/ukg_u3cnjwi
Kode dan Topcis dan Ilmu Komputer yang lebih canggih-
Google Developers - Tutorial dan Sumber Daya Lainnya - https://developers.google.com/
Pilih satu kerangka kerja JS untuk memulai (Bereaksi, Angular, Vue). Tidak masalah mana yang Anda pilih tetapi beberapa perusahaan lebih suka mereka daripada yang lain. Bereaksi adalah yang paling populer, diikuti dengan sudut, dan kemudian vue. Tidak banyak orang yang tahu Vue tetapi sebenarnya dicari sebenarnya. Jadi mungkin bereaksi atau bersudut dan vue bersama -sama mungkin merupakan pilihan yang kuat.
History of Front End Frameworks- https://youtu.be/kzeog8ytfae
React - https://www.youtube.com/playlist?list=plwkjhjtqvabardmazoartnz1amwnwmvc; https://www.youtube.com/playlist?list=PLC3Y8-RFHVWGG3VAYJGHGNMODB54RXOK3
Angular -https: //www.youtube.com/playlist? List = plwkjhjtqvablnvgkk6aqvpajhxrxxHts
Vue - https://youtu.be/wy9q22isx3u
Php -https: //www.youtube.com/playlist? List = plwkjhjtqvabkomsx4hgwxbjzw4ab0cbab
Sql- https://www.khanacademy.org/computing/computer-pogramming/sql
APIS - https://youtu.be/gzvsyjdk-us
Ilmu Komputer dari Havard - https://www.youtube.com/playlist?list=plwkjhjtqvabmgw5fn5bqlwuug-8bdmabi
Ilmu Komputer - https://www.youtube.com/playlist?list=plwkjhjtqvabn5emq3rrg8gebqkhf_5vxd
Materi Google - https://material.io/design/
Apa itu blockchain? -https://www.freecodecamp.org/news/what-is-blockchain-and-how-does-it-work/
Aksesibilitas
Pedoman Aksesibilitas Konten Web (WCAG) - https://www.w3.org/wai/standards-guidelines/wcag/
ADA Checklist (2019)-https://medium.com/@krisrivenburgh/the-ada-checklist-website-compliance-guidelines-for-2019-in-plain-erglish-123c1d58fad9
A11Y Checklist (lihat buletin A11Y) - https://a11yproject.com/checklist/
Aksesibilitas web untuk pengembang - https://www.wuhcag.com/wcag-checklist/
15 hal yang dapat Anda lakukan untuk meningkatkan aksesibilitas situs web Anda-https://websitesetup.org/web-acessibility-checklist/
Hanya untuk bersenang-senang -
Pemrosesan - Bahasa pemrograman berbasis Java yang digunakan untuk membuat animasi, game, dan seni interaktif - https://processing.org/
Majelis Umum- tempat sertifikat lain tetapi juga memiliki beberapa barang gratis- https://generalassemb.ly/blog/free-fridays/
Pengembang dan Komunitas Teknologi
https://womeninwebdev.com/
https://www.hiretechladies.com/
Terlibat sebagai pengembang - https://www.pluralsight.com/courses/get-involved
Codenewbie- https://www.codenewbie.org/
Hackernoon- Sebuah blog komunitas, sumber belajar, dll .- https://hackernoon.com/
http://ladydev.org/ (klub lokal di Des Moines, mereka juga menjalankan Area515)
Papan pekerjaan
Vettery - https://www.vettery.com/candidate/tech
Triplebyte- https://triplebyte.com/
AngelList- Jobs From Start Ups - https://angel.co/jobs
Kami bekerja dari jarak jauh - https://workremotely.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/
Antarmuka pengguna, desain web, desain visual, dll dalam dunia magis desain UX, ada beberapa judul yang pada dasarnya sama atau semuanya terkait satu sama lain. Jika Anda benar -benar menginginkannya, pesanan mungkin perancang visual, perancang web, perancang antarmuka pengguna, perancang interaksi .... dll. (masuk ke UX cukup cepat).
UI tidak sama dengan UX. UX adalah studi tentang desain dan interaksi manusia dan psikologi. UI berurusan dengan barang -barang visual.
Tetap up to date di lapangan dengan membaca artikel dari tempat -tempat seperti
Smashing Magazine, https://www.smasanshingmagazine.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 desainer https://heydesigner.com/
Berita Desainer https://www.designernews.co/
dan lebih banyak lagi.
Ambil kelas online dan dapatkan sertifikat dari tempat -tempat seperti karier, Yayasan Desain Interaksi, LinkedIn Learning dan lainnya. Baca lebih lanjut tentang opsi dari UX Planet. https://careerfoundry.com/ ** https: //www.interaction-design.org/ (favorit pribadi, itu yang saya gunakan) https://uxplanet.org/top-10-online-platforms-to-learn-uii-ux-dcfb613d097
Mulailah blog Anda sendiri dan tulis tentang apa yang Anda ketahui dan rekomendasikan. Menjadi pemimpin pemikiran di komunitas.
Dengarkan podcast seperti pembela pengalaman pengguna, apa yang salah dengan UX, dan lainnya. Berikut daftar 25 podcast UX terbaik dari mockplus untuk 2020.https: //www.mockplus.com/blog/post/ux-podcasts
Menghadiri pertemuan jaringan UX. (Meetup. Com)
Tonton saluran dan video YouTube tentang UX.
AJ & SMART
Tip Desain Aplikasi
Futur
Caler Edwards
Karier
Dansky
Undangan
Designcourse
Aliran
LinkedInLearning
Nngroup
Tetap up-to-date dan menonton tutorial tentang penggunaan alat seperti Sketch, Invision, Figma, dan alat UX atau alat penelitian pengguna lainnya.
Tantangan Mock UX dan UI lengkap seperti Sharpen UX Generator, The Good Brief, dan 100 Dayay DailyUi Challenge. https://www.dailyui.co/ http://goodbrief.io/ https://sharpen.design/
Pelajari tentang aksesibilitas dan berlangganan buletin seperti buletin A11yWeekly.
Sistem Desain Studi. https://designsystemsrepo.com/design-systems/
Belajar kegunaan. https://www.usability.gov/
Berpikir Desain Studi. Anda dapat mulai dengan menonton film dokumenter atau melihat berbagai metologi seperti dari IDEO, D.School, HCS, Design Council, Frog, Whats4, atau Luma. http://www.designthinkingmovie.com/
Bagikan sumber daya di media sosial.
Bergabunglah dengan grup UX Facebook dan LinkedIn. Ikuti desainer di Twitter dan Instagram.
Tetap mutakhir dengan tren di UX dan keadaan UX. https://trends.uxdesign.cc/
Terus perbaikan portofolio Anda (temukan beberapa sumber daya keren dari situs Sarah Doody) dan studi kasus (temukan generator templat di sini). Mempelajari portofolio UX lainnya. https://www.sarahdoody.com/ https://design-stories.herokuapp.com/ux-case-study-template
Temukan mentor atau menjadi mentor.
Baca buku tentang UX/UI dan topik serupa lainnya. Seperti, "Jangan Membuat Saya Berpikir", "Desain Hal -Hal Sehari -hari", "Elemen Pengalaman Pengguna", "Panduan Proyek untuk UX", "Lean Ux", dan lainnya. https://www.mockplus.com/blog/post/ux-design-books
Menyelam dalam ke subset lain dari desain interaksi seperti UX, arsitektur informasi, desain visual, penelitian UX, UI, penulisan UX, dll.
Hadiri Hari Konferensi Dunia IXDA secara gratis atau konferensi lainnya. https://ixda.org/
Bergabunglah dengan klub lokal, organisasi, dan kelompok masyarakat lainnya.
Menjadi speaker atau mulai menjadi tuan rumah lokakarya.
Dapatkan gelar sarjana di HCI, UX, UI, atau program serupa lainnya.
Relawan keterampilan atau lepas Anda.
Berlatih, berlatih, berlatih. Buat proyek gairah dan studi kasus di waktu luang Anda.
