Pengenalan Lingkungan Untuk Memulai Coding Sebagai Pemula

Dipublikasikan pada 17 Aug 2024

Setiap programmer handal pernah memulai sebagai pemula yang memiliki niat belajar. Semua program bermanfaat yang kita gunakan saat ini diciptakan oleh programmer yang berani mengambil langkah pertama. Jadi, mulailah dengan membuat program sederhana yang akan menjadi fondasi untuk proyek-proyek lebih besar di masa depan.

Langkah Awal Menjadi Programmer Web

Secara umum, program dapat dibagi menjadi dua kategori besar: Website dan Aplikasi Mobile.

Dalam artikel ini, kita akan fokus pada pembuatan website, karena ini sering kali menjadi langkah awal yang baik untuk memulai perjalanan belajar pemrograman.

Memulai dari Hal Dasar

Ketika belajar pemrograman, Anda harus mulai dari dasar. Salah satu proyek yang cocok untuk pemula adalah membuat website profil sederhana. Sebelum memulai, penting untuk menyiapkan alat dan bahan yang dibutuhkan.

Alat dan Bahan yang Dibutuhkan

Web Editor
Web Server
Web Browser

Mungkin Anda sering mendengar istilah-istilah di atas. Berikut penjelasan lengkapnya:

1. Web Editor

Web editor adalah alat yang digunakan untuk menulis kode program. Ada banyak pilihan web editor yang bisa digunakan, baik gratis maupun berbayar. Beberapa web editor populer yang banyak digunakan oleh programmer adalah:

VS Code: Salah satu editor yang paling populer karena memiliki banyak fitur yang memudahkan proses pengembangan.
Notepad++: Editor ringan yang cocok untuk pemula.
Sublime Text: Editor yang cepat dengan banyak plugin.

Selain software, Anda juga bisa memulai dengan platform web seperti w3schools, yang menyediakan editor langsung di browser untuk percobaan kode sederhana.

Kenapa Memilih VS Code? VS Code sangat populer karena mendukung banyak fitur seperti auto-completion, integrasi dengan Git, debugging, dan banyak ekstensi yang bisa membantu mempercepat pekerjaan Anda.

Untuk memulai, Anda bisa Mengunduh VS Code dari situs resminya atau mencoba Web Deb yang dapat langsung digunakan tanpa perlu instalasi.

2. Web Server

Web server adalah perangkat lunak yang berfungsi untuk menjalankan aplikasi website yang dinamis. Website dinamis memerlukan web server agar dapat menampilkan halaman-halaman yang berubah sesuai dengan data dari pengguna atau database.

Sebagai pemula, Anda mungkin tidak langsung memerlukan web server, namun ketika Anda mulai membuat website yang lebih kompleks, penggunaan web server sangatlah penting. Ada beberapa pilihan web server, salah satunya adalah XAMPP.

Kenapa XAMPP? XAMPP banyak diminati karena mudah diinstal dan digunakan. XAMPP menyediakan Apache, MySQL, dan PHP yang semuanya dibutuhkan untuk menjalankan website dinamis.

Anda bisa Mengunduh XAMPP dari situs resminya.

3. Web Browser

Web browser adalah aplikasi yang digunakan untuk menampilkan hasil website yang Anda buat. Dengan web browser, Anda bisa mem-preview website dan melihat bagaimana tampilannya di perangkat pengguna.

Beberapa web browser yang umum digunakan antara lain:

Google Chrome
Mozilla Firefox
Microsoft Edge

Setiap browser memiliki kelebihan dan kekurangan, tetapi Chrome dan Firefox adalah dua browser yang paling banyak digunakan oleh developer karena memiliki alat pengembangan (developer tools) yang sangat lengkap.

Ayo Kita Mulai membuat program website profile...

Apakah Asing Kata HTML dan CSS untuk di dengar?

HTML merupakan bahasa markup yang digunakan untuk membuat tampilan website sedangkan css itu sendiri digunakan untuk mengatur tampilan atau gaya dari elemen-elemen HTML. atau dapat disimpulkan ketika html sebuah kerangka maka maka css yang menyelimuti kerangka itu.

INI Project Pertama Saya ...

Mau Mencoba Kode di atas . . .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil Saya</title>
<style>
/* Reset default margin and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* General Styles */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}

/* Container */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}

/* Header */
header {
background-color: #333;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #0779e4 3px solid;
}

header h1 {
text-align: center;
margin-bottom: 10px;
}

header p {
text-align: center;
font-size: 18px;
}

/* About Section */
#about {
padding: 30px 0;
background-color: #fff;
}

#about h2 {
text-align: center;
color: #0779e4;
}

#about p {
font-size: 18px;
text-align: center;
}

/* Skills Section */
#skills {
padding: 30px 0;
background-color: #f4f4f4;
}

#skills h2 {
text-align: center;
color: #0779e4;
}

#skills ul {
list-style: none;
text-align: center;
padding: 0;
}

#skills ul li {
font-size: 18px;
padding: 5px;
}

/* Contact Section */
#contact {
padding: 30px 0;
background-color: #fff;
}

#contact h2 {
text-align: center;
color: #0779e4;
}

#contact p {
text-align: center;
font-size: 18px;
}

/* Footer */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
margin-top: 30px;
}

footer p {
font-size: 14px;
}

</style>
</head>
<body>
<header>
<div class="container">
<h1>Selamat Datang di Profil Saya</h1>
<p>Website sederhana untuk memperkenalkan diri</p>
</div>
</header>

<section id="about">
<div class="container">
<h2>Tentang Saya</h2>
<p>Halo, nama saya [Nama Anda]. Saya seorang [pekerjaan atau hobi]. Saya memiliki passion di bidang [deskripsi minat].</p>
</div>
</section>

<section id="skills">
<div class="container">
<h2>Keterampilan</h2>
<ul>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>Python</li>
<li>Analisis Data</li>
</ul>
</div>
</section>

<section id="contact">
<div class="container">
<h2>Kontak</h2>
<p>Email: [email@example.com]</p>
</div>
</section>

Keranjang Belanjaan