{"id":9017,"date":"2025-07-16T09:46:21","date_gmt":"2025-07-16T09:46:21","guid":{"rendered":"https:\/\/www.naukri.com\/campus\/career-guidance\/?p=9017"},"modified":"2025-07-16T10:16:03","modified_gmt":"2025-07-16T10:16:03","slug":"student-web-development-project-no-experience-sap","status":"publish","type":"post","link":"https:\/\/www.naukri.com\/campus\/career-guidance\/student-web-development-project-no-experience-sap","title":{"rendered":"How I Built My First Website Without Any Experience"},"content":{"rendered":"\n<p>Okay, so here\u2019s the thing. I had this college project due, and I really didn\u2019t want to make another boring PowerPoint or poster. I thought, why not make a website?<\/p>\n\n\n\n<p>There was just one problem: I had absolutely no idea how to build a website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.naukri.com\/campus\/pathfinder?utm_source=share_pwa_organic&amp;utm_medium=blogs&amp;utm_campaign=visibility\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"231\" src=\"https:\/\/www.naukri.com\/campus\/career-guidance\/wp-content\/uploads\/2024\/03\/Pathfinder-Banner-1024x231.png\" alt=\"Check role readiness for your career\" class=\"wp-image-5558\" srcset=\"https:\/\/www.naukri.com\/campus\/career-guidance\/wp-content\/uploads\/2024\/03\/Pathfinder-Banner-1024x231.png 1024w, https:\/\/www.naukri.com\/campus\/career-guidance\/wp-content\/uploads\/2024\/03\/Pathfinder-Banner-300x68.png 300w, https:\/\/www.naukri.com\/campus\/career-guidance\/wp-content\/uploads\/2024\/03\/Pathfinder-Banner-150x34.png 150w, https:\/\/www.naukri.com\/campus\/career-guidance\/wp-content\/uploads\/2024\/03\/Pathfinder-Banner-768x173.png 768w, https:\/\/www.naukri.com\/campus\/career-guidance\/wp-content\/uploads\/2024\/03\/Pathfinder-Banner-1536x346.png 1536w, https:\/\/www.naukri.com\/campus\/career-guidance\/wp-content\/uploads\/2024\/03\/Pathfinder-Banner.png 1728w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>What followed were hours of YouTube tutorials, lots of trial and error, and way too many late nights. But somehow, I pulled it off. If you&#8217;re also wondering how to start with web development as a beginner, here\u2019s exactly how I did it\u2014no fancy coding background, no prior experience.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_69_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.naukri.com\/campus\/career-guidance\/student-web-development-project-no-experience-sap\/#Starting_From_Zero_Learning_HTML\" title=\"Starting From Zero: Learning HTML\">Starting From Zero: Learning HTML<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.naukri.com\/campus\/career-guidance\/student-web-development-project-no-experience-sap\/#Hello\" title=\"Hello!\">Hello!<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.naukri.com\/campus\/career-guidance\/student-web-development-project-no-experience-sap\/#CSS_Making_It_Look_Less_Like_a_Word_Document\" title=\"CSS: Making It Look Less Like a Word Document\">CSS: Making It Look Less Like a Word Document<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.naukri.com\/campus\/career-guidance\/student-web-development-project-no-experience-sap\/#JavaScript_Where_the_Fun_and_Frustration_Begins\" title=\"JavaScript: Where the Fun (and Frustration) Begins\">JavaScript: Where the Fun (and Frustration) Begins<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.naukri.com\/campus\/career-guidance\/student-web-development-project-no-experience-sap\/#Bootstrap_Web_Design_for_Lazy_Beginners\" title=\"Bootstrap: Web Design for Lazy Beginners\">Bootstrap: Web Design for Lazy Beginners<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.naukri.com\/campus\/career-guidance\/student-web-development-project-no-experience-sap\/#Putting_It_All_Together_My_First_Website\" title=\"Putting It All Together: My First Website\">Putting It All Together: My First Website<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.naukri.com\/campus\/career-guidance\/student-web-development-project-no-experience-sap\/#Would_I_Recommend_Learning_Web_Dev\" title=\"Would I Recommend Learning Web Dev?\">Would I Recommend Learning Web Dev?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Starting_From_Zero_Learning_HTML\"><\/span>Starting From Zero: Learning HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The first thing I learned was HTML, which is basically the backbone of any webpage\u2014kind of like the skeleton in a body. Not pretty, but 100% necessary.<\/p>\n\n\n\n<p>I started small:<\/p>\n\n\n\n<h1><span class=\"ez-toc-section\" id=\"Hello\"><\/span>Hello!<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n<p>This is my first ever website.<\/p>\n\n\n\n<p>It didn\u2019t look fancy, but seeing it load in the browser was a total win. I even added some images (after messing up the file path at least five times). Small victory.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_Making_It_Look_Less_Like_a_Word_Document\"><\/span>CSS: Making It Look Less Like a Word Document<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>HTML works, but honestly, the page looked like it was built in 2004. That\u2019s where CSS came in, the styling layer. Here\u2019s what I began with:<\/p>\n\n\n\nbody {\n\nbackground-color: lightgray;\n\nfont-family: Arial;\n\n}\n\n\n\n<p>From there, I just played around. Fonts, colors, margins (which I still kind of mess up). I copied code from Google, pasted it, and tweaked things until it looked okay. Slowly, the page started to look semi-professional.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"JavaScript_Where_the_Fun_and_Frustration_Begins\"><\/span>JavaScript: Where the Fun (and Frustration) Begins<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>JavaScript (JS) is what makes websites interactive. This was definitely the trickiest part at first. My first attempt was a basic button that showed a popup message.<\/p>\n\n\n\n<button onclick=\"sayHi()\">Click me<\/button>\n\n<script>\n\nfunction sayHi() {\n\nalert(\"Hi there!\");\n\n}\n\n<\/script>\n\n\n\n<p>It worked \u2014 and honestly, I felt like a hacker.<\/p>\n\n\n\n<p>I even managed to validate form inputs with JavaScript later. It wasn\u2019t always smooth, but it was satisfying to see real-time interaction on the site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bootstrap_Web_Design_for_Lazy_Beginners\"><\/span>Bootstrap: Web Design for Lazy Beginners<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Then someone told me about Bootstrap, and my life changed. Instead of writing tons of CSS, you can just use Bootstrap\u2019s ready-made classes. Add a link to your HTML head like this:<\/p>\n\n\n\n<link rel=\"stylesheet\"\n\nhref=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\">\n\nThen you just do something like:\n\n<button class=\"btn btn-primary\">Click me<\/button>\n\n\n\n<p>Boom \u2014 professional-looking button. No custom CSS needed. This was a huge game-changer for making my site look good with minimal effort.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Putting_It_All_Together_My_First_Website\"><\/span>Putting It All Together: My First Website<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the end, my website had:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A clean intro<\/li>\n\n\n\n<li>An image gallery<\/li>\n\n\n\n<li>A working contact form<\/li>\n\n\n\n<li>Responsive layout thanks to Bootstrap<\/li>\n<\/ul>\n\n\n\n<p>I used HTML for structure, CSS for style, JavaScript for interactivity, and Bootstrap for layout and polish.<\/p>\n\n\n\n<p>I even hosted it on GitHub Pages (highly recommend) so I could share the link with my professor. I was proud of the final result.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Would_I_Recommend_Learning_Web_Dev\"><\/span>Would I Recommend Learning Web Dev?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Yes, 100%. If you\u2019re in college and want your projects to stand out, or just want to explore how websites work, you should try learning web development. It\u2019s not as hard as it looks, and you don\u2019t have to be a full-on coder to make cool things.<\/p>\n\n\n\n<p>Curiosity and caffeine are enough to get you started. Even now, I don\u2019t understand everything. But I can build decent-looking websites, and that\u2019s more than I could say three months ago.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Okay, so here\u2019s the thing. I had this college project due, and I really didn\u2019t want to make another boring PowerPoint or poster. I thought, why not make a website? &hellip; <br \/><a href=\"https:\/\/www.naukri.com\/campus\/career-guidance\/student-web-development-project-no-experience-sap\" class=\"more\">Read More <em class=\"arrow\"><\/em><\/a><\/p>\n","protected":false},"author":62,"featured_media":8810,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2344],"tags":[],"class_list":["post-9017","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sap"],"aioseo_notices":[],"amp_validity":null,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.naukri.com\/campus\/career-guidance\/wp-json\/wp\/v2\/posts\/9017","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.naukri.com\/campus\/career-guidance\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.naukri.com\/campus\/career-guidance\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.naukri.com\/campus\/career-guidance\/wp-json\/wp\/v2\/users\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/www.naukri.com\/campus\/career-guidance\/wp-json\/wp\/v2\/comments?post=9017"}],"version-history":[{"count":0,"href":"https:\/\/www.naukri.com\/campus\/career-guidance\/wp-json\/wp\/v2\/posts\/9017\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.naukri.com\/campus\/career-guidance\/wp-json\/wp\/v2\/media\/8810"}],"wp:attachment":[{"href":"https:\/\/www.naukri.com\/campus\/career-guidance\/wp-json\/wp\/v2\/media?parent=9017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.naukri.com\/campus\/career-guidance\/wp-json\/wp\/v2\/categories?post=9017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.naukri.com\/campus\/career-guidance\/wp-json\/wp\/v2\/tags?post=9017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}