Projek Pertama Menjadi Coder

Hi gengs apa kabar, semoga semuanya dalam kondisi yang sehat ya. Postingan kali ini saya mau membahas kira kira projek apa yang bisa dibuat sambil belajar coding, jadi understandingnya dapet, portofolionya dapet juga :).

Mari kita bahas alasannya dulu kenapa saya memilih projek tipe ini :

Low Cost / Biaya yang murmer. Ini biasanya utama ni, buat yang kere hore. Untuk sekedar share, Spec kompi saya : Core i5, RAM 4 GB, OS Ubuntu
Sourcenya banyak, bertebaran dimana mana, So, contekannya juga pasti banyak :))
Cukup mudah untuk dikerjakan

“Mmm, kira kira apa ya projeknya” :)), Jeng jeng jeng, Web App (Ketebak banget kali yak :)) ).

Menurut saya, Web App ini menurut saya projek yang paling mudah dikerjakan, seiring berjalannya waktu kita bisa menambahkan kompleksitas di dalamnya, mudah untuk hosting, dan setelah hosting, Voila, anda bisa posting sebagai portofolio anda untuk calon customer.

Ada yang harus diinstalkah untuk bikin Web App? Jawabannya Ya dan Tidak. Ya, karena bisa saja kita mau buat backendnya juga, atau mau menggunakan framework, Tidak bila kita hanya mau menggunakan Trio Kwek Kwek (HTML, CSS, JavaScript).

Yuk kita buat project simple iseng iseng 🙂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Silahkan CoPas code diatas, ke editor masing masing, bebas editornya

Mari kita rubah sedikit codenya

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <h1>Selamat Datang di Projek Pertama<h1>
</body>
</html>

Setelah itu close dan dan save file dengan nama index.html, lalu double click filenya, anda akan diarahkan ke browser anda.

“Mangstap mamangz !!!” Mari kita buat lebih menarik, disini saya akan menambahkan bootstrap juga navbarnya

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Projek Pertama</title>
  </head>
  <body>
   
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
 <h1>Selamat Datang di Projek Pertama</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

“Wew, banyak bener codenya.” Yup bener, tapi sebenernya saya hanya CoPas dari sini geng https://getbootstrap.com/. Bootstrap adalah salah satu framework yang bisa kita pakai untuk Web Development, kebetulan saya pakai mode CDN (Content Delivery Network), jadi kita tidak perlu install, cukup memanggilnya dalam code kita.

Untuk yang baru mulai coding, sebenernya code terakhir itu simple, tapi mungkin karena terlalu banyak, jadi puyeng ngeliatnya, dan seakan akan advance, padahal nggak, wkwkwkkwkwkw. Karena pada dasarnya baca coding itu sama aja sama baca buku, “Ah masa iye, baca buku mah gampang”, Ok deh coba baca buku Jepang atau Arab, tapi nggak bisa bahasanya, pasti rumit kan, atau coba baca partitur musik, tapi nggak pernah belajar cara bacanya, pasti ruweud. Dan kalo boleh berpendapat, salah satu benefit lain kalau kita bisa ngoding, ya itu tadi kita bisa baca codingan orang lain, karena sebenernya di dalam codingan orang lain, bukan cuman ada codingannya doank gengz, tapi ada alur pikiran dia dituangkan disana, sehingga bukan cuman sekedar cara yang kita dapat, tapi pendekatan yang coder lakukan untuk menyelesaikan masalah juga kita akan mengerti.

Sampe lupa kan, buat nampilin hasilnya, monggo di tengok ya hasil code diatas

Kan keren tu gengz. Tinggal posting deh di github, firebase, heroku atau static host yang lain 🙂

“Beneran semudah itu doank belajar ngoding?” Ya dan Tidak. Ya kalau kita mau berhenti disitu doank, sama kek pas belajar print “Hello World” bangga, truz udah deh, nggak ngoding lagi. Tidak kalau kita mau terus berkembang, mempelajari coding secara menyeluruh, dan mengembangkannya dalam projek.

“Wah bingung ni mau ngapain lagi abiz ini, masa belajarnya sampai disini doank”. Jangan bingung gengz, ini yang bisa dilakukan :

Cari Temen, Buat Group Belajar Ngoding
Baca StackOverflow atau Web lain untuk ide tentang projek yang lebih advance
Join Group FB / Telegram terkait dengan coding, biasanya banyak inspirasi juga disitu

Banyak kok, yang bisa dilakukan supaya semangat dan curiosity tetep terjaga.

Semoga bermanfaat ya 🙂

Bagikan ini:

Menyukai ini:

Terkait

Tinggalkan Balasan Batalkan balasan