Photo By Freepik

Siapa saja yang ingin berhasil di sektor teknologi harus memiliki pemahaman yang kuat tentang pembuatan situs web terutama fondasi dasar pengembangan situs web. Karena, teknologi digital saat ini selalu mengalami perubahan secara cepat.

Pembelajaran pemahaman website harus dirancang dengan cermat dan berkonsentrasi pada prinsip-prinsip pembuatan situs web, hal ini sangat penting bagi semua orang yang tertarik mempelajari pengembangan web, terlepas dari tingkat pengalamannya.

Dibawah ini, Mamang akan membahas topik-topik utama yang harus kamu tau dalam pembelajaran pembuatan situs web, sehingga memberikan dasar yang kuat bagi calon pengembang web.

Link Mangcoding1. HTML: Tulang Punggung Pengembangan Web

HTML atau Hypertext Markup Language, adalah dasar dari struktur halaman website. HTML ini bertindak sebagai komponen fundamental yang menetapkan struktur dan konten halaman web. Hal ini mirip seperti mempelajari alfabet sebelum mempelajari bahasa dan sastra.

Fondasi Dasar Pengembangan Situs HTML

Dalam pembelajaran menyeluruh tentang pembuatan situs web, kamu akan belajar bagaimana membangun struktur yang memiliki makna semantik selain memahami sintaks HTML.

Hal ini memerlukan penggunaan tag HTML yang berbeda untuk mengatur teks, termasuk daftar, tabel, dan judul serta paragraf.

Selain itu, dasar HTML yang kuat melampaui halaman web statis. Pengembang web harus mampu memperoleh pengetahuan tentang cara menambahkan komponen multimedia, seperti gambar dan video, untuk membuat situs web yang dinamis dan menarik.

Fokusnya adalah pada aksesibilitas. memastikan situs web dapat diakses dan digunakan. Selain itu, dengan mempelajari dan menguasainya HTML adalah langkah pertama untuk menjadi pengembang web yang profesional.

Link Mangcoding2. CSS : Styling untuk Estetika dan Responsif

Meskipun HTML menyediakan strukturnya, Cascading Style Sheets (CSS) menambah gaya dan daya tarik visual pada halaman web. Dalam pengembangan situs web, kamu dapat mengeksplorasi seni penataan gaya, menguasai seluk-beluk penyeleksi, properti, dan nilai CSS.

Fondasi Dasar Pengembangan Situs CSS

Hal ini termasuk memahami elemen pemosisian model kotak dan membuat desain responsif yang beradaptasi secara baik dengan berbagai ukuran layar, dari desktop hingga perangkat seluler.

Pemahaman CSS yang menyeluruh mencakup dasar-dasar penataan gaya dan mempelajari konsep lebih lanjut seperti flexbox dan tata letak. Selain itu, kamu dapat membuat antarmuka visual yang menakjubkan dan ramah pengguna, mendapatkan wawasan tentang prinsip desain dan pengalaman pengguna.

Pentingnya kerangka kerja CSS seperti Bootstrap, yang memberdayakan pengembang untuk menyederhanakan alur kerja mereka dan membangun situs web responsif secara efisien.

Dengan keterampilan CSS, pengembang web dapat mengubah dokumen HTML biasa menjadi situs web yang estetis dan efisien secara fungsional.

Link Mangcoding3. JavaScript : Menambahkan Interaktivitas dan Fungsionalitas

JavaScript adalah bahasa pemrograman yang menghidupkan halaman web, memungkinkan interaktivitas dan fungsionalitas dinamis.

Dalam pembelajaran komprehensif, kamu harus mempelajari esensi JavaScript, mulai dari sintaksis dasar hingga konsep lanjutan seperti fungsi, objek, dan penanganan event.

Fondasi Dasar Pengembangan Situs Javascript

Memahami JavaScript sangat penting untuk menciptakan pengalaman pengguna yang menarik. Pengembang mendapatkan kemampuan untuk memanipulasi Model Objek Dokumen (DOM).

JavaScript asinkron, sering kali ditangani melalui AJAX, yang merupakan aspek penting yang harus kamu tahu karena hal ini memungkinkan pengembang mengambil data dari server tanpa memuat ulang seluruh halaman.

Selain itu, belajar pengembangan situs web yang terstruktur dengan baik memberikan wawasan tentang pentingnya kerangka kerja dan pustaka JavaScript, seperti React atau Vue.js.

Alat-alat ini memberdayakan pengembang untuk membangun antarmuka pengguna yang kompleks dan interaktif secara efisien, mendorong pemahaman yang lebih mendalam tentang praktik pengembangan web modern.

Baca Juga : 5 Jenis Bahasa Pemrograman Yang Harus Dipelajari Oleh Programmer

Link Mangcoding4. Kontrol Versi : Pengembangan Kolaboratif dengan Git

Dalam dunia kolaboratif pengembangan web, kontrol versi sangat diperlukan. Landasan yang kuat dalam kontrol versi, terutama menggunakan Git, sangat penting untuk setiap pembelajaran pengembangan situs web.

Fondasi Dasar Pengembangan Situs Github

Kamu dapat mempelajari dasar-dasar Git, termasuk membuat repositori, membuat cabang, menggabungkan, dan menyelesaikan konflik. Keterampilan ini penting untuk kolaborasi yang efektif dalam tim pengembangan, dan memastikan bahwa perubahan dapat dilacak dan didokumentasikan dengan baik.

Memahami kontrol versi meningkatkan kolaborasi dan berfungsi sebagai jaring pengaman bagi masing-masing pengembang. Belajar mengelola versi kode memungkinkan pengembang bereksperimen dengan fitur atau perubahan baru tanpa takut merusak basis kode mereka secara permanen.

Hal ini mendorong pendekatan disiplin terhadap develop, mempromosikan praktik terbaik, dan memastikan bahwa proyek dapat diperluas dan dikelola dalam jangka panjang.

Link Mangcoding5. Desain Responsif : Beradaptasi dengan berbagai perangkat

Seiring dengan meningkatnya penggunaan berbagai perangkat untuk mengakses internet, desain responsif telah menjadi aspek penting dalam pengembangan web modern.

Pembelajaran pengembangan situs web yang memprioritaskan dasar-dasar harus mempelajari cara membuat tata letak yang dapat beradaptasi secara mulus dengan berbagai ukuran layar.

Fondasi Dasar Pengembangan Situs Device

Anda dapat mempelajari prinsip-prinsip desain responsif, menggunakan teknik seperti kueri media untuk mengoptimalkan pengalaman pengguna pada perangkat mulai dari ponsel cerdas hingga monitor desktop besar.

Memahami desain responsif bukan hanya tentang membuat situs web terlihat bagus di berbagai perangkat. Tetapi, hal ini juga tentang memastikan fungsionalitas dan aksesibilitas.

Kamu sebagai pengembang harus mendapatkan wawasan dalam merancang grid dan gambar yang fleksibel, memungkinkan konten mengalir secara intuitif, dan mempertahankan pengalaman pengguna yang kohesif di berbagai platform.

Keterampilan dasar ini sangat penting di era mobile-centric saat ini, di mana pengguna mengharapkan situs web menarik secara visual dan mudah dinavigasi, apa pun perangkatnya.

Link Mangcoding6. Aksesibilitas Web : Membangun Inklusivitas

Aspek yang sering diabaikan namun penting dalam pengembangan situs web adalah aksesibilitas web. Hal ini untuk membuat website yang inklusif dan dapat diakses oleh pengguna dengan beragam kemampuan.

Web Acsebility Fondasi Dasar Pengembangan Situs

Aksesibilitas web melibatkan pemahaman prinsip-prinsip aksesibilitas, menggabungkan semantik HTML yang tepat, dan memastikan kompatibilitas dengan teknologi pendukung seperti pembaca layar.

Dengan menekankan pentingnya aksesibilitas, pengembangan situs web harus menumbuhkan pola pikir inklusivitas di kalangan pengembang. Keterampilan mendasar ini bukan hanya tentang kepatuhan terhadap peraturan, tetapi tentang membuat web terbuka.

Pengembang belajar untuk memprioritaskan fitur seperti teks alternatif untuk gambar, HTML semantik, dan navigasi keyboard, sehingga hasil situs web dapat digunakan oleh khalayak yang lebih luas dan berkontribusi pada lingkungan digital yang lebih inklusif.

Link Mangcoding7. Penerapan dan Hosting : Menghidupkan Situs Web

Pembuatan sebuah situs web tidak berakhir pada perkembangannya, tetapi akan meluas ke penerapan dan Hosting. Pengembangan situs web dasar membekali kamu dengan keterampilan untuk menjalankan proyek.

Webhosting Fondasi Dasar Pengembangan Situs

Kamu harus memahami pendaftaran domain, memilih layanan hosting, dan menerapkan situs web menggunakan platform seperti GitHub Pages atau Netlify.

Selain itu, kamu juga harus mempelajari manajemen domain, sertifikat SSL, dan konfigurasi server. Pengetahuan ini sangat penting untuk memastikan keamanan dan kinerja situs web.

Itulah artikel 7 Fondasi Dasar Pengembangan Situs Web Yang Wajib Diketahui yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru untuk Anda. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.

Sumber : 7 Fondasi Dasar Pengembangan Situs Web Yang Wajib Diketahui

Photo By Freepik on Freepik

Coding menjadi keterampilan penting di dunia modern, dan semakin banyak orang yang ingin mempelajari cara membuat kode karena beragamnya karier yang tersedia bagi para pembuat kode. Lantas apakah ada Situs website untuk belajar coding secara online?

Jika Anda ingin mempelajari pengembangan perangkat lunak, bekerja sebagai pengembang, atau mengembangkan situs web, Anda memerlukan beberapa keterampilan coding.

Mengetahui cara coding dapat memberi Anda keunggulan dalam industri yang kompetitif ini, memungkinkan Anda bekerja lebih mandiri dan mendapatkan lebih banyak fleksibilitas dalam jalur karier Anda.

Ada ribuan sumber daya di web yang dapat membantu Anda mempelajari cara membuat kode, namun mencari tahu mana yang terbaik bisa jadi sesuatu hal yang rumit, terutama jika Anda baru mengenal coding.

Jadi, jika Anda siap untuk mulai mempelajari cara membuat kode, berikut adalah beberapa tempat yang bagus dan Mamang rekomendasikan untuk mulai belajar.

Link Mangcoding1. Codecademy

Mangcoding Website Untuk Belajar Coding 1

Codecademy adalah situs web pendidikan dengan tutorial coding interaktif. Tutorial ini dirancang untuk membuat pemrograman mudah dan dapat diakses oleh pemula. Pembelajaran di Codecademy mencakup HTML, CSS, JavaScript, Python, dan Ruby.

Selain itu, di Codecademy juga menggunakan bahasa yang digunakan oleh para profesional pengembangan web, seperti PHP atau Ruby on Rails. Kursus ini gratis untuk digunakan tetapi memiliki opsi Premium dengan akses ke fitur tambahan dan kursus lanjutan.

Situs ini berisi papan diskusi di mana pengguna dapat mengirimkan pertanyaan untuk mendapatkan bantuan dari pengguna lain. Selain itu, bagian terbaik tentang situs ini adalah Anda belajar sambil praktek, bukan hanya membaca artikel atau menonton video tentang cara kerja kode.

Selain dasar-dasarnya, Codecademy menawarkan bahasa pemrograman khusus, seperti Swift, untuk mengembangkan aplikasi Google dan Apple.

Kursus ini mencakup serangkaian penjelasan dan instruksi serta editor kode tempat siswa dapat mengasah keterampilan mereka.

Anda dapat ikut serta dalam paket gratis, yang mencakup pelajaran interaktif dan latihan sehari-hari tetapi terbatas pada kursus dasar. Alternatifnya, mereka menawarkan paket berbayar jika Anda ingin mempelajari lebih mendalam.

Paket Pro-nya berharga $15,99 per bulan, di mana Anda mendapatkan akses ke konten pro-anggota, kursus lanjutan, dan mendapatkan sertifikasi setelah selesai.

Situs web ini luar biasa bagi mereka yang tidak memiliki pengalaman coding sama sekali. Selain itu, situs ini menggunakan gaya pengajaran percakapan dan tidak terlalu teknis.

Link Mangcoding2. Coursera

Mangcoding Website Untuk Belajar Coding 2

Coursera adalah salah satu situs web paling terkemuka untuk mengajari orang cara membuat kode. Lebih dari 100 kursus tersedia, mulai dari Python, JavaScript, hingga Analis Data.

Setiap kursus mencakup materi, pekerjaan rumah, kuis, dan tes. Siswa dapat belajar sesuai kecepatan mereka, Selain itu, kemajuan mereka dipantau oleh Instruktur.

Banyak kursus gratis tersedia di platform ini, tetapi Anda harus mempertimbangkan kursus berbayar jika Anda menginginkan sertifikat. Kursus berbayar biasanya sekitar $39 untuk setiap kursus. Namun, mereka menawarkan masa uji coba gratis selama 7 hari.

Biasanya pembelajaran dilakukan melalui materi video, bahan bacaan, kegiatan, kuis, dan forum. Anda juga dapat menetapkan tujuan yang jelas untuk memotivasi diri sendiri.

Link Mangcoding3. Udemy

Mangcoding Website Untuk Belajar Coding 3

Udemy memberi penggunanya akses ke ratusan kursus yang ditawarkan oleh instruktur dari seluruh dunia. Mirip dengan Coursera karena memungkinkan orang mengambil kelas online gratis.

Namun, tidak seperti Coursera, Coursera lebih menekankan pada proyek dunia nyata daripada pembelajaran mandiri.

Udemy adalah salah satu situs coding online terbaik, dengan lebih dari 130.000+ kursus online. Ribuan kursus dapat diakses oleh siswa di semua tingkatan, baik pemrogram pemula, pengembang web berpengalaman, atau profesional berpengalaman yang ingin meningkatkan keterampilan mereka.

Karena ada begitu banyak pilihan, sebaiknya Anda memulai dengan kursus yang memiliki peringkat bintang tinggi dan review materi kursus yang bagus.

Dengan kursus online gratis ini, Anda dapat mengakses videonya, tetapi Anda tidak dapat berinteraksi dengan instrukturnya. Selain itu, Anda tidak bisa mendapatkan sertifikat atau menerima masukan dari mereka.

Link Mangcoding4. Code.org

Mangcoding Website Untuk Belajar Coding 4

Code.org adalah situs web luar biasa lainnya untuk mengajari anak-anak cara membuat kode. Hadi dan Ali Partovi mendirikannya pada tahun 2013 untuk mengajarkan dasar-dasar ilmu komputer kepada anak-anak.

Situs web ini menyediakan kursus yang mencakup keterampilan pemrograman dasar seperti variabel, array, dan fungsi.

Ada juga berbagai aktivitas menyenangkan yang tersedia untuk membuat prosesnya lebih menyenangkan. Misalnya, permainan bernama “Guess My Number” memungkinkan anak-anak untuk berlatih berhitung sambil bersenang-senang.

Pada situs ini terdapat katalog kursus secara eksplisit yang dirancang untuk programmer pemula yang tertarik mempelajari Python. Namun, ini sesuai untuk siswa dari segala usia atau tingkat keterampilan.

Link Mangcoding5. freeCodeCamp

Mangcoding Website Untuk Belajar Coding 5

freeCodeCamp adalah organisasi nirlaba yang didedikasikan untuk mengajarkan ilmu komputer kepada orang-orang dari segala rentang usia.

Tujuannya adalah untuk menyediakan kurikulum dan sumber daya ekstrakurikuler sumber terbuka gratis bagi siapa saja, tanpa memandang jenis kelamin, warna kulit, agama, orientasi seksual, status ekonomi, kemampuan fisik, atau pengetahuan sebelumnya, untuk mempelajari ilmu komputer.

Platform ini mengajar melalui pendekatan berbasis proyek. Setiap kursus dimulai dengan video pengantar, diikuti dengan materi tekstual, kuis, dan proyek pembelajaran coding praktis. Siswa didorong untuk fokus pada proyek mereka dan menyerahkannya setelah selesai.

FreeCodeCamp adalah salah satu platform pembelajaran coding online paling terkenal. Platform ini memiliki ribuan lulusan yang telah bekerja di perusahaan terkenal seperti Google, Apple, dan Netflix.

Setelah mendaftar, Anda akan diberikan daftar kelas yang disusun berdasarkan tingkat kesulitan. Jadi, Anda dapat segera mulai mempelajari kode sesuai tingkatan kemampuan Anda sekarang.

Link Mangcoding6. edX

Mangcoding Website Untuk Belajar Coding 6

edX mempelajari Ilmu Data, Bahasa Pemrograman, Visi Komputer, Kecerdasan Buatan, Pembelajaran Mesin, dan bidang lainnya, serta menyediakan lebih dari 190 kursus yang diajar oleh beberapa tutor. Selain itu, edX menawarkan beragam program, mulai dari MOOC hingga sertifikat.

MOOC adalah kursus yang biasanya diajarkan oleh universitas dan tersedia untuk siapa saja di seluruh dunia. Di sisi lain, sertifikatnya biasanya merupakan kursus khusus mata pelajaran dan hanya tersedia bagi individu yang lulus ujian dengan syarat tertentu.

Namun, Anda harus tahu bahwa sertifikat tidak sepenuhnya gratis. Anda harus membayar yang masing-masing biayanya sekitar $50. Namun demikian, ini adalah cara terbaik untuk belajar bahasa pemrograman seperti C++ dan Python tanpa menginvestasikan waktu atau uang dalam program gelar.

Jika Anda merasa sangat yakin dengan keterampilan Anda setelah mengikuti satu atau lebih kursus melalui edX, Anda mungkin ingin mencoba program master mereka di bidang Ilmu Komputer.

Link Mangcoding7. SoloLearn

Mangcoding Website Untuk Belajar Coding 7

SoloLearn adalah sumber yang bagus bagi mereka yang ingin mempelajari cara membuat kode sendiri. Selain itu, SoloLearn juga menawarkan program sertifikat bagi mereka yang ingin menjadi tutor untuk orang lain.

Ada tutorial dalam lima bahasa berbeda, yaitu Inggris, Spanyol, Prancis, Jerman, dan Portugis Brasil. Sumber daya yang ditawarkan oleh situs web ini sangat membantu bagi individu yang ingin mulai belajar cara membuat kode sendiri atau memerlukan bantuan dengan bahasa pengkodean tertentu.

Namun, situs ini hanya menyediakan beberapa peluang interaktif seperti Codecademy.

Link Mangcoding8. Scrimba

Mangcoding Website Untuk Belajar Coding 8

Scrimba adalah platform pengkodean interaktif online terkemuka yang mengajarkan HTML, CSS, JavaScript, dan banyak lagi. Dengan Scrimba, Anda dapat menonton kursus dari instruktur terbaik dunia dan mengikuti arahan mereka di browser Anda tanpa harus menginstal perangkat lunak apa pun.

Bagi mereka yang memilih akses offline, Scrimba juga memiliki lebih dari 30 jam konten video yang tersedia untuk diunduh. Selain sangat mudah digunakan dan memungkinkan pelajar yang ingin belajar sambil bepergian, mereka juga memiliki kursus tentang berbagai topik seperti jQuery atau Ruby.

Website ini akan menunjukkan kepada Anda contoh dan cara membuat sesuatu kode, dan setelah menunjukkan kepada Anda apa yang harus dilakukan, dan website ini juga akan merevisi dan menunjukkan apa yang tidak boleh dilakukan.

Selain itu, aspek hebat lainnya dari situs web ini adalah adanya petunjuk jelas tentang cara mendaftar dan mulai menggunakannya, yang dapat dilihat dengan cara menggulir ke bawah di bagian atas halaman web mereka.

Selain itu, ada kelas langsung di mana siswa dapat mengajukan pertanyaan melalui obrolan yang dapat membantu mereka jika mengalami kesulitan.

Link Mangcoding9. Udacity

Mangcoding Website Untuk Belajar Coding 9

Udacity menawarkan kursus komprehensif tentang pengembangan web, termasuk HTML dan CSS, JavaScript, kerangka kerja front-end seperti React dan Angular, dan kerangka kerja back-end seperti Ruby on Rails.

Kursus diatur secara mandiri, dengan tenggat waktu tugas yang harus diselesaikan sebelum melanjutkan. Selain itu, website Ini juga mencakup kuis dan forum interaktif sehingga siswa dapat memperoleh masukan dan bantuan dari instruktur, mentor, alumni, dan siswa lainnya.

Udacity menawarkan lebih dari 60 program nanodegree dalam berbagai mata pelajaran mulai dari ilmu komputer dan analisis data hingga administrasi bisnis, kewirausahaan, desain game, dan pembelajaran mesin.

Alumni program ini mencakup individu yang ingin mengubah karier dan mereka yang ingin memasuki bidang baru yang belum mereka kuasai sebelumnya seperti seseorang dengan gelar di bidang sastra yang ingin menjadi pengembang web.

Link Mangcoding10. Codewars

Mangcoding Website Untuk Belajar Coding 10

CodeWars adalah platform online tempat para pemrogram bersaing untuk memecahkan masalah pemrograman. Selain itu, Codewars menekankan pada keterlibatan komunitas, di mana anggota dapat menilai diri mereka sendiri satu sama lain.

Pengguna bisa memulai dengan memilih salah satu bahasa yang ingin mereka pelajari. Mereka kemudian membagikan jawaban mereka untuk ditinjau, dan tingkat kesulitan diberikan kepada mereka.

Mereka dapat melanjutkan ke rangkaian tantangan berikutnya setelah menyelesaikannya pada tingkat kesulitan tertentu.

Link Mangcoding11. CodeMonkey

Mangcoding Website Untuk Belajar Coding 11

CodeMonkey menugaskan anak-anak untuk membantu monyet mengambil pisangnya yang hilang saat melakukan perjalanan melintasi peta lucu yang penuh dengan teka-teki pengkodean prosedural, penyelesaian tugas ini menggunakan kode nyata yang ditulis dalam CoffeeScript atau Python.

Setiap level ditampilkan dari perspektif top-down, dan pengguna harus menulis serta menjalankan cuplikan kode di satu bagian layar untuk mengarahkan monyet melewati setiap level di bagian lain.

Format tersegmentasi ini memungkinkan siswa untuk melihat hasil usaha mereka dengan segera, dan permainan berjalan melalui setiap baris kode saat dilakukan.

Kursus dimulai dengan pengkodean berbasis blok untuk anak kecil dan berlanjut ke aktivitas seperti Kursus Dodo Does Math dan Banana Tales Python.

Dengan menjamurnya bootcamp pengkodean dan sumber daya online, mempelajari cara membuat kode menjadi lebih mudah dari sebelumnya. Namun, ada begitu banyak pilihan sehingga diperlukan upaya yang cukup besar untuk mengetahui mana yang bermanfaat.

Daftar situs web diatas yang kami bahas mudah-mudahan dapat membantu Anda mempelajari cara membuat kode, menjadi pengembang web, atau bahkan memulai bisnis Anda sendiri.

Saat Anda maju dalam menggunakan salah satu situs web ini, pastikan untuk membangun sesuatu sendiri untuk terus berlatih dan terus belajar.

Mempelajari cara membuat kode mungkin tampak menakutkan pada awalnya, tetapi dengan referensi ini, kami berharap segalanya menjadi bisa lebih mudah.

Itulah artikel 11 Situs Website Untuk Belajar Coding Dengan Panduan Komprehensif yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru untuk Anda. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.

Sumber : 11 Situs Website Untuk Belajar Coding Dengan Panduan Komprehensif

Photo by Ferenc Almasi on Unsplash

Pada bab sebelumnya kita sudah mengetahui pengertian CSS dan bagaimana CSS disisipkan dengan teknik inline CSS. pada artikel kali ini , kita akan belajar bagaimana menyisipkan CSS dengan menggunakan internal/embeded CSS dan external CSS.

Link MangcodingInternal CSS

Sebelumnya kita sudah mendapatkan gambaran bahwa Internal CSS adalah sintaks CSS yang ditulis bersamaan dengan file HTML yang kita buat dengan menggunakan elemen <style>… </style>.

Internal CSS lazimnya ditulis didalam tag/elemen <head> yang berada pada bagian atas dokumen HTML, namun meskipun disimpan didalam body atau didalam elemen lainnya akan tetap terbaca selama elemen yang membutuhkannya berada di bawahnya.

Untuk menyeleksi elemen yang akan kita gunakan dalam Internal CSS kita akan mengenal istilah selector yang mana akan kita pelajari setelah memahami penggunaan External CSS.

<html>
    <head>
        <meta charset="UTF-8">
        <title>tes HTML</title>
        <style>
            header {
                background: url('https://mangcoding.com/wp-content/uploads/2017/02/cropped-pexels-photo-48727.jpeg') 
                           no-repeat center center;
                padding: 50px;
            }
            h2 {
                color: #007EC7;
                text-align: center;
            }
            .subtitle {
                background: rgba(255, 255, 255, 0.7);
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <header>
            <h2>Welcome to my Site</h2>
            <p class="subtitle">Selamat datang disitus pembelajaran coding. Tempat berbagi ilmu dan pendidikan</p>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam incidunt aut,
 nesciunt eaque ullam. Quasi, laudantium optio enim. Sequi, eaque quod. Voluptatum vero 
rerum, assumenda itaque totam consequatur dicta dolore.</p>
    </body>
</html>

 

berdasarkan contoh diatas, bandingkan pengunaan CSS internal dengan inline CSS, lebih rapih dan mudah bukan? ^_^. Meskipun demikian, penggunaan CSS internal sedikit sekali di gunakan untuk membangun sebuah web.

CSS internal biasanya di generate bersamaan dengan tag HTML yang dihasilkan oleh server side scripting seperti PHP, nodeJS, Ruby, dll. CSS pada umumnya dibuat dengan menggunakan External CSS seperti yang akan kita bahas dibawah ini. masih semangat kan kawan-kawan?

Link MangcodingExternal CSS

External CSS memisahkan antara file html dengan file CSS. file CSS berkestensi .css kemudian dihubungkan dengan menggunakan tag/elemen <link> yang biasanya di simpan di dalam tag <head>.

Penggunaanya mirip sekali dengan Internal CSS yang membutuhkan selector untuk menyeleksi elemen mana yang akan kita sisipkan CSS. untuk memahami penggunaan CSS External, ikuti langkah berikut ini :

  1. Buatlah halaman html yang terdiri dari header berisi text (seperti pada materi sebelumnya) kemudian berikan judul dan konten pada halaman web yang anda buat. (lihat contoh dibawah ini)
  2. pada tagbuatlah tag seperti dibawah ini, atau jika anda menggunakan sublime text cukup mengetikkan kata link lalu pencet tab, pastikan tampilan headnya jadi seperti ini.
<head>
  <meta charset="UTF-8">
  <title>External HTML</title>
  <link rel="stylesheet" href="style.css"/>
</head>

 

Seperti yang telah anda buat sebelumnya pada materi internal CSS (Lihat contoh dibawah ini)

Demikian penjelasan singkat mengenai CSS internal dan external. pada saat kita membuat CSS pada contoh diatas, secara tidak langsung kita sudah menyeleksi elemen mana yang akan kita beri CSS dengan menggunakan selector Tag/Elemen.

Apa itu Selector? Berapa banyak tipe selector? Pokok bahasan ini kita pelajari pada bagian selanjutnya.

Keep Learning ^_^ Semangat

Itulah artikel Pengenalan CSS bagian 2 (Internal dan External CSS) yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.

Photo by Jackson Sophat on Unsplash

CSS singkatan dari Cascading Style Sheets. CSS mendeskripsikan bagaimana elemen HTML ditampilkan pada halaman web atau media lainnya. CSS dapat mempermudah pekerjaan kita dalam mengontrol beberapa layar/blok secara keseluruhan dalam waktu bersamaan.

Kalo kita misalkan HTML itu adalah layout/struktur elemen dari suatu rumah, maka CSS ini adalah warna chat, jenis genteng, texture keramik, dan bahkan posisi lemari.

Dalam suatu kasus, misalnya tetangga sebelah sedang membangun sebuah rumah dengan 3 buah kamar. Kamar tersebut adalah milik Budi, Wati, dan Nina. dalam kasus ini kita memiliki blok/elemen yang bernama kamar. kamar-kamar itu punya id yg berbeda-beda yaitu nama pemilik kamar tersebut.

Dengan adanya penamaan tersebut, kita bisa memberitahu tukang bangunan bahwa kamar Nina dan budi pengen dicat warna biru sedangkan kamar wati pengen dicat warna cream.

Berangkat dari contoh kasus diatas, hal tersebut berlaku untuk pengaturan HTML dan CSS. Untuk memberikan style pada suatu blok/layer kita harus mendefinisikan elemennya terlebih dahulu dengan menggunakan selector.

CSS dapat kita sisipkan ke dalam sebuah tag/elemen HTML dengan 3 cara:

  1. Inline CSS : sintaks CSS disipkan langsung pada tag/elemen yang kita buat dengan menggunakan attribute style
  2. Internal CSS :  sintaks CSS disisipkan pada halaman yang sama dengan menggunakan Tag <style> </style>
  3. External CSS : sintaks css disimpan pada file terpisah berekstensi .css misalnya style.css dan dihubungkan dengan menggunakan tag <link>

Untuk mempermudah memahami CSS diatas, mari kita bahas satu persatu.

Link MangcodingInline CSS

Seperti yang sudah kita sebutkan diatas, CSS dengan tipe ini langsung kita sisipkan pada tag HTML yang kita buat dengan menggunakan attribut style. (jika anda masih bingung apa itu tag dan apa itu attribut silakan masuk ke materi dasar HTML terlebih dahulu).

Contoh : saya mau membuat judul halaman dengan text warna biru dan bergaris bawah tipis. atau memberikan background pada suatu elemen. maka dengan menggunakan inline CSS anda cukup membuat seperti dibawah ini (lihat hasilnya pada tab result)

Contoh lainnya:

Penjelasan singkat :

color digunakan untuk membuat warna pada text yang berada pada elemen yang kita seleksi, diisi dengan kode warna. untuk mendapatkan kode warna yang mudah, anda bisa menginstall aplikasi Gpick (Open source) untuk pengguna Linux, atau Color scheme (berbayar) untuk pengguna windows, atau bisa juga dengan menggunakan software pengolah design seperti Gimp atau Adobe Photoshop. Kode warna bisa disii dengan:

  • kode valid warna (dalam bahasa inggris) contohnya red, green, blue
  • kode RGB rgb(255, 0, 0) atau rgba (255,255,255, 0.5) ditambah transparancy
  • kode hexa warna 6 digit, contohnya #000000 (Hitam), #CCCCCC (Abu-abu) atau #FFFFFF (Putih), dsb.

border digunakan untuk memberikan garis pada suatu elemen, diisi dengan jenis border (solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden, mix silakan dicoba satu persatu), kemudian diikuti oleh lebar border (1px, 2px, dll) lalu diikuti oleh kode warna. selain itu, border pun bisa kita spesifikasikan secara khusus. misalnya border-left, border-right, border-bottom, atau border-top. untuk penjelasan lebih detail mengenai border anda bisa klik link ini,

text-align digunakan untuk memberikan pertaan pada text yang kita buat, diisi dengan left, right, center atau justify.

background digunakan untuk memberikan latar belakang pada elemen yang kita buat. background bisa langsung diisi dengan menggunakan kode warna seperti pokok bahasan diatas, atau bisa juga dengan menggunakan url gambar. khusus untuk backgorund gambar, kita bisa menambahkan repeater secara horizontal atau vertikal dengan pilihan repeat, no-repeat, repeat-x,repeat-y, initial, dan inhherit.

Teknik ini “dulu” sering kita gunakan untuk memberikan efek realism pada design yang kita buat sebelum masuk era flat design. teknik ini digunakan apabila elemen yang kita buat lebih besar dari gambar background yang tersedia, sehingga kita diberikan pilihan untuk melakukan pengulangan secara vertikal/horizontal atau tidak sama sekali.

Selain repeater, bg gambar juga bisa diatur posisinya misalnya saya pengen secara vertikal di tengah dan secara horizontal diatas. untuk memahami lebih lanjut mengenai background kita bisa temui disini

padding digunakan untuk memberikan jarak didalam suatu elemen konten. padding berbanding terbalik dengan margin, singkatnya padding kedalam sedangkan margin keluar. perhatikan gambar dibawah ini

Penjelasan mengenai sintaks-sintaks CSS lain akan kita temui pada bahasan-bahasan selanjutnya, atau bisa kita dapatkan penjelasan lengkapnya di https://www.w3.org/TR/CSS21/indexlist.html

Demikian penjelasan singkat untuk pengenalan CSS, mudah-mudahan bermanfaat. Sebetulnya, penggunaan CSS dengan menggunakan teknik inline tidak dianjurkan untuk sering digunakan, dikarenakan membuat struktur HTML jadi terlihat kurang rapi dan kita harus menyisipkan kode CSS satu persatu pada elemen yang akan kita buat.

Oleh karena itu, di pembahasan selanjutnya, kita akan belajar bagaimana CSS  di susun lebih rapi dengan menggunakan selector yang akan di impelementasikan pada internal dan external CSS.

Itulah artikel Pengenalan CSS bagian 1 yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.

Keep Learning ^_^ dan Semangat.

Photo by Jackson Sophat on Unsplash

Berikut ini, adalah raw materi “Dasar Pemrograman Web untuk Pemula” yang akan saya tulis didalam blog ini. semoga bermanfaat untuk rekan-rekan developer yang baru belajar.

Note : Penulisan artikel ini tidak terstruktur, saya buat dan sesuaikan dengan materi pengajaran yang akan saya berikan di kelas. jadi saya mohon maaf karena masih ada beberapa materi yang belum tersedia, Terima kasih. (materi yang sudah tersedia, ditandai dengan hyperlink bergaris bawah)

Pengenalan HTML

Persiapan Belajar

  • Pengenalan git
  • Dasar-dasar git
  • Penggunaan Sublime

Dasar HTML

Dasar HTML

CSS

  • Pengertian CSS
  • Inline CSS
  • Internal CSS
  • External CSS
  • Selector CSS dengan menggunakan ID, Clas, Tag
  • CSS Selector lanjutan
  • CSS Selector lanjutan bagian 2
  • Inline & Block Element
  • Perbedaan block dan inline pada elemen HTML
  • CSS Box Model
  • Studi Kasus
  • Table

  • Pengertian Baris dan Kolom
  • Penggabungan Cell
  • Penerapan CSS dalam Table
  • Studi Kasus
  • Form

  • – Pengertian Form
  • – Elemen-elemen Form
  • – Form Attribute
  • – Penerapan CSS dalam Form
  • – Studi Kasus pembuatan facebook registration page
  • Media

  • Audio/Video
  • Canvas
  • SVG
  • Studi Kasus
  • layouting

  • Pengenalan Layout dan Grid
  • HTML Table
  • CSS Float Property
  • Studi Kasus 1
  • CSS framework
  • CSS flexbox
  • Studi Kasus 2
  • CSS Responsive

  • Pengertian Responsive Webdesign
  • Viewport dan Grid View
  • Media Queries
  • Studi Kasus
  • Pembuatan template

  • Pengenalan Software Design
  • Design & Slicing
  • Menulis Kode HTML
  • Menulis Kode CSS
  • CSS Responsive
  • Publish to git page
  • CSS Trick

  • Dropdown Menu
  • Penggunaan Google Font
  • Membuat Background FullWidth
  • Image Sprite