Buat website menggunakan html dan css dengan source code

Question

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

Table of Contents Show

Website Sederhana Menggunakan HTML dan CSS Dengan Source Code
Cara Membuat Website Menggunakan Kode HTML
Situs Web Sederhana menggunakan HTML CSS dan JavaScript Dengan Kode Sumber
Bagaimana cara membuat halaman web menggunakan kode sumber HTML dan CSS?
Bagaimana cara membuat halaman web menggunakan HTML dengan kode sumber?
Apakah HTML dan CSS cukup untuk membuat website?

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('https://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("https://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?

Facebook

Twitter

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

Bagaimana cara membuat halaman web menggunakan kode sumber HTML dan CSS?

Rencanakan tata letak Anda. Langkah pertama dari setiap situs web adalah selalu mengetahui apa yang Anda inginkan di dalamnya dan (samar-samar) tampilan yang Anda inginkan. .

Siapkan 'kode boilerplate'. .

Buat elemen dalam tata letak Anda. .

Isi konten HTML. .

Tambahkan beberapa CSS tata letak dasar. .

Tambahkan gaya yang lebih spesifik. .

Tambahkan warna dan latar belakang. .

Merayakan