Congratulations on completing the Basic CSS course content! You've made awesome progress and now you're a CSS champion. As you now start on your project, remember that this is your opportunity to showcase everything you've learned.
Project Title: CodeSpace Cafe Debugging Challenge
When we arrange pastries, we want them to look welcoming and show off each one at its best, similar to making code look good on a screen. It's important to place them so there's enough space around each one – this makes each pastry stand out. We want our cafe to feel fun and welcoming, and our pastries should make everyone happy when they see them. Let's get ready and arrange these pastries beautifully, making something special one pastry at a time!
Your task is to debug the CSS at CodeSpace Cafe so that the pastries are neatly in a line.
The HTML includes a counter and four pastry elements, but they are not properly spaced and overlap each other.
Your goal is to identify and fix the CSS properties causing the overlap and ensure that the pastries are positioned in a straight line on the counter, spaced evenly apart like so:
You have everything you need to start your project using the GitHub Starter repo project. This starter repo contains the HTML with all the pastry elements and the CSS you need to debug. Do not change the HTML code.
- Debugging Task: Review the provided HTML and CSS code. Identify the CSS properties causing the pastries to overlap and adjust them to ensure proper spacing and layout. You should aim to position the pastries in a straight line on the counter, spaced evenly apart.
Guidelines:
- Focus on identifying and fixing the CSS properties causing the overlap.
- Ensure the pastries are positioned in a straight line on the counter, spaced evenly apart.
HOW to submit your project
- Submit your GitHub repo link through the LMS. Remember to rename your project with your student number, group number and coach name. You will find this in the LMS [Projects] tab.