Step by Step Guide to Becoming Frontend Developer

PHP Online Learning #85

Transcript

1. Step by Step Guide to Becoming Frontend Developer PHP Online Learning #85
2. Randy Vianda Putra, live in Bandung -Frontend Lead @WorkLifeBeyond -Instructor @SekolahFullstack modulloe@gmail.com github.com/randyviandaputra @randyvp Hello 🙇
3. Agenda o What is Frontend Developer o Learn HTML o Styling your pages using CSS o Basics of Javascript o Version Control System o Deployment o Q&A
4. What is Frontend Developer
5. What is Frontend Developer 5 Frontend developer adalah pengembang website yang menggunakan baris kode HTML, CSS, dan JavaScript untuk menghasilkan website dengan tampilan yang menarik. Dan juga mengolah desain murni menjadi website yang interaktif dengan pengguna.
6. PHP Online Learning #12
7. Learn HTML
8. What is HTML 8 Singkatan dari Hypertext Markup Language. HTML memungkinkan seorang user untuk membuat dan menyusun bagian paragraf, heading, link atau tautan, dan blockquote untuk halaman web dan aplikasi.
9. Learn HTML 9 HTML 5 Semantic Elements Meta Elements Accessibility
10. Learn HTML 10 Semantic Elements Semantic element mendeskripsikan dengan jelas ke browser dan developer contoh non-semantic elements: <div> dan<span> contoh semantic elements: <form>, <table>, <article>
11. Learn HTML 11 Meta Elements
12. Learn HTML 12 Accessibility
13. Learn HTML 13 HTML 5 Memungkinkan kita mendeskripsikan konten kita dengan lebih tepat.
14. Resources 14 ❖ W3schools ❖ https:/ /developer.mozilla.org/id/docs/Web/HTML ❖ HTML Tutorial for Beginners: HTML Crash Course [2021] - Programming with Mosh Youtube
15. Styling your pages using CSS
16. What is CSS 16 CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.
17. Styling your pages using CSS 17 Media Query Box Models Positions Layout (Flexbox/Grid) Spacing CSS Units
18. Styling your pages using CSS 18 CSS Preprocessor CSS Framework CSS Methodology CSS in JS
19. Styling your pages using CSS 19 CSS Preprocessor CSS Preprocessor merupakan bahasa script preprocessor yang dikompilasi dalam bentuk CSS
21. Styling your pages using CSS 21 CSS Methodology CSS Methodology adalah sebuah pedoman dalam penulisan code secara modular, kode yang dituliskan reusable dan scalable BEM Atomic-CSS Utility-First
23. Styling your pages using CSS 23 CSS Framework CSS Framework adalah sebuah Framework yang fungsinya untuk memudahkan developer dalam mendesain sebuah tampilan aplikasi/website
25. Styling your pages using CSS 25 CSS in JS CSS-in-JS adalah teknik styling yang dimana JavaScript digunakan untuk mengatur styling suatu component.
28. Resources 28 ❖ W3schools ❖ https:/ /developer.mozilla.org/id/docs/Web/HTML ❖ https:/ /www.creativebloq.com/features/a-web-designers-gui de-to-css-methodologies#section-bem ❖ https:/ /2020.stateofcss.com/ ❖ https:/ /getbootstrap.com/ ❖ https:/ /tailwindcss.com/
29. Basics of Javascript
30. What is Javascript 30 JavaScript adalah bahasa pemrograman yang digunakan dalam pengembangan website agar lebih dinamis dan interaktif.
31. Basics of Javascript 31 Syntax Type Function DOM Manipulation Hoisting ES6+ Fetch API Storing Data
32. Package Manager 32 Package Manager atau istilah globalnya Package-management System adalah sebuah Tools yang berfungsi untuk mengkoleksi sebuah sofware/libraries yang dibutuhkan dengan proses installation, upgrade, removing atau configuration secara otomatis di dalam operating system komputer anda.
33. Package Manager 33
34. Libraries/Frameworks 34 Kumpulan code yang biasanya terkumpul dalam sebuah module/package yang dapat di import/pakai ke program lain.
35. Javascript Libraries/Frameworks 35
37. Build Tools 37 Build tools adalah sebuah libraries/software application yang diciptakan untuk menangani beberapa pekerjaan proses development & deployment secara otomatis dan dapat disesuaikan dengan kebutuhan
38. Build Tools
40. Resources 40 ❖ W3schools ❖ https:/ /developer.mozilla.org/id/docs/Web. ❖ https:/ /www.youtube.com/watch?v=PkZNo7MFNFg Youtube
41. Version Control System
42. What is Version Control System 42 Sebuah sistem yang merekam perubahan-perubahan dari sebuah berkas atau sekumpulan berkas dari waktu ke waktu sehingga Anda dapat menilik kembali versi khusus suatu saat nanti
43. Version Control System 43 Git GitHub BitBucket GitLab Repo Hosting Server
44. Deployment
45. Deployment 45 Deployment adalah kegiatan yang bertujuan untuk menyebarkan aplikasi yang telah dikerjakan oleh para pengembang. Penyebarannya dapat melalui beragam cara tergantung dari jenis aplikasinya.
46. Deployment 46
47. What Next ?
48. “ Keep Learning ! 48
49. Recommended topics 49 ❖ Web Performance ❖ Web Security, ❖ Dev Tools, ❖ SPA, ❖ PWA, ❖ SSR/CSR, ❖ Web Storage ❖ Dll
50. 50 THANKS!
51. Q & A