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.

[Namsla]

Namkhang Tsamchoe github link: https://github.com/Namsla/Task4.git

[Jharanatmg]

Jharana github url: https://github.com/Jharanatmg/May-18-Session-II.git

[Jharanatmg]

Jharana

[KabinaThapa]

Kabina Thapa https://github.com/KabinaThapa/react-app-project

[ashmaupret100]

Name: Ashma Upreti Github url: https://github.com/ashmaupret100/second_react_app.git

[sandessth]

Name: Sandesh Shrestha github link: https://github.com/sandessth/jsx-and-css

[dinakc]

Deena KC :-) https://github.com/dinakc/react-semantics.git

[junuthapa011]

Name: Junu Thapa Git URL: https://github.com/junuthapa011/FrontendBootcampTask4.git

[babisha]

[yogeshtakeo]

@Jharanatmg : Contents make the webpage a bit more descriptive , Loved the division of semantics.

@Namsla - you had contents, a little bit of creativity will look good , big ups to you (y)

@KabinaThapa - Woah ! You are picking up good. loving your progress.

@ashmaupret100 - Division is great . Loved it and the content is just right <3

@sandessth - I see you going with more minimalistic approach. i liked it but a bit more practice on the borders and divisions would have been better. we are also learning right :)

@junuthapa011 : Loved all the styling and the layout of the document.

@dinakc I loved the concept of date at the bottom. while all of the contents were there i would recommend you to go all out on the tasks.

@babisha : This is nice . I loved how you are able to catch on even though you were some days late to the class. It means you have a passion on development, right ?

[yogeshtakeo]

@sdhital12 Pending to be completed

[sdhital12]

[sdhital12]

task-4