Belajar Membuat tampilan Website Toko Online seperti website tokopedia dengan menggunakan framework bootstrap, Pada kesempatan ini kita akan belajar membuat tampilan website toko online dengan mudah dan cepat. Show
Sebelum membuat website , berikut aplikasi dan tools yang harus di persiapkan siapkan.
Berikut langkah dalam proses pembuatan toko online seperti tokopedia
1. Buat Folder dengan nama latihan1langkah yang pertama, kita harus membuat folder didalam folder latihan1 dengan nama folder style dan folder images, untuk lebih jelasnya kita lihat gambar dibawah ini: Sebelum masuk ke contoh, alangkah baiknya mengenal dulu HTML. Sudah tahu kan apa itu HTML? HTML adalah adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang pengguna dapat membuat dan menyusun bagian heading, paragraf, link atau tautan, dan blockquote untuk halaman sebuah website. HTML sebenarnya bukanlah bahasa pemrograman, artinya HTML tidak punya kemampuan untuk membuat fungsionalitas yang dinamis. Contoh kode atau script membuat paragraf. 1 <p> Hallo sobat Dicoding apa kabarnya? Mudah-mudahan dalam keadaan sehat-sehat saja ya. Ammin </p>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> <title>Dicoding Indonesia Website</title> </head> <body> <main> <h1>Dicoding Indonesia</h1> <h2>Gudangnya developer handal</h2> <p>Mencetak banyak lulusan terbaik khususnya para developer.</p> <img src="logo_dicoding.png" alt="Image dicoding"> <p>Paragraph two with a <a href="https://dicoding.com">klik disini</a></p> </main> </body> </html> Menentukan Tema WebBagi teman-teman yang masih bingung akan membuat web yang seperti apa, tentunya yang pertama kali kita lakukan adalah menentukan tema web yang akan dibuat. Oke, kita contohkan saja website sederhana dengan tema portofolio. Di sini kita akan mencoba membuat web portofolio menggunakan HTML5 ditambah sentuhan magic dari CSS3 agar tampilannya sedikit menarik dan responsif. Apa itu mungkin? Tidak akan tahu sebelum kita coba hehe. Mempersiapkan Tools yang Akan DigunakanDisini kita akan menggunakan tools-tools sebagai berikut ini:
Contoh Ngoding Web PortofolioPertama buka teks editor kamu. Setelah dibuka kita akan membuat folder proyek terlebih dahulu. Kamu dapat menyimpan folder di sembarang tempat. Ok langsung saja. Kita akan membuat 2 buah file. Diantaranya index.html dan style.css. Kode Lab: index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <!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>Web | Portofolio</title> </head> <body> <div class="container"> <div class="sidebar"> <nav> <ul> <li><a href="">About</a></li> <li><a href="">Portofolio</a></li> <li><a href="">Blog</a></li> <li><a href="">Contact</a></li> </ul> </nav> </div> <main class="content"> <section class="hero"> <img src="online.png" alt=""> <div class="hero-content"> <h1>Profesi</h1><br></h2>Junior Content Writer at Dicoding</h2><br><br> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, aperiam dolore assumenda velit repellendus recusandae magni consectetur mollitia facere incidunt inventore perspiciatis debitis doloribus ullam minima culpa voluptatem. Repellendus, option.</p> <a href="" class="action-btn">Profile Saya</a> </div> </section> </div> <div class="footer"> <footer> <ul> <li><img src="instagram.png" alt=""><p>Instagram</p></a></li> <li><img src="facebook.png" alt=""><p>Facebook</p></a></li> <li><img src="twitter.png" alt=""><p>Twitter</p></a></li> <li><img src="telegram.png" alt=""><p>Telegram</p></a></li> </ul> </footer> </div> </div> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 * { margin: 0; padding: 0;
}
body { background-color: #eff1f2; font-family: sans-serif; }
.content { grid-area: content; } .sidebar{ grid-area: sidebar; background: linear-gradient(to right, rgba(200,107,142,1), rgba(218,105,250,1), rgba(110,125,253,1)) ; justify-content: center; } .footer { grid-area: footer; background: white; } .container { font-size: 1.5em; width: 100%; height: 100; height: 100vh; display: grid; grid-template-areas: "sidebar" "content" "footer"; grid-template-columns: 1fr; grid-template-rows: 130px 800px 250px;
}
.content, .sidebar, .footer{ padding: 1em; }
nav ul { margin: 0; padding: 0; display: flex; justify-content: space-between; text-align: center; }
nav li{ list-style: none; padding: 1em 0; }
nav li a { color: white; font-weight: 700; opacity: 0.6; text-decoration: none; transition: 0.3s; }
nav li a:hover { opacity: 1; } .hero { max-width: 90 px; margin: 0 auto; text-align: center; }
.hero img { width: 200px; }
.hero h1 { font-size: 2em; font-weight: 300; color: #373046; }
.hero p { font-weight: 300; line-height: 1.3em; color: #98aBad; }
.action-btn { display: inline-block; text-decoration: none; color: white; font-weight: 700; background: #567bfb; padding: 0.5em 2em; border-radius: 60px; margin: 1em 0; transition: 0.3s; }
footer ul { max-width: 640px; margin: 2em auto; padding: 0; text-align: center; display: flex; flex-direction: row;
}
footer ul li { list-style: none; align-self: flex-end; }
footer ul li a{ text-decoration: none; color: #c1c6ce; }
footer ul li img { width: 30%; }
footer p { font-size: 0.8em; }
@media (min-width: 1040px){ .container { grid-template-areas:"sidebar content" "sidebar footer" ; grid-template-rows: 1fr auto ; grid-template-columns: 300px 1f; }
nav ul{ display: flex; justify-content: space-between; flex-direction: column; } .sidebar{ background: linear-gradient( rgba(200,107,142,1), rgba(218,105,250,1), rgba(110,125,253,1)) ; padding-top: 10em; } .hero{ text-align: left; margin: 7em 0; } .hero img { width: 200px; float: right; } .hero h1{ font-size: 3em; } .hero p{ width: 60%; } footer ul { max-width: 900px; margin: 0 auto; padding: 1em 0; }
footer ul li a img { width: 20%; } }
Wah, mantap kan? Jika kalian bingung dalam mencari gambar seperti ikon sosial media ataupun avatar, maka kalian bisa menemukannya di website ini. flaticon.com Kamu juga bisa coba juga apakah website tersebut responsif atau tidak. Caranya lakukan zoom in dan zoom out atau perbesar dan perkecil tampilan web browser. Maka outputnya: Gimana mudah kan? Kalian bisa kembangkan lagi, misal dari segi desain atau tampilan, posisi layout, teks, foto, dll. Baik, itu saja yang dapat contohkan selebihnya kamu bisa improvisasi sendiri. Biar lebih asik lagi belajar webnya mimin sarankan ikuti kelas Belajar Dasar Pemorgraman Web di Dicoding . Dijamin seru dan tentunya akan mengantarkanmu menjadi web developer profesional. Simak juga artikel menarik lainnya di blog Dicoding yang akan dapat menambah ilmu-ilmu baru yang super kece diantaranya sebagai berikut ini.
Bagikan pengalaman kamu saat ngoding melalui kolom komentar. Jika ada pertanyaan silahkan isi kolom komentar dibawah ini. Bagaimana cara menggunakan HTML?Cara Membuat Halaman Web Sederhana dengan HTML. Buka editor teks. ... . Atur jenis dokumen untuk HTML. ... . Tambahkan tab judul untuk halaman web kamu. ... . Ketik di bawah tag "Head" yang tertutup. ... . Selanjutnya membuat judul halaman. ... . Tambahkan judul tambahan jika kamu mau. ... . Membuat paragraf. ... . Mengubah warna teks.. Script HTML untuk apa?HTML adalah singkatan dari Hypertext Markup Language, yaitu bahasa markup standar untuk membuat dan menyusun halaman dan aplikasi web.
Apa saja kode HTML?Berikut adalah 9 kode HTML untuk blog dan arti coding tersebut:. Title Tag. Tag HTML yang pertama yaitu title tag. ... . Meta Description. Berikutnya, ada meta description. ... . 3. Heading Tag. ... . 4. Anchor Text dan Link. ... . Nofollow. ... . 6. Image Alt Text. ... . 7. Tag Kanonikal. ... . 9. Tag Huruf Tebal (Bold). Sebutkan program apa saja yang dapat digunakan untuk membuat script HTML?19 HTML Editor Terbaik yang Layak Anda Coba. Notepad++ Notepad++ dibuat untuk sistem operasi Windows. Boleh dikatakan kehadiran Notepad++ ini untuk melengkapi kekurangan dari teks editor bawaan Windows, Notepad. ... . 2. Atom. ... . 3. Brackets. ... . 4. Sublime Text. ... . Light Table. ... . 6. Bluefish. ... . 7. Aptana Studio. ... . 8. CoffeeCup.. |