Blog([Link]
com/blog)
MEN
Development ([Link] Modul
([Link] Tutorial
([Link]
Contoh Coding HTML Website Dalam 15
Menit
Dicoding Intern
([Link] | 9
December 2020
BAGIKAN
([Link]
Belajar Pemrograman Gratis
Blog([Link]
MEN
Hallo, teman-teman!
Jumpa lagi nih. Pada kesempatan kali ini saya akan berbagi
pengalaman seputar ngoding website. Biasanya pembuatan sebuah
website memerlukan waktu yang relatif lam, baik itu web berjenis e-
commerce, profil perusahaan, maupun layanan service.
Lalu, apakah kita dapat ngoding web hanya dalam waktu 15 menit
saja? Iya, tentu bisa. Seperti apakah website yang akan kita buat?
Penasaran kan? Kamu mesti ikuti terus tips dan trik yang satu ini ya.
Simak tuntas dan praktek langsung yuk teman-teman.
💻 Mulai Belajar Pemrograman
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda
sebagai developer profesional.
DAFTAR SEKARANG
Pengertian HTML
([Link]
Belajar Pemrograman Gratis
Blog([Link]
MEN
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.
Haskell
<p> Hallo sobat Dicoding apa kabarnya? Mudah-mudahan dalam keadaan
Adapun contoh struktur dasar dari HTML yang dapat kamu pelajari
dan praktekkan di antaranya sebagai berikut ini.
([Link]
Belajar Pemrograman Gratis
<head>([Link]
<html>
Blog
MEN
<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="[Link] dis
</main>
</body>
</html>
Menentukan Tema Web
Bagi 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.
([Link]
Belajar Pemrograman Gratis
Mempersiapkan Tools yang Akan
Blog([Link]
MEN
Digunakan
Disini kita akan menggunakan tools-tools sebagai berikut ini:
1. Teks editor: VS Code atau Teks Editor Lain
2. Kode program : HTML5 dan CSS3
3. Web browser: Chrome
Contoh Ngoding Web Portofolio
([Link]
Belajar Pemrograman Gratis
Blog([Link]
MEN
Pertama 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 [Link] dan [Link].
Kode Lab: [Link]
([Link]
Belajar Pemrograman Gratis
<html ([Link]
<!DOCTYPE html>
Blog lang="en">
MEN
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scal
<link rel="stylesheet" href="[Link]">
<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="[Link]" alt="">
<div class="hero-content">
<h1>Profesi</h1><br></h2>Junior Content Writer at
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignis
<a href="" class="action-btn">Profile Saya</a>
</div>
</section>
</div>
<div class="footer">
<footer>
<ul>
<li><img src="[Link]" alt=""><p>Instagram</p
<li><img src="[Link]" alt=""><p>Facebook</p><
<li><img src="[Link]" alt=""><p>Twitter</p></a
<li><img src="[Link]" alt=""><p>Telegram</p><
</ul>
</footer>
</div>
</div>
</body>
([Link]
Belajar Pemrograman
</html> Gratis
Blog([Link]
MEN
Kode Lab: [Link]
* {
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
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{
([Link]
padding: 1em;
Belajar Pemrograman Gratis
Blog([Link]
}
MEN
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;
}
([Link]
.hero p Gratis
{
Belajar Pemrograman
([Link]
font-weight: 300;
Blogline-height: 1.3em;
MEN
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 {
([Link]
font-size: 0.8em;
Belajar Pemrograman Gratis
Blog([Link]
}
MEN
@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,
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%;
}
}
([Link]
Belajar Pemrograman Gratis
Blog([Link]
MEN
Maka Outputnya:
Wah, mantap kan? Jika kalian bingung dalam mencari gambar
seperti ikon sosial media ataupun avatar, maka kalian bisa
menemukannya di website ini.
[Link]
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:
([Link]
Belajar Pemrograman Gratis
Blog([Link]
MEN
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
([Link] 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.
1. Contoh dan Cara Membuat Form di HTML
([Link]
2. 5 IDE Powerful Untuk Ngoding Web
([Link]
([Link]
Belajar Pemrograman Gratis
web/)
3. Langkah Awal Untuk Memulai Belajar Pemrograman Web
([Link]
Blog([Link]
MEN
web/)
4. Programmer Web Bikin Aplikasi Mobile? Yuk Ngoding dengan PWA
([Link]
“Program yang dikembangkan tidak akan luput dari error,
sehebat apapun programmernya”. (Alan J. Perlis)
Bagikan pengalaman kamu saat ngoding melalui kolom komentar.
Jika ada pertanyaan silahkan isi kolom komentar dibawah ini.
Contoh Coding HTML Website Dalam 15 Menit– karya Rendi
Juliarto, Intern Junior Content Writer di Dicoding
([Link]
Belajar Pemrograman Gratis
Blog([Link]
MEN
([Link]
Belajar Pemrograman Gratis
Blog([Link]
MEN
([Link]
Belajar Pemrograman Gratis
Blog([Link]
MEN
Rekomendasi
Kementerian Komunikasi dan Informatika
Professional Academy Digital Talent Scholarship 2022
Beasiswa Android Developer dan Associate Cloud Engineer dari Kominfo dan
Google
Selengkapnya
([Link]
([Link]
Belajar Pemrograman Gratis
Blog
Memulai ([Link]
Pemrograman Dengan Java
MEN
15 Jam belajar 4,85 Level Dasar ([Link]
Temukan kelas pemrograman sesuai minat belajar Anda
([Link]
([Link]
([Link]
([Link]
([Link]
([Link]
Bantuan ([Link] Hubungi Kami ([Link] Aturan
Pakai ([Link] Kebijakan Privasi ([Link]
© 2021 Dicoding ([Link]
Belajar Pemrograman Gratis
