@PriyaNarine welcome to web development!
You'll find a lot of people with many opinions of how to develop for the web.
As a hobbyist/semi-professional, I'd advise you against taking on any projects for real-world publication for a year or so. Why? To give yourself time to really learn and do right by your clients. Even friends who need a pro-bono website are clients.
For learning, you'll do well to avoid anything more than a couple of years old on the Web. That includes most tutorials.
Sitepoint has some good books for starters on design and development. You'll do well to go ahead and subscribe to Learnable (note I'm currently an Ambassador, but would recommend it regardless) so you can go through guided tutorials and download ALL of their digital books.
I recommend https://learnable.com/books/jump-start-html5-basics and https://learnable.com/books/html5-css3-for-the-real-world-2nd-edition for your starters on building static pages / websites.
I would NOT recommend you set up XAMPP. This is an outdated development workflow. When you are ready to start turning out PHP or other server-aware websites you'll be needing a virtual server or rolling out projects on DigitalOcean (or somebody like them).
Instead, see this article [sitepoint.com/taking-advantage-of-phps-built-in-server] to get started with the built-in server likely on your machine.
Tools like CodePen are a great place to tinker with code examples and really test your new skills without working on your machine.
Ultimately, look at this redesign as your graduate school thesis project.
See [learnable.com/books/deliver-first-class-websites-101-essential-checklists] as a broad overview and kind of syllabus.
As you learn about workflow, different tools, server languages, content management systems, frameworks, and command-line tools think and rethink your work. Build it. Scrap it. Rebuild it. Scrap it. Rebuild it. Eventually you'll have a really worthwhile project you can confidently launch to the Web and a pretty good first portfolio piece.