Step by Step Guide to Becoming Frontend Developer

Slide 1

Slide 1 text

Step by Step Guide to Becoming Frontend Developer PHP Online Learning #85

Slide 2

Slide 2 text

Randy Vianda Putra, live in Bandung -Frontend Lead @WorkLifeBeyond -Instructor @SekolahFullstack modulloe@gmail.com github.com/randyviandaputra @randyvp Hello 🙇

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

What is Frontend Developer

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

PHP Online Learning #12

Slide 7

Slide 7 text

Learn HTML

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

Learn HTML 9 HTML 5 Semantic Elements Meta Elements Accessibility

Slide 10

Slide 10 text

Learn HTML 10 Semantic Elements Semantic element mendeskripsikan dengan jelas ke browser dan developer contoh non-semantic elements:

dan contoh semantic elements: , ,

Slide 11

Slide 11 text

Learn HTML 11 Meta Elements

Slide 12

Slide 12 text

Learn HTML 12 Accessibility

Slide 13

Slide 13 text

Learn HTML 13 HTML 5 Memungkinkan kita mendeskripsikan konten kita dengan lebih tepat.

Slide 14

Slide 14 text

Resources 14 ❖ W3schools ❖ https:/ /developer.mozilla.org/id/docs/Web/HTML ❖ HTML Tutorial for Beginners: HTML Crash Course [2021] - Programming with Mosh Youtube

Slide 15

Slide 15 text

Styling your pages using CSS

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

Styling your pages using CSS 17 Media Query Box Models Positions Layout (Flexbox/Grid) Spacing CSS Units

Slide 18

Slide 18 text

Styling your pages using CSS 18 CSS Preprocessor CSS Framework CSS Methodology CSS in JS

Slide 19

Slide 19 text

Styling your pages using CSS 19 CSS Preprocessor CSS Preprocessor merupakan bahasa script preprocessor yang dikompilasi dalam bentuk CSS

Slide 20

Slide 20 text

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Styling your pages using CSS 23 CSS Framework CSS Framework adalah sebuah Framework yang fungsinya untuk memudahkan developer dalam mendesain sebuah tampilan aplikasi/website

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Styling your pages using CSS 25 CSS in JS CSS-in-JS adalah teknik styling yang dimana JavaScript digunakan untuk mengatur styling suatu component.

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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/

Slide 29

Slide 29 text

Basics of Javascript

Slide 30

Slide 30 text

What is Javascript 30 JavaScript adalah bahasa pemrograman yang digunakan dalam pengembangan website agar lebih dinamis dan interaktif.

Slide 31

Slide 31 text

Basics of Javascript 31 Syntax Type Function DOM Manipulation Hoisting ES6+ Fetch API Storing Data

Slide 32

Slide 32 text

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 conﬁguration secara otomatis di dalam operating system komputer anda.

Slide 33

Slide 33 text

Package Manager 33

Slide 34

Slide 34 text

Libraries/Frameworks 34 Kumpulan code yang biasanya terkumpul dalam sebuah module/package yang dapat di import/pakai ke program lain.

Slide 35

Slide 35 text

Javascript Libraries/Frameworks 35

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Build Tools

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Resources 40 ❖ W3schools ❖ https:/ /developer.mozilla.org/id/docs/Web. ❖ https:/ /www.youtube.com/watch?v=PkZNo7MFNFg Youtube

Slide 41

Slide 41 text

Version Control System

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Version Control System 43 Git GitHub BitBucket GitLab Repo Hosting Server

Slide 44

Slide 44 text

Deployment

Slide 45

Slide 45 text

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.

Slide 46

Slide 46 text

Deployment 46

Slide 47

Slide 47 text

What Next ?

Slide 48

Slide 48 text

“ Keep Learning ! 48

Slide 49

Slide 49 text

Recommended topics 49 ❖ Web Performance ❖ Web Security, ❖ Dev Tools, ❖ SPA, ❖ PWA, ❖ SSR/CSR, ❖ Web Storage ❖ Dll