Situs web sederhana menggunakan html css dan javascript dengan kode sumber

Templat Situs Web Makanan Unduh Gratis Html Dengan Kode Sumber CSS

8 bulan lalu Oleh pushpam02

Template Situs Web Makanan Unduh Gratis Html Dengan CSS Template Situs Web Makanan adalah proyek frontend sederhana dengan HTML dan CSS. Template untuk membangun situs web ini responsif dan ringan, terutama jika dibandingkan dengan kerangka kerja yang lebih besar. Identifikasi, lalu sesuaikan fitur yang ingin Anda sertakan dari dalam indeks. html. Ini adalah Templat Situs Web Makanan sederhana dengan HTML, CSS, dan

• Baca selengkapnya tentang Template Situs Web Makanan, Unduh Gratis Html Dengan Kode Sumber CSS
• 6768 tampilan

Game 2D Space Invader Sederhana menggunakan CSS Murni dengan Kode Sumber Gratis

10 bulan lalu Oleh ahli cukur

Game 2D Space Invader Sederhana menggunakan CSS Murni dengan Kode Sumber Gratis Game 2D Space Invader Sederhana dengan Kode Sumber adalah proyek yang merupakan game pemain tunggal di mana tujuan Anda adalah untuk menghilangkan semua penyerbu. Gim ini memiliki desain sederhana yang berisi objek dan warna latar belakang. Tujuan dari proyek ini adalah untuk menyediakan lingkungan dana dengan teman, keluarga, dll. Tentang Aplikasi

• Baca lebih lanjut tentang Game Simple Space Invader 2D menggunakan CSS Murni dengan Kode Sumber Gratis
• 2739 tampilan

Kalkulator Standar Sederhana dan Cerdas Menggunakan HTML

1 tahun yang lalu Oleh sminuwa

Ini adalah Aplikasi Web Sederhana yang disebut Kalkulator Standar Sederhana dan Cerdas. Kode sumber HTML ini dikembangkan menggunakan HTML, CSS, dan Javascript (jQuery). Saya tahu semua orang tahu cara kerja kalkulator dan saya hanya akan menjelaskan fitur lain dari Proyek HTML sederhana ini. Aplikasi kalkulator dapat menyimpan riwayat perhitungan dan fitur ini menggunakan penyimpanan lokal browser web

Pelajari cara membuat situs web responsif yang cepat dan mengagumkan yang akan berfungsi di semua perangkat, PC, laptop, tablet, dan ponsel

Buat Situs Web dengan Kerangka CSS

Pernah mendengar tentang Ruang W3Schools?

* tidak perlu kartu kredit

Sebuah "Draf Tata Letak"

Itu selalu bijaksana untuk menggambar draf tata letak desain halaman sebelum membangun situs web

Memiliki "Draf Tata Letak" akan membuat pembuatan situs web jauh lebih mudah

Band

Deskripsi band

Deskripsi band

Deskripsi band

Doctype, Tag Meta, dan CSS

Doctype harus mendefinisikan halaman sebagai dokumen HTML5

Tag meta harus menentukan set karakter menjadi UTF-8

Tag meta viewport harus membuat situs web berfungsi di semua perangkat dan resolusi layar

W3. CSS harus menangani semua kebutuhan gaya kita dan semua perbedaan perangkat dan browser

Untuk mempelajari lebih lanjut tentang gaya dengan W3. CSS, silakan kunjungi W3 kami. Tutorial CSS

Halaman web kosong pertama kita akan terlihat seperti ini

Membuat Konten Halaman

Di dalam elemen situs web kami, kami akan menggunakan "Gambar Tata Letak" dan membuat

• Bilah navigasi
• Pertunjukan slide
• Tajuk
• Beberapa bagian dan artikel
• Sebuah catatan kaki

Elemen semantik

HTML5 memperkenalkan beberapa elemen semantik baru. Elemen semantik penting untuk digunakan karena menentukan struktur halaman web dan membantu pembaca layar dan mesin telusur untuk membaca halaman dengan benar

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('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

Pinterest

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 situs web menggunakan HTML CSS dan JavaScript dengan kode sumber?

Bisakah Anda membuat situs web hanya dengan HTML CSS dan JavaScript?

Bagaimana cara membuat halaman web menggunakan HTML dengan kode sumber?

Bagaimana Anda membuat kode situs web sederhana menggunakan HTML dan CSS?