Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

349a7f52975989094c75c055f9f6ba25?s=128

Dicoding Indonesia

April 12, 2022
Tweet

More Decks by Dicoding Indonesia

Other Decks in Education

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

  10. None
  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

  16. None
  17. Mari kita bahas satu persatu

  18. Kebutuhan di lapangan ?

  19. None
  20. None
  21. None
  22. Jangan terburu-buru!

  23. None
  24. None
  25. Perkuat fundamental!

  26. None
  27. None
  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

  43. None
  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

  51. None
  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