Cara Membuat Website Dengan Coding, Terbaru 2022

Halo Guys Comback lagi dengan gw Losergeek kali ini kita bakal ngoding nichhh. gimana? semangat gaa? bakal asik banget sih ini cuyy, pokok nya mah pantengin terus lah gw bakal buat website sederhana yaitu Web Portofolio menggunakan HTML dan CSS nih cuy. sesuai judulnya kita akan membahas Cara Membuat Website Dengan Coding, Terbaru 2022

Pengertian HTML

Sebelum kita beralih ke contoh-contohnya, ada baiknya kita mengenal HTML terlebih dahulu. Tahukah Anda apa itu HTML? HTML adalah singkatan dari Hypertext Markup Language.

HTML sebenarnya bukan bahasa pemrograman, yang berarti HTML tidak memiliki kemampuan untuk membuat fungsi dinamis. Contoh kode atau skrip membuat paragraf.

<p> Hallo sobat Codingers apa kabarnya? Mudah-mudahan dalam keadaan sehat-sehat saja ya. Ammin </p>

Adapun contoh struktur dasar dari HTML yang dapat kamu pelajari dan praktekkan di antaranya sebagai berikut ini.

<html>
<head>
  <title>Dicoding Indonesia Website</title>
</head>
<body>
  <main>
    <h1>Losergeek</h1> 
    <h2>Tempat Ngoding sambil Ngopi Sanstuy</h2>
    <p>apalagi kalo sobat Codingers Shere ke temen-temen yakan hehehe</p> 
    <img src="logo_losergeek.png" alt="Image losergeek"> 
    <p>Paragraph two with a <a href="https://losergeek.org">klik disini</a></p>
  </main>
</body>
</html>

Untuk memahami lebih lanjut mengenai Html bisa mengunjungi link berikut Pemrograman Web Adalah? Pengertian & Perkenalan

Mempersiapkan Tools yang Akan Digunakan

Disini Mimin Bakal Pake Tools-Tools sebagai berikuit :

  1. Teks editor: VS Code atau Teks Editor Lain
  2. Kode program : HTML5 dan CSS3
  3. Web browser: Chrome

Contoh Ngoding Web Portofolio

Pertama, buka editor teks. Setelah dibuka, mari kita buat folder proyek terlebih dahulu. Anda dapat menyimpan folder di mana saja. OK mari kita pergi. Kami akan membuat 2 file.Di bawah index.html dan style.css.

Folder : index.html

<!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">
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="fontawesome-free-6.1.1-web/css/all.css">
</head>

<body>
    <header>
        <!-- Navbar -->
        <div class="logo" id="hero">Gilang Permana</div>
        <nav>
            <ul class="nav_links">
                <li><a class="nav__link" href="#">About me</a></li>
                <li><a class="nav__link" href="#">My Work</a></li>
                <li><a class="nav__link" href="#">Contact</a></li>
                <li><a class="nav__link" href="https://github.com/GinGikun"><i class="fa-brands fa-github"></i></a></li>
                <li><a class="nav__link" href="https://www.linkedin.com/in/gilang-permana-968a16238/"><i
                            class="fa-brands fa-linkedin"></i></a></li>
                <li><a class="nav__link" href="https://www.facebook.com/profile.php?id=100010506579304"><i
                            class="fa-brands fa-facebook"></i></a></li>
                <li><a class="nav__link" href="https://www.instagram.com/gilang.p_18/"><i
                            class="fa-brands fa-instagram"></i></a></li>
                <li><a href="">
                        <input type="checkbox">
                        <span class="check"></span>
                    </a></li>
            </ul>
        </nav>
    </header>
    <!-- End Navbar -->

    <!-- Section Hero -->
    <section id="hero">
        <div class="kanan-kiri">
            <div class="kiri">
                <h1>
                    <p class="Nama1">Hi, my name is</p><br>
                    <p class="Nama2">Gilang Permana</p>
                </h1>
            </div>
            <div class="kanan">
                <img class="profile-img" src="img/profile-01.png" alt="">
            </div>
        </div>
        <div class="kemampuan-bor">
            <p>I’m Graphic Designer and <br>
                web developer from Indonesia <i class="fa-solid fa-earth-americas"></i> </p>
        </div>
        <div class="kontak-bor">
            <a class="kontak2" href="">Contact Me Bruh</a>
        </div>
    </section>
    <!-- End Section Hero -->

    <!-- Scroll -->
    <section id="scroll">
        <p class="scrl">SCROLL</p>
        <img src="scroll.svg" alt="">
    </section>
    <!-- End Scroll -->

    <!-- About -->
    <section id="about">
        <div class="title-about">
            <h2 class="abt">About</h2>
        </div>
        <div class="keterangan-about">
            <p>hello my friend, i'm a junior programmer and <br>
                well i'm also really confused for this hihihi. <br>
                I hope friends like it thank you</p>
        </div>
    </section>
    <!-- End About -->

    <!-- Icon Skills -->
    <section id="iconn">
        <ul class="ul-icon-skills">
            <img class="icon-skills" src="icon-html.svg" alt="">
            <img class="icon-skills" src="icon-css.svg" alt="">
            <img class="icon-skills" src="icon-js.svg" alt="">
            <img class="icon-skills" src="icon-php.svg" alt="">
            <img class="icon-skills" src="icon-vidios.svg" alt="">
        </ul>
    </section>
    <!-- End Icon Skills -->

    <!-- Scroll -->
    <section id="scroll">
        <img src="scroll.svg" alt="">
    </section>
    <!-- End Scroll -->

    <!-- My Work -->
    <section id="my-work-bro">
        <div class="my-work1">
            <div class="content-work-type">
                <p>this is some of my small work while playing <br>
                    with NFT</p>
            </div>
            <div class="title-work">
                <h2>My Work</h2>
            </div>
        </div>
        <div class="my-work">
            <div class="content-work-img">
                <img src="img/caracter.png" alt="">
                <img src="img/golem.png" alt="">
                <img src="img/slime.png" alt="">
            </div>
        </div>
    </section>
    <!-- End My Work -->

    <!-- Contact -->
    <section id="contact">
        <footer>
            <div class="contact">
                <p class="contact-1">Contact</p>
                <ul>
                    <li class="text-contact">083816282227</li>
                    <li class="text-contact">ggrpermana1933@gmail.com</li>
                </ul>
            </div>
            <div class="copyright">
                <p>@Copyright Gilang.p</p>
            </div>
        </footer>
    </section>
    <!-- End Contact -->



    <!-- SCRIPT DARK MODE -->
    <script>
        function ubahMode() {
            const ubah = document.body;
            ubah.classList.toggle("dark");
        }
    </script>
</body>

</html>

Folder : style.css

@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Fredoka+One&family=Rubik+Mono+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Fredoka+One&family=Rubik+Mono+One&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #222222;
}

/* Navbar */
.logo{
    font-family: 'Bungee', cursive;
    font-size: 25px;
    cursor: pointer;
    color: white;
}
li, a{
    font-family: 'Bungee', cursive;
    font-weight: 500;
    font-size: 16px;
    color: white;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
}
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
}
.nav_links li{
    display: inline-block;
    padding: 0px 20px;
}
.nav_links li a{
    transition: all 0.3s ease 0s;
}
.nav_links li a:hover{
    color: #EE6C4D;
}
input[type="checkbox"]{
    position: relative;
    width: 40px;
    height: 20px;
    appearance: none;
    background-color: #C4C4C4;
    outline: none;
    border-radius: 10px;
    transition: .5s ease;
    cursor: pointer;
}
input[type="checkbox"]:checked{
    background-color: #3664ff;
}
input[type="checkbox"]::before{
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
}
input[type="checkbox"]:checked::before{
  transform: translateX(20px);  
}
.fa-brands{
    font-size: 20px;
    transition: all 0.3s ease 0s;
}
.fa-brands:hover{
    color: #EE6C4D;
}
/* End Navbar */

/* Section Hero */
.kanan-kiri{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 120px 20%;
}
.Nama1{
    font-size: 60px;
    color: white;
    font-family: 'arial';
}
.Nama2{
    font-size: 45px;
    color: white;
    font-family: 'arial';
    line-height: 0.3;
}
.profile-img{
    width: 462px;
    height: 460px;
}
.kemampuan-bor{
    color: white;
    text-align: center;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
}
/* End Section Hero */

/* Contact */
.kontak-bor{
    text-align: center;
    margin-top: 50px;
}
.kontak2{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 13px;
    border: 4px solid #EE6C4D;
    border-radius: 15px;

}
/* End Contact */

/* Scroll */
#scroll{
    text-align: center;
    margin-top: 80px;
}
.scrl{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 10px;
    font-size: 20px;
}
/* End Scroll */

/* About */
#about{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 30px 10%;
}
.abt{
    font-size: 60px;
    color: white;
    font-family: 'arial';
}
.keterangan-about p{
    color: white;
    font-size: 25px;
    margin-top: 250px;
    font-family: Arial, Helvetica, sans-serif;
}
/* End About */

/* Icon Skills */
#iconn{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 30px 10%;
    margin-top: 50px;
}
.icon-skills{
    margin: 25px;
}
/* End Icon Skills */

/* My Work */
.my-work1{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 30px 10%;
}
.content-work-type p{
    color: white;
    font-size: 25px;
    margin-top: 200px;
    font-family: Arial, Helvetica, sans-serif;
}
.title-work{
    color: white;
    font-size: 40px;
    font-family: 'arial';
}
.my-work{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 30px 10%;
    margin-top: 30px;
}
.content-work-img img{
    width: 345px;
    height: 321px;
    margin: 10px;
    border-radius: 20px;
}

footer{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100px;
    padding: 30px 6%;
    background-color: #293241;
}
.contact{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    color: white;
    background-color: none;
    display: flex;
    padding: 20px;
}
.contact-1{
    margin-top: 20px;
}
.text-contact{
    font-family: Arial, Helvetica, sans-serif;
    margin: 15px;
    margin-left: 30px;
    font-weight: bold;
}
.copyright{
    color: white;
    font-size: 20px;
}
/* End Foooter */

Maka Outputnya akan seperti ini :

Gimana Codingers? Mantap kan.

Nah jika Codingers merasa kesulitan mencari gambar atau icon sosial media maka Codingers bisa mencari di website di bawah ini

Rekomendasi Icon sosial media terbaik saat ini

Gimana mudah kan sobat Codingers? Kalian juga bisa kembangkan lagi, misal dari segi desain atau tampilan, posisi layout, teks, foto, dll.

Nah, itu saja yang bisa Mimin beri contoh, selebihnya Codingers bisa berimprovisasi sendiri. Untuk membuat belajar web lebih menyenangkan, Mimin sarankan untuk mengikuti Terus Pembahasan Pemrograman yang mimin Buat di Artikel ini. Belajar dijamin menyenangkan dan Santuys tapi terjamin, Menjadi pengembang web profesional.

Itulah ulasan lengkap mengenai Cara Membuat Website Dengan Coding, Terbaru 2022 yang perlu Codingers ikuti dengan baik, baik dari segi definisinya hingga sejumlah tips yang bisa membuat Codingers semakin ahli dalam pemrograman web.

Terimakasih sudah Mantengin terus pembahasan kali ini sobat Codingers. Next Mimin bakal bahas Cara Membuat Website dengan HTML dan CSS. Pantengin terus sobat Codingers……

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *