Cara Membuat Web HTML Keren dengan Notepad [Web Portofolio]

Cara Membuat Web HTML Keren dengan Notepad [Web Portofolio]
Cara Membuat Web HTML Keren dengan Notepad - Pada kesempatan yang baik ini saya akan membuat desain website html, css, bootstrap dengan notepad. Script kode ini saya dapatkan di codepen.io yang memiliki tampilan cukup keren dan bagus untuk biodata (portofolio) kamu.
Untuk demo cek: Disini
Langsung saja kita membuat website sederhana ini, sebelum membuatnya silahkan simak informasi ini terlebih dahulu.

Apa itu Website Statis?
Website Statis adalah website dimana kita tidak bisa mengupdate konten secara langsung... (Selengkapnya baca disini).

Sebelum membuat website sederhana ini, silahkan anda mempersiapkan:
  • Komputer/PC/Android. kalau belum punya silahkan pergi ke WARNET.
  • Aplikasi Text Editor. pakai notepad biada juga bisa.
  • Browser. rekomendasi pakai chrome.
  • Koneksi Internet. jika tidak ada tidak apa-apa
  • Niat yang tulus. biar berkah belajarnya.

Sebenarnya kita bisa membuat website online sendiri yang bagus dan mudah. Yang diperlukan hanyalah nama domain, hosting, dan wordpress. Silahkan ikuti langkah untuk bikin web sendiri disini untuk lebih jelasnya. Dengan menggunakan wordpress kita akan mendapatkan website yang SEO friendly, dan bisa menggunakan plugin & theme gratisan yang bisa membuat situs kita jauh lebih keren dan profesional.


Cara Membuat WEB Sederhana dengan HTML dan CSS

Berikut beberapa langkah untuk membuat website portofolio/biodata sederhana menggunakan html dan css.

Langkah 1: Buka Aplikasi Text Editor

Dilangkah pertama ini anda perlu membuka aplikasi text editor yang sudah anda persiapkan sebelumnya. Jika tidak punya text editor dikomputer pakai Smartphone juga bisa, unduh saja aplikasinya diplaystore.

Langkah 2: Buat File "index.html"

Lalu buat sebuah file dan beri nama "index.html" dan silahkan copy kode script dibawah ini.

<html>
<head>
<title>Cara Membuat Web HTML Keren dengan Notepad - ansoriweb.com</title>
<link href="style.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <!-- begin page -->
    <div class="page">
        <!-- begin header -->
        <div class="header">
            <nav class="navbar navbar-default navbar-static-top">
                <!-- begin container-fluid -->
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <!-- begin navbar-collapse -->
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#about">About </a></li>
                            <li><a href="#portfolio">Portfolio</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </div>
                    <!-- end navbar-collapse -->
                </div>
                <!-- end container-fluid -->
            </nav>
        </div>
        <!-- end header -->
        <!-- begin section-hero -->
        <div class="section-hero">
            <!-- begin container-fluid -->
            <div class="container-fluid">
                <!-- begin row -->
                <div class="row">
                    <!-- begin col-sm-12 -->
                    <div class="col-sm-12">
                        <!-- begin hero -->
                        <div class="hero">
                            <p>Vasiliy Pokotylo</p>
                            <h1 class="hero-title">Front-end Developer</h1>
                            <p>Hello and welcome to my personal portfolio website!</p>
                        </div>
                        <!-- end hero -->
                        <a class="hero-button" href="#portfolio">VIEW PORTFOLIO</a>
                    </div>
                    <!-- end col-sm-12 -->
                </div>
                <!-- end row -->
            </div>
            <!-- end container-fluid -->
        </div>
        <!-- end section-hero -->
        <!-- begin section-portfolio -->
        <div class="section-portfolio">
            <!-- begin container -->
            <div class="container">
                <!-- begin row -->
                <div class="row">
                    <h3 class="title" id="portfolio">PORTFOLIO</h3>
                </div>
                <!-- end row -->
                <!-- begin row -->
                <div class="row">
                    <!-- begin col-md-4 col-sm-6 -->
                    <div class="col-md-4 col-sm-6">
                        <!-- begin col-content -->
                        <div class="col-content">
                            <a class="" href="https://asyntrail.github.io/transport/" target="_blank"><img class="img-responsive img-xs-center transform-animation" src="http://placehold.it/350x200" alt="Blog page template"></a>
                            <h3 class="text-uppercase">Transport service</h3>
                            <a class="portfolio-link" href="https://asyntrail.github.io/transport/" target="_blank">https://asyntrail.github.io/transport</a>
                            <p class="portfolo-description">Page template without any framework, has responsive design and responsive sidebar menu.
                                <br>Technologies: HTML5, CSS3, JS.</p>
                        </div>
                        <!-- end col-content -->
                    </div>
                    <!-- end col-md-4 col-sm-6 -->
                    <!-- begin col-md-4 col-sm-6 -->
                    <div class="col-md-4 col-sm-6">
                        <!-- begin col-content -->
                        <div class="col-content">
                            <a class="" href="http://lark.zzz.com.ua/" target="_blank"><img class="img-responsive img-xs-center transform-animation" src="http://placehold.it/350x200" alt="Blog page template"></a>
                            <h3 class="text-uppercase">Display</h3>
                            <a class="portfolio-link" href="http://lark.zzz.com.ua/" target="_blank">http://lark.zzz.com.ua</a>
                            <p class="portfolo-description">Minisite template converted to WordPress theme. Has responsive design and a slider Slick.
                                <br>Technologies: HTML5, CSS3, JS, PHP.</p>
                        </div>
                        <!-- end col-content -->
                    </div>
                    <!-- end col-md-4 col-sm-6 -->
                    <!-- begin col-md-4 col-sm-6 -->
                    <div class="col-md-4 col-sm-6">
                        <!-- begin col-content -->
                        <div class="col-content">
                            <a href="https://asyntrail.github.io/restaurant" target="_blank"><img class="img-responsive img-xs-center transform-animation" src="http://placehold.it/350x200" alt="Restaurant page template"></a>
                            <h3 class="text-uppercase">Restaurant service</h3>
                            <a class="portfolio-link" href="https://asyntrail.github.io/restaurant" target="_blank">https://asyntrail.github.io/restaurant</a>
                            <p class="portfolo-description">Restaurant page template, has responsive design and java scripts.
                                <br>Technologies: HTML5, Bootstrap3, CSS3, JS.</p>
                        </div>
                        <!-- end col-content -->
                    </div>
                    <!-- end col-md-4 col-sm-6 -->
                    <!-- begin col-md-4 col-sm-6 -->
                    <div class="col-md-4 col-sm-6">
                        <!-- begin col-content -->
                        <div class="col-content">
                            <a class="" href="https://asyntrail.github.io/blog" target="_blank"><img class="img-responsive img-xs-center transform-animation" src="http://placehold.it/350x200" alt="Blog page template"></a>
                            <h3 class="text-uppercase">Blog</h3>
                            <a class="portfolio-link" href="https://asyntrail.github.io/blog" target="-blank">https://asyntrail.github.io/blog</a>
                            <p class="portfolo-description">Blog page template, without any framework and java scripts, has responsive design.
                                <br>Technologies: HTML5, CSS3.</p>
                        </div>
                        <!-- end col-content -->
                    </div>
                    <!-- end col-md-4 col-sm-6 -->
                    <!-- begin col-md-4 col-sm-6 -->
                    <div class="col-md-4 col-sm-6">
                        <!-- begin col-content -->
                        <div class="col-content">
                            <a href="https://asyntrail.github.io/clinic" target="_blank"><img class="img-responsive img-xs-center transform-animation " src="http://placehold.it/350x200" alt="Online clinic page template"></a>
                            <h3 class="text-uppercase">Online clinic</h3>
                            <a class="portfolio-link" href="https://asyntrail.github.io/clinic" target="_blank">https://asyntrail.github.io/clinic</a>
                            <p class="portfolo-description">Online clinic page template, has responsive design and java scripts.
                                <br>Technologies: HTML5, Bootstrap3, CSS3, JS.</p>
                        </div>
                        <!-- end col-content -->
                    </div>
                    <!-- end col-md-4 col-sm-6 -->
                    <!-- begin col-md-4 col-sm-6 -->
                    <div class="col-md-4 col-sm-6">
                        <!-- begin col-content -->
                        <div class="col-content">
                            <a href="http://lampshm.kl.com.ua/" target="_blank"><img class="img-responsive img-xs-center transform-animation" src="http://placehold.it/350x200" alt="Page"></a>
                            <h3 class="text-uppercase">LAMPS HANDMADE</h3>
                            <a class="portfolio-link" href="http://lampshm.kl.com.ua/" target="_blank">http://lampshm.kl.com.ua</a>
                            <p class="portfolo-description">Blog with custom settings for the standard WordPress theme Twenty-seventeen.
                                <br>Technologies: CMS WordPress.</p>
                        </div>
                        <!-- end col-content -->
                    </div>
                    <!-- end col-md-4 col-sm-6 -->
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </div>
        <!-- end section-portfolio -->
        <!-- begin section-about -->
        <div class="section-about" id="about">
            <!-- begin container -->
            <div class="container">
                <!-- begin row -->
                <div class="row">
                    <h3 class="title text-center">ABOUT</h3>
                </div>
                <!-- end row -->
                <!-- begin row -->
                <div class="row">
                    <!-- begin col-sm-12 -->
                    <div class="col-sm-12">
                        <p class="about-description">Hello, my name is Vasiliy and I'm a beginner Front-End web developer. I study Web Development with Udacity (online coursces) and FreeCodeCamp. I design with CSS3 and HTML5, but i have interest in java script programming. I love building websites, constantly learning and expanding my skills.
                            <br> I use: HTML,CSS, JavaScript, jQuery.
                            <br> I am also proficient: Bootstrap, Git, WordPress, Gulp.js, Flexbox.</p>
                    </div>
                    <!-- end col-sm-12 -->
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </div>
        <!-- end section-about -->
        <!-- begin section-contact -->
        <div class="section-contact" id="contact">
            <!-- begin container -->
            <div class="container">
                <!-- begin row -->
                <div class="row">
                    <h3 class="title text-center">CONTACT</h3>
                </div>
                <!-- end row -->
                <!-- begin row -->
                <div class="row">
                    <!-- begin col-sm-6 -->
                    <div class="col-sm-6">
                        <!-- begin contact-col -->
                        <div class="contact-col">
                            <a class="btn btn-lg btn-warning btn-block" href="mailto:asyntrail@gmail.com" role="button"><span class=" glyphicon glyphicon-envelope" aria-hidden="true"></span> Send Email</a>
                            <a class="btn btn-lg btn-primary btn-block" href="https://www.facebook.com/asyntrail" target="_blank" role="button">Facebook</a>
                            <a class="btn btn-lg btn-success btn-block" href="https://github.com/asyntrail" target="_blank" role="button">Github</a>
                        </div>
                        <!-- end contact-col -->
                    </div>
                    <!-- end col-sm-6 -->
                    <!-- begin col-sm-6 -->
                    <div class="col-sm-6">
                        <div class="contact-col">
                            <p class="contact-description"> If you have any questions, please send me an e-mail at asyntrail@gmail.com.</p>
                        </div>
                    </div>
                    <!-- end col-sm-6 -->
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </div>
        <!-- end section-contact -->
        <!-- begin footer -->
        <div class="footer">
            <!-- begin container -->
            <div class="container">
                <!-- begin row -->
                <div class="row">
                    <!-- begin col-md-12 -->
                    <div class="col-md-12">
                        <!-- begin footer-col -->
                        <div class="footer-col">
                            <span> Vasiliy Pokotylo © 2018, All rights reserved.</span>
                        </div>
                        <!-- end footer-col -->
                    </div>
                    <!-- end col-md-12 -->
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </div>
        <!-- end footer -->
    </div>
    <!-- end page -->
</body>
</html>

Langkah 2: Buat File "style.css"

Kemudian silahkan buat file "style.css" dan silahkan copy script kode dibawah ini.

html {
    scroll-behavior: smooth;
}
body {
    background: white;
    color: #5a90ba;
}
.header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 20;
}
.navbar {
    background-color: #2098D1;
    margin: 0px;
    border: 0px;
    border-radius: 0px;
}
.navbar-default .navbar-nav {
    padding-right: 20px;
}
.navbar-default .navbar-nav li a {
    text-align: right;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}
.navbar-default .navbar-nav>li>a:hover {
    color: #c6e9ef;
}
.section-hero {
    min-height: 600px;
    color: #fff;
    background: #2098D1;
    text-align: center;
    padding-top: 200px;
}
.hero {
    padding-bottom: 80px;
    font-size: 25px;
    text-align: center;
}
.hero-title {
    font-family: impact;
    margin-top: 10px;
}
.hero-title::after {
    content: "";
    display: block;
    margin: 5px auto 0;
    background-color: #c6e9ef;
    width: 150px;
    height: 3px;
}
.hero-button {
    background: #045f8c;
    font-weight: bold;
    color: white;
    text-decoration: none;
    font-size: 14px;
    padding: 12px 16px 12px 16px;
    display: inline-block;
    border-style: none;
}
.hero-button:hover {
    text-decoration: none;
    color: #045f8c;
    background: #c6e9ef;
}
.section-portfolio {
    background: #c6e9ef;
    padding-bottom: 60px;
    text-align: center;
}
.title {
    margin-top: 30px;
    margin-bottom: 40px;
    padding-top: 20px;
    text-align: center;
    color: #5a90ba;
}
.col-content {
    height: 424px;
    margin-bottom: 30px
}
.img-responsive {
    display: inline;
}
.portfolio-link {
    color: #46a850;
}
.portfolo-description {
    margin: 10px 20px 10px 20px;
    font-size: 16px;
    font-family: verdana;
}
.section-about {
    min-height: 500px;
    background: #f8f8f8;
}
.about-description {
    text-align: center;
    font-family: roboto;
    font-size: 27px;
    padding: 40px 0px;
}
.section-contact {
    min-height: 500px;
    background: #c6e9ef;
}
.contact-col {
    padding-top: 60px;
}
.btn-block {
    margin: 10px 0px 10px 0px;
}
.contact-description {
    font-size: 22px;
    padding-top: 60px;
}
.footer {
    min-height: 40px;
    background: #2098D1;
    color: white;
    text-align: center;
}
.footer-col {
    padding: 20px 0px 20px 0px;
    text-align: right;
}
.navbar-default .navbar-toggle .icon-bar {
    background: white;
}
@media (max-width:767px) {
    .img-xs-center {
        margin: 0 auto;
    }
    .navbar-default .navbar-collapse {
        background: #045f8c;
    }
    .contact-description,
    .contact-col {
        padding-top: 30px;
    }
}
@media (max-width:450px) {
    .hero-title {
        font-size: 28px;
    }
    .about-description {
        font-size: 20px;
        padding: 0px 0px 40px 0px;
    }
    .contact-description {
        font-size: 18px;
    }
    .portfolio-link {
        font-size: 12px;
    }
}
.transform-animation {
    transition: .2s;
}
.transform-animation:hover {
    transform: scale(1.1);
    color: #000;
    outline-color: #b0b0b0;
}
.transform-animation:after {
    display: inline-block;
    padding: 10px;
    content: attr(class);
}

Langkah 3: Simpan Files dan View

Setelah anda selesai silahkan klik save dan tarik file "index.html" kebrowser yang sudah anda siapkan tadi. Ingat! harus pakai koneksi internet agar gambarnya dan tampilannya bisa terlihat (muncul).
Cara Membuat Web HTML Keren dengan Notepad

Penutup

Itulah tadi Cara Membuat Web HTML Keren dengan Notepad, apabila ada masih bingung dan kurang paham (terjadi error) anda bisa berkomentar dibawah ini.

Jangan sungkan-sungkan untuk bertanya, pepatah mengatakan "malu bertanya sesat dijalan". Selebihnya mohon maaf jika ada kekeliruan, sekian dari saya selamat belajar dan terima kasih.
Next Post Previous Post
16 Comments
  • Jerryokz
    Jerryokz 12 August, 2020 01:42

    Itu mksdnya SC index dan CSS di jadikan 1

    • Ahmad Ansori
      Ahmad Ansori 17 August, 2020 20:22

      file index.html dan style.css dijadikan di satu folder gan :D

  • Agusrahmat m
    Agusrahmat m 01 October, 2020 02:04

    Assalamukum gan minta cara buatan undangan gan ..trimakasih

    • Ahmad Ansori
      Ahmad Ansori 01 October, 2020 06:40

      oke gan, kapan" ane buat :)

  • Yusan
    Yusan 04 October, 2020 07:48

    Gan, apakah web yg lu buat bisa gua akses Di hp gua?

    • Ahmad Ansori
      Ahmad Ansori 04 October, 2020 16:38

      bisa gan, dicoba aja

  • delilah deva
    delilah deva 04 October, 2020 10:42

    keren dan menarik kak sangat membantu sekali bagi saya yang pemula perkenalkan saya deva delilah dari ISB Atma Luhur

    • Ahmad Ansori
      Ahmad Ansori 04 October, 2020 16:38

      baik kak, sama-sama :D

  • Irfan
    Irfan 22 October, 2020 12:58

    cara gabungin html sama css nya gmn ?

    • Ahmad Ansori
      Ahmad Ansori 23 October, 2020 19:14

      tinggal buat style dibawah head gan.

  • Waw sekolah apa itu.
    Waw sekolah apa itu. 23 November, 2020 09:01

    mas, kalau buat link nya gimana ya?

    • Ahmad Ansori
      Ahmad Ansori 24 November, 2020 05:28

      caranya tinggal tambahkan kode a href=

  • Desman
    Desman 02 January, 2021 23:11

    ka maaf untuk gambar nya itu masuk ke link yah ka?

    • Ahmad Ansori
      Ahmad Ansori 03 January, 2021 17:57

      Yups 😀

  • Unknown
    Unknown 15 August, 2021 19:00

    kak kan saya pemula setelah di save itu gmn ya? saya masih bingung jika melihat langkah2 nya
    terimakasih

    • Ahmad Ansori
      Ahmad Ansori 20 August, 2021 21:12

      setelah disimpan buka pakai browser

Add Comment
comment url