Pada tutorial-tutorial sebelumnya kita sudah belajar mebuat kode css untuk mengatur style elemen, membuat animasi, membuat efek transisi serta membuat responsive layout.
Pada tutorial kali ini kita akan mencoba mengimplementasikan css untuk mendesain halaman web html.
Kita pernah membuat web html sederhana pada tutorial lengkap belajar html.
Sekarang kita akan coba membuatnya menjadi terlihat menarik dan modern dengan css.
Langsung saja kita mulai tutorialnya,
Daftar Isi
advertisement
Penting: Sebelum membaca tutorial ini pastikan kalian sudah membaca tutorial membuat halaman web dengan html.
Membuat konsep dan desain ui/ux halaman web
Untuk membuat sebuah halaman web maka kita perlu untuk menentukan konsep dari halaman web yang ingin kita buat.
Ini penting agar desain halaman webnya sesuai dengan konten yang ada di dalamanya.
Misalnya kita ingin membuat web portofolio maka konsep yang paling cocok adalah membuat single page, yaitu sebuah website yang semua kontennya ada di dalam satu halaman saja dengan navigasi scrolling.
Untuk membuat desain ui (user interface) kita bisa menggunakan tools desain seperti, figma, adobe XD, invision, adobe ilustrator, photoshop dan software-software desain lainnya.
Kali ini kita akan coba buat sebuah halaman web sederhana agar lebih mudah dipelajari dengan desain seperti berikut,
Mendesain halaman web dengan css
Jika konsep dan desain sudah kita buat, tahap selanjutnya adalah mengimplementasikan desain tersebut kedalam kode html dan css.
Ada beberapa step yang perlu kita lakukan yaitu,
Menganalisa desain dan menentukan element yang akan digunakan
Tahap pertama adalah kita harus menganalisa struktur dari halaman web yang ingin kita buat kemudian menentukan element apa saja yang cocok untuk di implementasikan pada halaman web tersebut.
Jika element sudah di tentukan maka kita tinggal buat code htmlnya.
Seperti pada gambar di atas, jika kita buat code htmlnya, maka codenya kurang lebih seperti berikut,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Portofolio</title>
<link rel="stylesheet" href="assets/css/style.css">
<style>
@font-face {
font-family: 'Roboto Condensed';
src: url('assets/fonts/Roboto-Light.ttf');
}
</style>
</head>
<body>
<header>
<img src="assets/images/images1.png" alt="foto porfile">
<div>
<h1>Derertcode</h1>
<span>Deretcode adalah blog tutorial pemrograman</span>
</div>
</header>
<nav>
<ul>
<li><a href="#contact">Contact</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#experiences">Experiences</a></li>
<li><a href="#hobbies">Hobbies</a></li>
</ul>
</nav>
<main>
<section id="introduce">
<h2>Introduce</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, impedit mollitia. Soluta, accusamus. Qui facilis inventore perspiciatis veniam dolorum deleniti obcaecati laborum quae non, natus officia odio, ut sint quos. Sapiente voluptas reprehenderit autem earum unde dolorem ipsa quibusdam, pariatur perspiciatis quis voluptatum cum eum inventore aliquid odio. Pariatur, iste laudantium. Explicabo nostrum fugiat sequi fuga aperiam quaerat earum in exercitationem. Minus labore voluptate facere quo? Rem explicabo, dolores cumque magni vero, asperiores voluptas officiis consequatur id accusamus itaque voluptate deserunt consequuntur? Praesentium blanditiis modi nisi culpa eligendi obcaecati sed repellat amet provident iste ipsa, facilis minus earum reprehenderit eveniet!</p>
</section>
<section id="contact">
<h2>Contact</h2>
<div>
<dl>
<dt>Facebook</dt>
<dd>Deretcode.com</dd>
<dt>Twitter</dt>
<dd>Deretcode.com</dd>
<dt>Email</dt>
<dd>deretcode@mail.com</dd>
<dt>Telp</dt>
<dd>02xxxx</dd>
</dl>
</div>
</section>
<section class="flexelement">
<div id="skills">
<h2>Skills</h2>
<div>
<ul>
<li>Web design</li>
<li>Mobile App Design</li>
<li>Dekstop App design</li>
</ul>
</div>
</div>
<div id="experiences">
<h2>Experiences</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam deleniti expedita vero!
</div>
</div>
<div id="hobbies">
<h2>Hobbies</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam deleniti expedita vero!
</div>
</div>
</section>
</main>
<footer>Copyright © 2021 Deretcode.com</footer>
</body>
</html>Menyiapkan asset seperti gambar dan font yang akan digunakan
Tahap kedua adalah menyiapkan gambar dan font yang akan kita gunakan dalam membangunkan halaman web yang nantinya kita tempatkan dalam sebuah folder dengan nama assets.
advertisement
Mengimplementasikan kode css
Disini kita akan menganalisa bagian per bagian dari halaman web.
Kita analisa apa yang harus kita atur dari element htmlnya, kemudian kita tulis kode cssnya sesuai desain yang menjadi acuan tadi.
Pertama, kita ingin mengatur properti pada setiap elementnya dan mengatur beberapa element berdasarkan tagnya secara general, codenya seperti berikut,
/*mengatur semua element*/
*{
box-sizing:border-box;
margin:0;
padding:0;
}
/* General */
body{
font-family: 'Roboto Condensed';
background-color: #e4e3e3;
font-size: 11pt;
line-height: 1.5;
}
h1{
font-size: 16pt;
}
h2{
font-size: 14pt;
margin: 9px 0 9px 0;
}
dt{
font-weight: bold;
}
ul,ol{
list-style-position:inside;
}Selanjutnya kita masuk ke element struktrunya, dimulai dari element header.
kita analisa desain dari element header kemudian kita tentukan kode css yang mendekati dari desain tersebut,
Code css yang mendekati desain diatas kurang lebih seperti berikut,
/* Bagian header */
header{
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
padding: 59px;
background-color: white;
}
header img{
width: 125px;
height: auto;
clip-path: circle(55px at center);
}Untuk bagian navbar memilki tampilan yang mengambang di atas element yang lain
Dan code cssnya kurang lebih seperti beriku,
/* Bagian navbar */
nav ul{
display: flex;
justify-content: center;
list-style: none;
padding: 15px;
background-color: #7b8d92;
color: white;
width: fit-content;
margin: auto;
margin-top: -25px;
border-radius: 39px;
}
nav ul li{
font-weight: bold;
width: fit-content;
margin: 0 9px 0 9px;
}
nav ul li a{
color: white;
text-decoration: none;
}Berikutnya element main atau konten, memiliki desain seperti berikut,
Dan kode css yang paling mendekati kurang lebih seperti berikut,
/* Main */
main{
max-width: 699px;
margin: auto;
padding: 0 9px 0 9px;
}
section{
margin-top: 19px;
margin-bottom: 35px;
}
.flexelement{
display: flex;
flex-wrap: wrap;
}
.flexelement div{
flex: 1;
margin-bottom: 19px;
}
#experiences{
flex: 1;
flex-grow: 1;
}
#hobbies{
width: 100%;
flex: none;
}Kemudian untuk bagian footer memiliki desain seperti berikut,
Maka kode css yang paling tepat adalah seperti berikut,
footer{
text-align: center;
margin-top: 39px;
}Terakhir kita atur agar halaman nya responsif yaitu dengan membuat rule media screen size nya untuk menyesuaikan ukuran layar.
@media (max-width:599px){
body{
font-size: 9pt;
}
nav ul {
font-size: 9pt;
}
header img {
width: 75px;
height: auto;
clip-path: circle(33px at center);
}
.flexelement div{
width: 100%;
flex: none;
}
}Berikut keselurahan code cssnya.
Silahkan simpan di folder assets/css dengan nama style.css,
*{
box-sizing:border-box;
margin:0;
padding:0;
}
/* General */
body{
font-family: 'Roboto Condensed';
background-color: #e4e3e3;
font-size: 11pt;
line-height: 1.5;
}
h1{
font-size: 16pt;
}
h2{
font-size: 14pt;
margin: 9px 0 9px 0;
}
dt{
font-weight: bold;
}
ul,ol{
list-style-position:inside;
}
/* Bagian header */
header{
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
padding: 59px;
background-color: white;
}
header img{
width: 125px;
height: auto;
clip-path: circle(55px at center);
}
/* Bagian navbar */
nav ul{
display: flex;
justify-content: center;
list-style: none;
padding: 15px;
background-color: #7b8d92;
color: white;
width: fit-content;
margin: auto;
margin-top: -25px;
border-radius: 33px;
}
nav ul li{
font-weight: bold;
width: fit-content;
margin: 0 9px 0 9px;
}
nav ul li a{
color: white;
text-decoration: none;
}
/* Main */
main{
max-width: 699px;
margin: auto;
padding: 0 9px 0 9px;
}
section{
margin-top: 19px;
margin-bottom: 35px;
}
.flexelement{
display: flex;
flex-wrap: wrap;
}
.flexelement div{
flex: 1;
margin-bottom: 19px;
}
#experiences{
flex: 1;
flex-grow: 1;
}
#hobbies{
width: 100%;
flex: none;
}
/* Footer */
footer{
text-align: center;
margin-top: 39px;
}
@media (max-width:599px){
body{
font-size: 9pt;
}
nav ul {
font-size: 9pt;
}
header img {
width: 75px;
height: auto;
clip-path: circle(33px at center);
}
.flexelement div{
width: 100%;
flex: none;
}
}Dan berikut hasil dari web portofolio yang sudah kita bikin,
Sampai disini tutorial desain halaman web dengan css.
Silahkan buat desain web kalian sendiri semenarik mungkin.
Untuk file projectnya kalian bisa unduh disini.
advertisement
Jika kalian merasa artikel ini bermanfaat siahkan kalian bagikan.
Jika ada pertanyaan atau ada hal yang ingin disampaikan, tulis di kolom komentar.
Good luck!
Silahkan berkomentar dengan baik dan bijak!