How to be a Web Developer in 2018 (based on my experience)

Thanks to SurabayaDev - https://surabayadev.org & UIN Sunan Ampel Surabaya

- Google Docs version (to see GIF image works):
https://docs.google.com/presentation/d/1z-WWQjaWfNGydl8Cd-N-QSwmUTGQUOP-pa8HVddm3SU/edit?usp=sharing

- Live Stream Events:
https://www.facebook.com/surabayadev/videos/1921440357949579/

Transcript

1. How to be a Web Developer in 2018 by Antoni Putra
2. Thanks for the people behind this event
3. About me Antoni Putra Ganteng Web Developer (remote) at: iVideoSmart Singapore Stacks: - PHP Laravel - Vue, Vanilla JS, jQuery Links: - https://github.com/antoniputra - https://t.me/antoniputra - https://instagram.com/antoni_putra12 - https://antoniputra.com
4. #1. What is Web Developer? and Why you should be a Web Developer?
5. Wait... Let me googling it first!
8. In short, Web Developer is: One of promising profession in this century. (If you do it right)
9. But, if you do it wrong...
11. Dont be like that guys...
12. Instead, We will be like this:
13. KLIK LIKE DAN KOMEN AMIN SUPAYA TERKABUL LALU KETIK ANGKA 7, DAN LIHAT APA YANG TERJADI
14. #2. Pros and Cons be a Web Developer
15. Pros - Flexible - Competitive Salary - Lot of Opportunities - Sounds Cool - Fun - Halal~ - Menantu Idaman - Idaman Menantu Cons - Potential being Nocturnal - Nothing
17. One of Benefit being Web Developer
18. #3. Requirements
19. Requirements Required and optional list’s - Computer (Laptop or PC) - Internet (Wifi or Mobile Data) - Highly Motivated - Persistence - Familiar with English language - Crazy are preferable
21. #4. How to be Web Developer
22. Things you should LEARN! Source: https://skillspire.net/product/full-stack-web-development-course-renton-2018-03-21/
23. And this
24. And this (2) COMPOSER & NPM - Package Manager
25. And this (3) Source: https://www.guru99.com/continuous-testing.html
26. And this (4) Source: https://code.tutsplus.com/articles/a-beginners-guide-to-design-patterns--net-12752
27. Let’s learn both of them
28. Cari tau kapasitas anda saat ini, pelajari sesuatu secara bertahap sesuai level anda saat ini.
29. #4.1 Learn typing with 10 fingers (optional) EST Time to spend: 2 weeks (based on my experience) Resources: - https://www.typing.academy/10-finger-typing (recommended place) - Type Fu - Chrome Web Store (worthed for offline practice) - https://10fastfingers.com (compare your skill with others) Benefits: It will boost your productivity, and make you feel comfortable while coding.
30. One of my Typing Record
31. #4.2 The HTML - Get familiar with the elements and attributes https://www.w3schools.com/tags/ref_byfunc.asp - Know difference between BLOCK and INLINE element. - No need to memorize it, Just keep practice. - Most used Elements: - Block: <div> <section> <p> <h1>to<h6> <nav> <form> <table> <ul> <li> - Inline: <a> <span> <img> <button> - Form: <select> <input> <textarea> EST Time to spend: 1 days (and keep learning by doing)
32. #4.3 The CSS - Get familiar with the elements and attributes https://www.w3schools.com/cssref - How to Overwrite - Write better css code (https://cssguidelin.es) - Media Query (Responsive) - mandatory to learn: % or PX, margin padding, display, float, z-index, position, pseudo (:before, :after, etc), The Selectors (:hover, etc...) Quick Sample: https://codepen.io/antoniputra/pen/BzyWmb EST Time to spend: Dont be rush Just DONT STOP until you UNDERSTAND the pattern
33. - Start here: https://www.w3schools.com/jsref and Googling :-D - Please read and try about these first: Selector, Variables, Conditionals, Functions, Scopes, Arrays, Looping, Iterators, Object, Classes, Modules - Get familiar to debug, utilizing browser console, and other debugging tools (how to looking for errors) - Just start to use library, read the docs, and integrate it to your experiment website. - #4.4 The Javascript EST Time to spend: Dont be rush Just DONT STOP until you UNDERSTAND the pattern Kuat dilakoni, lek gak kuat di tinggal ngopi
34. Go to the next level HTML Canvas CSS Bootstrap, Bulma, etc Sass/Less/Stylus Javascript jQuery (still worthed to learn) Webpack, Gulp Vue, React
35. Now you are Front-end Developer Celebrate it, You must!
36. Ok, Next…
37. - Your Home: https://git-scm.com/docs - Learn how to branch strategies - ZSH: https://ohmyz.sh #4.5 GIT EST Time to spend: Dont be rush Learning By Doing
38. Git Most Used
39. Git Most Used (2)
41. - Start here: https://www.w3schools.com/php/default.asp and Googling :-D - Learn use Database, and Query Language - Please read and try about these first: Variables (and Global), Session, Conditionals, Functions, Arrays, Looping, Iterators, Classes/Object - How to use Composer - OOP ← It must! - Most common used: For, Foreach, While, Switch, Try-Catch, Callback, etc… This should be your home: http://php.net/manual/en/langref.php #4.6 The PHP EST Time to spend: Dont be rush Just DONT STOP until you UNDERSTAND the pattern Kuat dilakoni, lek gak kuat di tinggal ngopi
42. Go to the next level - Learn Framework. e.g: Laravel, Symfony, etc… - Learn Regex (Regular Expression) - Unit Testing - Branch Management - CLI (Command Line Interface) - Server Management - MySql Queries - Design Pattern
43. I know Guys...
44. “Smile, breathe, and go slowly.” - Thich Nhat Hanh (Monk)
45. Personality Tip - Learn from everything - Join the communities - Find your mate - Dont be shy - Spend your time to Practice - Share your progress
46. Enjoy the process, and Keep it up!
47. #2019JadiWebDeveloper
48. Pokoknya semangat kak Sampean pasti bisa kak Akoe selalu mendukungmuh :-* #2019JadiWebDeveloper #SurabayaDev
49. CONCLUSION - Learn how to googling - Aware with your current level - Choose Front-end or Back-end (or both) - Learn GIT (it must) - Use Framework (Laravel, Symfony, Bootstrap) - Learn how to Unit Testing - Do a lot of practices and experiments - Join and be active in Communities - PERSISTENCE!
50. Matur Suwun! Contact me: (I am Coffeeable, Discussable, Projectable, Bebasable) t.me/antoniputra WA: +62-856-49-787899 Surabaya, Indonesia akiddcode@gmail.com www.antoniputra.com