search

yogeshtakeo / BFS_51

0 stars 0 forks source link

Task 4 : React and CSS #7

Closed yogeshtakeo closed 6 months ago

yogeshtakeo commented 6 months ago

Task 4: CSS Styling in a React Project with Vite

Objective:

Apply CSS styling in a React project created with Vite.

Task Overview

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.
  6. Try to make the design responsive and fluid in nature.
  7. Try to create at least 10 components (button , link , image, containers (div) , etc) and add designs with css

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:5173).
  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.

tarunChand28298 commented 6 months ago

output