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 : 5 Jurusan Kuliah yang banyak Dibutuhkan Tahun 2021 Mendatang!

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

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

Pos Terkait

database php
auto fill

Cara Mudah Menampilkan Data Dari Database Dengan PHP

Cara Mudah Menampilkan data dari database dengan PHP - Hallo, semua selamat bertemu kembali dengan studykuy, pada kali ini kita akan memberikan informasi dan ilmu lagi teman.

format number php
auto fill

Cara Mudah Membuat Format Number PHP Singkat

StudyKuy - Format Number PHP kalian pasti tidak asing kan dengan ini, yang ingin membuat dashboard pada website kalian atau mau membuat website E-commerce kalian pasti tidak mau tulisan harga kalian panjang seperti kereta apikan,

dashboard php
bootstrap

Membuat Dashboard Responsive Dengan Mudah

Pada kesempatan ini kita akan belajar bagaimnana cara membuat dashboard php dengan menggunakan CSS dan fontawesome, yuk ikuti terus blognya study kuy kita mulai sebelumnya sudah membahas untuk membuat form login php dengan CSS dan Bootstrap. Pada kesempatan kali ini saya akan membagikan ilmu ngoding lagi dengan membuat dashboard PHP hanya dengan CSS dan Fontawesome.