{"id":2381,"date":"2026-04-26T19:00:58","date_gmt":"2026-04-26T13:30:58","guid":{"rendered":"https:\/\/codebox.keyframetechsolution.com\/?p=2381"},"modified":"2026-05-02T14:00:01","modified_gmt":"2026-05-02T08:30:01","slug":"modern-portfolio-website-html-css-javascript","status":"publish","type":"post","link":"https:\/\/codebox.keyframetechsolution.com\/modern-portfolio-website-html-css-javascript\/","title":{"rendered":"How to Build a Modern Portfolio Website Using HTML CSS JavaScript (Step-by-Step Guide)"},"content":{"rendered":"<p data-start=\"765\" data-end=\"1022\">Creating a modern portfolio website using HTML CSS JavaScript is one of the best frontend projects for developers, designers, and freelancers. A well-designed portfolio helps showcase skills, projects, and creativity while building a strong online presence.<\/p>\n<p data-start=\"1024\" data-end=\"1238\">Whether you want a personal portfolio website, developer showcase, or UX\/UI designer portfolio, this project combines responsive design, smooth animations, and interactive sections to create a professional website.<\/p>\n<p data-start=\"1240\" data-end=\"1371\">In this guide, you\u2019ll learn the essential structure, features, and steps needed to build a stunning portfolio website from scratch.<\/p>\n<h2 data-section-id=\"148m76y\" data-start=\"1378\" data-end=\"1411\">Why Build a Portfolio Website?<\/h2>\n<p data-start=\"1413\" data-end=\"1478\">A portfolio website is more than an online profile. It helps you:<\/p>\n<ul data-start=\"1480\" data-end=\"1625\">\n<li data-section-id=\"1ds893j\" data-start=\"1480\" data-end=\"1507\">Showcase your best work<\/li>\n<li data-section-id=\"1558ngr\" data-start=\"1508\" data-end=\"1533\">Highlight your skills<\/li>\n<li data-section-id=\"1xn11fo\" data-start=\"1534\" data-end=\"1555\">Build credibility<\/li>\n<li data-section-id=\"12vwzc2\" data-start=\"1556\" data-end=\"1596\">Attract clients or job opportunities<\/li>\n<li data-section-id=\"ss7we6\" data-start=\"1597\" data-end=\"1625\">Create your personal brand<\/li>\n<\/ul>\n<p data-start=\"1627\" data-end=\"1723\">A modern portfolio website can often make a stronger first impression than a traditional resume.<\/p>\n<h2 data-section-id=\"on0rxw\" data-start=\"1730\" data-end=\"1771\">Features of a Modern Portfolio Website<\/h2>\n<p data-start=\"1773\" data-end=\"1823\">A professional portfolio website usually includes:<\/p>\n<h3 data-section-id=\"1nx49s\" data-start=\"1825\" data-end=\"1844\">1. Hero Section<\/h3>\n<p data-start=\"1845\" data-end=\"1882\">The hero section introduces you with:<\/p>\n<ul data-start=\"1884\" data-end=\"1975\">\n<li data-section-id=\"1bbgtms\" data-start=\"1884\" data-end=\"1902\">Name and title<\/li>\n<li data-section-id=\"1cf253u\" data-start=\"1903\" data-end=\"1925\">Short introduction<\/li>\n<li data-section-id=\"1xtdpsa\" data-start=\"1926\" data-end=\"1952\">Call-to-action buttons<\/li>\n<li data-section-id=\"1mc45lw\" data-start=\"1953\" data-end=\"1975\">Professional visuals<\/li>\n<\/ul>\n<p data-start=\"1977\" data-end=\"2029\">Strong hero sections improve engagement immediately.<\/p>\n<h3 data-section-id=\"tx9t25\" data-start=\"2036\" data-end=\"2055\">2. About Section<\/h3>\n<p data-start=\"2056\" data-end=\"2117\">The about section tells visitors who you are and what you do.<\/p>\n<p data-start=\"2119\" data-end=\"2127\">Include:<\/p>\n<ul data-start=\"2128\" data-end=\"2185\">\n<li data-section-id=\"naxzii\" data-start=\"2128\" data-end=\"2138\">Skills<\/li>\n<li data-section-id=\"lr64xi\" data-start=\"2139\" data-end=\"2153\">Experience<\/li>\n<li data-section-id=\"1y8fve9\" data-start=\"2154\" data-end=\"2170\">Design tools<\/li>\n<li data-section-id=\"1qy5moy\" data-start=\"2171\" data-end=\"2185\">Work process<\/li>\n<\/ul>\n<p data-start=\"2187\" data-end=\"2218\">This section helps build trust.<\/p>\n<h3 data-section-id=\"12u0273\" data-start=\"2225\" data-end=\"2247\">3. Services Section<\/h3>\n<p data-start=\"2248\" data-end=\"2280\">Showcase what you offer such as:<\/p>\n<ul data-start=\"2282\" data-end=\"2349\">\n<li data-section-id=\"8wkidg\" data-start=\"2282\" data-end=\"2298\">UI\/UX Design<\/li>\n<li data-section-id=\"1kpuzii\" data-start=\"2299\" data-end=\"2313\">Web Design<\/li>\n<li data-section-id=\"goso2d\" data-start=\"2314\" data-end=\"2338\">Frontend Development<\/li>\n<li data-section-id=\"1i8bzw3\" data-start=\"2339\" data-end=\"2349\">Branding<\/li>\n<\/ul>\n<p data-start=\"2351\" data-end=\"2421\">Service cards with hover effects make this section visually appealing.<\/p>\n<h3 data-section-id=\"qzk8ok\" data-start=\"2428\" data-end=\"2461\">4. Portfolio Projects Showcase<\/h3>\n<p data-start=\"2462\" data-end=\"2517\">This is the most important part of a portfolio website.<\/p>\n<p data-start=\"2519\" data-end=\"2527\">Include:<\/p>\n<ul data-start=\"2528\" data-end=\"2634\">\n<li data-section-id=\"1c78wea\" data-start=\"2528\" data-end=\"2550\">Project thumbnails<\/li>\n<li data-section-id=\"2yjf3p\" data-start=\"2551\" data-end=\"2567\">Case studies<\/li>\n<li data-section-id=\"5n9hc7\" data-start=\"2568\" data-end=\"2585\">Live previews<\/li>\n<li data-section-id=\"1smalte\" data-start=\"2586\" data-end=\"2615\">Interactive project cards<\/li>\n<li data-section-id=\"19ao5xn\" data-start=\"2616\" data-end=\"2634\">Hover animations<\/li>\n<\/ul>\n<p data-start=\"2636\" data-end=\"2702\">A strong project section can significantly improve your portfolio.<\/p>\n<h3 data-section-id=\"1hl80j7\" data-start=\"2709\" data-end=\"2735\">5. Testimonials Section<\/h3>\n<p data-start=\"2736\" data-end=\"2804\">Client feedback or testimonials add credibility and professionalism.<\/p>\n<h3 data-section-id=\"1pdlhx0\" data-start=\"2811\" data-end=\"2832\">6. Contact Section<\/h3>\n<p data-start=\"2833\" data-end=\"2901\">A simple contact form and social links help visitors connect easily.<\/p>\n<h2 data-section-id=\"6j7bdt\" data-start=\"2908\" data-end=\"2927\">Technologies Used<\/h2>\n<h3 data-section-id=\"1xw7py0\" data-start=\"2929\" data-end=\"2936\">HTML<\/h3>\n<p data-start=\"2937\" data-end=\"2982\">HTML creates the website structure including:<\/p>\n<ul data-start=\"2983\" data-end=\"3045\">\n<li data-section-id=\"1s6o61j\" data-start=\"2983\" data-end=\"2993\">Header<\/li>\n<li data-section-id=\"1h5q7jm\" data-start=\"2994\" data-end=\"3006\">Sections<\/li>\n<li data-section-id=\"o7n99x\" data-start=\"3007\" data-end=\"3026\">Portfolio cards<\/li>\n<li data-section-id=\"y7i5d9\" data-start=\"3027\" data-end=\"3036\">Forms<\/li>\n<li data-section-id=\"1xwvki5\" data-start=\"3037\" data-end=\"3045\">Footer<\/li>\n<\/ul>\n<h3 data-section-id=\"1hrykfa\" data-start=\"3052\" data-end=\"3058\">CSS<\/h3>\n<p data-start=\"3059\" data-end=\"3087\">CSS styles the website with:<\/p>\n<ul data-start=\"3089\" data-end=\"3175\">\n<li data-section-id=\"7c1iim\" data-start=\"3089\" data-end=\"3107\">Modern layouts<\/li>\n<li data-section-id=\"1wbxjdb\" data-start=\"3108\" data-end=\"3122\">Typography<\/li>\n<li data-section-id=\"eg2wga\" data-start=\"3123\" data-end=\"3140\">Hover effects<\/li>\n<li data-section-id=\"189v9hp\" data-start=\"3141\" data-end=\"3155\">Animations<\/li>\n<li data-section-id=\"1difuva\" data-start=\"3156\" data-end=\"3175\">Responsive design<\/li>\n<\/ul>\n<p data-start=\"3177\" data-end=\"3225\">Flexbox, Grid and media queries are useful here.<\/p>\n<h3 data-section-id=\"l0dsgm\" data-start=\"3232\" data-end=\"3245\">JavaScript<\/h3>\n<p data-start=\"3246\" data-end=\"3282\">JavaScript powers interactions like:<\/p>\n<ul data-start=\"3284\" data-end=\"3400\">\n<li data-section-id=\"1wtlz9l\" data-start=\"3284\" data-end=\"3306\">Mobile menu toggle<\/li>\n<li data-section-id=\"1obviy0\" data-start=\"3307\" data-end=\"3324\">Sticky header<\/li>\n<li data-section-id=\"8556ta\" data-start=\"3325\" data-end=\"3336\">Sliders<\/li>\n<li data-section-id=\"16m6icg\" data-start=\"3337\" data-end=\"3358\">Scroll animations<\/li>\n<li data-section-id=\"5pi12q\" data-start=\"3359\" data-end=\"3382\">Portfolio filtering<\/li>\n<li data-section-id=\"129ua2h\" data-start=\"3383\" data-end=\"3400\">Dynamic effects<\/li>\n<\/ul>\n<p data-start=\"3402\" data-end=\"3452\">Together these create an engaging user experience.<\/p>\n<p><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/OadE8U8tbC4?si=f9B1fUrP8Qmm80yK\" width=\"100%\" height=\"400\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2 data-section-id=\"zisy6q\" data-start=\"3474\" data-end=\"3522\">How to Create a Portfolio Website Step by Step<\/h2>\n<p data-start=\"3524\" data-end=\"3543\">Follow these steps:<\/p>\n<h3 data-section-id=\"1bse3yi\" data-start=\"3545\" data-end=\"3583\">Step 1: Create Basic HTML Structure<\/h3>\n<p data-start=\"3584\" data-end=\"3604\">Build sections like:<\/p>\n<ul data-start=\"3606\" data-end=\"3660\">\n<li data-section-id=\"1mrw0go\" data-start=\"3606\" data-end=\"3614\">Hero<\/li>\n<li data-section-id=\"1ef2sxx\" data-start=\"3615\" data-end=\"3624\">About<\/li>\n<li data-section-id=\"1cyzp5y\" data-start=\"3625\" data-end=\"3637\">Services<\/li>\n<li data-section-id=\"1hrhwwe\" data-start=\"3638\" data-end=\"3650\">Projects<\/li>\n<li data-section-id=\"60qq3s\" data-start=\"3651\" data-end=\"3660\">Contact<\/li>\n<\/ul>\n<p data-start=\"3662\" data-end=\"3687\">Start with semantic HTML.<\/p>\n<h3 data-section-id=\"1xfvx0p\" data-start=\"3694\" data-end=\"3719\">Step 2: Style with CSS<\/h3>\n<p data-start=\"3720\" data-end=\"3724\">Add:<\/p>\n<ul data-start=\"3726\" data-end=\"3813\">\n<li data-section-id=\"1gg5eg6\" data-start=\"3726\" data-end=\"3736\">Colors<\/li>\n<li data-section-id=\"1wbxjdb\" data-start=\"3737\" data-end=\"3751\">Typography<\/li>\n<li data-section-id=\"1vbg2ur\" data-start=\"3752\" data-end=\"3770\">Layout spacing<\/li>\n<li data-section-id=\"oq9lhp\" data-start=\"3771\" data-end=\"3782\">Buttons<\/li>\n<li data-section-id=\"7jdogf\" data-start=\"3783\" data-end=\"3792\">Cards<\/li>\n<li data-section-id=\"1wc58ti\" data-start=\"3793\" data-end=\"3813\">Responsive styling<\/li>\n<\/ul>\n<p data-start=\"3815\" data-end=\"3844\">Use a modern design approach.<\/p>\n<h3 data-section-id=\"1csz1ns\" data-start=\"3851\" data-end=\"3884\">Step 3: Add JavaScript Effects<\/h3>\n<p data-start=\"3885\" data-end=\"3914\">Enhance user experience with:<\/p>\n<ul data-start=\"3916\" data-end=\"3995\">\n<li data-section-id=\"wzjv47\" data-start=\"3916\" data-end=\"3936\">Smooth scrolling<\/li>\n<li data-section-id=\"8556ta\" data-start=\"3937\" data-end=\"3948\">Sliders<\/li>\n<li data-section-id=\"2u00ii\" data-start=\"3949\" data-end=\"3970\">Animation effects<\/li>\n<li data-section-id=\"1rc8tvu\" data-start=\"3971\" data-end=\"3995\">Interactive navigation<\/li>\n<\/ul>\n<p data-start=\"3997\" data-end=\"4040\">These make the portfolio feel professional.<\/p>\n<h3 data-section-id=\"af6kka\" data-start=\"4047\" data-end=\"4076\">Step 4: Make It Responsive<\/h3>\n<p data-start=\"4077\" data-end=\"4090\">Optimize for:<\/p>\n<ul data-start=\"4091\" data-end=\"4122\">\n<li data-section-id=\"vky5p6\" data-start=\"4091\" data-end=\"4102\">Desktop<\/li>\n<li data-section-id=\"15i492a\" data-start=\"4103\" data-end=\"4113\">Tablet<\/li>\n<li data-section-id=\"1trh9d4\" data-start=\"4114\" data-end=\"4122\">Mobile<\/li>\n<\/ul>\n<p data-start=\"4124\" data-end=\"4172\">Responsive portfolios improve usability and SEO.<\/p>\n<h2 data-section-id=\"1wxhw2v\" data-start=\"4179\" data-end=\"4221\">Modern Portfolio Website Design Elements<\/h2>\n<p data-start=\"4223\" data-end=\"4271\">This project includes trending UI features like:<\/p>\n<ul data-start=\"4273\" data-end=\"4443\">\n<li data-section-id=\"12zbz76\" data-start=\"4273\" data-end=\"4304\">Dark theme inspired layouts<\/li>\n<li data-section-id=\"sh65ci\" data-start=\"4305\" data-end=\"4327\">Neon accent colors<\/li>\n<li data-section-id=\"1xwfj0w\" data-start=\"4328\" data-end=\"4349\">Animated counters<\/li>\n<li data-section-id=\"1t9x0cu\" data-start=\"4350\" data-end=\"4374\">Parallax backgrounds<\/li>\n<li data-section-id=\"mqk8ye\" data-start=\"4375\" data-end=\"4397\">Smooth transitions<\/li>\n<li data-section-id=\"1e38yj9\" data-start=\"4398\" data-end=\"4423\">Custom cursor effects<\/li>\n<li data-section-id=\"1w7idzb\" data-start=\"4424\" data-end=\"4443\">Interactive cards<\/li>\n<\/ul>\n<p data-start=\"4445\" data-end=\"4492\">These elements give the website a premium look.<\/p>\n<h2 data-section-id=\"wyf81t\" data-start=\"4499\" data-end=\"4546\">Portfolio Website Project Structure Explained<\/h2>\n<p data-start=\"4548\" data-end=\"4587\">A typical project structure looks like:<\/p>\n<ul data-start=\"4589\" data-end=\"4663\">\n<li data-section-id=\"1rmb1gl\" data-start=\"4589\" data-end=\"4603\">index.html<\/li>\n<li data-section-id=\"db8voy\" data-start=\"4604\" data-end=\"4617\">style.css<\/li>\n<li data-section-id=\"pqukvo\" data-start=\"4618\" data-end=\"4629\">main.js<\/li>\n<li data-section-id=\"e8s762\" data-start=\"4630\" data-end=\"4647\">images folder<\/li>\n<li data-section-id=\"1cazckd\" data-start=\"4648\" data-end=\"4663\">assets folder<\/li>\n<\/ul>\n<p data-start=\"4665\" data-end=\"4718\">Organizing files properly makes customization easier.<\/p>\n<h2 data-section-id=\"1xewi84\" data-start=\"4725\" data-end=\"4767\">How to Customize This Portfolio Template<\/h2>\n<p data-start=\"4769\" data-end=\"4789\">You can personalize:<\/p>\n<ul data-start=\"4791\" data-end=\"4912\">\n<li data-section-id=\"1wrws80\" data-start=\"4791\" data-end=\"4807\">Color scheme<\/li>\n<li data-section-id=\"y4npc8\" data-start=\"4808\" data-end=\"4817\">Fonts<\/li>\n<li data-section-id=\"bgd813\" data-start=\"4818\" data-end=\"4838\">Project sections<\/li>\n<li data-section-id=\"1g1pmwc\" data-start=\"4839\" data-end=\"4856\">About content<\/li>\n<li data-section-id=\"1cl7yi2\" data-start=\"4857\" data-end=\"4876\">Contact details<\/li>\n<li data-section-id=\"4yba8b\" data-start=\"4877\" data-end=\"4896\">Social profiles<\/li>\n<li data-section-id=\"5twmy0\" data-start=\"4897\" data-end=\"4912\">Layout blocks<\/li>\n<\/ul>\n<p data-start=\"4914\" data-end=\"4969\">This makes the portfolio unique to your personal brand.<\/p>\n<h2 data-section-id=\"8s1q7u\" data-start=\"4976\" data-end=\"5002\">Common Mistakes to Avoid<\/h2>\n<p data-start=\"5004\" data-end=\"5059\">Avoid these mistakes when building a portfolio website:<\/p>\n<h3 data-section-id=\"13h2x73\" data-start=\"5061\" data-end=\"5080\">Too Much Clutter<\/h3>\n<p data-start=\"5081\" data-end=\"5110\">Keep design clean and simple.<\/p>\n<h3 data-section-id=\"1lxpo2s\" data-start=\"5112\" data-end=\"5133\">Slow Loading Pages<\/h3>\n<p data-start=\"5134\" data-end=\"5162\">Optimize images and scripts.<\/p>\n<h3 data-section-id=\"aksq7t\" data-start=\"5164\" data-end=\"5189\">Poor Mobile Experience<\/h3>\n<p data-start=\"5190\" data-end=\"5217\">Always test responsiveness.<\/p>\n<h3 data-section-id=\"167qna7\" data-start=\"5219\" data-end=\"5243\">Weak Project Showcase<\/h3>\n<p data-start=\"5244\" data-end=\"5274\">Highlight your best work only.<\/p>\n<h3 data-section-id=\"z9u19h\" data-start=\"5276\" data-end=\"5299\">Difficult Navigation<\/h3>\n<p data-start=\"5300\" data-end=\"5330\">Use clear menus and structure.<\/p>\n<h2 data-section-id=\"gkcz28\" data-start=\"5337\" data-end=\"5388\">Why This Portfolio Project Is Great for Beginners<\/h2>\n<p data-start=\"5390\" data-end=\"5418\">This project helps practice:<\/p>\n<ul data-start=\"5420\" data-end=\"5523\">\n<li data-section-id=\"68vk0w\" data-start=\"5420\" data-end=\"5438\">HTML structure<\/li>\n<li data-section-id=\"cef4w2\" data-start=\"5439\" data-end=\"5454\">CSS layouts<\/li>\n<li data-section-id=\"1v4z92q\" data-start=\"5455\" data-end=\"5482\">JavaScript interactions<\/li>\n<li data-section-id=\"6d75om\" data-start=\"5483\" data-end=\"5504\">Responsive design<\/li>\n<li data-section-id=\"1rahbyr\" data-start=\"5505\" data-end=\"5523\">UI\/UX principles<\/li>\n<\/ul>\n<p data-start=\"5525\" data-end=\"5573\">It is an excellent frontend development project.<\/p>\n<h2 data-section-id=\"zuh0vn\" data-start=\"5580\" data-end=\"5627\">Tips to Make Your Portfolio Website Stand Out<\/h2>\n<p data-start=\"5629\" data-end=\"5655\">To improve your portfolio:<\/p>\n<ul data-start=\"5657\" data-end=\"5827\">\n<li data-section-id=\"19mbr67\" data-start=\"5657\" data-end=\"5688\">Use quality project mockups<\/li>\n<li data-section-id=\"1ycagtq\" data-start=\"5689\" data-end=\"5714\">Add smooth animations<\/li>\n<li data-section-id=\"zjfxre\" data-start=\"5715\" data-end=\"5743\">Focus on user experience<\/li>\n<li data-section-id=\"1g4gq6o\" data-start=\"5744\" data-end=\"5772\">Show results in projects<\/li>\n<li data-section-id=\"1cunu8\" data-start=\"5773\" data-end=\"5802\">Keep the interface modern<\/li>\n<li data-section-id=\"12tjyzx\" data-start=\"5803\" data-end=\"5827\">Optimize website speed<\/li>\n<\/ul>\n<p data-start=\"5829\" data-end=\"5861\">Small details create big impact.<\/p>\n<h2 data-section-id=\"hkd5a4\" data-start=\"5868\" data-end=\"5896\">Frequently Asked Questions<\/h2>\n<h3 data-section-id=\"tmzslx\" data-start=\"5898\" data-end=\"5962\">How do I build a portfolio website using HTML CSS JavaScript?<\/h3>\n<p data-start=\"5963\" data-end=\"6050\">Start with HTML for structure, CSS for styling and JavaScript for interactive features.<\/p>\n<h3 data-section-id=\"9jvi7\" data-start=\"6052\" data-end=\"6104\">What sections should a portfolio website include?<\/h3>\n<p data-start=\"6105\" data-end=\"6171\">Hero, about, services, projects, testimonials and contact section.<\/p>\n<h3 data-section-id=\"1uatw2v\" data-start=\"6173\" data-end=\"6234\">Why is responsive design important for portfolio websites?<\/h3>\n<p data-start=\"6235\" data-end=\"6318\">Responsive design improves usability across devices and helps with search rankings.<\/p>\n<h3 data-section-id=\"8oai3x\" data-start=\"6320\" data-end=\"6373\">Is a portfolio website good for frontend practice?<\/h3>\n<p data-start=\"6374\" data-end=\"6430\">Yes, it is one of the best real-world frontend projects.<\/p>\n<h2 data-section-id=\"1329ug4\" data-start=\"6437\" data-end=\"6453\">Final Thoughts<\/h2>\n<p data-start=\"6455\" data-end=\"6617\">Building a modern portfolio website using HTML CSS JavaScript is an excellent project for improving frontend skills while creating a professional online presence.<\/p>\n<p data-start=\"6619\" data-end=\"6779\">With responsive layouts, interactive effects, project showcases and modern UI design, this portfolio website can help developers and designers stand out online.<\/p>\n<p data-start=\"6781\" data-end=\"6872\">If you want inspiration for your next frontend project, this is a great project to explore.<\/p>\n<h2 data-start=\"2348\" data-end=\"2491\">Related Website Templates You Should Explore<\/h2>\n<p><a href=\"https:\/\/codebox.keyframetechsolution.com\/admin-dashboard-template-html-css-js\/\">Admin Dashboard Template HTML CSS JavaScript \u2013 Modern Multipurpose Admin Dashboard UI<\/a><\/p>\n<p><a href=\"https:\/\/codebox.keyframetechsolution.com\/autoplay-carousel-html-css-js\/\">Create Responsive Autoplay Carousel using HTML CSS and JavaScript<\/a><\/p>\n<h2 data-section-id=\"1lvlq2e\" data-start=\"6879\" data-end=\"6892\">Source Code<\/h2>\n<p data-start=\"6894\" data-end=\"6976\">Want to explore the complete source code of this modern portfolio website project?<\/p>\n<p data-start=\"6978\" data-end=\"7118\">Access the project files below to study the code structure, customize the design, and use it for learning or personal portfolio development.<\/p>\n<p data-start=\"7120\" data-end=\"7185\"><strong data-start=\"7120\" data-end=\"7185\">Use the source code button below to access the project files.<\/strong><\/p>\n<p><strong><i class=\"fa fa-download\" style=\"color: #046bd2;\"><\/i> 101 people bought this<\/strong><br \/>\n<strong>Grab it Now for Just <i class=\"fa fa-rupee\" style=\"color: #046bd2;\"><\/i><span style=\"color: #046bd2;\">199<\/span><\/strong> <del>\u20b9499<\/del><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating a modern portfolio website using HTML CSS JavaScript is one of the best frontend projects for developers, designers, and [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2382,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[3],"tags":[593,896,522,899,609,897,895,898,894,604],"class_list":["post-2381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-page","tag-animated-portfolio-website","tag-frontend-development-project","tag-html-css-javascript-project","tag-javascript-portfolio-project","tag-modern-portfolio-website","tag-portfolio-website-tutorial","tag-responsive-portfolio-website","tag-ui-ux-portfolio-design","tag-ux-ui-designer-portfolio","tag-web-developer-portfolio"],"acf":[],"_links":{"self":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts\/2381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/comments?post=2381"}],"version-history":[{"count":2,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts\/2381\/revisions"}],"predecessor-version":[{"id":2390,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts\/2381\/revisions\/2390"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/media\/2382"}],"wp:attachment":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/media?parent=2381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/categories?post=2381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/tags?post=2381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}