Baparekraf Developer Day 2022 - Front-End (Sandhika Galih)

Sandhika Galih (Lecturer & Founder Web Programming UNPAS)

Judul:
Front-End Web Development Roadmap

Informasi event: https://www.dicoding.com/events/4398

Transcript

1. “Frontend Web Developer Roadmap 2022” Sandhika Galih - Lecturer & Founder Web Programming UNPAS
2. Web Development ?
3. Back-End Front-End Dev Ops Full StAck
4. Back-End Front-End Dev Ops Full StAck
5. Frontend Web Development ?
6. - Wikipedia, “Front-end web development” “Front-end web development is the development of the graphical user interface of a website, through the use of HTML, CSS and Javascript, so that user can view and interact with that website.”
7. - simplilearn.com, “How to Become a Frontend Developer” “Front-end web developer is responsible for the parts of a website that users see and interact with.”
8. - digitalya.co, “Front-end developer fundamentals” “Responsible for the structure & design, improving the user experience, balancing design & functionality, and optimizing the web application for most device.”
9. Kebutuhan Frontend Web Developer di Indonesia
11. https://id.indeed.com/career/front-end-developer/salaries
12. Menjadi Frontend Web Developer
13. Frontend Web Developer Roadmap
14. https://roadmap.sh/frontend
15. https://roadmap.sh/frontend
17. Mari kita bahas satu persatu
18. Kebutuhan di lapangan ?
22. Jangan terburu-buru!
25. Perkuat fundamental!
28. HTML • Basic HTML • Semantic HTML • Information Architecture • Accessibility • Form Validation • SEO
29. CSS • Basic CSS • CSS Layouting • Filter, Transition & Animation • Responsive Design
30. Basic CSS • CSS Anatomy • Selector & Properties • Cascading Concept • Inheritance • Specificity
31. CSS Layouting • Element Behaviour • Box Model • Float & Position • Flexbox • Grid
32. Responsive Design • Mobile-first Approach • Responsive Units • Media Queries
33. Javascript • Basic Concepts • DOM (Document Object Model) • Asynchronous Javascript
34. Basic Concepts • Variable • Data Type • Object • Array • Control Flow • Loop • Function
35. DOM • DOM Tree • DOM Traversal • DOM Manipulation • Event Handling • Event Bubbling
36. Asynchronous Javascript • Callbacks • Promise • Fetch API • Async & await
37. Apa yang dipelajari berikutnya?
38. CSS Pre-processor
39. CSS Pre-processor • Sass ◦ sass-lang.com • Less ◦ lesscss.org • Stylus ◦ stylus-lang.com
40. CSS Framework
41. CSS Framework • Bootstrap ◦ getbootstrap.com • Tailwind CSS ◦ tailwindcss.com
42. Frontend Framework
44. CSS Framework • React ◦ reactjs.org • Vue ◦ vuejs.org • Angular ◦ angular.io • Svelte ◦ svelte.dev • Remix ◦ remix.run
45. CSS Framework
46. Apakah sudah siap?
47. Teknologi lain yang sebaiknya dipelajari
48. Version Control System
49. Application Programming Interface
50. Website Deployment
52. Buat project untuk portfolio
53. Jika merasa belum cukup..
54. Pemahaman lebih lanjut
55. Build Tools
56. Testing Tools
57. Web Components
58. Progressive Web Apps
59. Di mana belajarnya?
60. Sumber belajar dimana-mana
61. youtube.com/webprogrammingunpas
62. dicoding.com
63. Selamat menjadi Frontend Web Developer!
64. Recap • Pahami tugas & tanggung jawab frontend developer • Perkuat fundamental • Jangan terburu-buru belajar teknologi ‘kekinian’ • Ketahui jalur belajar • Cari sumber belajar yang tepat • Perbanyak portfolio
65. Selesai.
66. TERIMA KASIH @sandhikagalih @sandhikagalih @sandhika.galih discord.gg/wpu