{"id":814,"date":"2025-10-21T05:56:56","date_gmt":"2025-10-21T05:56:56","guid":{"rendered":"https:\/\/smksbskuningan.sch.id\/blog\/?p=814"},"modified":"2025-10-22T03:36:39","modified_gmt":"2025-10-22T03:36:39","slug":"814-2","status":"publish","type":"post","link":"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/","title":{"rendered":"Langkah Mudah Membuat Website Portfolio dengan HTML dan CSS"},"content":{"rendered":"<h5>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Langkah Mudah Membuat Website Portfolio dengan HTML dan Css<\/h5>\n<p>&nbsp;<\/p>\n<p style=\"text-align: left;\"><strong>Membuat website portfolio bukan hanya sekadar memamerkan karya, tetapi juga cara efektif untuk membangun identitas profesional di dunia digital. Dengan sedikit pemahaman HTML dan CSS, siapa pun bisa membuat portfolio yang menarik dan responsif tanpa perlu framework atau CMS rumit.<\/strong><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\" wp-image-816 aligncenter\" src=\"https:\/\/smksbskuningan.sch.id\/blog\/wp-content\/uploads\/2025\/10\/arikel1-300x206.jpg\" alt=\"\" width=\"583\" height=\"400\" srcset=\"https:\/\/smksbskuningan.sch.id\/blog\/wp-content\/uploads\/2025\/10\/arikel1-300x206.jpg 300w, https:\/\/smksbskuningan.sch.id\/blog\/wp-content\/uploads\/2025\/10\/arikel1-1024x704.jpg 1024w, https:\/\/smksbskuningan.sch.id\/blog\/wp-content\/uploads\/2025\/10\/arikel1-768x528.jpg 768w, https:\/\/smksbskuningan.sch.id\/blog\/wp-content\/uploads\/2025\/10\/arikel1-600x413.jpg 600w, https:\/\/smksbskuningan.sch.id\/blog\/wp-content\/uploads\/2025\/10\/arikel1.jpg 1280w\" sizes=\"(max-width: 583px) 100vw, 583px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h3 data-start=\"64\" data-end=\"102\"><strong data-start=\"68\" data-end=\"102\">1. Mengenal Website Portfolio<\/strong><\/h3>\n<p data-start=\"104\" data-end=\"430\">Kenali <strong data-start=\"111\" data-end=\"132\">website portfolio<\/strong> sebagai <strong data-start=\"141\" data-end=\"158\">situs pribadi<\/strong> yang Anda gunakan untuk <strong data-start=\"183\" data-end=\"233\">menampilkan karya, pengalaman, dan profil diri<\/strong> secara profesional.<br data-start=\"253\" data-end=\"256\" \/>Sebagai desainer, fotografer, pengembang web, maupun mahasiswa, Anda dapat <strong data-start=\"331\" data-end=\"413\">menggunakan portfolio digital untuk menunjukkan kemampuan dan kepribadian Anda<\/strong> kepada publik.<\/p>\n<p data-start=\"432\" data-end=\"484\"><strong data-start=\"432\" data-end=\"482\">Dengan memiliki website portfolio, Anda dapat:<\/strong><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul data-start=\"485\" data-end=\"811\">\n<li data-start=\"485\" data-end=\"552\">\n<p data-start=\"487\" data-end=\"552\"><strong data-start=\"487\" data-end=\"518\">Menunjukkan profesionalitas<\/strong> di hadapan klien atau perekrut.<\/p>\n<\/li>\n<li data-start=\"553\" data-end=\"642\">\n<p data-start=\"555\" data-end=\"642\"><strong data-start=\"555\" data-end=\"607\">Mempermudah orang menemukan dan menghubungi Anda<\/strong> melalui informasi yang tersedia.<\/p>\n<\/li>\n<li data-start=\"643\" data-end=\"711\">\n<p data-start=\"645\" data-end=\"711\"><strong data-start=\"645\" data-end=\"709\">Menyimpan seluruh hasil karya sebagai arsip digital pribadi.<\/strong><\/p>\n<\/li>\n<li data-start=\"712\" data-end=\"811\">\n<p data-start=\"714\" data-end=\"811\"><strong data-start=\"714\" data-end=\"761\">Menjadikannya sebagai bukti nyata kemampuan<\/strong> ketika Anda melamar pekerjaan atau proyek baru.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3 data-start=\"64\" data-end=\"90\"><strong data-start=\"68\" data-end=\"90\">2. Persiapan Awal<\/strong><\/h3>\n<p data-start=\"92\" data-end=\"219\">Sebelum mulai menulis kode, <strong data-start=\"120\" data-end=\"170\">siapkan semua kebutuhan proyek terlebih dahulu<\/strong> agar proses pembuatan website berjalan lancar.<\/p>\n<p data-start=\"221\" data-end=\"259\"><strong data-start=\"221\" data-end=\"257\">Lakukan langkah-langkah berikut:<\/strong><\/p>\n<ul data-start=\"261\" data-end=\"865\">\n<li data-start=\"261\" data-end=\"367\">\n<p data-start=\"263\" data-end=\"367\"><strong data-start=\"263\" data-end=\"286\">Gunakan editor teks<\/strong> seperti <em data-start=\"295\" data-end=\"315\">Visual Studio Code<\/em> atau <em data-start=\"321\" data-end=\"332\">Notepad++<\/em> untuk menulis dan mengedit kode.<\/p>\n<\/li>\n<li data-start=\"368\" data-end=\"576\">\n<p data-start=\"370\" data-end=\"432\"><strong data-start=\"370\" data-end=\"392\">Buat folder proyek<\/strong> dengan struktur yang jelas, misalnya:<\/p>\n<ul data-start=\"435\" data-end=\"576\">\n<li data-start=\"435\" data-end=\"471\">\n<p data-start=\"437\" data-end=\"471\">index.html sebagai file utama.<\/p>\n<\/li>\n<li data-start=\"474\" data-end=\"520\">\n<p data-start=\"476\" data-end=\"520\">style.css jika Anda memisahkan kode CSS.<\/p>\n<\/li>\n<li data-start=\"523\" data-end=\"576\">\n<p data-start=\"525\" data-end=\"576\">Folder assets untuk menyimpan gambar dan ikon.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"577\" data-end=\"865\">\n<p data-start=\"579\" data-end=\"619\"><strong data-start=\"579\" data-end=\"607\">Siapkan konten portfolio<\/strong>, seperti:<\/p>\n<ul data-start=\"622\" data-end=\"865\">\n<li data-start=\"622\" data-end=\"677\">\n<p data-start=\"624\" data-end=\"677\">Nama dan foto diri untuk memperkenalkan siapa Anda.<\/p>\n<\/li>\n<li data-start=\"680\" data-end=\"739\">\n<p data-start=\"682\" data-end=\"739\">Deskripsi singkat tentang keahlian dan pengalaman Anda.<\/p>\n<\/li>\n<li data-start=\"742\" data-end=\"789\">\n<p data-start=\"744\" data-end=\"789\">Beberapa contoh proyek beserta tautan demo.<\/p>\n<\/li>\n<li data-start=\"792\" data-end=\"865\">\n<p data-start=\"794\" data-end=\"865\">Informasi kontak agar pengunjung dapat menghubungi Anda dengan mudah.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3 data-start=\"64\" data-end=\"103\"><strong data-start=\"68\" data-end=\"103\">3. Membuat Struktur HTML Dasar<\/strong><\/h3>\n<p data-start=\"105\" data-end=\"291\">Bangun <strong data-start=\"112\" data-end=\"138\">kerangka utama website<\/strong> menggunakan <strong data-start=\"151\" data-end=\"159\">HTML<\/strong>.<br data-start=\"160\" data-end=\"163\" \/>Gunakan <strong data-start=\"171\" data-end=\"197\">elemen-elemen semantik<\/strong> agar struktur halaman terlihat rapi dan mudah dipahami oleh mesin pencari (<em data-start=\"273\" data-end=\"287\">SEO friendly<\/em>).<\/p>\n<p data-start=\"105\" data-end=\"291\">&lt;header&gt;Tambahkan judul dan menu navigasi di sini&lt;\/header&gt;<br \/>\n&lt;main&gt;<br \/>\n&lt;section&gt;Tulis profil singkat Anda&lt;\/section&gt;<br \/>\n&lt;section&gt;Tampilkan daftar proyek terbaik&lt;\/section&gt;<br \/>\n&lt;section&gt;Sediakan informasi kontak&lt;\/section&gt;<br \/>\n&lt;\/main&gt;<br \/>\n&lt;footer&gt;Tuliskan keterangan hak cipta di bagian ini&lt;\/footer&gt;<\/p>\n<h3 data-start=\"2237\" data-end=\"2265\">4. Mendesain dengan CSS<\/h3>\n<p data-start=\"2267\" data-end=\"2470\">Setelah struktur HTML selesai, tambahkan CSS untuk mempercantik tampilan.<br data-start=\"2340\" data-end=\"2343\" \/>Gunakan <strong data-start=\"2351\" data-end=\"2366\">warna hijau<\/strong> agar halaman terlihat segar dan profesional.<br data-start=\"2411\" data-end=\"2414\" \/>Berikut prinsip dasar desain CSS yang bisa diterapkan:<\/p>\n<ul data-start=\"2472\" data-end=\"2827\">\n<li data-start=\"2472\" data-end=\"2531\">\n<p data-start=\"2474\" data-end=\"2531\">Gunakan <strong data-start=\"2482\" data-end=\"2506\">warna kontras lembut<\/strong> antara teks dan latar.<\/p>\n<\/li>\n<li data-start=\"2532\" data-end=\"2602\">\n<p data-start=\"2534\" data-end=\"2602\">Manfaatkan <strong data-start=\"2545\" data-end=\"2556\">Flexbox<\/strong> atau <strong data-start=\"2562\" data-end=\"2570\">Grid<\/strong> untuk menyusun elemen proyek.<\/p>\n<\/li>\n<li data-start=\"2603\" data-end=\"2658\">\n<p data-start=\"2605\" data-end=\"2658\">Gunakan <strong data-start=\"2613\" data-end=\"2632\">font sans-serif<\/strong> agar teks mudah dibaca.<\/p>\n<\/li>\n<li data-start=\"2659\" data-end=\"2743\">\n<p data-start=\"2661\" data-end=\"2743\">Tambahkan <strong data-start=\"2671\" data-end=\"2693\">padding dan margin<\/strong> secukupnya agar tata letak tidak terlalu rapat.<\/p>\n<\/li>\n<li data-start=\"2744\" data-end=\"2827\">\n<p data-start=\"2746\" data-end=\"2827\">Gunakan <strong data-start=\"2754\" data-end=\"2770\">hover effect<\/strong> sederhana pada tombol atau link agar lebih interaktif.<\/p>\n<\/li>\n<\/ul>\n<h3 data-start=\"64\" data-end=\"96\"><strong data-start=\"68\" data-end=\"96\">5. Membuat Bagian About<\/strong><\/h3>\n<p data-start=\"98\" data-end=\"282\">Buat <strong data-start=\"103\" data-end=\"121\">bagian \u201cAbout\u201d<\/strong> untuk <strong data-start=\"128\" data-end=\"183\">memperkenalkan diri Anda secara singkat dan menarik<\/strong>.<br data-start=\"184\" data-end=\"187\" \/>Tulis dengan <strong data-start=\"200\" data-end=\"243\">gaya yang ramah namun tetap profesional<\/strong> agar pengunjung mudah mengenal Anda.<\/p>\n<p data-start=\"284\" data-end=\"313\"><strong data-start=\"284\" data-end=\"311\">Contoh penulisan aktif:<\/strong><\/p>\n<p data-start=\"317\" data-end=\"606\">Halo, saya &lt;b&gt;Andi Saputra&lt;\/b&gt;. Saya bekerja sebagai <strong data-start=\"370\" data-end=\"387\">web developer<\/strong> yang berfokus pada <strong data-start=\"407\" data-end=\"437\">desain antarmuka responsif<\/strong> dan <strong data-start=\"442\" data-end=\"473\">pengalaman pengguna (UI\/UX)<\/strong>.<br data-start=\"474\" data-end=\"477\" \/>Saya <strong data-start=\"484\" data-end=\"546\" data-is-only-node=\"\">menciptakan website yang indah, cepat, dan mudah digunakan<\/strong> untuk memberikan pengalaman terbaik bagi setiap pengguna.<\/p>\n<h3 data-start=\"64\" data-end=\"94\"><strong data-start=\"68\" data-end=\"94\">6. Menampilkan Proyek<\/strong><\/h3>\n<p data-start=\"96\" data-end=\"287\">Tampilkan <strong data-start=\"106\" data-end=\"128\">karya terbaik Anda<\/strong> dengan menggunakan <strong data-start=\"148\" data-end=\"180\">kartu proyek (project cards)<\/strong> agar terlihat menarik dan mudah dibaca.<br data-start=\"220\" data-end=\"223\" \/>Untuk setiap kartu proyek, <strong data-start=\"250\" data-end=\"284\">sertakan elemen-elemen berikut<\/strong>:<\/p>\n<ul data-start=\"289\" data-end=\"624\">\n<li data-start=\"289\" data-end=\"365\">\n<p data-start=\"291\" data-end=\"365\"><strong data-start=\"291\" data-end=\"321\">Tambahkan gambar thumbnail<\/strong> untuk menampilkan tampilan visual proyek.<\/p>\n<\/li>\n<li data-start=\"366\" data-end=\"421\">\n<p data-start=\"368\" data-end=\"421\"><strong data-start=\"368\" data-end=\"393\">Tuliskan judul proyek<\/strong> secara jelas dan menarik.<\/p>\n<\/li>\n<li data-start=\"422\" data-end=\"504\">\n<p data-start=\"424\" data-end=\"504\"><strong data-start=\"424\" data-end=\"453\">Berikan deskripsi singkat<\/strong> yang menjelaskan tujuan atau fitur utama proyek.<\/p>\n<\/li>\n<li data-start=\"505\" data-end=\"624\">\n<p data-start=\"507\" data-end=\"624\"><strong data-start=\"507\" data-end=\"558\">Cantumkan tautan ke demo atau repositori GitHub<\/strong> agar pengunjung dapat melihat hasil karya Anda secara langsung.<\/p>\n<\/li>\n<\/ul>\n<h3 data-start=\"64\" data-end=\"101\"><strong data-start=\"68\" data-end=\"101\">7. Menambahkan Bagian Kontak<\/strong><\/h3>\n<p data-start=\"103\" data-end=\"248\">Tambahkan <strong data-start=\"113\" data-end=\"130\">bagian kontak<\/strong> agar pengunjung dapat <strong data-start=\"153\" data-end=\"186\">menghubungi Anda dengan mudah<\/strong>.<br data-start=\"187\" data-end=\"190\" \/>Pada bagian ini, <strong data-start=\"207\" data-end=\"245\">sertakan informasi penting berikut<\/strong>:<\/p>\n<ul data-start=\"250\" data-end=\"568\">\n<li data-start=\"250\" data-end=\"341\">\n<p data-start=\"252\" data-end=\"341\"><strong data-start=\"252\" data-end=\"281\">Gunakan email profesional<\/strong>, misalnya nama@domain.com, untuk memudahkan komunikasi.<\/p>\n<\/li>\n<li data-start=\"342\" data-end=\"472\">\n<p data-start=\"344\" data-end=\"472\"><strong data-start=\"344\" data-end=\"391\">Tambahkan tautan ke profil profesional Anda<\/strong>, seperti <strong data-start=\"401\" data-end=\"413\">LinkedIn<\/strong>, <strong data-start=\"415\" data-end=\"425\">GitHub<\/strong>, atau <strong data-start=\"432\" data-end=\"456\">media sosial lainnya<\/strong> yang relevan.<\/p>\n<\/li>\n<li data-start=\"473\" data-end=\"568\">\n<p data-start=\"475\" data-end=\"568\"><strong data-start=\"475\" data-end=\"508\">Sertakan tombol \u201cDownload CV\u201d<\/strong> bila Anda ingin memberikan akses langsung ke resume Anda.<\/p>\n<\/li>\n<\/ul>\n<h3 data-start=\"3811\" data-end=\"3836\"><\/h3>\n<h3 data-start=\"62\" data-end=\"91\"><strong data-start=\"66\" data-end=\"91\">8. Publikasi Website<\/strong><\/h3>\n<p data-start=\"93\" data-end=\"248\">Setelah menyelesaikan pembuatan website, Anda bisa langsung <strong data-start=\"153\" data-end=\"186\">memublikasikannya ke internet<\/strong>.<br data-start=\"187\" data-end=\"190\" \/>Beberapa platform gratis yang mudah digunakan antara lain:<\/p>\n<ul data-start=\"250\" data-end=\"565\">\n<li data-start=\"250\" data-end=\"342\">\n<p data-start=\"252\" data-end=\"342\"><strong data-start=\"252\" data-end=\"268\">GitHub Pages<\/strong> \u2014 gunakan platform ini untuk <strong data-start=\"298\" data-end=\"326\">meng-host website statis<\/strong> dengan mudah.<\/p>\n<\/li>\n<li data-start=\"343\" data-end=\"457\">\n<p data-start=\"345\" data-end=\"457\"><strong data-start=\"345\" data-end=\"356\">Netlify<\/strong> \u2014 <strong data-start=\"359\" data-end=\"410\">unggah file HTML Anda dengan cara drag-and-drop<\/strong> untuk langsung menayangkannya secara online.<\/p>\n<\/li>\n<li data-start=\"458\" data-end=\"565\">\n<p data-start=\"460\" data-end=\"565\"><strong data-start=\"460\" data-end=\"470\">Vercel<\/strong> \u2014 <strong data-start=\"473\" data-end=\"510\">publikasikan website dengan cepat<\/strong> dan <strong data-start=\"515\" data-end=\"540\">gunakan domain custom<\/strong> sesuai kebutuhan Anda.<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"567\" data-end=\"603\">Langkah-langkahnya sangat sederhana:<\/p>\n<ol data-start=\"604\" data-end=\"809\">\n<li data-start=\"604\" data-end=\"665\">\n<p data-start=\"607\" data-end=\"665\"><strong data-start=\"607\" data-end=\"628\">Unggah semua file<\/strong> website ke repository GitHub Anda.<\/p>\n<\/li>\n<li data-start=\"666\" data-end=\"738\">\n<p data-start=\"669\" data-end=\"738\"><strong data-start=\"669\" data-end=\"700\">Aktifkan fitur GitHub Pages<\/strong> melalui menu pengaturan repository.<\/p>\n<\/li>\n<li data-start=\"739\" data-end=\"809\">\n<p data-start=\"742\" data-end=\"809\">Setelah itu, <strong data-start=\"755\" data-end=\"807\">website Anda langsung dapat diakses oleh publik!<\/strong><\/p>\n<h3 data-start=\"4621\" data-end=\"4638\">Kesimpulan<\/h3>\n<article class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" tabindex=\"-1\" data-turn-id=\"c9661890-0c7f-4226-8178-40a1e3f42fcc\" data-testid=\"conversation-turn-2\" data-scroll-anchor=\"true\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:--spacing(4)] thread-sm:[--thread-content-margin:--spacing(6)] thread-lg:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" tabindex=\"-1\">\n<div class=\"flex max-w-full flex-col grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"37888f1d-af85-4dc9-a9be-ac9f5aa27188\" data-message-model-slug=\"gpt-5\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[1px]\">\n<div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\">\n<p data-start=\"51\" data-end=\"316\">Membuat website portfolio dengan HTML dan CSS sebenarnya mudah.<br data-start=\"114\" data-end=\"117\" \/>Yang penting, Anda menjaga konsistensi tampilan, memudahkan navigasi, dan menyajikan konten dengan jelas.<br data-start=\"222\" data-end=\"225\" data-is-only-node=\"\" \/>Mulailah dengan struktur sederhana, lalu kembangkan seiring bertambahnya pengalaman Anda.<\/p>\n<p data-start=\"318\" data-end=\"509\" data-is-last-node=\"\" data-is-only-node=\"\">Dengan mengikuti langkah-langkah ini, Anda dapat membangun website portfolio profesional yang menampilkan kemampuan dan gaya pribadi Anda \u2014 dengan tampilan serba hijau yang segar dan menarik!<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"z-0 flex min-h-[46px] justify-start\"><\/div>\n<div class=\"mt-3 w-full empty:hidden\">\n<div class=\"text-center\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<div class=\"pointer-events-none h-px w-px\" aria-hidden=\"true\" data-edge=\"true\"><\/div>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Langkah Mudah Membuat Website Portfolio dengan HTML dan Css &nbsp; Membuat website portfolio bukan hanya sekadar memamerkan karya, tetapi juga cara efektif untuk membangun identitas profesional di dunia digital. Dengan sedikit pemahaman HTML dan CSS, siapa pun bisa membuat portfolio yang menarik dan responsif tanpa perlu framework atau CMS [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":815,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[172,171],"tags":[176,174,175,10,177,173],"class_list":["post-814","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-html","category-menjadi-jago-di-html-dan-css","tag-css","tag-desain-web","tag-html","tag-pendidikan","tag-portfolio","tag-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Langkah Mudah Membuat Website Portfolio dengan HTML dan CSS - Syntax Bussiness School<\/title>\n<meta name=\"description\" content=\"Pelajari cara membuat website portfolio profesional dengan HTML dan CSS. Bangun struktur, atur desain, tampilkan proyek terbaik\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Langkah Mudah Membuat Website Portfolio dengan HTML dan CSS - Syntax Bussiness School\" \/>\n<meta property=\"og:description\" content=\"Pelajari cara membuat website portfolio profesional dengan HTML dan CSS. Bangun struktur, atur desain, tampilkan proyek terbaik\" \/>\n<meta property=\"og:url\" content=\"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Syntax Bussiness School\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-21T05:56:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-22T03:36:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/smksbskuningan.sch.id\/blog\/wp-content\/uploads\/2025\/10\/artikel2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/\",\"url\":\"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/\",\"name\":\"Langkah Mudah Membuat Website Portfolio dengan HTML dan CSS - Syntax Bussiness School\",\"isPartOf\":{\"@id\":\"https:\/\/smksbskuningan.sch.id\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/smksbskuningan.sch.id\/blog\/wp-content\/uploads\/2025\/10\/artikel2.jpg\",\"datePublished\":\"2025-10-21T05:56:56+00:00\",\"dateModified\":\"2025-10-22T03:36:39+00:00\",\"author\":{\"@id\":\"https:\/\/smksbskuningan.sch.id\/blog\/#\/schema\/person\/481e1aa9c0db5cd84ac1b0b5b6037c75\"},\"description\":\"Pelajari cara membuat website portfolio profesional dengan HTML dan CSS. Bangun struktur, atur desain, tampilkan proyek terbaik\",\"breadcrumb\":{\"@id\":\"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/#primaryimage\",\"url\":\"https:\/\/smksbskuningan.sch.id\/blog\/wp-content\/uploads\/2025\/10\/artikel2.jpg\",\"contentUrl\":\"https:\/\/smksbskuningan.sch.id\/blog\/wp-content\/uploads\/2025\/10\/artikel2.jpg\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Beranda\",\"item\":\"https:\/\/smksbskuningan.sch.id\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Langkah Mudah Membuat Website Portfolio dengan HTML dan CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/smksbskuningan.sch.id\/blog\/#website\",\"url\":\"https:\/\/smksbskuningan.sch.id\/blog\/\",\"name\":\"Syntax Bussiness School\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/smksbskuningan.sch.id\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/smksbskuningan.sch.id\/blog\/#\/schema\/person\/481e1aa9c0db5cd84ac1b0b5b6037c75\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/smksbskuningan.sch.id\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2ea86c17a888f70105ad04504ea389e5c7f7caef603c8a6582f470b06170325?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2ea86c17a888f70105ad04504ea389e5c7f7caef603c8a6582f470b06170325?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/literasikusolution.com\/wpuji\"],\"url\":\"https:\/\/smksbskuningan.sch.id\/blog\/author\/jirjis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Langkah Mudah Membuat Website Portfolio dengan HTML dan CSS - Syntax Bussiness School","description":"Pelajari cara membuat website portfolio profesional dengan HTML dan CSS. Bangun struktur, atur desain, tampilkan proyek terbaik","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/","og_locale":"id_ID","og_type":"article","og_title":"Langkah Mudah Membuat Website Portfolio dengan HTML dan CSS - Syntax Bussiness School","og_description":"Pelajari cara membuat website portfolio profesional dengan HTML dan CSS. Bangun struktur, atur desain, tampilkan proyek terbaik","og_url":"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/","og_site_name":"Syntax Bussiness School","article_published_time":"2025-10-21T05:56:56+00:00","article_modified_time":"2025-10-22T03:36:39+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/smksbskuningan.sch.id\/blog\/wp-content\/uploads\/2025\/10\/artikel2.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"admin","Estimasi waktu membaca":"5 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/","url":"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/","name":"Langkah Mudah Membuat Website Portfolio dengan HTML dan CSS - Syntax Bussiness School","isPartOf":{"@id":"https:\/\/smksbskuningan.sch.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/#primaryimage"},"image":{"@id":"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/#primaryimage"},"thumbnailUrl":"https:\/\/smksbskuningan.sch.id\/blog\/wp-content\/uploads\/2025\/10\/artikel2.jpg","datePublished":"2025-10-21T05:56:56+00:00","dateModified":"2025-10-22T03:36:39+00:00","author":{"@id":"https:\/\/smksbskuningan.sch.id\/blog\/#\/schema\/person\/481e1aa9c0db5cd84ac1b0b5b6037c75"},"description":"Pelajari cara membuat website portfolio profesional dengan HTML dan CSS. Bangun struktur, atur desain, tampilkan proyek terbaik","breadcrumb":{"@id":"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/smksbskuningan.sch.id\/blog\/814-2\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/#primaryimage","url":"https:\/\/smksbskuningan.sch.id\/blog\/wp-content\/uploads\/2025\/10\/artikel2.jpg","contentUrl":"https:\/\/smksbskuningan.sch.id\/blog\/wp-content\/uploads\/2025\/10\/artikel2.jpg","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/smksbskuningan.sch.id\/blog\/814-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Beranda","item":"https:\/\/smksbskuningan.sch.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Langkah Mudah Membuat Website Portfolio dengan HTML dan CSS"}]},{"@type":"WebSite","@id":"https:\/\/smksbskuningan.sch.id\/blog\/#website","url":"https:\/\/smksbskuningan.sch.id\/blog\/","name":"Syntax Bussiness School","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/smksbskuningan.sch.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Person","@id":"https:\/\/smksbskuningan.sch.id\/blog\/#\/schema\/person\/481e1aa9c0db5cd84ac1b0b5b6037c75","name":"admin","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/smksbskuningan.sch.id\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2ea86c17a888f70105ad04504ea389e5c7f7caef603c8a6582f470b06170325?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2ea86c17a888f70105ad04504ea389e5c7f7caef603c8a6582f470b06170325?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/literasikusolution.com\/wpuji"],"url":"https:\/\/smksbskuningan.sch.id\/blog\/author\/jirjis\/"}]}},"_links":{"self":[{"href":"https:\/\/smksbskuningan.sch.id\/blog\/wp-json\/wp\/v2\/posts\/814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smksbskuningan.sch.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/smksbskuningan.sch.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/smksbskuningan.sch.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smksbskuningan.sch.id\/blog\/wp-json\/wp\/v2\/comments?post=814"}],"version-history":[{"count":5,"href":"https:\/\/smksbskuningan.sch.id\/blog\/wp-json\/wp\/v2\/posts\/814\/revisions"}],"predecessor-version":[{"id":834,"href":"https:\/\/smksbskuningan.sch.id\/blog\/wp-json\/wp\/v2\/posts\/814\/revisions\/834"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/smksbskuningan.sch.id\/blog\/wp-json\/wp\/v2\/media\/815"}],"wp:attachment":[{"href":"https:\/\/smksbskuningan.sch.id\/blog\/wp-json\/wp\/v2\/media?parent=814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/smksbskuningan.sch.id\/blog\/wp-json\/wp\/v2\/categories?post=814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/smksbskuningan.sch.id\/blog\/wp-json\/wp\/v2\/tags?post=814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}