1. DASAR - DASAR FRONT END

• HTML
• CSS
• JAVASCRIPT
• JQUERY

2. CSS TOOLS

• CSS PREPROCESSORS : sering digunain oleh front-end developer, Dimana fungsinya agar kode CSS mudah dikembangkan atau dimodifikasi. Fungsi lainnya agar seorang pengembang gak perlu mengulang2 kode yg sama atau istilahnya DRY (Don’t Repeat Your Self).

--- Sass http://sass-lang.com/ --- Less http://lesscss.org/ --- Stylus http://stylus-lang.com/

• FRAMEWORK CSS : Library untuk ngubah tampilan website jadi responsive, sesuai dibanyak device misalnya hp, tablet

--- Bootstrap http://www.bootstrap.com/ *populer --- Foundation http://foundation.zurb.com/ --- Skeleton http://getskeleton.com/ --- Semantic Ui http://semantic-ui.com/ --- PureCSS http://purecss.io/ --- Gumby http://www.gumbyframework.com/

3. TASK RUNNERS : Fungsi utamanya untuk menjalankan beberapa tugas misalnya mengecilkan ukuran gambar, compile CSS dll sekaligus dengan sekali perintah.

• Grunt http://gruntjs.com/
• Gulp http://gulpjs.com/

4. MVC JAVASCRIPT FRAMEWORKS

• Angular.js https://angularjs.org/ *populer
• Backbone.js http://backbonejs.org/
• React.js https://facebook.github.io/react/
• Ember.js http://emberjs.com/
• Vue.js http://vuejs.org/

UNIT TESTINGNYA

• Mocha
• Jasmine

5. LIBRARY JAVASCRIPT

• Drop.js : efek dropdown keren link : http://github.hubspot.com/drop/docs/welcome/
• Dynamics.js : tambahin efek animasi ke web agan dengan library ini !! link : http://dynamicsjs.com/
• Sticker.js : buat sticker keren link : http://stickerjs.cmiscm.com/
• Bespoke.js : efek presentasi (kayak ms power point) cocok buat porfolio kayaknya :D link : http://markdalgleish.com/projects/bespoke.js/
• skrollr : pingin buat web dengan efek parallax ? pake library ini cocok banget... link : http://prinzhorn.github.io/skrollr/

1. PEMROGRAMAN WEB : Ada banyak dan ada macam2 dan biasanya banyak yang pake PHP. *untuk yang tanda kurung adalah framework yg dipakenya

• C# (.net) - Phython (Django)
• Java (Spring, Play) - PHP (Laravel, CodeIgniter, YiiFramework...)
• Node.js (Express.js, Sails.js)
• Ruby (Ruby On Rails, Sinatra)

2. DATABASE : Untuk nyimpen data

• MySQL https://www.mysql.com/
• MariaDB (cloningan mysql) https://mariadb.org/
• MongoDB https://www.mongodb.org/
• PostgreSQL http://www.postgresql.org/
• Redis http://redis.io/
• SQLite https://sqlite.org/

3. CHACHING

• Nginx https://nginx.org/
• Apache http://www.apache.org/

• Smashing Magazine https://www.smashingmagazine.com/
• Six Revisions http://sixrevisions.com/
• Coding Horror https://blog.codinghorror.com/
• Scoth.io https://scotch.io/

• CodePolitan https://www.codepolitan.com/ *keren

• Stack Overflow : lebih dari 4 jt programmer diseluruh dunia siap membantu agan2 yang kesusahan / stuck pas ngoding. http://stackoverflow.com/ *keren

• Front-end Front : Komunitas yang khusus untuk front end developer, disini agan bisa share link2 penting masalah front end. https://frontendfront.com/

• Refind : Sama seperti front-end front. Cuma yang bedanya disini ada kategorinya, misalnya design, ux, programming dll. https://refind.com/

• Web Developer Forum : Disini agan bisa belajar gimana cara buat website dari html, css, js dan bisa saling bertanya antar member http://www.webdeveloper.com/forum/

• Sekolah Koding : Forum programming dari indonesia yang isinya tutorial pemrograman web. Fitur2 unik yang disediain diantaranya track/perjalanan, perpustakaan, mading, upacara, podcast, forum dll. https://sekolahkoding.com *rekomendasi, keren, mantep

• Google Page Speed : Website ini akan menganalisa website dan memberikan tips
• tips penting dan apa yang harus diperbaiki. https://developers.google.com/speed/pagespeed/insights/ *keren
• Pingdom : Salah tool terbaik untuk ngetest kecepatan / waktu loading pada sebuah website. https://tools.pingdom.com/ *keren
• Web Page Test : Tool ini, akan membantu untuk ngetest performa website dengan berbagai macam pilihan lokasi. https://www.webpagetest.org/
• GTmetrix : sama seperti Google PageSpeed. Setelah di analisa websitenya, agan akan dikasih tau tips2 apa yang kurang dan yang harus dibenerin pada websitenya. https://gtmetrix.com/

• Slack : Aplikasi chatting untuk developer. https://slack.com

• trello : layanan untuk manajemen perencanaan / istilahnya To Do list. Tapi, kalo trello ini lebih keren lagi soalnya banyak fitur yg sangat memudahkan. https://trello.com/ *keren, mantep

• glip : glip nyediain fitur chatting secara realtime dan terintegrasi. Fasilitas lainnya, video, sharing kalender dan masih banyak lagi.. https://glip.com/

• jira : dengan software ini, teman2 bisa merencanakan kerjaanya, melihat hasilnya dan kemudian melaunching / merilis hasilnya. https://www.atlassian.com/software/jira

• asana : sebuah tim bisa ngawasin project2nya, liat projectnya, bisa buat task2nya.. dll. https://asana.com/ *keren

• JS Bin : Teman2 bisa melakukan experiment programming ataupun sharing coding. Disini ada HTML, CSS, JavaScript, Markdown, Jade dll. http://jsbin.com/
• JSfiddle : Tempat ngetest kode HTML, CSS ataupun Javascript dibrowser secara realtime https://jsfiddle.net/
• Codeshare : sharing koding agan dengan devoper lain secara realtime. https://codeshare.io/
• Codepen : tempat sharing koding ataupun cari inspirasi web. https://codepen.io/ *keren, mantep
• Dabblet : Testing HTML ataupun CSS secara interaktif. http://dabblet.com/

• StackEdit : Editor online gratis untuk buat markdown. https://stackedit.io/
• Texts : text editor sederhana untuk markdown yang hanya tersedia pada Windows & Mac
• Sublime Text : text editor populer ini ternyata punya fitur markdown. https://www.sublimetext.com/
• MarkdownPad : markdown untuk windows http://markdownpad.com/

• PHP : The Right Way http://www.phptherightway.com/ *ada banyak bahasa termasuk indonesia
• JS : The Right Way http://jstherightway.org/
• HTML&CSS : The Right Way http://htmlcsstherightway.org/

• Bower : package manager untuk HTML, CSS dan Javascript https://bower.io/
• Npm : package manager untuk Javascript https://www.npmjs.com/
• Composer : package manager untuk PHP https://getcomposer.org/

• Github github.com
• Bitbucket https://bitbucket.org *ane pake ini
• GitLab https://about.gitlab.com/

• Atom https://atom.io/ *keren
• Brackets http://brackets.io/
• Notepad ++ https://notepad-plus-plus.org/
• Sublime Text https://www.sublimetext.com/ *keren
• Vim http://www.vim.org/

• XAMPP https://www.apachefriends.org/index.html *populer
• MAMP https://www.mamp.info/en/
• Wamp http://www.wampserver.com/en/
• Vagrant https://www.vagrantup.com/
• Laragon https://laragon.org/
• AMPPS http://www.ampps.com/

• Font Awesome http://fontawesome.io/
• Icon Finder https://www.iconfinder.com/
• Icons8 https://icons8.com/
• Flaticon http://www.flaticon.com/
• iconmonstr http://iconmonstr.com/

• Piktab deskripsi : extension yang menurut ane keren... saat nginstall extension ini, default Home Page agan bakal berubah menjadi Home Page yang banyak resource untuk desain web. Selain itu, bakalan muncul juga menu untuk cari icon, vector, sketch dengan mudah link : https://chrome.google.com/webstore/detail/piktab/nkhjnpgcnmdpeikbeegmibjcfjpamjnp?hl=en

• Page Ruler deskripsi : suka ane pake buat ngukur lebar layout website, satuan yang dipakenya PX. link : https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=en

• Web Developer deskripsi : toolbar yang isinya tool web developer (berguna banget). Ada banyak pilihan, contohnya untuk disable javascript, disable css, Jadi, agan bisa ngedebug dengan cepat. link : https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

• Window Resizer deskripsi : extensions untuk ngetest website di macam2 device dengan cepat. link : https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en

• Nimbus Screenshoot deskripsi : untuk ngambil gambar / screenshoot halaman web. Sebenernya ada banyak extensions buat screenshooot. Tapi kalo ane suka yang ini ! link : https://chrome.google.com/webstore/detail/nimbus-screenshot-and-scr/bpconcjcammlapcogcnnelfmaeghhagj?hl=en

• Webdesign Inspiration www.webdesign-inspiration.com
• Codepen https://codepen.io/ * mantep & keren
• Dribbble https://dribbble.com/
• Template Monster http://www.templatemonster.com/
• Awwwards http://www.awwwards.com/