yogeshtakeo commented 1 year ago

Task 6: CSS Layout and Printing Names in a React Project with Vite

Objective:

Apply CSS layout techniques (flow layout, position layout, and flexbox) and create a list of names to be printed in a React project created with Vite.

Task Details

Task Creation

Create a react project with Vite that should be linked it with your GitHub repository that you will create with GitHub.

Apply CSS Layout Techniques:

Open your project in a code editor.
Identify a React component (e.g., App.jsx 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 Names:

Declare an array in the component file (e.g.,const names = ['Alice', 'Bob', 'Charlie', 'David'];).
Render the list of names within the component JSX using JavaScript's for loop to print the contents of the array.
Use appropriate HTML elements to structure and display the names.

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 names 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.