Hello, fellow learners! 📚✨
Siapa di sini yang baru terjun dan penasaran dengan dunia front-end development? Masih bingung ingin memulai dari mana? Tenang, kamu berada di tempat yang tepat!
Artikel ini memberikan 10 rekomendasi kelas terbaik dan tentunya GRATIS! untuk kalian yang mau membangun dasar pengetahuan front-end yang mendalam. Mulai dari dasar HTML dan CSS, kerangka kerja JavaScript hingga penggunaan framework yang bisa bikin website kalian makin keren. So, let’s dive in!
1. HTML5 Dasar
HTML5 adalah bahasa markup yang digunakan untuk membangun suatu tampilan pada halaman web. HTML5 ini berperan sebagai pondasi utama ketika sebuah situs web sedang dalam tahap pengembangan, tanpa HTML maka website yang kita bangun akan terlihat tidak terstruktur.
HTML5 menyediakan tag-tag khusus seperti tag header, tag body, dan tag footer yang memungkinkan pengembang web menentukan dan menyusun struktur dasar dari sebuah halaman web. Dengan menggunakan tag-tag ini, kita dapat memberikan tata letak yang terorganisir dan mempermudah pemahaman dalam membuat struktur dokumen web.
So, buat kalian yang masih bingung mau mulai belajar darimana, langsung aja gabung di Kelas HTML5 dasar. Di kelas ini kalian akan dibimbing mulai dari:
- persiapan tools yang digunakan untuk belajar HTML5.
- pembuatan dokumen HTML pertama.
- pengenalan tag-tag HTML, seperti tag untuk membuat heading, paragraph, list, hyperlink, images, dsb.
- belajar membuat section agar website terlihat lebih rapi.
- hingga belajar menambahkan sebuah table pada halaman web.
Kelas ini bisa kalian miliki secara gratis dan akses belajar seumur hidup loh! Kalian juga bisa upgrade ke kelas Starter Pro untuk mendapatkan materi tambahan dan benefits lainnya!
2. CSS Website Design
Sebuah website yang baik ialah website yang mampu memberikan kesan User Experience yang hebat untuk pengguna. Kenyamanan pengguna adalah kunci utama! karena ketika pengguna merasa nyaman, keuntungan yang didapatkan pun menjadi besar. Membangun sebuah website juga tidak dapat dilakukan sembarangan; harus didasarkan pada visi dan misi yang jelas.
Dengan menggunakan Cascade Style Sheet (CSS) kini kita dapat meningkatkan estetika website agar lebih eye-catching. Tujuan utamanya adalah agar pengguna kita lebih nyaman ketika menggunakan website kita. Warna dan jenis tipografi akan menentukan masing-masing dari tujuan sebuah website dibuat.
Sebagai seorang web designer, penguasaan CSS menjadi suatu kewajiban. Ini tidak hanya untuk mempercantik tampilan website, tetapi juga memberikan efek animasi agar terlihat lebih interactive di mata pengguna.
Kalian bisa mulai mempelajari CSS di Kelas CSS Website Design bareng BuildWithAngga! Di kelas ini kalian akan belajar tentang:
- pengenalan CSS dasar.
- cara memasukkan kode CSS dalam dokumen HTML.
- penggunaan properti CSS, seperti width, height, margin, padding, dsb.
- mengatur tampilan navigasi pada halaman web menggunakan CSS.
- serta mempelajari penggunaan pseudo-classes dalam CSS untuk memberikan efek tambahan pada elemen HTML.
Segera daftarkan diri kalian ke kelas gratis ini dan miliki akses belajar seumur hidup! Kalian juga bisa mendapatkan benefits lainnya, seperti update materi tambahan dan sertifikat dengan meng-upgrade ke kelas Stater Pro.
3. Vanilla JavaScript Pada Website Development
Dalam membangun website yang dinamis dengan kontan yang selalu up-to-date, JavaScript menjadi bahasa pemrograman yang sangat penting. Sementara CSS memberikan tampilan yang interaktif, JavaScript membawa kemampuan lebih jauh dengan memungkinkan manipulasi halaman secara dinamis.
JavaScript sangat diperlukan bagi mereka yang ingin menjadi Front-End Developer. Sebelum melangkah lebih jauh dengan mempelajari framework JavaScript yang populer, seperti Angular, React, dan Vue, penting bagi pemula untuk memiliki pemahaman yang kokoh terhadap dasar-dasar JavaScript. Hal ini akan menjadi fondasi yang kuat untuk memahami konsep-konsep lebih lanjut dalam pengembangan web. Kalian perlu memahami terlebih dahulu mengenai:
- cara mendeklarasikan suatu variable pada JavaScript.
- mengetahui apa saja tipe data pada javascript.
- memahami penggunaan if statement, looping dan array pada JavaScript.
- memahami konsep object dan function dalam JavaScript.
- serta mengetahui tentang Document Object Model (DOM) untuk memanipulasi elemen-elemen pada halaman web.
Don't worry guys! semua itu bisa kalian pelajari di Kelas Vanilla JavaScript secara GRATIS bersama mentor expert Yein Narayana. Selain itu, kalian bisa mengakses kelas ini sampai kapan-pun. Jadi, manfaatkan kesempatan ini untuk meningkatkan kemampuan pemrograman JavaScript kalian! 🚀
4. ES6 Dasar
ES6 atau ECMAScript 2015 adalah versi terbaru dari standar JavaScript yang diperkenalkan pada tahun 2015. ES6 memperkenalkan banyak fitur baru dan perbaikan sintaksis yang akan memudahkan kalian dalam mengembangkan aplikasi web.
ES6 penting untuk pengembangan JavaScript karena fitur-fitur baru ini memungkinkan pengembang untuk menulis kode yang lebih bersih, ekspresif, dan efisien. Selain itu, penggunaan ES6 juga membantu dalam memperbaiki kinerja aplikasi dan memudahkan dalam pengelolaan kode. Mempelajari ES6 akan sangat membantu kalian apabila kalian memutuskan untuk menggunakan framework Vue JS nantinya.
Kalian dapat mempelajari versi terbaru dari standar JavaScript ini dikelas ES6 Dasar bersama mentor expert Angga Risky! Di kelas ini kalian dapat belajar mengenai:
- penulisan deklarasi variable menggunakan
letdanconst. - penerapan String Concatenation yang lebih mudah dan simpel.
- pembuatan Object Literal yang lebih sederhana.
- penggunaan Array Foreach untuk mengulangi setiap elemen dalam array.
Dengan belajar fitur-fitur ini, kalian akan lebih nyaman dan terampil dalam menulis kode JavaScript. Tentunya kelas ini dapat kalian akses secara gratis dan seumur hidup! Kalian juga bisa upgrade ke kelas Starter Pro untuk mendapatkan materi yang lebih banyak lagi.
5. CSS Tailwind Web Design
Tailwind CSS adalah sebuah framework CSS yang memungkinkan pengembang untuk membangun tampilan website dengan lebih cepat dan mudah. Tailwind CSS menggunakan pendekatan utility-first, yang memungkinkan pengembang untuk menggunakan kelas utilitas untuk merancang tata letak responsif dan komponen desain.
Dengan Tailwind CSS, pengembang dapat menghemat waktu dan usaha dalam merancang tampilan website, karena framework ini menyediakan banyak kelas utilitas yang dapat digunakan untuk membuat tampilan website yang menarik dan responsif. Tailwind CSS juga memungkinkan pengembang untuk menyesuaikan desain mereka dengan menggunakan beragam opsi konfigurasi yang disediakan oleh Tailwind CSS, seperti warna, font, dan spasi, sehingga pengembang dapat menciptakan desain yang sesuai dengan kebutuhan proyek mereka.
Pelajari framework Tailwind CSS di kelas CSS Tailwind Web Design bareng mentor expert Yein Narayana, di kelas ini kalian akan belajar tentang:
- pengenalan Tailwind CSS sebagai framework CSS yang fokus pada utility classes.
- mempersiapkan tools dan setup workspace.
- membuat komponen dalam website seperti button dan cards.
- pengaturan grid untuk membantu membuat cards yang responsive.
- serta pembuatan Hero pada halaman web menggunakan Tailwind CSS.
Kalian dapat mengakses kelas ini secara gratis dan tanpa batas waktu. Jangan lupa untuk upgrade ke kelas Starter Pro untuk mendapatkan update materi-materi terbaru. Jadi, tunggu apalagi mulai bangun website kalian jadi lebih menarik dan responsif bersama BuildWithAngga✨
6. CSS Bootstrap 4 Web Design
Website yang baik adalah ketika pengguna mengakses maka tampilan UI tidak berantakan atau susah dipahami. Dengan memanfaatkan Framework CSS Bootstrap, kita dapat dengan mudah mengelola tampilan tersebut.
Bootstrap menyediakan beragam komponen yang memudahkan pengembang dalam merancang tampilan yang responsif dan menarik. Framework ini juga memudahkan dalam pengelolaan tata letak dan interaksi antarmuka pengguna. Bootstrap juga menyediakan beragam kelas CSS yang dapat digunakan untuk mempercepat pengembangan website.
Jika kalian ingin mempelajari CSS Bootstrap lebih lanjut join Kelas CSS Bootstrap 4 Web Design. Di kelas ini kalian akan diberikan:
- tutorial instalasi Bootstrap Offline.
- penjelasan mengenai penerapan grid, column, row dan container.
- pengenalan konsep dasar flexbox.
- menerapkan auto column untuk mempermudah pengaturan tata letak
- dan pengenalan berbagai macam fitur-fitur Bootstrap lainnya yang dapat mempercantik website kalian.
Ayo! segera daftarkan diri kalian ke Free Class atau upgrade ke kelas Starter Pro untuk mendapatkan lebih banyak materi terbaru lainnya!
7. SASS Workshop: Design Website Lebih Cepat
SASS (Syntactically Awesome Style Sheets) adalah ekstensi CSS yang telah digunakan banyak komunitas Front-End di dunia. Airbnb dan StackShare adalah dua perusahaan komersil yang mengaplikasikan SASS untuk scripting kode yang lebih rapi dan cepat. Hal ini menjadikan SASS bermanfaat untuk sisi organization dan maintenance sebuah aplikasi yang scalable.
Bagi kalian yang ingin memahami CSS dan mendalami SASS, ikuti kelas “SASS Workshop: Design Website Lebih Cepat” yang akan dibimbing oleh mentor expert Angga Risky.
Di kelas ini kalian akan membangun sebuah landing page yang menarik. Pembelajaran akan dimulai dari:
- mempelajari instalasi SASS pada projek website.
- mempelajari dasar-dasar SASS.
- melakukan slicing desain Figma ke Bootstrap5 CSS.
- memperdalam fungsi-fungsi yang tersedia pada SASS.
- hingga dapat membangun sebuah website yang eye-catching.
Pembelajaran diatas dapat kalian akses secara gratis dan seumur hidup melalui website BuildWithAngga. Dapatkan juga materi-materi tambahan dengan upgrade menjadi kelas Starter Pro!
8. Vue JavaScript Framework
Vue.js adalah sebuah framework JavaScript yang digunakan untuk membangun antarmuka pengguna web. Vue.js memiliki fitur-fitur yang memudahkan pengembangan aplikasi web, seperti kemampuan untuk membuat tampilan website menjadi lebih interaktif dan kemudahan dalam integrasi dengan library lain.
Vue.js juga memiliki dokumentasi yang baik dan API yang intuitif, sehingga memudahkan pengembang dalam mempelajari dan mengimplementasikan framework ini. Beberapa fitur dalam Vue.js antara lain kemampuan untuk membuat Single Page Application (SPA), kemudahan dalam menginisialisasi komponen HTML, serta kemampuan untuk membuat tampilan UI yang menarik.
Jika kalian tertarik menggunakan Framework Vue Javascript untuk pengembangan situs web kalian, mulai pelajari Framework Vue.js di Kelas “Vue JavaScript Framework” bersama mentor expert Angga Risky. Di sini kalian akan belajar:
- dasar-dasar Vue JS mulai dari melakukan instalasi dan persiapan tools yang digunakan.
- mengenal alur kerja dasar Vue JS.
- membuat komponen website Vue JS
- memodifikasi halaman web dengan Scope CSS - Vue JS.
- hingga cara menggunakan Vue UI sebagai project manager.
Segera daftar dan mulai belajar di Kelas “Vue JavaScript Framework” dengan akses gratis dan seumur hidup!
9. React JavaScript
React JS adalah sebuah library JavaScript yang digunakan untuk membangun antarmuka pengguna (UI) pada aplikasi web. React biasa digunakan oleh web developer dalam membangun website yang lebih interactive, fast, dan responsive.
React menggunakan sintaksis JSX (JavaScript XML) yang memungkinkan penulisan kode yang lebih dekat dengan HTML, membuatnya lebih mudah dipahami dan dikembangkan. React juga mendukung pengembangan yang berbasis komponen, di mana setiap bagian UI dapat dipecah menjadi komponen independen yang dapat digunakan kembali.
React telah menjadi salah satu pilihan utama bagi pengembang web karena kecepatan pengembangan, efisiensi, dan kemampuan untuk membangun aplikasi dengan antarmuka yang dinamis dan responsif.
Tertarik untuk mempelajari React JS lebih lanjut? Gabung kelas “React JavaScript”. Di kelas ini kalian akan membangun toko online sederhana dengan menggunakan HTML, CSS, JavaScript (React JS). Kalian akan diberikan materi yang komprehensif mencakup:
- pengenalan Konsep JSX (JavaScript XML).
- pengenalan ReactDOM Render.
- mempelajari cara melakukan slicing component.
- mempelajari penggunaan props component.
- serta penerapan conditional rendering pada website kita.
Pelajari selengkapnya dengan bergabung secara gratis di kelas “React JavaScript” atau upgrade ke kelas Strater Pro untuk akses materi yang lebih lengkap!
10. NextJS Basic
Next.js adalah framework JavaScript buatan Vercel yang digunakan Front-End Developer untuk membangun sebuah website yang cepat dan ramah pengguna. Sudah banyak perusahaan dunia di berbagai bidang yang menggunakannya seperti TikTok, Nike, Starbucks, dan Twitch.
Buat kalian yang tertarik dengan Next JS dan ingin belajar lebih dalam, BuildWithAngga menyediakan Kelas Online Gratis NextJS Basic. Pada kelas ini, kalian akan belajar:
- memahami dasar-dasar Next JS.
- mempelajari setup project Next JS.
- mempelajari pengaturan website yang SEO friendly.
- mempelajari code splitting untuk performance Next JS yang lebih cepat.
- dan mempelajari jenis hybrid rendering (Static Generation & Server Side).
Dengan memahami semua fitur-fitur tersebut, kalian dapat menciptakan semua halaman yang diperlukan website (marketing page, product listing, help, dll) yang interaktif dengan lebih efisien.
Penutup
Nah, itu dia guys kelas-kelas yang bisa kalian manfaatkan! Selangkah demi selangkah, tingkatkan pengetahuan dan keterampilanmu dalam pengembangan front-end. Tunggu apalagi? Yuk segera join kelas yang kamu inginkan untuk upgrade skill front-end bersama BuildWithAngga ✨ See you di kelas yaa!
