Task 4: JSX Semantics

[yogeshtakeo]

Task 4: HTML Semantics and CSS Styling in React JSX

Objective:

Apply HTML semantics and CSS styling in a React JSX component.

Task Overview

• Understand the importance of HTML semantics in web development.
• Implement HTML semantics in a React JSX component.
• Apply CSS styling to the React component using inline styles.

Task Details

Read an article about the importance of HTML semantics in web development. HTML Semantics Link

Create a new React component:

• Open your existing React project or create a new one.

Implement HTML semantics:

1. Inside the App.js, use HTML semantics to structure the content.
2. Add semantic HTML tags such as<header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> to represent different sections of the component's content.
3. Place some placeholder content within each semantic tag (e.g., headings, paragraphs, and lists).
4. Apply CSS styling with inline styles:

Use inline styles in React JSX to apply CSS styling to the semantic components. Select some of the semantic tags you added in the previous step and apply custom CSS styles using the style attribute in the JSX. Experiment with different CSS properties such as background-color, color, font-size, padding, margin, and border.

Render the Semantic components:

1. Import and render the Semantic component in another component
2. Verify that the Semantic components are rendered correctly and the CSS styles are applied through the inspect panel.

Test and refine the styling:

• Open your project in a web browser and inspect the rendered semantic components.
• Adjust the CSS styles and properties as needed to achieve the desired visual appearance.
• Refresh the browser to see the updated styles.

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.

[aniltimalsina]

Name: Anil Timalsina Task 4: JSX Semantics GitHub link: https://github.com/aniltimalsina/jsx-semantics

[mbasnet123456]

Name: Manoj Basnet Task 4: JSX Semantics

App.jsx

App.css

[shantibasnet]

Name: Shanti Basnet Task 4: JSX Semantics https://github.com/shantibasnet/jsx-semantics/tree/master

[sansubed]

Name: Santona Subedi Task 4: JSX Semantics

github repo URL: https://github.com/sansubed/React-JSX-Semantics.git

[Madhv98]

Name: Madhav Dhital Task 4: JSX Semantics

Github link: https://github.com/Madhv98/task4.git

[Roshna07]

Name:Roshna Tuladhar Task#4: JSX Semantics Github:https://github.com/Roshna07/HTML-AND-CSS.git

[Narayanadhikari9]

Name: Narayan Adhikari Task 4: HTML Semantics and CSS Styling in React JSX GitHub Link: https://github.com/Narayanadhikari9/jsx/tree/main/JSX

[samyak1996]

name:Samyak Tuladhar taksk 4: semantic HTML and CSS Github URL: https://github.com/samyak1996/fourth-task-Semantic-CSS

App.jsx

App.css

[Youngbikalp]

Name: Bikalp Timalsina Task 4: JSX Semantics Git Repo URL: https://github.com/Youngbikalp/vite-react-hands-on-day-2/tree/vite-react-hands-on-day-3

[samyak1996]

Missed the webpage screenshot. so attaching here.

[Nimaomu]

Name: Nima O Lama Tak 4: JSX Semantics git url: https://github.com/Nimaomu/task4

[raj-maharjan99]

Name: Raj Kumar Maharjan Task 4 : JSX Semantics Github repo link : https://github.com/samragi99/task4-jsx.git

[ghost]

Name: Prakash Karki Task 4: JSX Semantics GitHub link: https://github.com/karki37/react-html-semantics.git