Bagaimana cara membuat website portofolio menggunakan html dan css?

Grup Telegram Gabung Sekarang

Table of Contents Show

Grup Telegram Gabung Sekarang
situs web portofolio dengan kode sumber
Video Tutorial Website Portofolio Sederhana Menggunakan Html Dan CSS
Kode HTML Untuk Situs Web Portofolio
Kode CSS Untuk Situs Web Portofolio
Bagaimana cara membuat situs web portofolio menggunakan HTML dan CSS?
Bagaimana Anda membuat situs web portofolio langkah demi langkah?
Bisakah saya membuat situs web hanya menggunakan HTML dan CSS?
Bagaimana cara membuat situs web portofolio pribadi?

Membuat Situs Web Portofolio Sederhana Menggunakan HTML dan CSS

Nah, hari ini saya akan membuat situs web portofolio yang menarik secara visual Menggunakan pengkodean Html dan CSS. Pada artikel ini, Anda mendapatkan kode lengkap dan penjelasan tentang situs web portofolio menggunakan Html dan CSS. Apa itu situs web portofolio, Anda bertanya?

Yah, esemua orang membutuhkan situs web dan aplikasi web saat ini. Jadi ada banyak peluang bagi Anda jika Anda bekerja sebagai web developer. Tetapi jika Anda ingin mendapatkan pekerjaan pengembang web, Anda memerlukan situs web portofolio yang bagus untuk menunjukkan keahlian dan pengalaman Anda. Situs web portofolio pengembang memberikan informasi yang relevan kepada calon pemberi kerja tentang keterampilan, pengalaman, dan proyek yang telah Anda kerjakan. Anda dapat menganggapnya sebagai resume online Anda.

Kode olehAkshat SharmaUnduhan ProyekTautan Tersedia di bawahBahasa yang digunakanTautan HTML dan CSSExternal link / DependenciesNoResponsiveNoPortfolio Website Menggunakan Tabel HTML dan CSS

100+ Proyek Front-end untuk pengembang Web (Kode Sumber)

situs web portofolio dengan kode sumber

Jadi, bahan kami untuk masakan ini adalah HTML dan CSS. Saya berasumsi Anda memiliki pengetahuan dasar tentang keduanya. Saat Anda benar-benar ingin menerapkan situs web portofolio ini, Anda harus bekerja di backend sehingga pemirsa dapat mengklik dan menavigasi ke halaman yang diinginkan

Tapi hari ini semua tentang penampilan, i. e. , ujung depan. Bahkan JavaScript tetap berada di luar cakupan karena saya ingin Anda tahu bagaimana HTML dan CSS saja dapat bersinar sebagai pembuat situs web yang hebat (dan juga karena saya ingin tetap ramah pemula ini)

Video Tutorial Website Portofolio Sederhana Menggunakan Html Dan CSS

Catatan. Saya suka menggunakan VS Code IDE untuk membangun proyek saya dan saya juga akan merekomendasikannya kepada Anda. Muncul dengan sejumlah ekstensi untuk memudahkan penulisan dan pemformatan kode Anda. Itu tidak terkait dengan blog ini tapi hei, saran gratis tidak ada salahnya kan?

Jadi, tanpa basa-basi lagi, mari langsung ke resep kami

Portofolio Website Menggunakan HTML CSS Dan JAVASCRIPT ( Source Code )

Pertama dan terpenting, kita perlu membuat tulang punggung situs web kita, sebuah file HTML. Saya membuat file HTML dan menamainya 'index. html’. Karena kita juga akan menggunakan CSS, di folder yang sama saya membuat file CSS, bernama 'styles. css’. Dalam indeks. html, kita perlu memberikan baris kode berikut

Kode HTML Untuk Situs Web Portofolio

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;400;700&family=Poppins:wght@200&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
</body>
</html>

Jika Anda menggunakan VS Code dan memasang ekstensi HTML, Anda hanya perlu mengetikkan '. ' dan tekan enter. Jika tidak, jangan ragu untuk menyalin-tempel baris ini

Membahasnya tidak perlu, ketahuilah bahwa mereka memberi tahu browser bahwa Anda mencoba menjalankan halaman web. Juga, mereka mengimpor semua CSS yang akan Anda tulis di 'styles. css’

50+ Proyek Html, Css & Javascript Dengan Kode Sumber

Sekarang lihat apa yang sedang kami buat

Saya tahu, saya tahu, ini mahakarya, bukan? . Lagi pula nsekarang lihat hanya di bagian atas.

This is the navigation bar. It’s like a must-have on all your websites. So, we’ll make this first. Make sure to write the code between the opening and closing body tags ().

Situs Web E-niaga Menggunakan Html Css Dan Kode Sumber Javascript

<body>  
   <header>  
     <div class="container">  
       <nav class="flex items-centre justify-between">  
           <div class="left flex justfiy-right">  
           <div class="logo">  
             <img src="./images/logo.png" width="50px" alt="logo">  
           </div>  
           <div>  
             <a href="#">Home</a>  
             <a href="#">About</a>  
             <a href="#">Services</a>  
             <a href="#">Blog</a></li>  
             <a href="#">More</a>  
           </div>  
         </div>  
         <div class="right">  
           <button class="btn btn-primary">Contact</button>  
         </div>  
       </nav>
     </div>  
   </header>

Logo yang saya gunakan diunduh dari situs web. Tenang, ini bebas royalti. Bahkan, semua ikon dan gambar di blog ini diunduh. Meskipun tidak dapat disangkal bahwa ikon dan gambar ini berperan besar dalam tampilan situs web Anda, tujuan saya adalah memberi tahu Anda cara menggabungkan gambar se ke dalam . Tetapi setiap kali Anda membuat situs web, adalah tugas Anda untuk menyertakan gambar yang menarik secara visual, yang terlalu orisinal. Jika Anda mengikuti tutorial ini, cobalah luangkan waktu dan dapatkan logo Anda sendiri. Anda dapat membuatnya di sini atau cukup mengunduhnya dari sini. Sama-sama.

Mainkan Kuis Tanpa Batas Tentang HTML, CSS, dan JavaScript – Klik Di Sini

Jadi inilah yang dicari nav bar kita sekarang

Jangan khawatir. Anda akan mendapatkan apa yang diiklankan, ikuti saja. Mari kita masukkan gambar model itu dan teks yang ingin kita tampilkan.

<div class="hero flex items-centre justify-between">
<div class="left flex-1 justify-center">
<img src="./images/main-img.png" alt="Profile">
</div>
<div class="right flex-1">
<h6>Akshat Sharma</h6>
<h1>I'm a Web<br> <span>Developer</span></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque illum nam nobis, minima
laudantium fugit sequi nostrum quod impedit, beatae necessitatibus praesentium optio labore
nemo!</p>
<div>
<button class="btn btn-secondary">DOWNLOAD CV</button>
</div>
</div>
</div>

Unless your name is Akshat Sharma, which makes us name twins, by the way, make sure to change the name you’re displaying in the

tag.

Anda juga harus mengganti teks Lorem Ipsum dengan sesuatu yang lebih sesuai. Faktanya, teks apa pun yang ditampilkan dapat berubah sesuai keinginan Anda

Sekarang, Anda mungkin ingin sekali menggunakan CSS. Awalnya saya berencana untuk mempertahankan gaya pada akhirnya, tetapi penting bagi pengembang untuk mengetahui bagaimana tampilan situs webnya pada waktu tertentu untuk membuat perubahan lebih lanjut. Mari selami CSS sekarang juga

Sebuah saran. File CSS Anda akan disimpan selamanya jika Anda terus menulis di dalamnya. Itu sebabnya saya membuat dua file, 'styles. css', untuk menata semua kelas dan elemen kami, dan 'utilitas. css’, untuk menentukan gaya kita mungkin memerlukan lebih dari satu elemen. Anda akan melihat saat kami melanjutkan

@import 'utilities.css';
:root{
--primary: rgb(29, 221, 189);
--bgDark: rgb(12, 12, 12);
--white: rgb(250, 250, 250);
--secondary: rgb(0, 59, 50);
--bgLight: rgb(190, 181, 181);
}

Ini adalah awal dari 'gaya'. css' Pemberitahuan kita perlu mengimpor 'utilities. css’ untuk menggabungkan semua gaya yang kami lakukan di dalamnya. Saya memutuskan pada skema warna sebelumnya sehingga saya tidak terus-terusan merusak pemikiran saya tentang warna

Aplikasi Cuaca Menggunakan Html, Css, Dan JavaScript

Saya mendeklarasikan variabel yang sesuai dengan warna yang saya perlukan menggunakan '. akar'. CSS memahami warna hanya sebagai nilai RGB. Nilai-nilai ini, sesuai dengan warnanya masing-masing, tidak mungkin diingat

Ekstensi Dukungan HTML CSS untuk Kode VS membantu saya memilih warna dengan mudah. Lihat? . Jika Anda tidak dapat menggunakannya, Anda bisa mendapatkan nilai RGB, HSV, atau heksadesimal warna Anda dari sini

Kode CSS Untuk Situs Web Portofolio

*{
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
header{
background-color: var(--bgDark);
clip-path: polygon(0 0, 100% 0, 100% 100%, 73% 94%, 0 100%);
}
header nav .left a{
color: var(--white);
text-decoration: none;
margin-right: 2rem;
text-transform: uppercase;
transition: all .2s ease;
}
header nav .left a:hover{
color: var(--primary);
}
header nav {
padding: 2rem 0;
}
header nav .logo{
margin-right: 3rem;
}

Ini adalah CSS untuk header dan bilah navigasi dan kodenya masuk ke dalam 'styles'. css’. Dan inilah produknya

Hitam adalah warna kesukaanku. Ini adalah penyelamat nyata ketika Anda tidak tahu bagaimana latar belakang yang Anda inginkan. Lihatlah CSS untuk kelas 'pahlawan' sekarang

5+ Proyek HTML CSS Dengan Kode Sumber

body{
font-family: 'Poppins', sans-serif;
}
.container{
max-width: 1152px;
padding: 0 15px;
margin: 0 auto;
}
.hero{
padding-top: 2rem;
padding-bottom: 3rem;
}
.hero .left img{
width: 400px;
}
.hero .right {
color: var(--white);
margin-top: -7rem;
}
.hero .right h6{
font-size: 1.6rem;
color: var(--primary);
margin-bottom: 0.5rem;
}
.hero .right h1{
font-size: 4rem;
font-weight: 100;
line-height: 1.2;
margin-bottom: 2rem;
}
.hero .right h1 span{
color: var(--primary);
}
.hero .right p{
line-height: 1.9;
margin-bottom: 2rem;
}

Apakah Anda memperhatikan bagaimana saya menghindari penggunaan nilai piksel sebanyak mungkin? . Mengubah nilai lain tidak berpengaruh pada nilai px dan ini membuatnya cukup kuno. 'em' dan 'rem', bagaimanapun, mengubah nilainya sehubungan dengan perubahan elemen induk atau root. Itu membuat mereka responsif. Baca lebih lanjut tentang perbedaannya di sini. Penjelasannya cukup bagus.

Sekarang untuk mengerjakan tombol-tombol itu dan penyelarasan keseluruhan, kami akan mengetik mantra ajaib kami, yang Anda sebut CSS. Yang ini masuk dalam 'utilitas' kami. css’. Buka file dan ketik berikut ini

.flex{
display: flex;
}
.items-centre{
align-items: center;
}
.justify-between{
justify-content: space-between;
}
.justify-center{
justify-content: center;
}
.justify-right{
justify-content: right;
}
.btn{
padding: 0.6rem 2rem;
font-size: 1rem;
font-weight: 600;
border: 2px solid transparent;
outline: none;
cursor: pointer;
text-transform: uppercase;
transition: all .2s ease;
}
.btn-primary{
background-color: var(--primary);
color: var(--secondary);
margin-top: -15rem;
}
.btn-primary:hover{
background: transparent;
border-color: var(--primary);
color: var(--primary);
}
.flex-1{
flex: 1;
}
.btn-secondary{
background: transparent;
color: var(--primary);
border-color: var(--primary);
}
.btn-secondary:hover{
background: var(--primary);
color: var(--secondary);
}

Produk akhir?

Bagaimana cara membuat Animasi Detak Jantung menggunakan Kode HTML dan CSS?

<section class="about">
<div class="container flex items-centre">
<div class="left flex-1 justify-right">
<img src="./images/man2.png" height="400px" alt="profile pic">
</div>
<div class="right flex-1">
<h1>About <span>Me</span></h1>
<h3>Hello! I'm Akshat Sharma.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque adipisci distinctio obcaecati aliquid,
quia tempora quis optio repudiandae officia earum?
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
</p>
<div class="socials">
<a href="#"><img src="./images/website.png" width="40px"></a>
<a href="#"><img src="./images/facebook.png" width="40px"></a>
<a href="#"><img src="./images/instagram.png" width="40px"></a>
<a href="#"><img src="./images/media-player.png" width="40px"></a>
</div>
</div>
</div>
</section>

Sangat penting bagi Anda untuk memahami cara kerja 'px', 'em', dan 'rem'. Dan apa cara belajar yang lebih baik daripada mencobanya sendiri? . Ubah sesuai dengan tampilan yang Anda inginkan dan bahkan tidak perlu khawatir mengacaukan kodenya. Anda dapat kembali ke sini lagi dan lagi. Apakah Anda ingin menyalin-tempel kode atau memahami cara kerjanya, kami siap membantu Anda

10+ Ide Proyek Javascript Untuk Pemula (Kode Sumber Proyek)

Sekali lagi, ikon dan gambar yang digunakan diunduh dari situs web gratis. Anda dapat memilih gambar yang Anda suka. Pastikan untuk memberikan path lengkap di bagian 'img src="" "'. Kami menggunakan kelas yang didefinisikan dalam 'utilitas. css untuk memudahkan pekerjaan tata letak kami dan akan terus melakukannya. Jadi sekarang Anda mengerti mengapa kami membuat dua file CSS.

Meski tidak luar biasa, desain ini beresonansi dengan getaran formal yang ingin Anda berikan ke situs web Anda

 section{
padding: 6rem;
}
section.about h1{
margin-bottom: 1rem;
font-size: 1.6rem;
font-weight: 600;
}
section.about h1 span{
color: var(--primary);
}
section.about h3{
font-size: 1rem;
margin-bottom: 1rem;
font-weight: 600;
}
section.about p{
font-family: 'Lato', sans-serif;
color: var(--secondary);
line-height: 1.9rem;
margin-bottom: 2rem;
}
section.about .socials{
display: flex;
}
section.about .socials a{
display: flex;
align-items: center;
justify-content: center;
width: 35px;
margin-right: 0.8rem;
border-radius: 50%;
}
section.about .socials a:hover{
background: var(--primary);
}

Kode CSS ini masuk dalam 'styles. css’. Ini menangani margin dan padding satu per satu, tetapi kita tidak perlu melakukan banyak hal karena kelas yang kita definisikan sebelumnya sudah menangani sebagian besar proses tata letak

Untuk membuat situs web kami terlihat sedikit responsif, saya menggunakan '. hover' pemilih banyak. Saya telah menggunakannya di semua tombol dan ikon media sosial kami. Pada dasarnya, ini menentukan apa yang terjadi ketika kursor menunjuk ke atau 'melayang' di atas elemen yang ditentukan. Sedikit transisi warna sudah cukup untuk menghidupkan halaman web kita

Nah, ini baunya enak. Kami sekarang akan mengerjakan bagian terakhir, meskipun tentu saja tidak sedikit. Meskipun CV Anda adalah catatan nyata dari keterampilan dan pencapaian Anda, kami membutuhkan layanan Anda agar dapat dilihat oleh pemirsa secara sekilas
Tentukan bagian lain di 'index. html’ dan ketikkan kode sebagai berikut

<section class="services">
<div class="container">
<h1 class="services-head">Services</h1>
<p>All your digital needs.. covered.</p>
<div class="card-grid">
<div class="card">
<img src="./images/graphic-design.png">
<h2>Graphic Desgin</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, debitis?</p>
</div>
<div class="card">
<img src="./images/world-wide-web.png">
<h2>Web Development</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, debitis?</p>
</div>
<div class="card">
<img src="./images/blogger.png">
<h2>Content Writing</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, debitis?</p>
</div>
</div>
</div>
</section>

Bold itu indah, tentu saja. Tapi ini terlalu keras, dan sebenarnya memalukan bagi keterampilan pengembangan kita. Mari lakukan penyelarasan dan penataan dan membuatnya terlihat sedikit halus

Sekarang meskipun flexbox adalah alat yang luar biasa untuk membantu kami dengan tata letak, kami memiliki satu trik lagi. Ini, teman-teman, disebut CSS Grid Layout, atau sederhananya, Grid. Sederhananya, grid adalah kartu truf kami dalam menangani tata letak dan desain. Faktanya, ia memiliki sentuhan responsif yang kami butuhkan untuk situs kami. Saya tahu betapa Anda suka membaca dokumen panjang, jadi ini dia. Ada sejumlah tutorial YouTube untuk dipelajari juga, jadi jelajahi

'gaya' kami. css hanya membutuhkan blok kode berikut sekarang

<body>  
   <header>  
     <div class="container">  
       <nav class="flex items-centre justify-between">  
           <div class="left flex justfiy-right">  
           <div class="logo">  
             <img src="./images/logo.png" width="50px" alt="logo">  
           </div>  
           <div>  
             <a href="#">Home</a>  
             <a href="#">About</a>  
             <a href="#">Services</a>  
             <a href="#">Blog</a></li>  
             <a href="#">More</a>  
           </div>  
         </div>  
         <div class="right">  
           <button class="btn btn-primary">Contact</button>  
         </div>  
       </nav>
     </div>  
   </header>

Dan teman-teman terkasih, kami berhasil. Tidak benar-benar. Itu saja. Situs Portofolio kami yang indah siap untuk dipamerkan ke seluruh dunia

Kartu-kartu ini juga memiliki properti hover. Jadi saat Anda mengarahkan kursor ke atasnya, warna latar belakang dan warna teks, keduanya berubah

UNDUH SEKARANG

Masakan kami akhirnya siap. Ini menyenangkan, bukan? . Ubah warna, dan propertinya, dan jangan ragu untuk mengacaukannya sebanyak yang Anda mau. Maksud saya, itulah cara terbaik untuk mempelajari sesuatu, percayalah. Jangan ragu untuk menanyakan keraguan sebanyak yang Anda inginkan di komentar di bawah. Atau, Anda dapat menghubungi saya di Instagram. Saya suka DM saya terisi

Bagaimana cara membuat situs web portofolio menggunakan HTML dan CSS?

Ayo pergi. .

Langkah pertama. Tambahkan Kerangka HTML. Ketikkan kode kerangka HTML, yang merupakan titik awal untuk situs web Anda. .

Langkah Kedua. Tambahkan Bilah Navigasi. .

Langkah ketiga. Tambahkan bagian Pahlawan. .

Langkah Empat. Tambahkan bagian Tentang Saya. .

Langkah Lima. Tambahkan bagian Pengalaman Kerja. .

Langkah Enam. Tambahkan bagian Kontak. .

Langkah Tujuh. Tambahkan bagian Footer

Bagaimana Anda membuat situs web portofolio langkah demi langkah?

Pembuat Halaman. Gunakan pembuat halaman sebagai editor. .

Langkah 01. Pilih Nama Domain. Sebelum memulai yang lain, pertama-tama Anda memerlukan nama domain yang mudah, sederhana, dan relevan. .

Langkah 02. Pilih Hosting Web. .

Langkah 03. Instal Joomla. .

Langkah 04. Pilih Templat. .

Langkah 05. Unggah Templat. .

Langkah 06. Sesuaikan Template

Bisakah saya membuat situs web hanya menggunakan HTML dan CSS?

Jawaban singkatnya adalah ya, Anda dapat membuat situs web sederhana hanya dengan HTML dan CSS . Namun, jika Anda ingin mulai membangun beberapa situs web yang sangat keren, dan memiliki lebih banyak fleksibilitas dalam apa yang dapat Anda lakukan, Anda perlu menggunakan JavaScript, bahasa backend, hosting web, dan basis data.