Hal-hal awal yang perlu dipersiapkan dalam belajar HTML dengan menggunakan Sublime Text

Disini penulis akan menjelaskan sedikit setelah lama mimin tidak mengotak atik tentang bahasa pemrogaman HTML. dulu saat kuliah biasanya menggunakan notepad++ (jadul banget) karena sekarang mimin lebih fokus pada design UI/UX jadi tidak menyentuh coding sama sekali. 

langsung saja langkah langkanya sebagai berikut :

1. Download sublime text https://www.sublimetext.com/download
   
2. Text sourchcut http://www.ishaanrawat.com/install-emmet-sublime-text-3/
   Setelah masuk ke http://www.ishaanrawat.com/install-emmet-sublime-text-3/ sudah ada petunjuk step2nya. namun biar tidak bingung, karena ternyata petunjuk yang saya ikuti salah. ini saya berikan step selanjutnya.

            ketik control + ` (pojok atas) pada keyboard di sublime text yang sudah dibuka.

            Lalu akan muncul di bawah sublime

Source code yg di copy tadi di paste di bawah text yang muncul yang di kotak merahin.

Kemudian close sublime dan buka kembali.

Lalu tekan control+shif+p lalu ketik install package

Tunggu bagian bawah pojok dalam proses. Setelah itu akan keluar text boxt ketik install emmet. Ok

3. download http://meyerweb.com/eric/tools/css/reset/reset.css masukkan di folder css

4. Download bootstrap. (bootstrap ini lebih untuk frond end untuk back end ada sendiri) kalau dalam desain biasa disebut grid 960, 1200, dll.

http://getbootstrap.com/getting-started/#download

5. download https://jquery.com/download/

pilih yang Download the compressed, production jQuery 1.12.1

       

untuk beberapa shortcut di sublime

html:5 (Tap)

maka akan muncul

link (tap)  à untuk otomatis link

<link rel="stylesheet" href="">

.container-fluid à ini untuk tampilan 100% layar (Wrap)

<div class="container-fluid">

.container (tap) à untuk didalam isi semua konten (WrapInner)

<div class="container"></div>

.row (tap) à untuk baris

<div class="row"></div>

.col-md-3*4 (tap) à setelah bintang angka 4 menunjukkan jumlah colom yang diinginkan

<div class="col-md-3"></div>

<div class="col-md-3"></div>

<div class="col-md-3"></div>

<div class="col-md-3"></div>

atau bisa langsung dimana tanda > menandakan dia berada di dalam calss tersebut.

Ex. .container-fluid>.container>.row>.col-md-3*4 (tap)

Maka akan muncul

<div class="container-fluid">

                        <div class="container">

                                    <div class="row">

                                                <div class="col-md-3"></div>

                                                <div class="col-md-3"></div>

                                                <div class="col-md-3"></div>

                                                <div class="col-md-3"></div>

                                    </div>

                        </div>

            </div>

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.