Memulai pengembangan web dengan membuat proyek web sederhana dalam Visual Studio Code yang berisi halaman web, file CSS, dan file JavaScript. Pelajari cara menggunakan alat pengembang di browser untuk memeriksa pekerjaan Anda
Catatan
Ini adalah modul proyek terpandu di mana Anda akan menyelesaikan proyek ujung ke ujung dengan mengikuti petunjuk langkah demi langkah
Pada tutorial kali ini, kita akan membuat website sederhana menggunakan HTML dan CSS. Anda akan belajar cara membuat halaman arahan, menambahkan konten ke situs web Anda, dan mengatur gaya situs web Anda dengan CSS. Pada akhir tutorial ini, Anda akan memiliki situs web sederhana berbasis HTML dan CSS
Jika Anda ingin membuat situs web sederhana menggunakan HTML dan CSS, Anda telah datang ke tempat yang tepat. Dalam artikel ini, kami akan memberi Anda kode sumber untuk situs web HTML dan CSS dasar, serta beberapa kiat tentang cara menyesuaikannya agar sesuai dengan kebutuhan Anda
Website Sederhana Menggunakan HTML dan CSS Dengan Source Code
Membuat situs web dengan HTML dan CSS relatif mudah – bahkan jika Anda tidak memiliki pengalaman coding sebelumnya. Dengan kode situs web sederhana kami, yang perlu Anda lakukan hanyalah menyalin dan menempelkan kode ke editor teks Anda, menyimpannya sebagai file HTML, dan membukanya di browser web Anda. Dari sana, Anda dapat mulai membuat perubahan pada kode untuk mempersonalisasi situs Anda
Setelah Anda melakukan itu, maka hal berikutnya yang Anda perlukan adalah CSS untuk mendesainnya. Jadi, izinkan saya menunjukkan kode CSS untuk mendesainnya@import url('//fonts.googleapis.com/css2?family=Poppins&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: 'Poppins'; line-height: 1.7em; } a{ text-decoration: none; color: #fff; } .container{ max-width: 1100px; margin:auto; } .lead{ font-size: 16px; padding: 10px 10px; text-align: justify; } .btn{ display: inline-block; padding: 07px 16px; background: rgb(38, 94, 222);; border: none; cursor: pointer; font-size: 16px; border-radius: 03px; color:#fff; transition: all 0.3; } .clr{ clear: both; } /* Close Utality Classes */ #navbar{ background: #3170ff; overflow: auto; } #navbar h1{ float: left; padding-top: 20px; } #navbar ul{ list-style: none; float: right; } #navbar ul li{ float: left; } #navbar ul li a{ display: block; padding: 20px; text-align: center; transition: all 0.5s; } #navbar ul li a:hover, #navbar ul li a.current{ background: #4397EA; transition: all 0.5s; } /* Showcase Area */ #showcase{ background: url('../img/img2.jpg') no-repeat center center/cover; height: 600px; color: #fff; } .showcase-content{ padding-top: 170px; color: #333; } .showcase-content h2{ font-size: 60px; line-height: 1.9em; } .showcase-content p{ font-size: 20px; margin-bottom: 20px; } .showcase-content .btn:hover{ background: #4397EA; border: none; color:#fff; transition: all 0.3s; } /* About Section */ .about{ height: 350px; margin-top: 40px; } .about h3{ width: 100%; border-bottom: 2px solid #ddd; } .about h3 span{ background: #ddd;; padding: 10px 22px; color: #333; text-align: center; display: inline-block; } /* Close */ #services h3{ width: 100%; border-bottom: 0.5px solid #ddd;; } #services h3 span{ background: #ddd; padding: 10px 22px; color: #333; text-align: center; display: inline-block; } #services .box{ float: left; width: 33.33%; padding: 45px; text-align: center; margin: 30px 0px; } .bg-primary{ background: #265ede; color: #fff; } .light-gray{ background: #ddd; } #services h2{ margin-bottom: 25px; } /* Author */ #authors h3{ width: 100%; border-bottom: 0.5px solid #ddd;; } #authors h3 span{ background: #ddd; padding: 10px 22px; color: #333; text-align: center; display: inline-block; } #authors{ background: url('../img/img.jpg') no-repeat center; height: 600px; padding-top: 40px ; } .auth{ float: left; height: 500px; width: 33%; color: #fff; padding: 20px; text-align: center; margin: 20px 01px; } .auth img{ border-radius: 50%; } .names{ font-weight: bold; font-size: 18px; } /* Contact Us */ #contact h3{ width: 100%; border-bottom: 0.5px solid #ddd;; margin-bottom: 35px; } #contact h3 span{ background: #ddd; padding: 10px 22px; color: #333; text-align: center; display: inline-block; } #contact .form-group{ margin-bottom: 20px; } .contact-form label{ display: block; margin-bottom: 5px; } .contact-form input{ width: 100%; padding: 10px; border: 1px solid #ddd; } #contact textarea{ height: 200px; width: 100%; } .contact-form input:focus, .contact-form textarea:focus{ outline: none; border-color: #265ede; } /* Footer */ #main-footer{ background: #265ede; padding: 20px; margin-top: 20px; text-align: center; color:#fff; } _Itu untuk membuat website sederhana menggunakan HTML dan CSS, di dalam tutorialnya anda sudah mendapatkan ilmu dasar yang digunakan untuk membuat website sederhana. Jadi, Jika Anda ingin mempelajarinya langkah demi langkah secara praktis, saya punya video tutorialnya. Anda dapat menontonnya dan mempelajarinya langkah demi langkah
Unduh Kode Sumber
Situs Web Sederhana menggunakan HTML CSS dan JavaScript Dengan Kode Sumber
Hai Guys, baru-baru ini saya telah membuat tutorial lengkap dengan sumber Cara Membuat Website Sederhana Menggunakan HTML CSS dan JavaScript dengan Source Code. Di dalam website, Anda akan belajar Cara menggunakan HTML dan CSS3 untuk mendesain halaman utama
Setelah Anda mendesain halaman menggunakan HTML dan CSS3, Anda akan belajar Cara menggunakan JavaScript di dalam situs web Anda menampilkan penghitung waktu mundur. Jadi, saya akan membagikan kepada Anda tutorial dan juga kode sumber proyek
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="css/style.css" /> <title>Coming Soon Website Using HTML and CSS3</title> </head> <body> <header> <div class="coundown-timmer"> <div class="content"> <h2>Website Comming Soon</h2> <p> Our Website Under Construction, We Are Working on it, We Will Rady to Lunch it After </p> </div> <div class="timmer-content"> <div class="time"> <span id="days" class="numbers">00</span> <span>Days</span> </div> <div class="time"> <span id="hours" class="numbers">00</span> <span>Hours</span> </div> <div class="time"> <span id="minutes" class="numbers">00</span> <span>Minutes</span> </div> <div class="time"> <span id="seconds" class="numbers">00</span> <span>Second</span> </div> </div> <div class="input-data"> <h3>Subscribe Now to Get Updates</h3> <div class="input-fields"> <div><input type="email" placeholder=" Enter an Email" /></div> <a href="#">Subscribe Now</a> </div> </div> </div> </header> <script src="js/main.js"></script> </body> </html>Setelah Anda selesai melakukannya, maka Anda perlu menatanya menggunakan CSS3, Jadi, saya akan membagikan kepada Anda kode CSS yang membantu Anda mengelola halaman
@import url("//fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap"); * { padding: 0; margin: 0; box-sizing: border-box; font-family: "poppins", sans-serif; } header { width: 100%; height: 100vh; } header::before { content: ""; background: url("../img/water.jpg") no-repeat center center/cover; position: absolute; opacity: 0.3; top: 0; left: 0; width: 100%; height: 100%; z-index: -3; } .coundown-timmer { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; } .coundown-timmer h2 { font-size: 4rem; height: 1.5; } .coundown-timmer .content p { font-size: 1.1rem; } .timmer-content { display: flex; padding: 2rem 0px; } .time { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; padding: 2rem; } .numbers { font-size: 3.5rem; font-weight: 800; padding: 0.5rem; } .input-data { width: 100%; display: flex; flex-direction: column; } .input-data h3 { font-size: 1.3rem; padding-bottom: 1rem; } .input-fields input { width: 30%; margin: auto; border: none; padding: 1rem 2rem; margin-bottom: 1.5rem; font-size: 1rem; } .input-fields a { text-decoration: none; background: #21618c; color: #fff; padding: 1rem 2rem; font-size: 1rem; }Terakhir, Anda memerlukan JavaScript untuk menampilkan penghitung waktu mundur di halaman depan situs web. Jadi, Anda dapat mengubah penghitung waktu mundur. Jadi, Mari kita periksa kode JS
let days = document.getElementById("days"); let hours = document.getElementById("hours"); let minutes = document.getElementById("minutes"); let seconds = document.getElementById("seconds"); let newyear = new Date("Jan 1,2023 00:00:00").getTime(); updatefun(); function updatefun() { let now = new Date().getTime(); let downtime = newyear - now; let second = 1000; let minute = second * 60; let hour = minute * 60; let day = hour * 24; let d = Math.floor(downtime / day); let h = Math.floor((downtime % day) / hour); let m = Math.floor((downtime % hour) / minute); let s = Math.floor((downtime % minute) / second); days.innerHTML = d; hours.innerHTML = h; minutes.innerHTML = m; seconds.innerHTML = s; setTimeout(updatefun, 1000); } _Semoga Anda mendapat ide dari kode sumber proyek. Jika Anda menghadapi masalah dengan kode tersebut, Anda dapat menonton video tutorial lengkapnya. Di dalam tutorial Anda akan belajar langkah demi langkah penggunaan HTML CSS dan JavaScript untuk membuat website
Unduh Kode Sumber
Kesimpulan
Dalam tutorial ini, kita telah belajar cara membuat website sederhana menggunakan HTML dan CSS dengan source code. Kami juga menyertakan kode sumber untuk situs web sehingga Anda dapat dengan mudah memodifikasinya sesuai kebutuhan Anda
Anda Mungkin Juga Menyukai
- Proyek HTML CSS Untuk Pemula
- Cara membuat Formulir Pendaftaran dalam HTML dan CSS
- Cara membuat Penggeser Gambar Otomatis menggunakan HTML dan CSS
- Cara membuat Galeri Gambar dalam HTML di CSS3
Membuat situs web tidak harus rumit atau menghabiskan waktu, seperti yang ditunjukkan oleh tutorial ini. Hanya dengan beberapa baris kode, Anda dapat membuat situs web dasar namun fungsional. Jadi tunggu apa lagi?
Ada apa
Artikel sebelumnya Cara Membuat Galeri Gambar di HTML dan CSS3
Artikel selanjutnya Cara Menggunakan Ajax di PHP Dengan jQuery
Asif Ali
https. //onlineittuts. com
Saya Programmer, Pemasar Digital, dan Blogger, saya telah bekerja di web selama 04 tahun. Pada dasarnya, saya telah berbagi keahlian pribadi di situs web saya