Modernize Your Portfolio with Bootstrap and GitHub Copilot

From the creator

Modernize your portfolio website with Bootstrap 5 and GitHub Copilot. Use AI to add a responsive layout, accessible navigation, animated cards, skill badges, hover effects, and a sticky footer without rebuilding the website from scratch. Episode 9 of 10 in Build your personal brand with Copilot. Continue to Episode 10 and explore the full series: https://aka.ms/student-learning-series-website Build your personal brand with Copilot is a beginner-friendly Microsoft Developer series for students. Follow Microsoft employees as they use GitHub Copilot, Visual Studio Code, GitHub Pages, Microsoft Foundry, MCP servers, and agent skills to create, publish, and improve a professional portfolio website. In this episode: 0:00 Welcome and opening the portfolio in GitHub Copilot 0:45 Reviewing the current website in the canvas 1:08 Identifying design and interaction improvements 1:45 Asking Copilot to suggest modernization options 2:10 Comparing Bootstrap, Tailwind CSS, and web components 2:31 Prompting Copilot to use Bootstrap 5 3:01 Reviewing suggestions for navigation, cards, and accessibility 3:34 Implementing Bootstrap and animated cards 4:00 Reviewing the first update 4:20 Improving hover animations and shadows 5:05 Turning the skills list into badges 5:43 Adding a footer link back to the top 6:14 Making the footer sticky 6:51 Customization ideas and recap Connect with the presenters: Gwendolyn Vongkasemsiri - Cybersecurity Program Manager at Microsoft: https://www.linkedin.com/

Published 2026-08-21 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.