Create Visually Appealing Fruit Platter with CSS Flexbox

Introduction

In this project, you will learn how to create a visually appealing fruit platter using CSS Flexbox. The goal is to position the fruits of the same color in the middle of their corresponding color boards, creating a harmonious and aesthetically pleasing display.

👀 Preview

🎯 Tasks

In this project, you will learn:

How to set up a flex container to organize the fruits on the platter
How to position the fruits of the same color in the middle of their corresponding color boards

🏆 Achievements

After completing this project, you will be able to:

Use CSS Flexbox to create a grid-like layout
Center and align elements within a flex container
Effectively organize and present elements on a web page in a visually appealing manner

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"]) css(("`CSS`")) -.-> css/CodingStandardsandBestPracticesGroup(["`Coding Standards and Best Practices`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/AdvancedLayoutGroup -.-> css/flexbox("`Flexbox`") css/CodingStandardsandBestPracticesGroup -.-> css/comments("`Comments`") subgraph Lab Skills css/selectors -.-> lab-300081{{"`Visually Appealing Fruit Platter`"}} css/colors -.-> lab-300081{{"`Visually Appealing Fruit Platter`"}} css/display_property -.-> lab-300081{{"`Visually Appealing Fruit Platter`"}} css/flexbox -.-> lab-300081{{"`Visually Appealing Fruit Platter`"}} css/comments -.-> lab-300081{{"`Visually Appealing Fruit Platter`"}} end

Set Up the Project Structure

In this step, you will learn how to set up the project structure.

To get started, open the editor. You should see some files — index.html、style.css and images from your editor.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Set Up the Flex Container

In this step, you will learn how to set up the flex container to organize the fruits on the platter.

Open the index.css file in your code editor.
Inside the #pond selector, add the following CSS properties:

#pond {
  /* TODO: Add your CSS code here */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

The display: flex property sets the #pond element as a flex container, allowing us to use flexbox layout to position the fruits.

The flex-direction: column property stacks the flex items (the fruit containers) vertically.

The flex-wrap: wrap property allows the flex items to wrap to the next line if they don't fit on the current line.

The finished result is as follows:

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.

Visually Appealing Fruit Platter