Guided: Building with HTML and CSS - Part 1

Welcome to Code Labs! Today we're building an interactive webpage for a pie shop using HTML, CSS, and JavaScript. The page will display a selection of pies in a modern grid layout and allow users to add pies to a shopping cart.

Steps:

1. We'll start by building the basic HTML structure, adding links, images, and buttons.
2. Next, we'll style our page using CSS, learning about CSS Grid, and responsive design techniques.
3. Lastly, we'll use JavaScript to make our buttons interactive, adding pies to the shopping cart.

By the end of this lab, you'll have hands-on experience building an interactive webpage from scratch. You'll learn practical skills in HTML, CSS, and JavaScript that form the foundation of web development.

Where we are heading!

If you're ready, click on to the first task.

In this step we are going to build out the pie grid HTML structure. All of your code will be done inside /pies.html. Once you have completed the tasks above, refresh the Web Browser tab and use the button in the top-right corner to open it into a new tab. Remember to navigate to /pies.html to see the changes.

Now we have to style it! If you're ready, click to move on.

In this step we are going to style the pie grid HTML structure. All of your code will be done inside styles.css and you will see your changes at /pies.html. Once you have completed the tasks above, refresh the Web Browser tab and use the button in the top-right corner to open it into a new tab. Remember to navigate to /pies.html to see the changes.

Next we have to create the Add to Cart functionality. If you're ready, click to move on!

In this step we are going create the Add To Cart functionality that simualates adding an item to a cart. Your code will be in script.js and you will add the HTML button in pies.html. Nice! At this point your pies.html should be fully functional. You can see your pies in a grid and add them to the cart.