Bagaimana Anda membuat halaman menggunakan html dan css?

Memiliki halaman arahan yang baik untuk situs web Anda adalah penting. Ini dapat membantu mengarahkan pelanggan ke situs Anda di mana mereka akan menemukan produk dan layanan Anda dan mudah-mudahan mengambil tindakan

Dalam tutorial berbasis teks ini, saya akan membawa Anda melalui cara membuat halaman arahan untuk saluran TV tinju dengan HTML biasa, CSS, dan JavaScript

Nama saluran TV fiktif kami adalah JabTV, dan tujuan pembuatan halaman arahan adalah untuk mengumpulkan email

Di akhir tutorial ini, Anda akan dapat membuatnya

• menu hamburger responsif
• pengalih tema gelap dan terang
• galeri gambar lightbox
• tombol gulir ke atas
• dan yang terpenting, halaman web yang responsif

Itu tidak berakhir dengan manfaat itu. Saya percaya bahwa sebagai pemula, Anda juga dapat menaikkan level CSS Anda setelah menyelesaikan tutorial ini

Untuk mengikuti saya, ambil file awal dari repo GitHub ini
Lihat demo langsungnya juga agar Anda dapat memahami apa yang sedang kami bangun

Daftar isi

Struktur Folder Proyek

Struktur folder mengikuti konvensi yang digunakan oleh banyak pengembang front end

File HTML dan readme serta tangkapan layar untuk readme ada di root. File CSS, file JavaScript, ikon, dan gambar masuk ke subfolder masing-masing di dalam folder aset

Boilerplate HTML Dasar

Boilerplate HTML dasar terlihat seperti ini

Kami akan mengkode halaman arahan bagian demi bagian sehingga tidak terlalu rumit untuk dipahami

Cara Membuat Navbar

Navbar akan memiliki logo di sebelah kiri dan item menu nav di sebelah kanan. Nanti, kita akan menempatkan pengalih tema gelap dan terang antara logo dan item nav, tapi mari fokus pada logo dan item menu terlebih dahulu

Untuk logo, saya tidak akan menggunakan gambar tetapi kombinasi teks dan emoji yang ditempatkan di dalam tag span sehingga saya dapat menatanya secara berbeda

HTML untuk logo terlihat seperti ini

_

Ini adalah kombinasi dari kata "Jab" dan "TV", dengan emoji pukulan

Item menu nav adalah tautan generik yang ditempatkan di tag daftar tidak berurutan, seperti yang ditampilkan dalam cuplikan di bawah

        

          About
        
        

          Boxing Stars
        
        

          stakeholders
        
        

          Subscribe
        

Selain itu, kami memerlukan beberapa bilah untuk menu seluler. Bilah akan disembunyikan di versi desktop dan terlihat di ponsel

Untuk ini, saya akan menggunakan bilah yang dibuat dengan HTML dan CSS mentah, bukan ikon. Bilah akan berupa tag rentang yang ditempatkan di wadah div dengan kelas

.fist {
  color: var(--secondary-color);
}

.jab {
  color: var(--primary-color);
}

.tv {
  color: var(--secondary-color);
}

6

_

Menu nav sekarang terlihat seperti ini di browser

Cara Menata Navbar

Navbar terlihat sangat jelek pada saat ini, jadi kita perlu menatanya. Kita perlu menata logo agar terlihat seperti satu, dan kita akan menggunakan Flexbox untuk menempatkan logo dan item menu secara berdampingan

Untuk seluruh halaman web, saya akan menggunakan font Roboto. Saya juga memiliki beberapa variabel CSS yang dideklarasikan dan beberapa pengaturan ulang yang tidak terlalu rumit

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* CSS Variables */
:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --primary-color: #0652dd;
  --secondary-color: #ea2027;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var(--transition);
}

 body {
  font-family: "Roboto", sans-serf;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
} 

Dalam cuplikan kode CSS di atas, saya menghapus margin dan padding default yang ditetapkan untuk semua elemen oleh browser dan menyetel ukuran kotak ke kotak batas. Dengan cara ini set padding dan margin akan lebih disengaja

Saya juga mengatur transisi (dinyatakan dalam variabel) sehingga Anda dapat melihat setiap transisi di situs web

Semua tautan akan berwarna biru dan merah saat diarahkan – berkorelasi dengan warna primer dan sekunder

Untuk menata logo, saya akan membuat

.fist {
  color: var(--secondary-color);
}

.jab {
  color: var(--primary-color);
}

.tv {
  color: var(--secondary-color);
}

7 pertama merah,

.fist {
  color: var(--secondary-color);
}

.jab {
  color: var(--primary-color);
}

.tv {
  color: var(--secondary-color);
}

7 kedua biru, dan

.fist {
  color: var(--secondary-color);
}

.jab {
  color: var(--primary-color);
}

.tv {
  color: var(--secondary-color);
}

9 merah. Warna merah dan biru masing-masing telah ditetapkan sebagai warna sekunder dan warna primer dalam variabel CSS

Warna merah dan biru biasanya digunakan dalam tinju amatir dan olahraga pertarungan lainnya, itulah mengapa saya memilihnya untuk situs web

.fist {
  color: var(--secondary-color);
}

.jab {
  color: var(--primary-color);
}

.tv {
  color: var(--secondary-color);
}

Sejauh ini, navbar terlihat seperti ini

Untuk menempatkan logo dan item menu berdampingan, saya akan menggunakan Flexbox. Saya juga akan menyembunyikan bilah karena kami hanya membutuhkannya di perangkat seluler

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

Saya menerapkan bayangan kotak untuk memastikan pengguna tahu di mana navbar berakhir

Saya juga akan membuat navbar lengket, sehingga selalu berada di atas setiap kali pengguna menggulir ke bawah. Ini membantu menciptakan pengalaman pengguna yang baik

Saya akan melakukannya dengan 4 baris CSS

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

Untuk menyembunyikan bilah, saya akan menargetkan kelas

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

0 dan memberikan tampilan tidak ada

.hamburger {
  display: none;
}

Navbar terlihat jauh lebih baik

Tapi logonya harus lebih besar. Kami juga perlu memastikan item menu berdampingan dan tidak di atas satu sama lain, jadi Flexbox akan berperan lagi di sini

.logo {
  font-size: 2rem;
  font-weight: 500;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 2rem;
}

.nav-link {
  font-weight: var(--bold-font);
}

Lihatlah navbar sekarang

Tidak ada yang lebih baik dari itu

Dan perhatikan bahwa logo bukanlah gambar. Ini berarti Anda selalu dapat memperbaruinya dengan CSS

Cara Membuat Bagian Pahlawan

Bagian hero akan berisi deskripsi singkat tentang JabTV, tombol ajakan bertindak (CTA), dan TV jadul yang dibuat dengan seni CSS. Kami akan membuat TV dengan tag

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

_1 sehingga video dapat ditampilkan di dalamnya

Video yang akan kami tempatkan di

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

_1 adalah tentang petinju hebat Mohammed Ali

Singkatnya, inilah yang sedang kami upayakan

HTML untuk bagian hero ada di potongan kode di bawah ini

_0

Dengan HTML di atas, inilah yang kita miliki di browser

Cara Menata Bagian Pahlawan

Untuk menyelaraskan teks dan TV berdampingan, kita membutuhkan Flexbox

_1

Selain menyelaraskan hal-hal dengan Flexbox, saya juga memberi bagian lebar maksimum

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

3 sehingga pengguna tidak perlu melihat jauh ke ujung ekstrim untuk melihat konten bagian – ini bagus untuk pengalaman pengguna

Saya menerapkan margin

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

_4 di atas, otomatis di kiri dan kanan, dan

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

5 di bagian bawah untuk memusatkan semua yang ada di bagian tersebut

Sejauh ini, kami memiliki ini di browser

Untuk mengatur gaya teks

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

_6 dari bagian pahlawan, saya menempatkannya di tag

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

7 masing-masing, sehingga saya dapat menatanya secara berbeda

Oleh karena itu, saya akan menargetkan teks dengan atribut kelas dari tag span

_2

Ingat ada 2 tombol di bagian ini, jadi saya memiliki gaya dasar yang ditentukan untuknya

_3

Bagian ini mulai terbentuk

Selanjutnya, kita perlu membuat

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

1 terlihat seperti TV. Properti

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

_9 akan membantu kami menyelesaikannya

Dari HTML, ingat saya memiliki 2 tag

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

_0 dengan kelas

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

1 dan

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

2. Saya akan membuat singkatan untuk TV jadul dengan 2 tag

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

0 dengan menggunakan properti

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

4 – yang berperan penting dalam memutar atau memiringkan elemen

_4

Untuk dapat memindahkan stan, saya menggunakan properti

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

5 dan menyetelnya ke

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

6, yang kemudian membantu saya menetapkan

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

7 dan

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

8 properti ke stan

Bagian pahlawan kini telah terbentuk sepenuhnya

Cara Membuat Bagian Tentang

Bagian tentang akan melakukan apa yang tersirat dari namanya – ini akan menjelaskan tentang JabTV sesingkat mungkin. Bagian ini akan berisi teks dan gambar latar belakang

HTML untuk bagian ini tidak rumit

_5

Jika Anda bertanya-tanya mengapa tidak ada tag

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

9, itu karena saya berencana untuk memasukkan gambar latar belakang dengan properti CSS

.hamburger {
  display: none;
}

0

Properti

.hamburger {
  display: none;
}

_0 adalah singkatan dari

• .hamburger {
    display: none;
  }
  

  2

• .hamburger {
    display: none;
  }
  

  3

• .hamburger {
    display: none;
  }
  

  4

• .hamburger {
    display: none;
  }
  

  5

• .hamburger {
    display: none;
  }
  

  6

• .hamburger {
    display: none;
  }
  

  7

• .hamburger {
    display: none;
  }
  

  8
• dan

  .hamburger {
    display: none;
  }
  

  _9

Hanya yang Anda tentukan yang akan diterapkan, sehingga Anda selalu dapat melewati salah satu properti

Selain properti background, saya juga akan menggunakan Flexbox untuk menyelaraskan teks dari HTML agar terlihat bagus pada gambar background

Beginilah cara saya menggunakan properti posisi yang dikombinasikan dengan Flexbox

_6

Dan sejauh ini tampilan bagian tersebut di browser

Untuk membuat teks terlihat lebih mudah dibaca dan lebih bagus, saya menggunakan lebih banyak CSS

_7

Perhatikan bahwa saya menerapkan bayangan teks ke teks karena ditampilkan pada gambar. Anda harus melakukan ini di setiap proyek untuk aksesibilitas yang lebih baik

Bagian Tentang terlihat jauh lebih bagus sekarang

Cara Membuat Galeri Gambar Lightbox

Untuk galeri gambar lightbox, saya tidak akan melakukannya dari awal – jika tidak, tutorial ini akan menjadi sangat panjang. Saya akan menggunakan plugin bernama lightbox sederhana, dan kisi CSS untuk penyelarasan gambar

Untuk menggunakan plugin lightbox sederhana, Anda harus mengunduhnya dari situs web mereka. Yang kita butuhkan hanyalah file CSS dan JavaScript yang diperkecil

Saat Anda mengekstrak file zip yang diunduh, salin dan tempel file CSS dan JavaScript yang diperkecil ke subfolder js dan css di dalam aset, dan tautkan dengan tepat, seperti yang telah saya lakukan di starter

.logo {
  font-size: 2rem;
  font-weight: 500;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 2rem;
}

.nav-link {
  font-weight: var(--bold-font);
}

0

Agar lightbox berfungsi, Anda harus membungkus tag jangkar (

.logo {
  font-size: 2rem;
  font-weight: 500;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 2rem;
}

.nav-link {
  font-weight: var(--bold-font);
}

1) di sekitar gambar dalam tag

.logo {
  font-size: 2rem;
  font-weight: 500;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 2rem;
}

.nav-link {
  font-weight: var(--bold-font);
}

2

.logo {
  font-size: 2rem;
  font-weight: 500;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 2rem;
}

.nav-link {
  font-weight: var(--bold-font);
}

_3 dari tag jangkar juga harus berkorelasi dengan sumber gambar, dan semuanya harus masuk ke dalam tag div yang berisi yang Anda harus tetapkan atribut kelas untuk

Atribut kelas ini akan digunakan untuk menginisialisasi galeri dengan JavaScript. Jangan khawatir, JavaScript tidak akan rumit. Galeri akan menampilkan bintang tinju yang menurut saya termasuk yang terhebat

HTML untuk galeri gambar lightbox sederhana ada di potongan kode di bawah ini

_8

Agar galeri berfungsi dan menggulir dengan lancar saat melihat gambar, Anda harus menginisialisasinya dengan satu baris JavaScript

_9

Galeri gambar lightbox kami sekarang berfungsi

Cara Menata Gaya Galeri Gambar Lightbox

Gambar tidak sejajar, jadi kita perlu mengaturnya dengan CSS Grid

        

          About
        
        

          Boxing Stars
        
        

          stakeholders
        
        

          Subscribe
        

0

Dalam cuplikan kode CSS di atas, saya menargetkan

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

0 dengan kelas

.logo {
  font-size: 2rem;
  font-weight: 500;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 2rem;
}

.nav-link {
  font-weight: var(--bold-font);
}

5 dan memberinya tampilan kisi, sehingga kita dapat menggunakan properti CSS lainnya pada elemen di dalam

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

0

Saya mendefinisikan kolom yang saya butuhkan dengan

.logo {
  font-size: 2rem;
  font-weight: 500;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 2rem;
}

.nav-link {
  font-weight: var(--bold-font);
}

_7, yang akan membatasi gambar menjadi 5 kolom

Sejauh ini, inilah tampilan galeri

Masih banyak yang harus dilakukan, karena ada ruang putih dan salah satu gambar tidak terlihat lagi

Saya akan memberikan semua gambar tinggi dan lebar 100%, sehingga semuanya dapat terlihat

        

          About
        
        

          Boxing Stars
        
        

          stakeholders
        
        

          Subscribe
        

1

Selanjutnya, saya akan menargetkan gambar pertama dan menentukan baris dan kolom kisi untuknya

        

          About
        
        

          Boxing Stars
        
        

          stakeholders
        
        

          Subscribe
        

2

Dengan baris dan kolom kisi yang ditentukan, gambar pertama akan menempati 2 baris pertama secara horizontal, dan 2 kolom pertama secara vertikal

Saya juga akan menargetkan gambar kedua dan menentukan kolom kisi untuknya

        

          About
        
        

          Boxing Stars
        
        

          stakeholders
        
        

          Subscribe
        

_3

Galeri gambar kami sekarang tertata dengan baik dan berfungsi dengan baik

Cara Membuat Bagian Pemangku Kepentingan

Bagian pemangku kepentingan berisi mereka yang bertanggung jawab untuk menjalankan JabTV

HTML untuk bagian ini ada di cuplikan di bawah ini

        

          About
        
        

          Boxing Stars
        
        

          stakeholders
        
        

          Subscribe
        

_4

Seperti inilah tampilan bagian tersebut

Tapi bukan itu yang kami inginkan, jadi kami memiliki beberapa gaya untuk dilakukan

Bagaimana Menata Bagian Pemangku Kepentingan

Saya akan menggunakan kisi CSS untuk menata gambar, nama, dan peran pemangku kepentingan. Anda dapat menggunakan Flexbox untuk ini jika Anda mau. Tapi sebelum itu, saya akan melakukan sedikit tweak untuk bagian tersebut

        

          About
        
        

          Boxing Stars
        
        

          stakeholders
        
        

          Subscribe
        

5

Pada cuplikan kode di atas, saya menekan bagian tersebut sedikit ke bawah dengan margin-top 2rem. Saya menargetkan kelas

.logo {
  font-size: 2rem;
  font-weight: 500;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 2rem;
}

.nav-link {
  font-weight: var(--bold-font);
}

_8 untuk melakukan ini

Hal berikutnya yang saya lakukan adalah menargetkan kelas

.logo {
  font-size: 2rem;
  font-weight: 500;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 2rem;
}

.nav-link {
  font-weight: var(--bold-font);
}

_9, dan saya memberinya margin

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

4 di bagian atas dan bawah. Saya juga memusatkannya di kiri dan kanan dengan

01

Menargetkan kelas

.logo {
  font-size: 2rem;
  font-weight: 500;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 2rem;
}

.nav-link {
  font-weight: var(--bold-font);
}

_9 lagi, saya juga memberikan lebar maksimum 1100px pada bagian tersebut, sehingga spasi dibuat di kiri dan kanan. Ini memastikan bahwa pengguna tidak melihat ke kiri dan ke kanan sebelum melihat sesuatu

Ini membuat segalanya terlihat sedikit lebih baik

Untuk akhirnya menata gambar dan teks dengan kisi CSS, inilah yang saya lakukan

        

          About
        
        

          Boxing Stars
        
        

          stakeholders
        
        

          Subscribe
        

6

Karena ada 3 gambar dalam

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

0

• Saya mendefinisikan 3 kolom untuk bagian tersebut
• sejajarkan semuanya ke tengah secara horizontal dan vertikal dengan
  04
• menambahkan ruang
  05 di dalam tag

   position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
  

  0 dengan properti
  07

Semuanya sekarang terlihat bagus terlepas dari teksnya

Untuk membuat teks terlihat lebih baik, saya akan menargetkannya dengan kelas

08 dan

09 dan menyelaraskannya ke tengah, lalu menetapkan warna dan font jika perlu

        

          About
        
        

          Boxing Stars
        
        

          stakeholders
        
        

          Subscribe
        

7

Bagian sekarang terlihat cukup baik

Cara Membuat Bagian Berlangganan Email

Bagian langganan email akan dibuat sesingkat mungkin. Saya tidak akan melakukan integrasi apa pun untuk mengumpulkan email di sini

Untuk tujuan ini, jika Anda hanya ingin mengumpulkan email, Anda dapat menggunakan formspree. Lebih baik menggunakan layanan seperti Mailchimp atau Convertkit, sehingga Anda dapat melakukan sesuatu dengan email yang telah Anda kumpulkan

HTML untuk bagian ini hanya 12 baris

        

          About
        
        

          Boxing Stars
        
        

          stakeholders
        
        

          Subscribe
        

_8

Seperti yang Anda lihat, saya memiliki masukan untuk email dan tombol kirim di dalam formulir
Bagian itu tidak terlihat terlalu buruk di browser

Cara Menata Bagian Langganan Email

Kita perlu menyelaraskan

10 dan

11 ke tengah, dan membuat tombol berlangganan terlihat bagus

Beginilah cara saya menyelaraskan

_10 dan membentuk ke tengah

        

          About
        
        

          Boxing Stars
        
        

          stakeholders
        
        

          Subscribe
        

_9

Perhatikan saya juga mendorong bagian ke bawah sedikit dengan margin

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

4

Untuk mendorong formulir menjauh dari

10, saya memberikan margin

15 di bagian atas dan bawah, dan 2

16 di kiri dan kanan

Bentuknya sekarang terlihat jauh lebih baik

Hal berikutnya yang harus kita lakukan adalah membuat area input dan tombol berlangganan terlihat lebih baik. Saya melampirkan kelas

_17 ke area input, jadi saya akan menargetkannya dengan kelas dan menerapkan beberapa gaya

_0

Inilah yang terjadi pada area input dengan CSS di atas

• Saya memberi input padding 0. 2rem untuk jarak yang lebih baik
• Saya memberikannya (input) batas padat biru 1px
• Saya membuat sudut input dibulatkan dengan border-radius 4px
• saat fokus, yaitu saat Anda mencoba mengetik input, saya mengubah warna batas menjadi warna sekunder situs web
• terakhir, saya menyetel garis besar menjadi tidak ada untuk menghapus garis besar jelek yang muncul saat mengetik di area masukan

Saya membuat tombol berlangganan terlihat lebih baik dengan CSS di bawah ini

_1

Bagian langganan sekarang terlihat sangat keren

Saya juga akan menyertakan beberapa ikon sosial di bagian ini
Untuk ikon, saya akan menggunakan ikon ionik

Ikon akan dibungkus dengan tag jangkar, sehingga dapat mewarisi gaya yang ditetapkan untuk tautan di pengaturan ulang CSS

_2

CSS untuk ikon sosial tidaklah rumit

_3

Beginilah akhirnya tampilan bagian langganan email

Untuk mempelajari lebih lanjut tentang ikon ionik, periksa readme yang terlampir pada proyek di GitHub

Cara Membuat Footernya

HTML untuk footer adalah one-liner

_4

Jika Anda bertanya-tanya apa itu

18, itulah entitas karakter untuk © yang selalu Anda lihat di footer situs web

CSS semua dilakukan dalam 6 baris

_5

Saya menerapkan

19 dan

20 ke footer sehingga bagian atasnya dapat berkorelasi dengan navbar

Cara Membuat Tombol Scroll-to-top

Untuk pengalaman pengguna yang lebih baik, mari terapkan tombol gulir ke atas. Saat diklik, tombol ini akan membawa pengguna ke bagian atas halaman dari mana pun mereka berada

HTML untuk tombol scroll-to-top ada di cuplikan kode di bawah ini

_6

Kita akan menggunakan atribut class untuk mengatur gaya tombol, dan id untuk memilihnya di file JavaScript kita. Begitulah cara kami melakukan hal-hal di CSS dan JavaScript

Untuk membuat tombol terlihat di mana-mana dan terlihat bagus, saya akan memberikannya posisi tetap dan menambah lebar dan tinggi. Saya juga akan memberinya kursor penunjuk, sehingga pengguna tahu apa yang terjadi saat mereka mengarahkan kursor ke atasnya

_7

Untuk akhirnya mengimplementasikan fungsionalitas scroll-to-top, kami akan menulis 7 baris JavaScript

_8

Apa yang dilakukan skrip?

Di baris pertama, saya memilih tombol dengan menugaskannya ke variabel bernama

21

Saya menggunakan metode

_22 untuk ini karena dilaporkan lebih cepat. Anda dapat menggunakan

_23 juga

Untuk mendapatkan tindakan klik pengguna pada tombol, saya menggunakan fitur penting dari DOM (Document Object Model) yang disebut eventListener

Dalam fungsi

_24, saya membawa metode objek jendela yang disebut

25, yang membantu berpindah ke mana saja di halaman web

Untuk memberi tahu metode scrollTo ke mana harus menggulir, Anda harus menetapkannya sebagai properti atas dan kiri, atau atas dan bawah sesuai kasusnya. Jadi saya menetapkannya di atas dan di kiri 0

Hal terakhir yang saya lakukan adalah menyetel properti perilaku ke string "smooth", sehingga semuanya bernyawa dengan lancar saat tombol diklik

Tombol scroll-to-top kami sekarang bekerja dengan sempurna

Kami sekarang memiliki situs web yang lengkap. Tapi mari kita sedikit lebih jauh dengan menambahkan pengalih tema gelap dan terang, karena banyak orang sekarang menikmati menggunakan situs web dalam mode gelap

Cara Membuat Pengalih Tema Gelap dan Terang

Agar pengalih tema gelap dapat diakses di mana saja di halaman arahan, saya akan meletakkannya di navbar lengket kami

saya akan menggunakan

• sebuah div dengan kelas theme-switch untuk menampung segalanya
• jenis input kotak centang untuk beralih antara mode gelap dan terang
• label untuk memasukkan 2 ikon untuk bulan (mode gelap) dan matahari (mode terang)
• div dengan kelas pengalih di dalam label untuk membuat bentuk seperti bola. Bentuk ini akan menutupi satu ikon saat pengguna beralih ke mode terang atau gelap

Beginilah cara saya mengubah poin di atas menjadi kode HTML

_9

Dan ini tampilannya di browser

Cara Menata Pengalih Tema Gelap dan Terang

Hal pertama yang akan saya lakukan adalah membuat kotak centang tidak terlihat dan memposisikannya secara absolut

Kami perlu melakukan ini karena yang kami perlukan adalah fungsionalitas kotak centang untuk beralih antara mode terang dan gelap – tetapi kami tidak perlu membuatnya terlihat oleh pengguna

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* CSS Variables */
:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --primary-color: #0652dd;
  --secondary-color: #ea2027;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var(--transition);
}

 body {
  font-family: "Roboto", sans-serf;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
} 

0

Selanjutnya, saya akan memposisikan label relatif, memusatkan semua yang ada di dalamnya dengan Flexbox, dan memberinya latar belakang gelap. Dengan ini dan beberapa gaya kecil lainnya, pengalih tema gelap akan lebih terlihat

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* CSS Variables */
:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --primary-color: #0652dd;
  --secondary-color: #ea2027;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var(--transition);
}

 body {
  font-family: "Roboto", sans-serf;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
} 

1

Yang Anda lihat sekarang hanyalah latar belakang gelap. Don’t worry. Everything will become visible again

Remember the

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

0 with a class of

27? Let’s make it white and round to truly look like a ball. We will also position it absolute because its inside the label which has been positioned relative

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* CSS Variables */
:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --primary-color: #0652dd;
  --secondary-color: #ea2027;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var(--transition);
}

 body {
  font-family: "Roboto", sans-serf;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
} 

2

Defining width, height, and a border-radius of 50% is how you make anything round in CSS

Our dark theme switcher is taking shape, but let’s make the icons visible by giving them the appropriate colors of reddish for sun and yellowish for moon

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* CSS Variables */
:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --primary-color: #0652dd;
  --secondary-color: #ea2027;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var(--transition);
}

 body {
  font-family: "Roboto", sans-serf;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
} 

3

Finally, to be able to move the ball left and right, we need to use the . checked pseudo-class on our checkbox, and target the ball with a class of switcher, then use the transform property to move it by setting a figure in pixels

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* CSS Variables */
:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --primary-color: #0652dd;
  --secondary-color: #ea2027;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var(--transition);
}

 body {
  font-family: "Roboto", sans-serf;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
} 

4

Our ball is now moving and the icons are correctly showing

What we need to do now is use JavaScript to toggle between the light and dark mode and set the colors for dark mode

You can find the color set for our dark theme in the snippet below

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* CSS Variables */
:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --primary-color: #0652dd;
  --secondary-color: #ea2027;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var(--transition);
}

 body {
  font-family: "Roboto", sans-serf;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
} 

5

And here’s how I used JavaScript to toggle the

28 class by using change event on the checkbox and the

29 method of DOM

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* CSS Variables */
:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --primary-color: #0652dd;
  --secondary-color: #ea2027;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var(--transition);
}

 body {
  font-family: "Roboto", sans-serf;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
} 

6

Notice that I selected the checkbox with an id of

30 and assigned it to a

31 variable. Try to always use ids for JavaScript and classes for CSS, so you don’t get confused

Users can nohw toggle light and dark modes on our landing page

How to Make the Landing Page Responsive

The landing page is not responsive yet, so we should fix that

To make the landing page responsive, we need to make a hamburger menu for smaller devices, inside a media query. We will also use Flexbox and Grid once again to make the sections stack on top of one another

How to Make a Hamburger Menu for the Landing Page

For the hamburger menu, the first thing I’m going to do is make the bars visible on a device with a screen width less than 768 pixels

I will also set a cursor of pointer for the bars, so the user knows they can click when they hover their mouse on it

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* CSS Variables */
:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --primary-color: #0652dd;
  --secondary-color: #ea2027;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var(--transition);
}

 body {
  font-family: "Roboto", sans-serf;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
} 

7

Next, I will change the flex direction of the nav menu items to column by targeting the unordered list they are contained in, so they go on top of one another

I will also give the list a white background, align every item in it to the center, and make the list items fixed with the left property set to 100%, so it will be taken out of the viewport (invisible)

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* CSS Variables */
:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --primary-color: #0652dd;
  --secondary-color: #ea2027;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var(--transition);
}

 body {
  font-family: "Roboto", sans-serf;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
} 

8

So far, this is what we have in the browser

To make the nav items visible, I’m going to attach a class attribute of active to the unordered list containing them and set

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

7 to

33. This class will be toggled with JavaScript when the user clicks the bars

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* CSS Variables */
:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --primary-color: #0652dd;
  --secondary-color: #ea2027;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var(--transition);
}

 body {
  font-family: "Roboto", sans-serf;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
} 

9

The nav items have become poorly spaced

To make sure the nav menu items are well-spaced, I’m going to target them with the

34 class and give them some margins

.fist {
  color: var(--secondary-color);
}

.jab {
  color: var(--primary-color);
}

.tv {
  color: var(--secondary-color);
}

0

The CSS snippet above gives each nav menu item a margin of 2rem on the top and bottom, and 0 on the left and right, so they look like this

There’s one more thing to do with the bars – we need to make sure they change to an X shape when they are clicked, and back to the bars when clicked again

To do this, we will attach a class of active to the hamburger menu, and then rotate the bars. Remember that this active class will be toggled by JavaScript

.fist {
  color: var(--secondary-color);
}

.jab {
  color: var(--primary-color);
}

.tv {
  color: var(--secondary-color);
}

1

To do the toggling, we need some JavaScript

.fist {
  color: var(--secondary-color);
}

.jab {
  color: var(--primary-color);
}

.tv {
  color: var(--secondary-color);
}

2

Here's what I did in the JavaScript

• I selected the bars with the id of hamburger, and the unordered list with the element (
  35)
• I wrote a function named
  36 to get the classlists of the hamburger menu and unordered list, then used the
  29 method to bring in the active class

Our nav menu items are now being toggled back and forth with the bars changing shape as needed

But there’s a problem. The menu items are not hidden any time one of them is clicked. We need to make this happen for a better user experience

To do this, we need some JavaScript again. Kami akan

• select all the nav items with querySelectorAll() by targeting their ids
• listen for a click event on each of the nav menu items with the forEach() array method
• write a function to remove the
  38 class – which will eventually return the nav menu to its original state

.fist {
  color: var(--secondary-color);
}

.jab {
  color: var(--primary-color);
}

.tv {
  color: var(--secondary-color);
}

3

Everything now works fine with our mobile menu

If you noticed, other parts of the website are not looking good on mobile devices. There’s even an annoying horizontal scrollbar. This is not 1998 but 2022

Adding the following styles to the media query will fix it

.fist {
  color: var(--secondary-color);
}

.jab {
  color: var(--primary-color);
}

.tv {
  color: var(--secondary-color);
}

4

With the CSS above, I reduced sizes, changed the direction to column where necessary so the sections stack on top of one another, and made the TV stands aligned properly

Looking at the landing page on smaller phones, we really can do better

To make the landing page responsive on smaller phones, I will integrate few changes on mobile devices of screen width 420px and below

.fist {
  color: var(--secondary-color);
}

.jab {
  color: var(--primary-color);
}

.tv {
  color: var(--secondary-color);
}

5

We now have a fully responsive landing page

.

Grab the finished copy of the landing page code from this Github repo

Conclusion

In this detailed tutorial, you have learned how to make a

• fully responsive website
• dark theme switcher
• hamburger menu
• lightbox image gallery
• scroll-to-top button

These are functionalities you can always integrate into a new or existing project, so feel free to always come back to this article any time you need it

If you find this text-based tutorial helpful, share it by tweeting a thanks or pasting the link on your social media platforms

Thank you for reading

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

---

Kolade Chris

Web developer and technical writer focusing on frontend technologies

---

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

How to create a Web page using HTML and CSS?

How do you create a page in HTML?

Bagaimana cara kerja CSS dan HTML dalam membuat halaman Web?

How do I create my first website with HTML and CSS?