Using AI Inside Visual Studio Code to Build a Basic Online Bookstore

Using AI Inside Visual Studio Code to Build a Basic Online Bookstore - Part 1¶

Creating a basic online bookstore can be an exhilarating project, especially if you're just getting started with web development. In this blog post, we will walk you through the steps of setting up Visual Studio Code, installing essential extensions, creating foundational files, and using AI tools to enhance your work. This guide is perfect for beginners looking to build a functional and aesthetically pleasing e-commerce website.

Introduction and Setup¶

Let's get started from the very beginning. We will use Visual Studio Code as our coding editor. If you don't have it yet, you can download it and follow the instructions to set it up. Once installed, open Visual Studio Code. You will likely see a start screen with the main menu on the left. Close the welcome menu to access a blank workspace.

Installing Essential Extensions¶

Before diving into coding, we'll install a few essential extensions. Click on the icon that looks like a box with another box floating out of it to access the extensions menu. In the search bar, type "Live Server." Select and install the first option you see. We will also install "Kodi AI," an AI assistant that helps with coding and troubleshooting within Visual Studio Code.

Creating a New Project¶

Now that we have the extensions installed, click on the "Explorer" icon, which looks like a little page upon a page. We'll create a new project by adding a folder. Name this folder "demo projects," and within it, create another folder named "bookstore."

Inside the "bookstore" folder, we will create three new files: index.html, style.css, and script.js. These files will form the backbone of our initial bookstore web page.

Building the Initial HTML Structure¶

Open index.html and start by typing html. Select the "HTML: 5" option for boilerplate HTML code. This includes the necessary tags and structure needed for an HTML document. Inside the body tags, let's write an H1 heading with the text "Static Bookstore."

To view this page, use the "Live Server" extension we installed earlier. Right-click index.html and select "Open with Live Server." You should see a webpage with the heading "Static Bookstore."

Connecting CSS and JavaScript¶

First, we will connect the CSS file. Add a <link> tag right before the closing </head> tag in your index.html. This will point to style.css and looks like this:

<link rel="stylesheet" href="style.css">

Next, go to style.css and add:

* {
    outline: 1px dotted red;
}

This ensures every element has a red dotted outline, making it easier to see where everything is placed.

Now, connect the JavaScript file by adding a <script> tag just before the closing </body> tag:

<script src="script.js"></script>

In script.js, add a simple console log to confirm the connection:

console.log('Hello from the JavaScript file.');

Open the browser's developer tools to see this message.

Using AI for UX Design¶

For a better user experience, we will use AI to create a clean design for our bookstore. Open Kodi AI and start a new chat asking it to help you create a card layout for each book, including a book image, title, author, and description. The AI will generate HTML and CSS code, which you can insert into your project.

Dynamically Generating Book Cards¶

We will use JavaScript to dynamically generate book cards. Create an array of book objects in script.js, each representing a book's details. Write a function to loop through this array and inject book cards into the HTML dynamically. This way, you won't need to hard-code each book's details.

Adding Buy Button Functionality¶

Add a "Buy Now" button to each book card using JavaScript. Style the button with CSS, and use JavaScript to handle click events, eventually linking to a shopping cart functionality.

Conclusion and Next Steps¶

In just 30 minutes, we've set up a brand new project with all the basic files. While the UI is still plain, we have established a foundational structure for our bookstore. In the next installment, we'll add shopping cart functionalities and refine the "Buy Now" button. Stay tuned for more advanced features like categories and a trending section.

By following these steps, you've taken the first big step towards creating your online bookstore. Happy coding!

Feel free to come back for the next steps as we dive deeper into building out our bookstore!