Build A Landing Page With Skeleton

I speak code... And I am not meowing hehe...

After I launched the online shop of Mew da Vinci Official, which you may visit at shop.mewdavinci.com, I am getting interested to continue my study of HTML and CSS, which is about Frontend Web Development.

*** Terjemahan Bahasa Indonesia ***
Sejak saya meluncurkan toko online Mew da Vinci Official yang bisa anda kunjungi melalui website shop.mewdavinci.com, saya mulai tertarik untuk meneruskan mempelajari Kitab Sakti Frontend Web Development, berbasis HTML dan CSS.

Let Us Meet HTML / CSS...

Based on the documentation in khanacademy.org about HTML and CSS,  Secara singkat, HTML adalah markup language. Dan CSS adalah stylesheet language.

*** Terjemahan Bahasa Indonesia ***
Yuk! Berkenalan Dengan HTML / CSS... Berdasarkan dokumentasi pada website khanacademy.org, Secara singkat, HTML adalah markup language. Dan CSS adalah stylesheet language.

#ask me at hello@mewdavinci.com

Let us analogy HTML and CSS as if as we build a house. The base building, such as the wall, the roof, the floor, and the frame, is part of HTML. While CSS is the exterior and the interior of the house.

*** Terjemahan Bahasa Indonesia ***
Mari kita analogikan seperti mendirikan rumah. Bangunan dasar pada rumah tersebut yaitu dinding, atap, lantai, dan kusen, adalah bagian dari HTML. Sedangkan CSS merupakan pernak-pernik interior dan eksteriornya.

It is easy enough to apply the codes or syntax that I have learned from w3schools.com, for the first time. Please look at the syntax below for the example :

*** Terjemahan Bahasa Indonesia ***
Awalnya, cukup mudah ketika mengaplikasikan serangkaian kode unik yang saya peroleh melalui w3schools.com. Seperti syntax di bawah ini :

CSS
body {
    background-color: #333; }

h1 {
    color: #fff;
    text-align: center; }

p {
    font-family: "Courier";
    color: #fff;
    font-size: 20px; }

HTML
<h1>Mew da Vinci Official</h1>
<p>This is my first CSS code.</p>

However, the lessons is getting complicated when I started to learn framework, gradually.

*** Terjemahan Bahasa Indonesia ***
Akan tetapi, lambat laun, pelajaran mulai kompleks ketika saya mengenal framework.

What Is Framework?

For the short answer, framework can be defined as a collection of pieces of codes. And for the longest one, please read "What Is A Framework?" at codeproject.com.

*** Terjemahan Bahasa Indonesia ***
Apa sieh Framework? Framework dapat didefinisikan secara singkat sebagai suatu koleksi potongan-potongan kode program. Penjelasan lebih lanjut mengenai framework dapat dibaca melalui artikel berjudul "What Is A Framework?" di website codeproject.com.

Various frameworks make me tempted to try it one at a time.

*** Terjemahan Bahasa Indonesia ***
Beragam framework membuat saya tergiur untuk menjajalnya satu per satu.

Back to school...

Bootstrap. Foundation. Gumby. Columnal. Skeleton. Are the most popular frontend responsive CSS frameworks. Some programmers suggest Skeleton and Bootstrap to try for beginner.

*** Terjemahan Bahasa Indonesia ***
Bootstrap. Foundation. Gumby. Columnal. Skeleton. Hanyalah beberapa dari pilihan frontend responsive CSS framework terbaik. Rekomendasi untuk pemula adalah Skeleton dan Bootstrap.

Both of them are really good. And based on review, Bootstrap is more powerful than Skeleton. It is well documented, easy to customize, and has lots of widgets. But eh, I found Skeleton for my first tutorial to make a landing page. It is called as Jottly.

*** Terjemahan Bahasa Indonesia ***
Keduanya mendapatkan penilaian yang baik. Dengan dokumentasi yang baik, kemudahan dalam kostumisasi, dan banyaknya koleksi widget, menjadikan Bootstrap lebih unggul dibandingkan Skeleton. Namun, pertama kalinya saya membuat landing page bernama Jottly, saya menggunakan Skeleton.

The Preparation To Make A Landing Page

The components, that I have to prepare to make my own Jottly, are :

1. Download and install XAMPP
2. Download and install Skeleton
3. Download the support images
4. Jottly's tutorial

*** Terjemahan Bahasa Indonesia ***
Persiapan Membuat Landing Page Komponen-komponen yang perlu saya siapkan untuk membuat replika Jottly versi saya, yaitu: Download dan instalasi XAMPP Download dan instalasi Skeleton Download gambar-gambar pendukung Tutorial pembuatan Jottly

By the way, I will continue this article later insyaa Allah hehe...

*** Terjemahan Bahasa Indonesia ***
Ngomong-ngomong, artikelnya dilanjutkan nanti lagi yaa insyaa Allah hehe...