Personal Portfolio Website
Q1. Can you explain your Personal Portfolio Website project?
👉 Answer:
I built a fully responsive personal portfolio website using HTML, CSS, and JavaScript. It
showcases my skills, academic background, and projects with a clean and modern UI. The
website adapts well to different devices like desktops and mobiles using responsive design
techniques, making it easy for anyone to view my profile and projects.
Q2. Why did you choose HTML, CSS, and JavaScript for this project?
👉 Answer:
I chose HTML to structure the content, CSS for styling, and JavaScript to add interactivity.
These are essential web development technologies and good for building a fast, simple, and
responsive website. This project helped me improve my frontend skills and understand web
development basics.
Q3. How did you make the website responsive?
👉 Answer:
I used CSS Media Queries to adjust layouts based on screen size. I also used flexible units like
percentages and viewport units, and ensured images and other elements scale properly across
devices. I tested the website on different screen sizes to confirm smooth performance.
Q4. What challenges did you face in this project?
👉 Answer:
One challenge was ensuring consistent design across different devices. Initially, some elements
didn’t align properly on smaller screens, so I learned to use media queries effectively and adjust
the CSS grid and flexbox layouts to handle various resolutions.
Q5. How did you deploy your portfolio website?
👉 Answer:
I deployed it using GitHub Pages. I pushed my code to a GitHub repository and enabled GitHub
Pages from the settings, making my website publicly accessible through a URL.
Q1. What is the folder structure of your project?
👉 Answer:
My project has a simple structure:
index.html for the main page
style.css for styling
script.js for interactivity
An assets folder for images and icons
This keeps the project organized and easy to maintain.
Q2. How did you optimize your portfolio website for faster loading?
👉 Answer:
I compressed images, used proper alt tags, and minimized unnecessary CSS/JS. I also used
external CSS and JS files for caching benefits. These steps improved loading speed and SEO.
Q3. Did you use Flexbox or Grid? Why?
👉 Answer:
Yes, I used both. Flexbox was used for one-dimensional layouts (like aligning nav items), and
CSS Grid was used for two-dimensional layouts (like arranging sections in rows and columns).
Using both gave me flexibility and cleaner code.
Q4. How did you test your website’s responsiveness?
👉 Answer:
I tested using browser dev tools (Chrome’s device toolbar) to check for different screen sizes. I
also tested on my mobile phone and laptop to ensure a smooth experience.
Q5. How did you ensure cross-browser compatibility?
👉 Answer:
I followed standard HTML5 and CSS3 practices, avoided experimental features, and tested on
major browsers like Chrome, Edge, and Firefox. I also used CSS prefixes where necessary for
compatibility.
Q6. What SEO techniques did you apply in your portfolio website?
👉 Answer:
I added meta tags, alt text for images, semantic HTML tags (like <header>, <section>,
<footer>), and proper page titles. These make the website more search engine friendly.
Q7. Did you add any animations or transitions? How?
👉 Answer:
Yes, I added CSS transitions and hover effects to buttons and navigation links for a modern look.
For example, when hovering over a project card, it slightly enlarges using transform: scale()
and transition.
Q8. If you had to improve this project further, what would you add?
👉 Answer:
I would add:
A contact form with backend integration,
Dark mode toggle using JavaScript,
Analytics to track visitors,
Deployment with a custom domain for a professional look.
Q9. Why did you choose to build a personal portfolio instead of some other project?
👉 Answer:
Because a portfolio represents my skills and acts as a live resume. It also gave me hands-on
experience with frontend development and responsive design, which are important skills for
software roles.
Q10. How did you handle navigation in your portfolio site?
👉 Answer:
I created a navigation bar with anchor links that scroll smoothly to different sections of the page
(like About, Skills, Projects, Contact). I used JavaScript to add smooth scrolling behavior.
Q11. Did you use any frameworks or libraries?
👉 Answer:
No, I built this project using only HTML, CSS, and JavaScript to strengthen my fundamentals.
However, if required, I could use frameworks like Bootstrap or Tailwind to speed up styling.
Q12. What is the difference between inline, internal, and external CSS? Which one did you
use?
👉 Answer:
Inline CSS → inside the element tag (not recommended, reduces readability)
Internal CSS → inside <style> in HTML file (good for small projects)
External CSS → separate .css file linked to HTML (best for maintainability)
I mainly used external CSS for my project.
Use of JavaScript in my Portfolio Website
1. Smooth Scrolling – When I click on a menu item (like “Projects”), the page scrolls
smoothly instead of jumping.
2. Navigation Highlight – While scrolling, the active section in the navbar gets highlighted.
3. Form Check – If someone fills a contact form, JavaScript checks if the email or name is
correct before submitting.
4. Menu Toggle – On mobile, I used JavaScript to open/close the hamburger menu.
5. Animations – Simple effects like fading in text or enlarging project cards were done
using JS.
