Task 7: CSS Layout and Printing Class Profiles in a React Project with Vite
Task Overview
Understand the concepts of flow layout, position layout, and flexbox in CSS.
Implement different CSS layout techniques in a React component.
Create a list of class profiles and print them in a React project.
Task Details
Apply CSS Layout Techniques:
Open your project in a code editor.
Identify a React component (e.g., App.js or any other component in the src directory) where you want to apply CSS layout techniques.
Experiment with flow layout, position layout, and flexbox to create different layout structures within the component.
Use appropriate CSS properties, such as display, position, float, margin, padding, and flex, to achieve the desired layouts.
Create a List of Class Profiles:
Declare an array of objects in the component file, representing the profiles of every person in the class. Each object should contain properties like name, age, hobbies, etc.
Render the list of profiles within the component JSX using JavaScript's map() function to iterate over the array.
Use appropriate HTML elements to structure and display the profile data for each person.
[
{
"name": "Alice",
"age": 25,
"hobbies": ["Reading", "Gardening", "Cooking"],
"bio": "Alice is a passionate learner who enjoys exploring new technologies."
},
{
"name": "Bob",
"age": 27,
"hobbies": ["Playing guitar", "Hiking", "Photography"],
"bio": "Bob is a creative individual who loves expressing himself through music and capturing moments with his camera."
},
{
"name": "Charlie",
"age": 23,
"hobbies": ["Painting", "Writing", "Soccer"],
"bio": "Charlie is an artist at heart, always seeking inspiration from various forms of art."
},
{
"name": "David",
"age": 29,
"hobbies": ["Swimming", "Traveling", "Programming"],
"bio": "David is an adventurer who is passionate about coding and exploring the world at the same time."
}
]
Test and Refine:
Start the development server by running the following command in the project directory npm run dev
Open your web browser and navigate to the provided local development server URL (e.g.,http://localhost:3000).
Verify that the CSS layout techniques are applied correctly within the component.
Check that the list of class profiles is rendered and displayed as expected.
Task Submission
Take a screenshot of the web browser displaying the rendered React component with CSS layouts and the list of names.
Share the screenshot
Optionally, submit the code files (App.js and any other relevant files) for review with the GitHub Repositary.
Task 7: CSS Layout and Printing Class Profiles in a React Project with Vite
Task Overview
Task Details
Apply CSS Layout Techniques:
display, position, float, margin, padding, and flex,
to achieve the desired layouts.Create a List of Class Profiles:
name, age, hobbies, etc.
map()
function to iterate over the array.Test and Refine:
npm run dev
http://localhost:3000
).Task Submission