Teknologi baru terus bermunculan dan berkembang sangat pesat. Salah satunya yaitu teknologi di bidang Front-End Development. Tidak jarang teknologi baru muncul untuk menggantikan teknologi lama yang mungkin terlalu rumit, tidak efisien, dan berbagai kekurangan lainnya. Pada intinya kemunculan teknologi baru bertujuan menjadikan teknologi terdahulu menjadi lebih baik. Salah satu teknologi baru yang sedang berkembang (sudah lama namun baru populer) di bidang Front-End Development adalah Layout Flexbox.

 

Flexbox adalah salah satu jenis layouting (pengaturan tata letak) CSS. CSS memiliki banyak jenis layouting seperti layouting jenis lama terdapat table layout, position, float hingga jenis layout yang terbaru yaitu Grid dan Flexbox. Flexbox termasuk salah satu jenis layouting CSS yang relatif baru. Flexbox akhir-akhir ini banyak digunakan karena kemudahannya dalam mengatur layout atau tata letak dalam satu dimensi, baik secara baris maupun kolom. Kemudahan yang dibawa Flexbox harus dicoba oleh para Web Developer. Terdapat berbagai resource untuk mempelajari teknologi Flexbox, dan salah satu yang menarik adalah Flexbox Froggy.

 

Flexbox Froggy merupakan salah satu situs untuk mempelajari teknologi Flexbox. Situs ini terlihat sangat berbeda dalam menyajikan materi mengenai Flexbox. Flexbox Froggy mengajarkan kita bagaimana memahami konsep Flexbox melalui simulasi Game. Kita dapat belajar tentang dasar-dasar flexbox dengan menyenangkan yang disimulasikan dalam bentuk game. Dalam game ini terdapat katak dan bunga teratai dimana kita harus menempatkan katak di atas teratai yang sudah disediakan, menarik bukan?
Game Flexbox Froggy terdiri dari level 1 hingga level 24. Di setiap level terdapat materi mengenai Flexbox dan tantangan berupa menempatkan Katak di atas Teratai menggunakan konsep Flexbox. Flexbox Froggy tersedia dalam 20 lebih bahasa termasuk bahasa Indonesia. Jika kamu seorang web developer, kamu harus coba mengunjungi Flexbox Froggy untuk belajar atau sekedar iseng menyelesaikan tantangannya. Katak-katak kecil yang imut ini akan setia menemani kita dalam belajar Flexbox dari awal sampai akhir.

 

Sumber:
Flexbox Froggy
Hongkiat

Published in Artikel

Website telah menjadi kebutuhan setiap individu maupun bisnis. Kebutuhan web developer terus meningkat dan selalu dicari oleh berbagai pihak terutama perusahaan. Tapi tahukah kamu bagaimana cara membuat sebuah website? Dan siapakah orang yang membuat website? Mari kita bahas sekilas tentang bagaimana langkah membuat website dan siapakah orang berjasa dibalik terbuatnya sebuah website.

Tampilan website yang indah seperti Facebook, Youtube, Tokopedia, ataupun Bukalapak ternyata dibaliknya terdapat ribuan bahkan jutaaan kode yang saling bekerja. Website dibuat dengan menggunakan berbagai macam teknologi. Singkatnya, tampilan dari sebuah website dibangun menggunakan teknologi frontend seperti HTML, CSS dan JavaScript. Lalu hal yang tidak terlihat dari sebuah website seperti membangun fungsionalitas website, penyimpanan data, membuat website menjadi lebih dinamis, hal tersebut dibangun menggunakan teknologi backend seperti PHP, NodeJS, Python, MySQL, PostgreSQL, Oracle, dll.

Mereka yang bekerja mengurusi tampilan website disebut sebagai Front-end Developer, tugasnya membuat tampilan website. Sedangkan mereka yang bekerja mengurusi logic atau alur kerja dari sebuah website disebut sebagai Back-end Developer, tugasnya membuat fungsionalitas sebuah  website agar berjalan dan bisa digunakan oleh user. Dan bagi kamu yang tertarik ingin menjadi Front-end Developer, berikut adalah skill yang harus kamu pelajari :

1. Langkah pertama : Mempelajari HTML

HTML adalah inti dari sebuah website dan hal pertama yang harus dipelajari untuk menjadi Front-end Developer. HTML merupakan bahasa markup yang digunakan untuk membangun kerangka atau struktur sebuah website.

Nah bagi kamu yang ingin mempelajari HTML bisa mengakses link berikut :
    •  W3Schools
    •  Khan Academy
    •  Udacity

2. Langkah Kedua: Mempelajari CSS

CSS adalah langkah selanjutnya yang harus dikuasai. CSS merupakan bahasa yang digunakan untuk menghias atau memperindah struktur dari sebuah website. CSS merupakan hal yang tak terpisahkan dengan HTML, karena keduannya memang saling melengkapi.

Nah bagi kamu yang ingin mempelajari CSS bisa mengakses link berikut :
    •  W3Schools
    •  Khan Academy
    •  Udacity

 3. Langkah Ketiga: Mempelajari JavaScript

JavaScript memungkin kamu untuk membuat halaman HTML menjadi lebih interaktif. Contohnya saja misalkan ingin membuat slider, popup, atau notifikasi, bahkan kamu juga dapat menampilkan data terbaru tanpa harus me-reload browser.

Nah bagi kamu yang ingin mempelajari JavaScript bisa mengakses link berikut :
    • W3Schools
    • Udacity
    • Mozilla

 4. Langkah Keempat: Mempelajari CSS Preprocessors

CSS memiliki keterbatasan dalam penulisan kode, hal yang sering terjadi adalah penulis kode CSS yang tidak efisien atau sering menulis kode yang sama berulang-ulang. Untuk menyelesaikan masalah di atas maka munculah CSS Preprocessors seperti SASS dan LESS yang membantu kamu mengelola kode css menjadi lebih efisien.

Nah bagi kamu yang ingin mempelajari CSS Preprocessors bisa mengakses link berikut :
    • sass-lang
    • the sass way
    •  scotch

 5. Langkah Kelima: Mempelajari Framework SPA (Single Page Applications)

SPA merupakan teknologi terbaru yang diterapkan pada beberapa website. SPA adalah istilah website yang hanya menggunakan satu halaman saja sebagai tampilan aplikasi. Website tidak perlu me-request server untuk mengupdate tampilan ketika berpindah halaman, hanya beberapa saja yang diupdate dari server seperti data atau informasi. Penggunaan teknologi SPA menjadikan web menjadi lebih ringan dan cepat ketika digunakan.

Terdapat beberapa framework SPA seperti React JS, Angular, dan Vue JS. Kamu bisa mempelajari salah satunya yang menurutmu paling menarik.

Nah bagi kamu yang ingin mempelajari SPA bisa mengakses link berikut :
    •  ReactJS : ReactJS
    •  VueJS : Laracast, VueJS
    •  Angular : Coursetro, Angular


6. Langkah Keenam: Mempelajari Teknologi Lain

Jika kamu sudah mempelajari sampai sejauh ini, jangan puas dahulu. Kamu memang layak mendapatkan pujian karena telah mempelajari berbagai teknologi di atas, namun di luar sana teknologi selalu bermunculan dan kebutuhan dunia website selalu berkembang.

Dan kamu harus mencoba beberapa teknologi berikut untuk meningkatkan skill kamu. Berikut beberapa hal yang harus kamu pelajari untuk meningkatkan kemampuan kamu dalam membuat website :

    •  GIT (Version Control) :
        https://try.github.io, https://www.codecademy.com/learn/learn-git atau  https://www.atlassian.com/git

    •  Unit Testing : https://www.udacity.com/course/javascript-testing--ud549

    •  JavaScript Libraries :
        Jquery : https://www.w3schools.com/jquery/default.asp

    •  CSS Framework :
        Bootstrap: https://getbootstrap.com/
        Foundation: https://foundation.zurb.com/
        Semantic: https://semantic-ui.com/
        Material: https://material.io/

 7. Langkah Ketujuh: Berlatih, Berlatih dan Berlatih.

Hal yang terpenting setelah mempelajari hal di atas adalah berlatih untuk membuat website, buat proyek yang menarik dan unik serta bantu orang lain yang membutuhkan jasa pengembangan website.

Selesaikan projek kamu dan itu akan menjadi portofolio kamu nantinya, dan jangan lupa setiap proyek atau karya yang kamu buat pastikan terdokumentasi dengan baik, kamu bisa menggunakan Github sebagai sarana dokumentasinya. Bangun porfoliomu sedikit demi sedikit, berlatihlah terus menerus membuat website dan bantu orang lain yang membutuhkan jasamu.

Sumber :
http://fullbit.ca/2018-full-stack-developer-road-map-part-1-front-end-development/
https://codeburst.io/the-2018-web-developer-roadmap-826b1b806e8d
https://www.w3schools.com/whatis/whatis_roadmap.asp
https://medium.com/tech-tajawal/modern-frontend-developer-in-2018-4c2072fa2b9c

Published in Artikel