yogeshtakeo commented 1 year ago

Task 5: CSS Styling and JS Variables in a React Project with Vite

Objective:

Apply CSS styling and use JavaScript variables in a React project created with Vite.

Task Overview

Understand the basics of CSS styling and JavaScript variables.
Apply CSS styles to React components using class names and inline styles.
Utilize JavaScript variables to enhance interactivity in a React project.

Task Details

- Review CSS Styling and JavaScript Variables.

Watch a tutorial video or read articles on CSS styling and JavaScript variables. Youtube video to learn about variables CSS styling methodology Familiarize yourself with the basics of CSS selectors, properties, and values. Understand the concept of JavaScript variables and their usage.

- Set Up a React Project with Vite.

You can also use the normal way that we used to create the vite react project with npx create-vite@latest project_name or Open a terminal or command prompt. Create a new directory for your project: mkdir react-styling-variables cd react-styling-variables Set up a new React project using Vite by running the following command: npm init vite@latest

- Apply CSS Styling.

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 styles.
Add CSS class names to the HTML elements within the component to target them with CSS.
Create a new CSS file (e.g., styles.css) in the src directory and write CSS styles to target the class names used in the component.
Import the CSS file in the component file (e.g.,import './styles.css';) to apply the styles.

Note : Use of proper Stylings UI should be applied padding, margin , border, color, background height , width and the use of px , rem and percentage (%) should be shown in the screenshot submission

- Use JavaScript Variables.

Identify a scenario where you want to enhance interactivity using JavaScript variables.
Declare a JavaScript variable in the component file(e.g., const myVariable = 'Hello, World!';).
Use the JavaScript variable within the component JSX(e.g., <h1>{myVariable}</h1>).

- 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 styles are applied to the targeted elements.
Check that the JavaScript variable is rendered correctly within the component.

Task Submission

Take a screenshot of the rendered semantic components in the browser. Share the screenshot of the output and the code that you have written in the issue comment box. Don't forget to mention GitHub URL and your name in the comment section.