Cara membuat website pribadi menggunakan html dan css
|
Halo, hari ini kita akan belajar bagaimana menggunakan HTML dan CSS untuk membuat website untuk portofolio pribadi. Dengan mengikuti petunjuk ini, Anda cukup membuat situs web portofolio pribadi ini dalam HTML. Cukup dengan mengikuti prosedur yang disebutkan di bawah ini, Anda akan dapat mengembangkan situs web portofolio pribadi yang luar biasa ini Show IKLAN IKLAN Pada website portfolio ini terdapat tombol di sebelah kanan, beberapa link navigasi di tengah, dan bar navigasi dengan logo di sebelah kiri. Langkah selanjutnya klik tombol “Download CV” yang terletak di sebelah teks yang menjelaskan nama dan pekerjaan penulis di sebelah kiri website ini, seperti terlihat pada gambar Code byNinja_webTechProject DownloadLink Tersedia di bawahBahasa yang digunakanHTML dan CssExternal link / DependenciesNoResponsiveNoPersonal Portfolio WebsiteableMainkan Kuis Tanpa Batas Tentang HTML, CSS, dan JavaScript – Klik Di Sini IKLAN Portofolio dapat dibandingkan dengan resume digital yang menampilkan keterampilan pengguna untuk klien. Portofolio pengembang adalah situs web yang mereka gunakan untuk mengiklankan kemampuan mereka sehingga pemberi kerja dapat merekrut mereka berdasarkan keahlian mereka IKLAN Jika Anda menyukai portofolio ini dan menginginkan kode sumbernya, saya telah menyertakan semua kode untuk program ini di bawah tautan ke program ini, dari mana Anda dapat dengan cepat memperoleh file sumber dari program ini. Dengan menambahkan sentuhan unik Anda sendiri, Anda dapat menggunakan portofolio ini untuk memajukannya Kode HTML Untuk Situs Web Portofolio
Anda harus membuat File HTML dan CSS Untuk Situs ini. Setelah membuat file-file ini cukup rekatkan kode berikut ke dalam file Anda Langkah1-Buat file HTML bernama index. html dan masukkan kode yang disediakan di dalamnya. Perlu diingat bahwa gambar yang digunakan di situs web ini (yang dapat Anda ambil dari GitHub) harus ditempatkan dalam file dengan. html untuk ditampilkan IKLAN Step2- We’ll start with the header of our portfolio before moving on to the navbar. We will build the section of our navbar using the Langkah 3-Sekarang kita akan menggunakan tag div untuk membuat area konten tempat pengguna dapat menggunakan kualifikasi dan riwayat pendidikan mereka. Kami juga akan menyediakan tautan unduhan di dalam portofolio kami sehingga pengguna lain dapat mengakses resume kami Keluaran HTML100+ Proyek JavaScript Dengan Kode Sumber (Pemula hingga Mahir) IKLAN Kode CSS Untuk Situs Web Portofolio@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
a {
text-decoration: none;
}
.hero {
width: 100%;
height: 100vh;
background: url(img/bg.png);
background-size: cover;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 100px;
}
.logo {
max-height: 60px;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 10px 20px;
}
nav ul li a {
color: #1d1d24;
position: relative;
padding: 5px 0;
}
nav ul li a:hover {
color: #fd4766;
}
nav ul li a:after {
content: "";
position: absolute;
left: 0;
width: 0;
height: 3px;
background: #fd4766;
transition: 0.3s;
bottom: 0;
}
nav ul li a:hover:after {
width: 100%;
}
.btn {
color: #fff;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
padding: 16px 40px;
border-radius: 500px;
display: inline-block;
font-weight: 500;
transition: all 0.4s ease-in-out;
background-size: 152% 100%;
background: #fd4766;
border: 2px solid #fd4766;
}
.btn:hover {
background: transparent;
border-color: #fd4766;
color: #fd4766;
}
.content {
position: absolute;
top: 35%;
left: 8%;
}
.content .title {
color: #0a0a0a;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
margin-bottom: 20px;
background: linear-gradient(
120deg,
#1c99fe 20.69%,
#7644ff 50.19%,
#fd4766 79.69%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content h1 {
color: #1f1f25;
font-size: 75px;
font-weight: 900;
line-height: 90px;
text-transform: inherit;
width: 70%;
}
.content h1 span {
color: #fd4766;
}
.content p {
width: 55%;
color: #202020;
margin-top: 25px;
margin-bottom: 30px;
}
_Langkah Kedua, Anda harus membuat file CSS dengan nama style. css dan rekatkan kode yang diberikan di file CSS Anda. Ingat, Anda harus membuat file dengan. ekstensi css IKLAN CSS (Cascading Style Sheets) are files that describe how HTML elements are displayed on the screen, paper, etc. With HTML, you can have either embedded styles or styles can be defined in an external stylesheet. For embedding the styles, the tags are used. Stylesheet eksternal disimpan dalam file dengan ekstensi. ekstensi css. Dengan CSS eksternal, Anda dapat memasukkannya ke beberapa halaman HTML untuk memperbarui gaya halaman tersebut. Bahkan satu file CSS dapat digunakan untuk mendesain situs web yang lengkap Cara Membuat Aplikasi Cuaca menggunakan JavaScript Aturan CSS terdiri dari dua komponen, pemilih dan deklarasi. Pemilih menunjuk ke elemen dalam dokumen HTML. Itu bisa berupa tag elemen, nama kelas, nama id, banyak tag yang menunjukkan hierarki, dll Deklarasi berisi definisi gaya yang terdiri dari properti dan nilai. Properti mengidentifikasi properti elemen yang ingin Anda ubah dan nilainya menentukan nilai barunya. Setiap aturan CSS dapat memiliki beberapa deklarasi. Berikut ini adalah contoh aturan CSS IKLAN Hasil AkhirWebsite Portofolio Pribadi Menggunakan HTML & CSS Dengan Source Code https. // www. codewithrandom. com/wp-content/uploads/2022/08/Untitled-1. mp4 Anda telah menyelesaikan pembelajaran Personal Portfolio Website Menggunakan HTML Dan CSS Dengan Source Code. Saya harap saya telah menjelaskan kepada Anda dalam tutorial ini bagaimana saya membuat Situs Web Portofolio Pribadi Menggunakan HTML dan CSS IKLAN Kode sumber Klik Di SiniJika Anda menikmati membaca posting ini dan merasa berguna bagi Anda, silakan bagikan dengan teman-teman Anda, dan ikuti saya untuk mendapatkan pembaruan pada posting saya yang akan datang. Anda dapat terhubung dengan saya di Instagram IKLAN jika Anda bingung Beri komentar di bawah atau Anda dapat menghubungi kami dengan mengisi formulir hubungi kami dari bagian beranda. 🤞🎉 Bagaimana cara membuat situs web sendiri menggunakan HTML dan CSS?Rencanakan tata letak Anda. Langkah pertama dari setiap situs web adalah selalu mengetahui apa yang Anda inginkan di dalamnya dan (samar-samar) tampilan yang Anda inginkan. . Siapkan 'kode boilerplate'. . Buat elemen dalam tata letak Anda. . Isi konten HTML. . Tambahkan beberapa CSS tata letak dasar. . Tambahkan gaya yang lebih spesifik. . Tambahkan warna dan latar belakang. . Merayakan Bagaimana cara membuat situs web sendiri menggunakan HTML?Ikuti langkah-langkah di bawah ini untuk membuat halaman web pertama Anda dengan Notepad atau TextEdit. . Langkah 1. Buka Notepad (PC) Windows 8 atau yang lebih baru. . Langkah 1. Buka TextEdit (Mac) Buka Finder > Applications > TextEdit. . Langkah 2. Tulis Beberapa HTML. . Langkah 3. Simpan Halaman HTML. . Langkah 4. Lihat Halaman HTML di Browser Anda Apakah HTML dan CSS cukup untuk membuat website?HTML, CSS, dan JavaScript adalah bahasa dasar yang perlu Anda ketahui untuk membuat situs web . |
