Widget HTML Atas

Hosting Unlimited Indonesia

Tutorial Dasar HTML Dan CSS Terbaru : Mudah, Lengkap & Keren

Tutorial Dasar HTML Dan CSS Terbaru : Mudah, Lengkap & Keren

Ihsan Magazine - HTML dan CSS adalah salah satu bahasa yang wajib anda kuasai, jadi saya buat tutorial singkat dan lengkap untuk pemula, disini saya akan coba langsung praktek dan anda akan belajar HTML dan CSS dari dasar dan pastinya keren dan bisa menjadi pondasi projek awal anda.

Disini nanti akan saya jelaskan beberapa yang penting yang umum digunakan dan contoh study kasus membuat website sederhana dengan html dan css, tapi kita belajar basic nya dulu yah.

Tools :

  1. Text Editor (Bisa Notepad, Notepad++, atau Visual Studio Code)
  2. Browser (Google Chrome / Mozilla Firefox)
Contoh Hasil :
  • HTML Dasar
https://codepen.io/gigsaws/pen/JjXamvb

  • HTML 5 Dasar
https://codepen.io/gigsaws/pen/gOrdyxM

  • HTML CSS Rensposive Dasar
https://codepen.io/gigsaws/pen/VwaVvbQ

  • Halaman Tribute Dasar
https://tribute-html.vercel.app/

  • Parallax Sederhana
https://simple-paralax.vercel.app/

Apa itu HTML?

HTML itu adalah sebuah bahasa yang menggunakan markup atau penanda untuk membuat halaman web, Penanda atau markup ini, nanti akan kita sebut dengan Tag.

HTML berperan untuk menentukan struktur konten dan tampilan dari sebuah web.

Apa itu tag html?

Semua penulisan code html pasti wajib diapit oleh tag.

Sebagian besar element HTML memerlukan sepasang tag, tag pembuka dan tag penutup, dengan teks disisipkan di antara keduanya. Saat menggunakan tag penutup, pastikan untuk meletakkan / 

Contoh Sederhana HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Judul web yang muncul di tab browser</title>
</head>
<body>
    <nav>
        <ul>
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
        </ul>
    </nav>

    <header>
        <h1>Judul Website</h1>
        <p>Ini untuk Slogan Website</p>
    </header>

    <main>

        <section>
            <center>Selamat Belajar! Ini hanya contoh pengenalan saja.</center>
        </section>

        <section>
            <h2>Ini Contoh Penggunaan h2</h2>
            <p>Ceritanya ini intisari dari artikel yang akan ditampilkan</p>
        </section>

        <section>
            <h3>Ini Contoh Penggunaan h3</h3>
            <p>Biasanya digunakan juga buat sub judul dan disini
                masih banyak lagi seperti <strong>Kalimat tebal</strong>
            </p>
        </section>

        <section>
            <h3>Tag lainnya yang sering dipakai</h3>
            <p>Seperti tag a, tr,td,table,form,select,option,value,figcaption,textarea,img,script,linkrel,
                span dan yang paling sering dipakai adalah div bisa pakai div class atau div id.
            </p>
        </section>

    </main>

    <footer>
        <p>Copyright &copy; 2020 | Ihsan Magazine</p>
    </footer>

    <!-- javascript -->
    <script src="main.js"></script>
</body>
</html>

Tag Judul

Tag judul digunakan untuk memformat element judul. 

Tag ini bervariasi mulai dari <h1> hingga <h6>, <h1> menjadi yang terbesar dan <h6> menjadi yang terkecil (* h mewakili heading (judul)).

Tag Paragraf

Tag <p> menentukan paragraf (* p mewakili paragraf). 

Teks yang diapit oleh tag seperti <h2> dan <p> dimulai di baris baru.

Menggunakan Judul dan Paragraf

Tag <h1>...<h6> digunakan sesuai ukuran dan signifikansi judul seperti ditunjukkan di bawah. Untuk teks yang bukan merupakan judul, gunakan tag <p>.

Komentar


Teks yang diapit oleh <!-- --> menjadi komentar. 

Komentar tidak ditampilkan di browser. Komentar sangat berguna untuk menjelaskan code Anda.

Tag Tautan


Setiap tautan memiliki tujuan. Jadi, agar tautan berfungsi, Anda harus menentukan URL tujuan di element <a> dengan menambahkan atribut href. Seperti yang ditampilkan pada gambar di sisi kiri, URL tujuan masuk ke bagian url dari <a href="url">.

Tag Gambar



img Tag <img> digunakan untuk menampilkan gambar. Kita dapat menetapkan gambar dengan menentukan url di atribut src seperti berikut: <img src="url">. Perhatikan bahwa tag <img> tidak memerlukan tag penutup karena tidak ada teks yang diapit.

Daftar/List

Anda dapat membuat daftar dengan mengapit teks dengan tag <li>.

Jenis daftar akan berubah tergantung pada tag yang Anda gunakan. Dengan tag <ul> Anda dapat membuat daftar dengan bullet. Jika element Anda "bersarang" seperti gambar dikiri bawah ini, element yang menutupi akan menjadi induk dan element yang ditutupi akan menjadi anak-nya.

Apa Itu CSS?



CSS digunakan untuk mendesain situs web. Dengan CSS, Anda dapat mengubah hal-hal seperti warna, ukuran, dan spasi pada element HTML. 

Gambar disisi kiri hanya terdiri dari HTML saja. Dengan menerapkan CSS, Anda dapat menentukan style seperti tata letak, sesuai contoh yang ditampilkan disisi kanan.

Cara Kerja CSS

CSS ditulis dalam file terpisah dari HTML. Anda dapat menerapkan CSS ke element HTML dengan menentukan "dimana", "apa", dan "bagaimana" Anda ingin mengubahnya. 

Pada contoh dibawah, CSS diterapkan ke element <h1> ("dimana"), dan warnanya ("apa") diubah menjadi merah ("bagaimana"). Element HTML yang ditargetkan disebut sebagai Selector.

Warna


Mari kita pelajari property color (warna)! Di CSS, warna ditentukan oleh nilai heksadesimal seperti color: #ff0000;. Anda tidak perlu menghafal nilai heksadesimal warna tersebut, karena Anda dapat mencarinya secara online.

Sintax CSS

Ada beberapa hal yang harus diingat saat menulis CSS. Seperti HTML, Anda harus selalu mengindentasi code CSS seperti gambar di bawah. Selain itu, perhatikan bahwa anda harus menambahkan titik dua : di akhir property CSS dan titik koma ; diakhir baris seperti gambar dibawah.

Ukuran Font

Ukuran font dapat ditetapkan dengan property font-size. Satuan umum untuk menentukan font-size adalah px (piksel), bisa juga pakai em atau rem.

Jenis Font



Dengan property font-family, Anda dapat menentukan jenis font. Anda dapat melakukan ini dengan menetapkanfont-family: nama font; Jika nama font berisi spasi, Anda harus mengapitnya dengan tanda petik ganda.

Aneka Ragam Font


Saat menetapkan property font-family, Anda dapat menentukan berbagai jenis font seperti serif dan sans-serif. Anda tidak perlu mengingat nama font karena anda bisa mencarinya secara online.

Warna Latar Belakang

background-color Property background-color memungkinkan Anda untuk mengubah warna latar belakang. Anda dapat menetapkan warna latar belakang seperti menetapkan property color. Selain itu, jika huruf yang sama memanjang seperti #dddddd, ini dapat disingkat menjadi #ddd.

Lebar dan Tinggi



Untuk mengubah lebar dan tinggi element, gunakan property width (lebar) dan height (tinggi). Unit kedua element ini dapat ditentukan dengan px, sama seperti font-size.

Menerapkan CSS ke element tertentu



Jika ada beberapa element <li> di code Anda, menerapkan CSS seperti gambar dibawah akan mengubah semua element <li> menjadi merah. Jadi, bagaimana cara mengubah hanya satu element <li> menjadi merah?

Memberi Label Pada Tag



Anda dapat melakukannya dengan memberi label pada element yang ditargetkan dengan menggunakan atribut class. Dengan menambahkan class ke tag HTML, Anda dapat menerapkan CSS yang berbeda ke setiap element. Saat menerapkan CSS ke class selector, perhatikan bahwa titik . diperlukan di depan nama class.

Menerapkan CSS ke Beberapa Tag


Seperti gambar dibawah, Jika Anda menetapkan nama class yang sama kebeberapa element HTML, CSS yang sama akan diterapkan untuk semuanya.

Syntax untuk Class

Seperti disebutkan sebelumnya, nama selector class selalu dimulai dengan titik. Jika Anda lupa memberikan titik, CSS tidak akan diterapkan. Perhatikan bahwa selector class dimulai dengan titik, tetapi tag tidak demikian.

Study Kasus Membuat Tampilan Web Sederhana



Kini saatnya membuat situs pertama Anda! Lihat gambar di atas untuk mendapatkan ide tentang apa yang akan Anda ciptakan.

Struktur HTML


Di dokumen HTML, ada beberapa aturan yang harus Anda ikuti. Misalnya, element <head> dan <body> wajib berada didalam apitan element <html> Element <head> berisi informasi dokumen sementara element <body> berisi konten yang terlihat di browser.

<head> Tag

Element <head> berisi settingan dokumen HTML yang tidak terlihat dibrowser. Ada tiga element yang harus Anda letakkan di <head>. Kita akan lihat masing-masing element ini dipelajaran berikutnya.

Konten dalam Tag <head>


Dalam element <head>, kita akan menentukan 1) pengcodean karakter, 2) judul situs web, dan 3) tautan ke file CSS. Anda tidak harus menghapalnya, namun mari kita lihat arti element ini.

Judul untuk Situs Web Anda



title Element <title> menentukan judul dokumen. Seperti yang ditampilkan pada gambar disisi kanan, judul yang ditentukan di element <title> hanya akan muncul di tab browser.

Menautkan file CSS


Pada latihan kita, code CSS yang Anda tulis di stylesheet.css akan langsung muncul di jendela "Jawaban Anda". Namun umumnya tidak demikian. Anda harus membuat tautan antara HTML dan file CSS dengan menentukan <link rel="stylesheet"> di dokumen HTML Anda. Anda dapat menentukan nama file CSS menggunakan atribut href.

Layout Dasar


Layout (tata letak) adalah salah satu bagian paling penting dalam membuat situs web. Layout situs web yang akan Anda buat umumnya terdiri dari tiga bagian seperti yang ditampilkan pada gambar dibawah.

Tag <div>



Kita akan membuat tata letak dengan element <div> (※ "div" mewakili "divisi"). Tag <div> digunakan untuk mengelompokkan element. Seperti contoh dibawah, layout dibagi menjadi tiga element <div> dengan nama class header, main, dan footer.

Header



Setelah tata letak dasar selesai dikerjakan, sekarang mari kita mengerjakan beberapa detailnya. Pertama, kita akan membuat header seperti gambar dibawah.

Struktur Header




Mari kita periksa struktur header. Ada logo "Progate" dan daftar. Mari kita kelompokkan kedua bagian ini menggunakan element <div> seperti yang ditampilkan di bawah.

Menghapus Bullet dari Item Daftar


Dengan menerapkan property list-style di element <li>, Anda dapat menghilangkan bullet. Karena kita tidak menginginkan bullet didaftar kita, mari kita tetapkan list-style ke none.

Menyejajarkan Header Secara Horizontal



Umumnya, element yang ditulis di HTML disejajarkan secara vertikal. Untuk menyejajarkannya secara horizontal, kita membutuhkan CSS. Di pelajaran ini, kita akan mempelajari cara membuat tata letak horizontal seperti yang ditampilkan gambar disisi kanan bawah.

Property Float




Dengan menggunakan property float, Anda dapat menyejajarkan element secara horizontal. Seperti yang ditampilkan pada contoh, menentukan float: left; akan mengatur element secara bersisian dari kiri ke kanan.

Menyejajarkan Item Daftar Secara Bersisian



Mari kita mulai mengatur item daftar diheader secara bersisian. Dengan menerapkan float: left; ke setiap element <li> , Anda dapat menyejajarkannya secara horizontal dari kiri ke kanan.

Menyejajarkan Logo dan Daftar



Kemudian, mari kita letakkan logo header dan keseluruhan daftar secara bersisian. Dengan menerapkan float: left; ke header-logo seperti yang ditampilkan dibawah, Anda dapat menyejajarkan logo dan keseluruhan daftar secara horizontal .

Menyesuaikan Ruang

Mari kita sesuaikan ruang antara element di header sehingga logo dan daftar di header ditempatkan diposisi yang sesuai seperti yang ditampilkan dibawah.

Menambahkan Ruang ke Element




Jika Anda ingin menambahkan ruang ke element, Anda dapat menggunakan property padding. Dengan menerapkan padding: 〇〇px;, ruang yang ditentukan akan ditambahkan ke semua sisi element.

Menerapkan Padding ke Satu Sisi Saja




Anda mungkin ingin menambahkan ruang hanya ke satu sisi element. Dalam kasus ini, Anda dapat menggunakan property seperti padding-top, padding-right, padding-bottom dan padding-left. Misalnya, untuk menambahkan ruang dibagian atas, tetapkan padding-top: 〇〇px;.

Shorthand Padding


Anda dapat menggunakan shorthand saat menerapkan padding. Anda dapat menerapkan padding ke beberapa sisi menggunakan satu property saja. Saat empat nilai ditentukan, padding diterapkan searah jarum jam dari bagian atas. Saat dua nilai ditentukan, padding diterapkan dalam urutan "atas/bawah" dan "kanan/kiri".

Footer



Sekarang, kita akan mengerjakan tata letak footer. Sama seperti header, mari kita periksa desain dan strukturnya. Disisi kiri footer terdapat logo, dan di sisi kanan terdapat daftar.

Struktur Footer



Saat membuat header, kita menerapkan float dan padding ke setiap element <li>. Karena itu, property CSS juga diterapkan ke element <li> di footer. Menurut Anda, bagaimana kita dapat menerapkan property CSS ini hanya ke tag <li> di header?

Selector Bersarang



Dengan menambahkan li setelah header-list (dengan spasi di antara keduanya), Anda dapat menerapkan CSS hanya ke element <li> di header-list. Ini memungkinkan Anda untuk menerapkan CSS yang berbeda ke element <li> di header dan element <li> di footer.

Mengatur Ulang Logo dan Daftar



Mari kita lihat gambar dibawah. Logo dan daftar menu footer masing-masing berada diujung kiri dan kanan. Kita telah mempelajari cara menyejajarkan element dari kiri menggunakan float: left, namun bagaimana jika kita mau menyejajarkannya dari kanan?

float: right


Dengan float: right, Anda dapat menyejajarkan element secara horizontal dari kiri ke kanan.

Memosisikan Element ke Kiri dan Kanan



Dengan menggabungkan float: left; dan float: right;, Anda dapat meletakkan logo dan daftar menu footer di baris dari kiri kekanan. 

Mari kita terapkan float: left; ke selector footer-logo sehingga posisinya akan ke tepi kiri, dan menerapkan float: right; ke selector footer-list untuk memindahkannya ke tepi kanan.

Layout Bagian Utama




Mari kita beralih ke layout bagian utama! Seperti yang ditampilkan dibawah, layout utama terdiri dari tiga element, yaitu copy-container, contents, dan contact-form. Ini mungkin akan sedikit lebih rumit daripada layout lain yang telah kita buat. 

Tapi jangan khawatir! Kami akan menjelaskan setiap langkahnya.

Menerapkan CSS ke Sebagian Teks


Pada gambar di bawah, perhatikan bahwa titik (.) di element <h1> "HELLO WORLD." berwarna merah. Kami akan menunjukkan cara menerapkannya.

Tag <span>

span Anda dapat menerapkan CSS ke sebagian teks dengan mengapitnya di tag <span>. Gambar dibawah mengilustrasikan hal ini dengan menerapkan color: red; ke selector span. Tidak ada baris baru yang dimasukkan sebelum atau setelah element <span>.

Element block dan Inline



Di HTML, beberapa element akan dimulai dibaris baru dan beberapa tidak. Element block seperti div akan di mulai dibaris baru, dan diperluas ke keseluruhan lebar element induknya. Sedangkan Element inline seperti span hanya mengambil lebar secukupnya saja.

Konten


Bagian berikutnya adalah konten. Pertama, mari kita buat bagian layout konten. Kita memerlukan judul dan 4 contents-item.

Batas



Pada gambar di bawah, element <h3> memiliki garis batas dibawahnya. Dipelajaran ini, kita akan belajar cara membuatnya.

Syntax untuk Batas

Anda dapat menambahkan batas dengan property border. Seperti yang ditampilkan pada gambar, Anda dapat menentukan lebar, style, dan warna. Gunakan property border untuk menerapkan batas ke semua sisi. Untuk menambahkan batas kesisi tertentu, gunakan salah satu property berikut: border-bottom, border-top, border-left, atau border-right.

Ruang di dalam dan di luar batas



Seperti ditampilkan di bawah, ada ruang yang ditambahkan diatas dan dibawah garis batas. Pada slide berikutnya, kita akan mempelajari cara menambahkan ruang didalam dan diluar garis batas.

Padding dan Margin

margin Sebelumnya kita menggunakan property padding untuk memberikan ruang disekitar element. Namun, padding hanya menambahkan ruang di dalam batas. Untuk menambahkan ruang di luar batas, anda dapat menggunakan property margin. Anda dapat menentukan nilai margin seperti menentukan nilai padding.

Model Kotak

Property margin, border dan padding yang telah kita bahas sejauh ini didasarkan pada konsep model kotak. Setiap element HTML memiliki batas (secara default, sebagian besarnya tidak terlihat). Ruang diluar batas kotak adalah margin, sedangkan ruang diantara batas dan teks adalah padding.

Shorthand Margin


Seperti property padding, Anda dapat menentukan margin secara satu per satu disetiap sisinya, atau sekaligus menggunakan satu property saja.

Formulir


DIpelajaran ini, kita akan membuat formulir pertanyaan seperti gambar dibawah ini! Ayo langsung mulai!

Tag <input> dan <textarea>


Selanjutnya, mari kita lihat cara membuat bidang input. Tag <input> digunakan untuk menerima satu baris teks, sementara tag <textarea> digunakan untuk menerima beberapa baris teks. Perhatikan bahwa tag <input> tidak membutuhkan tag penutup.

Tombol Submit (Kirim)


Kita juga dapat membuat tombol submit (kirim) dengan menambahkan atribut type ke element <input>. Saat Anda menetapkan atribut type ke submit, element <input> menjadi tombol submit (kirim) seperti gambar di bawah. Secara default, teks yang ditampilkan ditombol adalah "Submit".

Atribut Nilai


Jika diinginkan, Anda dapat mengubah teks yang ditampilkan di tombol submit (kirim) dengan menentukan atribut value. Dengan atribut ini, kita dapat mengubah nama tombol submit menjadi apapun, seperti Kirim.

Menerapkan CSS ke Beberapa Selector

Anda dapat mengelompokkan CSS yang sama dengan memisahkan beberapa selector dengan koma , seperti yang ditunjukkan pada gambar tengah. 

Dengan melakukan hal tersebut, Anda dapat menerapkan CSS yang sama ke berbagai selector. Untuk situs web kita, mari terapkan CSS yang sama ke element <input> dan <textarea> menggunakan metode ini.

Contoh Hasil :

See the Pen Belajar HTML Satu by Muhammad Ihsan (@gigsaws) on CodePen.

Belajar HTML 5

Oke, Selanjutnya kita akan belajar membuat web tampilan dasar menggunakan HTML 5 Dan CSS 3, Dengan contoh kasus landing page sederhana.

Halaman web yang akan kita kerjakan, akan memiliki layout (tata letak) HTML seperti gambar dibawah ini.


<header> dan <footer>


Dikarenakan banyak halaman web yang memiliki header dan footer, HTML memiliki tag untuk keduanya. 

Selain menggunakan <div class="header"> dan <div class="footer"> seperti pada pelajaran sebelumnya, kita juga dapat menggunakan tag <header> dan <footer>. Cara ini adalah cara yang lebih umum digunakan.

Layout Bagian Atas

Selanjutnya, kita akan mengerjakan bagian atas halaman web. Lihat layout HTML-nya digambar bawah ini.

background-image

Bagian atas halaman yang akan kita kerjakan memiliki background image (gambar latar belakang). Kita dapat menentukan gambar ini dengan menggunakan CSS property background-image yang harus ditulis seperti ini: background-image: url(URL);.


background-size


Pada saat mengunakan property background-image, jika gambar yang ditentukan memiliki size lebih kecil dari tempat yang disediakan, gambar tersebut akan diduplikasikan hingga memenuhi seluruh ruang yang ada. 

Jika Anda ingin memperbesar gambar untuk memenuhi ruanganya tanpa duplikasi, Anda dapat mengunakan property CSS background-size: cover;.

Menengahkan Posisi Element

Untuk menengahkan class container secara horizontal. Kita dapat melakukannya dengan menentukan margin kiri & kanan ke auto. Perhatian, Anda harus menentukan width terlebih dahulu sebelum menerapkan settingan ini. Untuk sekarang, Anda tidak perlu memahami arti class container.

Transparansi dan Spasi Antar-Huruf

Dengan membandingkan halaman web yang kita kerjakan dengan hasil akhir yang diinginkan, kita dapat melihat perbedaannya sebagai berikut:
  • Huruf judul agak transparan
  • Jarak antar huruf di "BELAJAR CODING" lebih besar.
opacity


Untuk membuat element menjadi transparan, Anda dapat menggunakan CSS property opacity. Nilai yang dapat Anda tentukan untuk opacity adalah antara 0.0 dan 1.0, dimana 0.0 adalah yang paling transparan.

letter-spacing

Sedangkan untuk jarak antar huruf, Anda dapat menggunakan CSS property letter-spacing.

Membuat Tombol

Didalam pelajaran ini kita akan belajar membuat tombol dengan menggunakan tag <a>. 

Karena tag <a> adalah element inline, kita tidak dapat menentukan ukuran dan penspasiannya. Namun jangan khawatir, kita akan cari tahu bagaimana mengatasi hal ini.

Element Inline-block


Element inline-block memiliki karakteristik seperti element block dan inline. Seperti halnya element inline, element inline-block akan disejajarkan secara horizontal. Selain itu, ukuran dan spasinya juga dapat dirubah, sama seperti pada element block.

display

Tag <a> adalah element inline secara default, namun Anda dapat menggunakan CSS property display untuk mengaturnya. Property display dapat memiliki nilai block, inline-block, atau inline.

Menentukan Beberapa Class

Jika Anda memiliki beberapa element dengan CSS yang memiliki sedikit variasi, Anda dapat mengekstrak CSS umum dan CSS individu ke class yang berbeda, lalu menentukan keduanya. Anda dapat menentukan beberapa class dengan memisahkannya menggunakan spasi.

Menyesuaikan Layout

Mari kita sesuaikan layout halaman kita dengan berfokus pada hal-hal berikut:

・Mengubah warna tombol saat sedang ditunjuk kursor
・Membulatkan sudut tombol
・Menyejajarkan teks ketengah

:hover

Bila kursor menunjuk suatu element, maka element tersebut berada dalam status hover. 

Dengan menambahkan selector :hover seperti gambar dibawah ini, kita dapat menentukan tingkah lakunya pada saat element dalam status hover. 

Di code Anda, pastikan untuk tidak menempatkan spasi di kedua sisi : seperti gambar ditengah.

border-radius

Selanjutnya, untuk membulatkan sudut element, kita dapat menggunakan CSS property border-radius. Semakin besar nilainya, semakin bulat sudutnya.

text-align

Property text-align dapat digunakan untuk menyejajarkan element inline dan inline-block. Nilai yang dapat anda tetapkan untuk property text-align adalah left, center, atau right.

margin: 0 auto dan text-align: center

Kita tahu bahwa margin: 0 auto dan text-align: center dapat digunakan untuk menengahkan element. Mari kita lihat perbedaan di antara keduanya. Kita menggunakan margin untuk element block seperti container, dan text-align untuk element inline dan inline-block seperti tombol dan teks.

Menggunakan Ikon

Di pelajaran ini, kita akan belajar cara menggunakan ikon seperti gambar dibawah.

Font Awesome


Anda dapat dengan mudah mencari ikon menggunakan Font Awesome. Disana, banyak ikon tersedia yang dapat Anda gunakan untuk halaman web Anda. Buka https://fontawesome.com/ untuk melihat daftar ikon yang dapat Anda gunakan.

Menggunakan Font Awesome


Anda dapat menggunakan Font Awesome dengan mengikuti langkah-langkah berikut. 

1. Muatkan link CSS Font Awesome didalam tag <head> pada halaman HTML anda. 

2. Tambahkan tag <span> dengan class fa dan fa-nama ikon (Anda dapat menemukan nama ikon pada halaman Font Awesome.)

Layout Header



Mari kita lanjutkan ke bagian header. Layout HTML untuk header halaman yang akan kita kerjakan ditampilkan dalam gambar dibawah ini. Perhatikan bahwa warna latar belakang header sedikit transparan.

opacity dan rgba

Sebelumnya, kita telah menggunakan opacity untuk membuat element menjadi transparan. Namun, masalah opacity adalah seluruh element menjadi transparan, termasuk element turunannya. Jika kita hanya ingin membuat warna latar belakangnya saja yang menjadi transparan, kita dapat menggunakan rgba.

rgb

Untuk mengetahui tentang rgba, kita harus terlebih dahulu memahami rgb. rgb adalah cara untuk menentukan warna dengan kombinasi tiga nilai yakni, red (merah), green (hijau), dan blue (biru). Cara kerjanya sama seperti format heksadesimal (misalnya, #ffffff) yang telah kita pelajari sebelumnya.

rgba

rgba dapat digunakan saat Anda ingin menentukan transparansi warna. Disini, Anda menentukan empat nilai untuk rgba, dimana nilai keempatnya (alpha), menentukan transparansi, dimana 0.0 adalah yang paling transparan dan 1.0 adalah yang paling penuh. Contoh dibawah menunjukkan perbedaan antara rgba dan opacity.

transition


CSS property transition dapat digunakan untuk menambahkan animasi. Anda dapat menentukan target dan durasi animasinya. Target dapat berupa property, seperti color, namun kita akan lebih sering menentukannya ke all agar dapat diterapkan ke semua property. transition sering digunakan dengan selector hover.

line-height


CSS property line-height dapat digunakan untuk menentukan tinggi yang ditempati baris.

Menggunakan line-height untuk Menengahkan Teks Secara Vertikal

line-height juga dapat digunakan untuk menengahkan teks secara vertikal. Karena teks tersebut akan ditempatkan dibagian tengah line-height, menyamakan nilai untuk height dan line-height akan menengahkan teks didalam barisnya secara vertikal.

Memperluas Tag <a>


Dikarenakan tag <a> adalah element inline, sebagai tombol, tag ini hanya menempati ruang settingi teks. Hasilnya, kita hanya dapat mengklik area teks. Kita dapat memperbaikinya dengan membuat tag <a> menjadi element block, ini akan memperluas area tombol hingga seukuran element induknya.

Layout Daftar Pelajaran


Mari kita lanjutkan ke bagian daftar pelajaran. Layout HTML ditampilkan dalam gambar di bawah ini. Kita juga akan mempelajari cara mengubah ketebalan teks.

font-weight



CSS Property font-weight memungkinkan Anda untuk mengubah ketebalan teks. Anda dapat menentukan nilai seperti normal dan bold. Karena tag <h1>~<h6> memiliki default font-weight: bold;, Anda dapat menentukan font-weight: normal; untuk mengubah ketebalan tulisannya ke normal.

Menyejajarkan Daftar Pelajaran


Sekarang mari kita kerjakan bagian daftar pelajaran. Perhatikan gambar dibawah, setiap pelajaran diberi lebar 25%.

Menentukan Ukuran Dengan %


Dengan menggunakan %, kita dapat menghitung width berdasarkan width element induknya dengan lebih mudah. Hal yang sama berlaku untuk property height.

Layout Setiap Pelajaran

Layout HTML setiap pelajaran ditampilkan dalam gambar di bawah ini.


Element yang bertumpang-tindih



Sekarang mari kita sesuaikan layout setiap bagian pelajaran. Umumnya di HTML, element tidak pernah bertumpang-tindih. 



Namun jika diperlukan, Anda dapat mengaturnya dengan menggunakan CSS. Dalam latihan ini, kita akan mempelajari caranya melalui latihan menempatkan teks di bagian atas gambar.

position: absolute;


Anda dapat menggunakan CSS position: absolute; untuk membuat element bertumpang-tindih. Dengan position: absolute;, 



Anda dapat menentukan posisinya relatif terhadap sudut kiri atas halaman web, menggunakan property top dan left.

position: relative;

position: relative; Anda dapat mengubah titik referensi untuk position: absolute dengan menetapkan position: relative; ke element ancestornya (element yang terhubung tapi terletak jauh diatas element induk). 

Dengan cara ini, element yang memiliki position: absolute yang ditetapkan akan diposisikan relatif terhadap sudut kiri atas element ancestor.

Layout Pesan



Mari kita lanjutkan ke bagian pesan dihalaman web kita. Perhatikan gambar dibawah untuk layout HTML bagian pesan yang akan kita kerjakan.

Membuat Tombol 3D



Mari kita pelajari cara membuat tombol agar terlihat 3D dengan menambahkan bayangan ke tombol tersebut. Selain itu, kita juga akan mempelajari cara mengubah jenis kursor mouse.

box-shadow



CSS property box-shadow digunakan untuk menambahkan bayangan ke element apapun. Kita dapat menggunakannya dengan menentukan panjang horizontal, panjang vertikal, dan warnanya.

cursor


CSS property cursor dapat digunakan untuk mengubah jenis kursor mouse seperti gambar dibawah ini. Beberapa tag HTML seperti tag <a> memiliki default CSS property cursor sebagai pointer.

Menekan Tombol



Mari kita tambahkan beberapa CSS property ke tombol, untuk membuatnya terlihat seperti ditekan saat Anda mengkliknya. Kita dapat mewujudkannya dengan melakukan hal-hal berikut saat tombol di klik:

・Menghilangkan bayangan ・Menurunkan posisi tombol sesuai panjang bayanga

:active


Selector :active dapat digunakan untuk menambahkan CSS ini pada saat element sedang diklik, pelajari contoh dibawah ini.

Membatalkan CSS

Anda dapat menghilangkan bayangan dengan menentukan box-shadow: none;. Banyak CSS property yang dapat dibatalkan dengan menentukan nilainya ke none.

Penggunaan position: relative;



Sebelumnya, kita telah belajar cara menggunakan position: relative; dengan position: absolute;, tetapi perannya yang sebenarnya adalah untuk memosisikan element relatif terhadap posisi normalnya. Seperti position: absolute;, Anda dapat menggunakan CSS property top dan left.



Kita akan menambahkan CSS berikut untuk membuat tombol terlihat seperti telah ditekan.

・Atur box-shadow ke none ・Gunakan position: relative; dengan top untuk menurunkan posisi element sesuai panjang bayangan

Layout Footer



Sekarang mari kita kerjakan footer. Pelajari layout HTML untuk footer yang ditampilkan dalam gambar dibawah ini.

position:fixed



Kita dapat menggunakan position: fixed; untuk menempatkan element dan menahannya diposisi tertentu dilayar. 


Kita dapat mengatur ini dengan cara menggabungkannya dengan CSS property top dan left.

Urutan Tumpukan Element



Kita tahu bahwa kita dapat menggunakan property position untuk membuat element bertumpang-tindih, tetapi terkadang element tersebut tidak ditumpuk sesuai urutan yang kita inginkan. Dalam gambar dibawah ini, gambar ikon ditumpuk di bagian atas header. Mari kita pelajari cara memperbaikinya.

z-index



CSS property z-index memungkinkan Anda mengubah urutan tumpukan element. Element dengan z-index lebih besar akan ditampilkan di bagian atas. 

Perlu diingat bahwa z-index hanya akan berlaku bila digabungkan dengan property position.

Contoh Jadi :

See the Pen Contoh HTML 5 Dasar by Muhammad Ihsan (@gigsaws) on CodePen.

Belajar Desain Web Responsive

Desain Web Responsive dapat mengadaptasikan halaman web Anda ke semua perangkat, seperti desktop, tablet, dan smartphone. Dalam pelajaran ini, kita akan menerapkan Desain Web Responsive pada halaman web yang kita kembangkan dalam pelajaran sebelumnya.

Media Queries



Sekarang, kita akan mempelajari tentang media queries. Property CSS ini digunakan untuk mengotomatiskan pengadaptasian halaman web sesuai dengan ukuran perangkat.

Menggunakan Media Queries


Mari pelajari cara menulis media queries. Syntax-nya adalah sebagai berikut: @media (kondisi) { .... }. CSS property yang didalam { } akan diterapkan hanya jika kondisinya terpenuhi.

max-width dan min-width


Dalam menerapkan media queries, kita dapat menentukan max-width atau min-width sebagai kondisi. Jika max-width: 1000px dipilih, 

CSS akan diterapkan untuk layar yang berukuran 1000px atau kurang. Sebaliknya, untuk min-width: 500px, CSS akan diterapkan hanya untuk ukuran layar 500px atau lebih.

Breakpoint


Nilai yang ditetapkan untuk max-width atau min-width disebut dengan breakpoint (titik penentu). Kita akan menggunakan 670px sebagai breakpoint untuk smartphone, dan 1000px untuk tablet.

Contoh :

h1 {
  color: red;
}

/* Tambahkan breakpoint max-width: 1000px */
@media (max-width: 1000px) {
/* Gantikan warna <h1> ke blue */
  h1 {
    color:blue;
  }
}

/* Tambahkan breakpoint max-width: 670px */
@media (max-width: 670px) {
/* Gantikan warna <h1> ke green */
  h1{
    color:green;
  }
}

Layout dengan Media Queries

Dalam pelajaran sebelumnya, kita belajar cara mengganti warna teks berdasarkan lebar perangkat. Sekarang mari kita pelajari cara mengubah layout (tata letak).

Mengubah Lebar Menggunakan Media Queries


Jika Anda memiliki beberapa item dalam satu baris, item tersebut akan terlihat kecil saat ditampilkan di perangkat yang berukuran kecil. 


Ayo kita perbaiki dengan mengubah lebar setiap item untuk perangkat yang lebih kecil.

Contoh 

.container {
  margin: 20px;
}

.item {
  width: 25%;
  float: left;
}

.item-box {
  height: 100px;
  margin-bottom: 20px;
}

.green {
  background-color: #11D8B3;
}

.yellow {
  background-color: #FFD466;
}

.red {
  background-color: #ED456D;
}

.blue {
  background-color: #3D7DD8;
}

/* Untuk Tablet */
/* Tambahkan breakpoint max-width: 1000px */
@media (max-width: 1000px){
  .item {
    width:50%;
  }
}


/* Untuk Smartphone */
/* Tambahkan breakpoint max-width: 670px */
@media (max-width: 670px){
  .item {
    width: 100%;
  }
}

box-sizing



Gambar dikiri menunjukkan apa yang akan terjadi jika padding ditambahkan ke item didalam latihan sebelumnya. 


Keberadaan empat item dengan lebar 25% & padding akan menyebabkan lebar keseluruhan melebihi 100%, sehingga item terakhir diturunkan kebaris baru. Untuk memperbaikinya, gunakan box-sizing: border-box;.

Cara kerja box-sizing


Dengan mengatur property box-sizing ke border-box, width sebuah element akan menyertakan padding dan border. Karena itu, layout tidak akan pecah ketika Anda menambahkan padding atau border (berbeda halnya dengan margin).

Menerapkan CSS ke Semua Element

Anda dapat menggunakan selector * saat ingin menerapkan CSS ke semua element, seperti dalam gambar di bawah ini. Praktik yang bagus adalah dengan menerapkan box-sizing: border-box; ke semua element agar penyesuaian layout halaman web dapat dilakukan dengan lebih mudah.

Contoh

/* Terapkan box-sizing: border-box; kesemua element */
*{
  box-sizing:border-box;
}

.container {
  margin: 20px;
}

.item {
  width: 25%;
  float: left;
  /* Ubah padding kiri & kanan ke 15px*/
  padding-left:15px;
  padding-right:15px;
}

.item-box {
  height: 100px;
  margin-bottom: 20px;
}

.green {
  background-color: #11D8B3;
}

.yellow {
  background-color: #FFD466;
}

.red {
  background-color: #ED456D;
}

.blue {
  background-color: #3D7DD8;
}

/* Untuk Tablet */
@media (max-width: 1000px) {
  .item {
    width: 50%;
  }
}

/* Untuk Smartphone */
@media (max-width: 670px) {
  .item {
    width: 100%;
  }
}

Membuat Halaman yang Responsive

Kita telah mempelajari dasar-dasar Desain Web yang Responsive. Mari mempraktikkannya dengan menerapkannya ke halaman web yang telah kita kerjakan dalam pelajaran sebelumnya. Sebelum itu, kita harus mempersiapkan beberapa hal.

viewport

Untuk bersiap menerapkan Desain Web Responsive ke halaman web kita, kita harus menetapkan viewport di dalam tag <head>. 

Tanpa viewport, media queries tidak akan berfungsi dengan baik di tablet dan smartphone. Anda tidak perlu mengingat isi viewport, jika Anda lupa, tinggal dicari secara online saja.

width: 100%


Di pelajaran sebelumnya, kita telah menetapkan width menjadi 1170px, jadi ini tidak akan pas dengan perangkat berlayar lebih kecil. Mari ganti width menjadi 100% untuk mengakomodasi semua lebar perangkat.

Contoh

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Tetapkan viewport menggunakan tag <meta> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="responsive.css">
  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-left">
          <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
        </div>
        <div class="header-right">
          <a href="#">Pelajaran</a>
          <a href="#">Daftar</a>
          <a href="#" class="login">Log in</a>
        </div>
      </div>
    </header>
     <div class="top-wrapper">
      <div class="container">
        <h1>BELAJAR CODING.</h1>
        <h1>BELAJAR MENJADI LEBIH KREATIF.</h1>
        <p>Progate adalah platform online untuk belajar coding.</p>
        <p>Kami menawarkan lingkungan pemograman yang lengkap untuk mempermudah Anda memulai.</p>
        <div class="btn-wrapper">
          <a href="#" class="btn signup">Daftar dengan Email</a>
          <p>atau</p>
          <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Daftar dengan Facebook</a>
          <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Daftar dengan Twitter</a>
        </div>
      </div>
    </div>
    <div class="lesson-wrapper">
      <div class="container">
        <div class="heading">
          <h2>Cari tau dari mana anda mau memulai!</h2>
        </div>
        <div class="lessons">
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/html.png">
               <p>HTML & CSS</p>
            </div>
             <p class="text-contents">Bahasa yang digunakan untuk membuat dan mendesain tampilan situs web Anda. </p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
              <p>jQuery</p>
            </div>
            <p class="text-contents">Library JavaScript yang cepat, kaya akan fitur, dan mudah digunakan yang menangani animasi dan permintaan Ajax.</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/ruby.png">
              <p>Ruby</p>
            </div>
            <p class="text-contents">Bahasa dinamis, serba guna yang sederhana dan produktif. Ruby sering digunakan untuk membuat aplikasi web yang responsive.</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/php.png">
              <p>PHP</p>
            </div>
            <p class="text-contents">Bahasa skrip open source yang dapat disematkan ke dalam HTML, dan cocok untuk pengembangan web.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="message-wrapper">
      <div class="container">
        <div class="heading">
          <h2>Apakah anda siap untuk menjadi programer yang handal?</h2>
          <h3>Ayo belajar coding, ayo belajar menjadi lebih kreatif!</h3>
        </div>
        <span class="btn message">Mulai Belajar</span>
      </div>
    </div>
    <footer>
      <div class="container">
        <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
        <p>Learn to code, learn to be creative.</p>
      </div>
    </footer>
  </body>
</html>

style.css

/* Terapkan box-sizing: border-box; ke semua element */
*{
  box-sizing:border-box;
}


body {
  margin: 0;
  font-family: "Lucida Grande";
}

a {
  text-decoration: none;
}

.container {
  /* Ubah width ke 100% */
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

.top-wrapper {
  padding: 180px 0 100px 0;
  background-image: url(https://prog-8.com/images/html/advanced/top_en.png);
  background-size: cover;
  color: white;
  text-align: center;
}

.top-wrapper h1 {
  opacity: 0.7;
  font-size: 45px;
  letter-spacing: 5px;
  margin-bottom: 10px;
}

.top-wrapper p {
  opacity: 0.7;
  margin-bottom: 3px;
}

.btn-wrapper {
  text-align: center;
  margin: 20px 0;
}

.btn-wrapper p {
  margin: 10px 0;
}

.signup {
  background-color: #239b76;
}

.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}

.twitter {
  background-color: #55acee;
}

.btn {
  padding: 12px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px;
  text-align: center;
}

.btn:hover {
  opacity: 1;
}

.fa {
  margin-right: 5px;
}

header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
  position :fixed;
  top: 0;
  z-index: 10;
}

.logo {
  width: 124px;
  margin-top: 20px;
}

.header-left {
  float: left;
}

.header-right {
  float: right;
  margin-right: -25px;
}

.header-right a {
  line-height: 65px;
  padding: 0 25px;
  color: white;
  display: block;
  float: left;
  transition: all 0.5s;
}

.header-right a:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.lesson-wrapper {
  height: 580px;
  padding-bottom: 80px;
  padding-left: 5%;
  padding-right: 5%;
  background-color: #f7f7f7;
  text-align: center;
}

.heading {
  padding-top: 80px;
  padding-bottom: 50px;
  color: #5f5d60;
}

.heading h2 {
  font-weight: normal;
}

.lesson {
  float: left;
  width: 25%;
}

.lesson-icon {
  position: relative;
}

.lesson-icon p {
  position: absolute;
  top: 44%;
  width: 100%;
  color: white;
}

.text-contents {
  width: 80%;
  display: inline-block;
  margin-top: 15px;
  font-size: 15px;
  color: #b3aeb5;
}

.heading h3 {
  font-weight: normal;
}

.message-wrapper {
  border-bottom: 1px solid #eee;
  padding-bottom: 80px;
  text-align: center;
}

.message {
  padding: 15px 40px;
  background-color: #5dca88;
  cursor: pointer;
  box-shadow: 0 7px #1a7940;
}

.message:active {
  position: relative;
  top: 7px;
  box-shadow: none;
}

footer img {
  width: 125px;
}

footer p {
  color: #b3aeb5;
  font-size: 12px;
}

footer {
  padding-top: 30px;
  padding-bottom: 20px;
}

Memuat responsive.css

Kita dapat menulis media queries kita dalam stylesheet.css, namun kita akan meletakkannya dalam file yang berbeda yaitu di responsive.css. Hal ini dilakukan agar code CSS kita lebih rapi dan mudah dibaca. Pastikan untuk memuat tautan ke file responsive.css dibawah viewport.

Lebar Halaman Bagian Pelajaran


Ayo kita mulai dengan layout tablet. Lebar layar tablet tidak akan cukup untuk menampung empat pelajaran dalam satu baris. 

Kita dapat memperbaiki ini dengan meletakkan dua pelajaran per barisnya. Hal ini dapat dicapai dengan mengubah width dari lesson menjadi 50%.

Memperbaiki Latar Belakang


Karena kita telah mengubah layout bagian pelajaran menjadi dua baris, mereka tidak lagi muat didalam bagian latar belakang yang telah diberikan. Hal ini terjadi karena height dari lesson-wrapper ditetapkan menjadi 580px. 

Di pelajaran ini kita akan memperbaikinya, agar height dari lesson-wrapper akan ditentukan oleh turunannya.

float dan element Induk

Secara default, height suatu element ditentukan oleh turunannya. Namun, berbeda jika semua element turunan diberikan CSS property float. 

Dalam skenario ini, height induk akan menjadi 0. Ini karena element yang diberi float tidak akan mempengaruhi induknya.

Menghapus float


Mari pelajari cara menambahkan height ke element induk ketika element anak/turunan memiliki CSS property float. 



Kita dapat melakukannya dengan menambahkan tag <div> yang diberikan CSS property clear: left;. clear: left; akan membatalkan status float milik element turunan, sehingga height-nya akan kembali mempengaruhi height element induk.

Contoh:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="responsive.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-left">
          <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
        </div>
        <div class="header-right">
          <a href="#">Pelajaran</a>
          <a href="#">Daftar</a>
          <a href="#" class="login">Log in</a>
        </div>
      </div>
    </header>
     <div class="top-wrapper">
      <div class="container">
        <h1>BELAJAR CODING.</h1>
        <h1>BELAJAR MENJADI LEBIH KREATIF.</h1>
        <p>Progate adalah platform online untuk belajar coding.</p>
        <p>Kami menawarkan lingkungan pemograman yang lengkap untuk mempermudah Anda memulai.</p>
        <div class="btn-wrapper">
          <a href="#" class="btn signup">Daftar dengan Email</a>
          <p>atau</p>
          <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Daftar dengan Facebook</a>
          <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Daftar dengan Twitter</a>
        </div>
      </div>
    </div>
    <div class="lesson-wrapper">
      <div class="container">
        <div class="heading">
          <h2>Cari tau dari mana anda mau memulai!</h2>
        </div>
        <div class="lessons">
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/html.png">
               <p>HTML & CSS</p>
            </div>
             <p class="text-contents">Bahasa yang digunakan untuk membuat dan mendesain tampilan situs web Anda. </p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
              <p>jQuery</p>
            </div>
            <p class="text-contents">Library JavaScript yang cepat, kaya akan fitur, dan mudah digunakan yang menangani animasi dan permintaan Ajax.</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/ruby.png">
              <p>Ruby</p>
            </div>
            <p class="text-contents">Bahasa dinamis, serba guna yang sederhana dan produktif. Ruby sering digunakan untuk membuat aplikasi web yang responsive.</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/php.png">
              <p>PHP</p>
            </div>
            <p class="text-contents">Bahasa skrip open source yang dapat disematkan ke dalam HTML, dan cocok untuk pengembangan web.</p>
          </div>
          <!-- Tambahkan tag <div> untuk class clear -->
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div class="message-wrapper">
      <div class="container">
        <div class="heading">
          <h2>Apakah anda siap untuk menjadi programer yang handal?</h2>
          <h3>Ayo belajar coding, ayo belajar menjadi lebih kreatif!</h3>
        </div>
        <span class="btn message">Mulai Belajar</span>
      </div>
    </div>
    <footer>
      <div class="container">
        <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
        <p>Learn to code, learn to be creative.</p>
      </div>
    </footer>
  </body>
</html>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Lucida Grande";
}

a {
  text-decoration: none;
}

/* Tambahkan CSS untuk clear */
.clear {
  clear:left;
}

.container {
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

.top-wrapper {
  padding: 180px 0 100px 0;
  background-image: url(https://prog-8.com/images/html/advanced/top_en.png);
  background-size: cover;
  color: white;
  text-align: center;
}

.top-wrapper h1 {
  opacity: 0.7;
  font-size: 45px;
  letter-spacing: 5px;
  margin-bottom: 10px;
}

.top-wrapper p {
  opacity: 0.7;
  margin-bottom: 3px;
}

.btn-wrapper {
  text-align: center;
  margin: 20px 0;
}

.btn-wrapper p {
  margin: 10px 0;
}

.signup {
  background-color: #239b76;
}

.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}

.twitter {
  background-color: #55acee;
}

.btn {
  padding: 12px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px;
  text-align: center;
}

.btn:hover {
  opacity: 1;
}

.fa {
  margin-right: 5px;
}

header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
  position :fixed;
  top: 0;
  z-index: 10;
}

.logo {
  width: 124px;
  margin-top: 20px;
}

.header-left {
  float: left;
}

.header-right {
  float: right;
  margin-right: -25px;
}

.header-right a {
  line-height: 65px;
  padding: 0 25px;
  color: white;
  display: block;
  float: left;
  transition: all 0.5s;
}

.header-right a:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.lesson-wrapper {
  /* Hapus CSS untuk height */
  padding-bottom: 80px;
  padding-left: 5%;
  padding-right: 5%;
  background-color: #f7f7f7;
  text-align: center;
}

.heading {
  padding-top: 80px;
  padding-bottom: 50px;
  color: #5f5d60;
}

.heading h2 {
  font-weight: normal;
}

.lesson {
  float: left;
  width: 25%;
}

.lesson-icon {
  position: relative;
}

.lesson-icon p {
  position: absolute;
  top: 44%;
  width: 100%;
  color: white;
}

.text-contents {
  width: 80%;
  display: inline-block;
  margin-top: 15px;
  font-size: 15px;
  color: #b3aeb5;
}

.heading h3 {
  font-weight: normal;
}

.message-wrapper {
  border-bottom: 1px solid #eee;
  padding-bottom: 80px;
  text-align: center;
}

.message {
  padding: 15px 40px;
  background-color: #5dca88;
  cursor: pointer;
  box-shadow: 0 7px #1a7940;
}

.message:active {
  position: relative;
  top: 7px;
  box-shadow: none;
}

footer img {
  width: 125px;
}

footer p {
  color: #b3aeb5;
  font-size: 12px;
}

footer {
  padding-top: 30px;
  padding-bottom: 20px;
}

Layout Smartphone

Dipelajaran ini, mari kita kerjakan layout untuk smartphone. Untuk ukuran layar smartphone, kita akan menetapkan breakpoint ke 670px. 

Akan tetapi, sebelum itu mari kita ubah width dari lesson menjadi 100% untuk membuat layout satu kolom.

Mensejajarkan footer

Selain itu, tetapkan footer agar sejajar dengan bagian tengah.

Contoh:

/* Untuk Tablets */
@media (max-width: 1000px) {
  .lesson {
    width: 50%;
    margin-bottom: 50px;
  }
}

/* Untuk Smartphones */

/* Tambahkan breakpoint max-width: 670px */
@media (max-width:670px) {
  /* Ubah width milik lesson ke 100% */
  .lesson{
    width:100%;
  }
  
  footer{
    text-align:center;
  }
  
  /* Ubah text-align property milik <footer> */
  
}

Menyesuaikan Tombol



Dipelajaran ini, kita akan membuat tombol dengan lebar sepanjang layar, sehingga lebih mudah ditekan. Kita juga akan menyesuaikan margin antara tombol.

Membuat font-size Responsive



Font yang lebih kecil akan lebih pas untuk layar yang lebih kecil. Jadi, mari sesuaikan font untuk setiap perangkat.

contoh

/* Untuk Tablets */
@media (max-width: 1000px) {
  .lesson {
    width: 50%;
    margin-bottom: 50px;
  }

  /* Tambahkan CSS untuk tag <h1> didalam top-wrapper */
  .top-wrapper h1{
    font-size:32px;
  }

  /* Tambahkan CSS untuk tag <h2> didalam heading */
  .heading h2{
    font-size:20px;
  }
  
}

/* Untuk Smartphones */
@media (max-width: 670px) {
  .lesson {
    width: 100%;
  }
  
  footer {
    text-align: center;
  }
  
  .btn {
    width: 100%;
  }
  
  .facebook {
    margin-bottom: 10px;
  }
  
  .top-wrapper {
    text-align: left;
  }
  
  /* Tambahkan CSS untuk tag <h1> didalam top-wrapper */
 .top-wrapper h1{
   font-size:24px;
   line-height:36px;
 }
  
  /* Tambahkan CSS untuk tag <p> didalam top-wrapper */
  .top-wrapper p{
   font-size:14px;
   line-height:20px;
  }
  
}

Menangani Layar Extra Besar


Kita telah mempelajari cara menyesuaikan layout untuk perangkat kecil. Bagaimana dengan perangkat berlayar extra besar? Misalnya, jika kita melihat halaman web kita di layar berukuran 2000px, bagian pelajaran akan menjadi terlalu renggang.

max-width



Karena kita menetapkan width dari container menjadi 100%, maka bagian pelajaran akan menjadi terlalu luas untuk layar yang sangat besar. 

Kita dapat memperbaikinya dengan menetapkan max-width. Seperti contoh dibawah, kita telah menetapkan max-width ke 1170px, sehingga konten didalamnya akan selalu berada dalam batasan ini.

Membuat Header Responsive


Terakhir, mari terapkan header yang berbeda untuk smartphone. Karena keseluruhan menu tidak muat dilayar kecil seperti smartphone, kita akan memindahkan menu ini dan menampilkannya di ikon menu. Dengan cara ini, menu hanya akan muncul jika ikon ditekan.

Menyembunyikan dan Menampilkan Element


Kita akan menyembunyikan ikon menu secara default dan hanya menampilkannya jika lebar perangkat 670px atau lebih kecil. 

Untuk menyembunyikan element, kita dapat menggunakan display: none;. Untuk menampilkan element yang tersembunyi, gunakan display: block;.

Contoh Jadi :


See the Pen Dasar HTML CSS 3 by Muhammad Ihsan (@gigsaws) on CodePen.

Flexbox



Dalam pelajaran ini, Anda akan mempelajari modul layout CSS, Flexbox. Meski modul ini memiliki banyak property, kita hanya akan berfokus pada property yang paling sering digunakan. Flexbox sangat berguna, jadi bersiaplah untuk mempelajari dan menguasainya!

Apa Kegunaan Flexbox
Dengan Flexbox, Anda dapat dengan mudah membuat layout berbeda seperti gambar di bawah.



Membuat Layout Horizontal
Apa itu display: flex?

Menetapkan display: flex pada element induk akan menumpuk element turunannya secara horizontal

Cara Menggunakan display: flex



Kapan pun Anda menginginkan item agar bertumpuk secara horizontal, tetapkan display: flex; ke element induk.

Contoh

html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Flexbox</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <ul class="flex-list">
      <li class="li1">item1</li>
      <li class="li2">item2</li>
      <li class="li3">item3</li>
      <li class="li4">item4</li>
    </ul>
  </body>
</html>

css:

ul {
  list-style: none;
  margin: 0px;
  padding: 60px 0px;
  text-align: center;
}
li {
  color: white;
  height: 80px;
  line-height: 80px;
}
.li1 {
  background-color: #ffc562;
}
.li2 {
  background-color: #a0c3f7;
}
.li3 {
  background-color: #ff8db3;
}
.li4 {
  background-color: #88e7ce;
}
/* tentukan property display milik .flex-list */
.flex-list{
  display:flex;
}

Apa itu flex: auto?



Ketika Anda menetapkan flex: auto ke suatu element, element tersebut akan meluas untuk mengisi seluruh ruang lebar milik element induknya.

Cara Menggunakan flex: auto



jika Anda memiliki element yang ingin diluaskan selebar element induk, tetapkan flex: auto.

Apa itu flex-wrap: wrap?


Dengan menetapkan flex-wrap: wrap, satu baris element akan dapat dibungkus ke dalam banyak baris berdasarkan ukuran element.

Cara Menggunakan flex-wrap: wrap


Tetapkan flex-wrap: wrap pada element induk yang akan membungkus. 

Nilai width milik element tersebut harus ditentukan terlebih dahulu. Kali ini, karena kita ingin membagikan daftar menjadi dua baris, kita akan mengatur width: 50%.

Tinjauan Ukuran Persentase



Mari meninjau ulang cara menggunakan persentase ukuran element. 

Ketika menggunakan persentase % untuk tinggi dan lebar element, ukuran element tersebut akan menyesuaikan diri ke ukuran induknya secara relatif.

Menggunakan Media Queries & Flex


Untuk membuat situs responsive, kita akan menggunakan media queries yang telah kita pelajari di HTML Study III. 

]Kita akan membuat agar wrap untuk daftar item hanya dijalankan ketika lebar layar memenuhi kriteria yang telah kita tetapkan.

Apa Itu flex-direction: column ?



Menetapkan flex-direction: column akan membuat semua element bertumpuk secara vertikal.

Cara Menggunakan flex-direction: column


Untuk element yang ingin Anda susun secara vertikal, berikan flex-direction: column pada element induknya.

Menengahkan Element Blok

Mari meninjau ulang bagaimana cara menengahkan element blok. Dengan mengatur margin: 0 auto dan width sebuah element, Anda dapat menengahkannya.


Karena kita sudah mengatur lebar element untuk layar selebar 1000px dan di bawahnya, sekarang, kita hanya perlu mengatur margin.

Menggunakan Media Queries
Dengan menggunakan media queries, kita akan membuat daftar item menjadi kolom tunggal pada ukuran layar 670px dan ke bawah.


Materi ke depan anda bisa pelajari grid,srcset,sass,bootstrap,tailwind.

Terima Kasih

Hosting Unlimited Indonesia

IDCloudHost | SSD Cloud Hosting Indonesia