Task 5: CSS and JS

[yogeshtakeo]

Task 5: CSS Styling in a React Project with Vite

Objective:

Apply CSS styling 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 cd react-styling Set up a new React project using Vite by running the following command: npm init vite@latest

- Apply CSS Styling.

1. Open your project in a code editor.
2. Identify a React component (e.g., App.js or any other component in the src directory) where you want to apply CSS styles.
3. Add CSS class names to the HTML elements within the component to target them with CSS.
4. 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.
5. 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

- Test and Refine

1. Start the development server by running the following command in the project directory:npm run dev
2. Open your web browser and navigate to the provided local development server URL (e.g., http://localhost:3000).
3. Verify that the CSS styles are applied to the targeted elements.

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.

[shantibasnet]

Name: Shanti Basnet Task 5: CSS and JS https://github.com/shantibasnet/css-jsx/tree/master

[mbasnet123456]

Name: Manoj Basnet Task 5: CSS and JS

[sansubed]

Name: Santona Subedi Task 5: CSS and JS Github Repo URL: https://github.com/sansubed/ReactViteAppTask5.git

[Youngbikalp]

Name: Bikalp Timalsina Task 5: CSS and JS Git Repo URL: https://github.com/Youngbikalp/Task-5-CSS-and-JS.git

[Nimaomu]

Name: Nima O Lama Task 5: CSS Styling in a React Project with Vite Git URL:https://github.com/Nimaomu/css-and-jss

[raj-maharjan99]

Name: Raj Kumar Maharjan Task5- CSS & JS Github repo link: https://github.com/samragi99/task5-practise.git

[Narayanadhikari9]

Name: Narayan Adhikari Task 5: CSS Styling in a React Project with Vite GitHub URL: https://github.com/Narayanadhikari9/CssVariable/tree/main/Varaable

[samyak1996]

Name: Samyak Tuladhar Task 5: CSS Styling in a React Project with Vite GitHub URL: https://github.com/samyak1996/fifth-task-react

[ghost]

Name: Prakash Karki Task 5: CSS and JS Github Repo URL: https://github.com/karki37/css-styling-task5.git

[Roshna07]

Name: Roshna Tuladhar TASK #5: CSS and JS Github: https://github.com/Roshna07/Day-4-css-styling-.git

[Madhv98]

Name: Madhav Dhital Task 5: CSS and JS GitHub: https://github.com/Madhv98/task5.git

[aniltimalsina]

Name: Anil Timalsina Task 5: CSS Styling in a React Project with Vite Github URL: https://github.com/aniltimalsina/react-styling