Langkah Mudah Membuat CSS Responsive

Dipublikasikan oleh admin pada

Langkah Mudah Membuat CSS Responsive, bagi anda yang sudah bergelut dengan website tentu tidak asing dengan CSS.
bagaimana cara untuk membuat CSS Responsive Web ? apa itu CSS ? apa itu Responsive.

Bagi anda yang baru saja ingin terjun menjadi creator web atau juga web developer, kalian wajib tau apaa itu CSS dan Responsive.
Kalian harus baca artikel ini sampai habis.

CSS ialah bahasa Cascading Style Sheet yang biasanya untuk mengatur tampilan elemen yang tertulis dalam bahasa markup,
seperti HTML.

CSS sendiri berfungsi untuk memisahkan konten dari tampilan visualnya di situs. Pencipta CSS adalah W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana.

Baca Juga : Cara menghubungkan website PHP dengan database PHPMySQL

Dalam pembahasan kali ini saya akan menjelaskan dan membuat css responsive web, css responsive image, css responsive typografy dan css responsive layout.

Langkah Membuat CSS

index.html

Sekarang kalian buka text editor kalian bisa menggunakan sublime, atom, dreamweaver atau visual code studio. Buatkan 1 folder baru dan buat file baru dengan nama indext.html, lalu tuliskan scrip berikut.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StudyKuy</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="responsive.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-left">
          <h1>StudyKuy</h1>
        </div>
        <div class="header-right">
          <a href="#">Pelajaran</a>
          <a href="#">Daftar</a>
          <a href="#" class="login">Log in</a>
        </div>
      </div>
    </header>
     <div class="top-wrapper">
      <div class="container">
        <h1>BELAJAR CODING.</h1>
        <h1>BELAJAR MENJADI LEBIH KREATIF.</h1>
        <p>Mari Belajar Bersama StudyKuy Kalian Akan Mendapatkan Ilmu Yang Bermanfaat</p>
        <p>Kami menawarkan lingkungan pemograman yang lengkap untuk mempermudah Anda memulai.</p>
        <div class="btn-wrapper">
          <a href="#" class="btn signup">Daftar dengan Email</a>
          <p>atau</p>
          <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Daftar dengan Facebook</a>
          <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Daftar dengan Twitter</a>
        </div>
      </div>
    </div>
    <div class="lesson-wrapper">
      <div class="container">
        <div class="heading">
          <h2>Mereka adalah seorang Mahasiswa dari Luar Negri</h2>
        </div>
        <div class="lessons">
          <div class="lesson">
            <div class="lesson-icon">
              <img src="img/ui-danro.jpg">
            </div>
             <p class="text-contents">Seorang Mahasiswa dari Belanda </p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="img/ui-divya.jpg">
            </div>
            <p class="text-contents">Seorang Mahasiswa dari Belgia</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="img/ui-sam.jpg">
            </div>
            <p class="text-contents">Seorang Mahasiswa dari Bulgaria</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="img/ui-sherman.jpg">
            </div>
            <p class="text-contents">Seorang Mahasiswa dari Jerman</p>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div class="message-wrapper">
      <div class="container">
        <div class="heading">
          <h2>Apakah anda siap untuk menjadi programer yang handal?</h2>
          <h3>Ayo belajar coding, ayo belajar menjadi lebih kreatif!</h3>
        </div>
        <span class="btn message">Mulai Belajar</span>
      </div>
    </div>
    <footer>
      <div class="container">
        <img src="img/home.png">
        <p>Learn to code, learn to be creative.</p>
      </div>
    </footer>
  </body>
</html>

Script diatas merupakan tampilan dari responsive Websitenya. Jangan lupa untuk mengaitkan dengan file CSS berikut .

PHP
1
link rel="stylesheet" href="stylesheet.css"
PHP
1
link rel="stylesheet" href="responsive.css"

script tersebut untuk memanggil file CSS nya, agar tampilan bisa lebih menarik dan responsive.

Baca Juga : Cara Membuat Form Login PHP Dengan Mysqli Koneksi Database

stylesheet.css

Berikut ini kita membuat untuk style website diatas dengan membuat file baru dengan judul stylesheet.css dan berikut ini contoh scriptnya kalian bisa tulis untuk scriptnya.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: "Lucida Grande";
}
a {
  text-decoration: none;
}
.clear {
  clear: left;
}
.container {
  max-width: 1170px;
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}
.top-wrapper {
  padding: 180px 0 100px 0;
  background-image: url("img/profile-02.jpg");
  background-size: cover;
  color: white;
  text-align: center;
}
.top-wrapper h1 {
  opacity: 0.7;
  font-size: 45px;
  letter-spacing: 5px;
  margin-bottom: 10px;
}
 
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
.top-wrapper p {
  opacity: 0.7;
  margin-bottom: 3px;
}
.btn-wrapper {
  text-align: center;
  margin: 20px 0;
}
.btn-wrapper p {
  margin: 10px 0;
}
.signup {
  background-color: #239b76;
}
.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}
.twitter {
  background-color: #55acee;
}
.btn {
  padding: 12px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px;
  text-align: center;
}
.btn:hover {
  opacity: 1;
}
.fa {
  margin-right: 5px;
}
header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
  position :fixed;
  top: 0;
  z-index: 10;
}
.logo {
  width: 124px;
  margin-top: 20px;
}
.header-left {
  float: left;
}
.header-right {
  float: right;
  margin-right: -25px;
}
.header-right a {
  line-height: 65px;
  padding: 0 25px;
  color: white;
  display: block;
  float: left;
  transition: all 0.5s;
}
.header-right a:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.menu-icon {
  color: white;
  float: right;
  font-size: 25px;
  padding: 21px 0;
  display:none;
}
.lesson-wrapper {
  padding-bottom: 80px;
  padding-left: 5%;
  padding-right: 5%;
  background-color: #f7f7f7;
  text-align: center;
}
.heading {
  padding-top: 80px;
  padding-bottom: 50px;
  color: #5f5d60;
}
.heading h2 {
  font-weight: normal;
}
.lesson {
  float: left;
  width: 25%;
}
.lesson-icon {
  position: relative;
}
.lesson-icon p {
  position: absolute;
  top: 44%;
  width: 100%;
  color: white;
}
.text-contents {
  width: 80%;
  display: inline-block;
  margin-top: 15px;
  font-size: 15px;
  color: #b3aeb5;
}
 
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.heading h3 {
  font-weight: normal;
}
.message-wrapper {
  border-bottom: 1px solid #eee;
  padding-bottom: 80px;
  text-align: center;
}
.message {
  padding: 15px 40px;
  background-color: #5dca88;
  cursor: pointer;
  box-shadow: 0 7px #1a7940;
}
.message:active {
  position: relative;
  top: 7px;
  box-shadow: none;
}
footer img {
  width: 125px;
}
footer p {
  color: #b3aeb5;
  font-size: 12px;
}
footer {
  padding-top: 30px;
  padding-bottom: 20px;
}
Langkah Mudah Membuat CSS Responsive
Penampilan layar dekstop
Langkah Mudah Membuat CSS Responsive
Tampilan layar handphone

Dari gambar diatas gambar masih belum responsive dan text pun belum resopnsive bagaimana aga semua itu menjadi responsive. Baiklah kita lanjut ke tahap terakhir.

Baca Juga : Cara Mudah Menampilkan Data dari Database dengan PHP

responsive.css

Langkah terakhir yang kita lakukan yaitu buatkan file baru dengan nama responsive.css untuk membuat tampilan layar kita menjadi lebih responsiv
kalian bisa tulis script dibawah ini.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/* Untuk Tablet */
@media all and (max-width: 1000px) {
  .lesson {
    width: 50%;
    margin-bottom: 50px;
  }
  .top-wrapper h1 {
    font-size: 32px;
  }
  .heading h2 {
    font-size: 20px;
  }
}
/* Untuk Smartphone */
@media all and (max-width: 670px) {
  .lesson {
    width: 100%;
  }
  footer {
    text-align: center;
  }
  .btn {
    width: 100%;
  }
  .facebook {
    margin-bottom: 10px;
  }
  .top-wrapper {
    text-align: left;
  }
  .header-right{
    display:none;
  }
  .menu-icon{
    display:block;
  }
  .top-wrapper h1 {
    font-size: 24px;
    line-height: 36px;
  }
  .top-wrapper p {
    font-size: 14px;
    line-height: 20px;
  }
}

Setelah kalian tambahkan script diatas maka tampilan webnya akan menjadi seperti berikut.

tampilan responsive
tampilan responsive

Bagaimana terlihatkan untuk perbedaan nya, kalian sudah mencobanya? dengan mengatur CSS kita sendiri kita jadi mengetahui dan lebih dapat mengerti untuk penggunaan CSS.

Semoga kalian dapat mengerti cara membuat CSS Responsive. Selamat mengoding dan membaca Langkah Mudah Membuat CSS Responsive.

Kategori: HTMLmembuat website
Tags:

0 Komentar

Tinggalkan Balasan

Avatar placeholder

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

Pos Terkait

membuat website

Script Function

Triggers database
membuat website

Membuat Website Toko Online #1 Membuat database Relasi dan Triggers ( PHP Native )

StudyKuy – Membuat Website Toko Online #1 Membuat database Relasi dan Triggers ( PHP Native ). Haloo sobat study kuy mari kita ngoding lagi, nah di artikel ini studykuy akan membagi kan ilmu membuat website Read more…

Cara Mudah Membuat Card HTML
HTML

Cara Mudah Membuat Card HTML

Selamat malam, teman studykuy sudah lama tidak membagi ilmu tentang ngoding, pada arikel ini studykuy akan membagi ilmu cara mudah membuat card HTML membuat card html ini biasanya untuk membuat price list pada sebuah website ecommerce.