-->

Cara Membuat Web HTML Keren dengan Notepad [Web Portofolio]

Konten [Tampil]
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.

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.

0 Response to "Cara Membuat Web HTML Keren dengan Notepad [Web Portofolio]"

Post a comment

Bebas berkomentar asalkan sopan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel