UI Layout Task – Assignment Task
📄 Task Overview This is the assignment task given by Online Munim, focused on building a structured UI layout using React, HTML, CSS, and Bootstrap.
The goal was to create a dashboard-style layout consisting of:
A fixed Top NavBar
A Left Sidebar
A Right Sidebar
A central Content area with basic responsive layout
This project helped me improve my practical knowledge of component structuring, layout techniques, and styling .
✨ Features 🧱 Modular React Component Structure
NavBar
SideBar
RSideBar
Content1, Content23P, etc.
🎨 Responsive Layout using Bootstrap Grid & Flexbox
🎯 Font and icon integration with React Icons
💻 Clean component-based UI architecture
🧠 What I Learned Structuring reusable components in React
Using Bootstrap for layout and spacing
Handling sidebar positioning with CSS + Flex
Working with Font and icon styling
Managing UI alignment issues (padding, margin, flex)
🛠 Tech Stack
React.js --->UI Components & Logic
Bootstrap --->Layout & Styling
HTML + CSS --->Base structure & styles
React Icons --->UI Icons
VS Code --->Development Environment
📁 Project Structure
assignment-2/ ├── public/ │ └── nav-profile.svg
├── src/
│ ├── components/
│ │ ├── NavBar/
│ │ ├── SideBar/
│ │ ├── RSideBar/
│ │ ├── Content1/
│ │ └── Content23P/
│ ├── App.jsx
│ └── index.js ├── package.json ├── README.md
└── Assignment_Output.png/ <-- Output screenshot
📸 Output Screenshots The output screenshot is saved as the Assignment_Output.png file in this repo.
💡 How to Run
git clone https://github.com/Maheshs-Github/Assignment-2
cd assignment-2
npm i
npm start
🙏 Acknowledgment
This task was given as part of a assignment by Online Munim.
I sincerely thank the team & HR for this opportunity, which allowed me to apply and improve my skills through a hands-on React-based UI task.