MICROWE LTD TASK FOR FRONT END DEVELOPMENT INTERN

You can use React or Angular with CSS frame work and don’t use AI tools

1. React Route Setup

Task: Set up routing in a React application to navigate between two pages: Homepage and
Contact.

* Requirements: Implement React Router to ensure smooth navigation between pages.

Ensure that each page has its own URL path and can be accessed directly.

2. Header and Footer Components

Task: Create reusable header and footer components for the website.

* Requirements: Design and implement separate header and footer components that maintain
consistent styling and functionality across all pages of the website. Ensure that they are
responsive and adapt to different screen sizes.

3. Landing Page Layout:

Task: Develop the landing page with two components, one using Flexbox and the other using
CSS Grid.

Requirements:

* Create a component using Flexbox for the main content area, displaying information about
the website or product.

* Design another component using CSS Grid to showcase multiple cards containing different
types of content.
* Utilize the map method to dynamically render data onto the cards within the CSS Grid
component.

4. Contact Page/Form Submission:

Task: Implement a contact page with a form for users to submit inquiries.

Requirements:

* Design and build a contact page containing a form with fields for name, email, subject, and
message.

* Handle form submission using successful submission.

Implement form validation to ensure that required fields are filled out correctly before
submission.

Submission successful message.

5. Overall Website Development:

Task: Develop a responsive website incorporating all the above components and features.

Requirements:

Integrate the header, footer, landing page, and contact page into a cohesive website layout.

Ensure the website is responsive and works well on various devices and screen sizes.

Optimize performance by following best practices for code structure, asset optimization, and
minimizing unnecessary re-renders.
 contact us

BANNER IMAGE

Launch fast your great products.

Launch fast your great products. Launch fast your great products. Launch fast your great products.

Start saving your time with Framer Wifreframe Web UI Kit. Start saving your time with Framer Wifreframe Web UI Kit. Start saving your time with Framer Wifreframe Web UI Kit.

Hundreds of premade layouts and templates. Hundreds of premade layouts and templates. Hundreds of premade layouts and templates.

BUTTON BUTTON BUTTON

Launch fast your great products.

10 TRENDS HOME DECORATION For Best HOW TO CLEANING OWN HOME For TI PS CHOICE BEST AGENC Y For House

House Best Cleaning De c oration

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. eiusmod tempor incididunt ut labore et dolore magna aliqua. eiusmod tempor incididunt ut labore et dolore magna aliqua.

HOW TO DRAW HOME DESIGN For TI P S MODELING DECORATION HOME HOW TO IM P RO V E HOME DESIGN For

Cons y sten cy m d o ern Future

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. eiusmod tempor incididunt ut labore et dolore magna aliqua. eiusmod tempor incididunt ut labore et dolore magna aliqua.

quick links Important links quick links

About Us Payment Policy Visit Example

10-14 Perent Road,

Colombo, W11 1EN

Contact Us Privacy Policy Visit Example

Srilanka.

Career Cookie Policy Visit Example

0205 334 3671

[email protected]
Check-list Terms & Conditions Visit Example

Join our newsletter

Enter e-mail address Subscribe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur justo et nunc ultricies, ac consectetur elit

consectetur. Proin nec augue id neque suscipit vehicula. Pellentesque habitant morbi tristique senectus et netus et

connect us
malesuada fames ac turpis egestas. Mauris ac turpis vitae libero sollicitudin venenatis nec in lectus. Sed ac justo et velit

aliquam eleifend. Donec tincidunt, nisi sed luctus luctus, dui eros fermentum orci, non tempus velit neque sit amet leo.
© 2009 - 2023 Sample lorim ipsu. All Rights Reserved.

Integer fringilla magna ut dolor tempor, quis vestibulum neque bibendum. Nulla auctor ligula non dolor accumsan, vel

hendrerit purus volutpat.

 contact us

First name Last name

Email Phone number

Select the option

select the option

Message

Type your message...

Submit

quick links Important links quick links

About Us Payment Policy Visit Example

10-14 Perent Road,
Colombo, W11 1EN Contact Us Privacy Policy Visit Example
Srilanka.
0205 334 3671 Career Cookie Policy Visit Example
[email protected] Check-list Terms & Conditions Visit Example

Join our newsletter

Enter e-mail address Subscribe

Lo rem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur justo et nunc ultricies, ac consectetur elit
consectetur. Proin nec augue id neque suscipit vehicula. Pellentesque habitant morbi tristique senectus et netus et

malesuada fames ac turpis egestas. Mauris ac turpis vitae libero sollicitudin venenatis nec in lectus. Sed ac justo et velit
connect us
aliquam eleifend. Donec tincidunt, nisi sed luctus luctus, dui eros fermentum orci, non tempus velit neque sit amet leo. © 2009 - 2023 Sample lorim ipsu. All Rights Reserved.
Integer fringilla magna ut dolor tempor, quis vestibulum neque bibendum. Nulla auctor ligula non dolor accumsan, vel

hendrerit purus volutpat.