Internship Task – Bootstrap 5 UI Exploration &
Page Design
■ Objective
The objective of this project is to explore and understand Bootstrap 5’s structure and components
while designing clean, modern, and responsive HTML pages. This project aims to demonstrate
proficiency in combining multiple Bootstrap UI patterns into original layouts with creative styling and
responsiveness.
■ Project Overview
The project consists of three fully responsive pages: Home, About, and Contact. Each page
integrates multiple Bootstrap 5 components like navbars, cards, carousels, forms, and modals. The
website is hosted live using GitHub Pages, and the entire code is managed through Git and GitHub
for version control.
■■ Technologies Used
1 HTML5
2 CSS3
3 Bootstrap 5 (via CDN)
4 JavaScript
5 Git & GitHub (Version Control & Hosting)
■ Key Features
1 Responsive Navbar with smooth scrolling.
2 Interactive Carousel (Hero section).
3 Attractive About Page with animated feature cards.
4 Contact Page with working form and modal popup.
5 Consistent styling, spacing, and responsive layout.
■ Project Development Process & Challenges
1. Explored official Bootstrap 5 documentation and examples to understand the structure and
components. 2. Designed base structure (HTML pages and folder setup) using Bootstrap’s grid and
container system. 3. Customized styles with Bootstrap utilities and additional CSS. 4. Integrated a
working contact form using FormSubmit with a success modal popup. 5. Implemented animations
and hover effects to enhance interactivity. 6. Fixed bugs related to carousel transitions and modal
triggers by properly linking Bootstrap JS. 7. Ensured full responsiveness by testing across multiple
screen sizes using Chrome DevTools.
■ Learning Reflection
Through this project, I gained a deep understanding of Bootstrap 5 components, responsive design
principles, and UI/UX best practices. I also learned to debug JavaScript-based features like modals
and carousels. Additionally, I improved my workflow in using Git for version control and GitHub
Pages for deployment.
■■■ Author Information
Name: Poojitha Pasupuleti
Email: poojitha.pasupuleti2004@[Link]
LinkedIn: [Link]/in/poojitha-pasupuleti-01458a302
GitHub: [Link]/poojitha-pasupuleti
■ Expected Outcome
The final project successfully meets the internship task requirements by delivering three polished,
responsive, and modern web pages. It showcases the effective use of Bootstrap 5, proper layout
structuring, responsiveness, and creative UI design. This project stands as a practical
demonstration of both technical skills and design thinking.
