Lab04: Portfolio 2.0 with Bootstrap

Lab04: Portfolio 2.0 with Bootstrap =================================== **CS195 Full Stack Web Development** **Due**: Tuesday September 30th, 2025, by 11:59pm Objective ------------ Transform your basic portfolio from Lab01 into a professional, responsive showcase using Bootstrap CSS framework. You'll explore component-based styling, experiment with responsive design, and make design decisions that reflect your personal style. --- Prerequisites ---------------- - Completed Lab01 (Portfolio Template) - you have HTML/CSS portfolio content - Basic HTML/CSS knowledge from Labs 02-03 - Understanding of flexbox and CSS layout concepts - **Note:** We'll set up a new repository with proper GitHub Pages access today --- Core Concepts You'll Explore ------------------------------- - CSS framework integration and decision-making - Component-based styling approach - Responsive grid systems and breakpoints - Balancing framework convenience with personal style - Reading documentation and adapting examples - **Bonus:** Setting up GitHub Pages for portfolio hosting --- 📋 Lab04 Submission Guidelines: ------------------------------- **IMPORTANT - Submit via Blackboard:** ### What You'll Submit: 1. **Your Portfolio URL** - the main thing we want to see (hosted on GitHub Pages) 2. **Three Git Checkpoint links** showing your progress 3. **Design decisions reflection** - explain the choices you made ### GitHub Repository: You'll create a new repository today with proper admin access for GitHub Pages hosting. You can copy content from your Lab01 work or start fresh - either approach is fine! --- Getting Started: Portfolio Setup ----------------------------------- ### Setting Up Your Repository :::success **Action Required:** Get your starter code and set up your portfolio **Step 1: Accept the GitHub Classroom assignment** - Click the GitHub Classroom link: [https://classroom.github.com/a/Cw4w0FPa](https://classroom.github.com/a/Cw4w0FPa) - **Accept the assignment** - this creates your personal repository with admin permissions - **Clone the repository** to your computer ```bash! git clone [git repo URL here] cd [repo name] ``` **Step 2: Explore your starter code** - You'll find basic HTML structure with placeholder content - Simple CSS file ready for your customization - Proper file organization and GitHub Pages setup **Step 3: Personalize your content** - Replace placeholder text with your own information - Add your projects from previous labs (Wordle, etc.) - Include your own photos/images if you have them - Update navigation links to match your sections ::: :::danger **Step 4: Commit your initial personalization** ```bash git add . git commit -m "Personalize portfolio content with my information" git push ``` ::: **Ready to Bootstrap!** Now you have a solid foundation to enhance with Bootstrap components. --- Getting Started: Understanding Bootstrap ------------------------------------------- :::info ### What Is Bootstrap? Bootstrap is a CSS framework that provides pre-built components and a grid system. Think of it as a design system with ready-made building blocks. **The Big Question:** How much Bootstrap vs. how much custom styling should you use? There's no right answer - some developers use Bootstrap heavily for rapid prototyping, others use just the grid system and custom style everything else. Today you'll explore both approaches and decide what works for your style. ::: --- Step 1: Add Bootstrap and Explore ------------------------------------ :::success **Action Required:** Get Bootstrap working in your portfolio **Add these to your HTML:** In your `<head>`, before your custom CSS: ```html <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> ``` Before your closing `</body>` tag: ```html <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> ``` **Now experiment:** Save and refresh. What changed immediately? Bootstrap includes a CSS reset and base typography styles. **🔍 Explore Bootstrap Classes:** Open [Bootstrap's documentation](https://getbootstrap.com/) in another tab. Try adding these classes to different elements and see what happens: - `text-center`, `text-primary`, `bg-light` - `p-3`, `m-4`, `border`, `rounded` - `btn btn-primary`, `badge bg-secondary` **Question to consider:** Which of these shortcuts feel useful vs. limiting for your design vision? ::: --- Step 2: Navigation - Framework vs. Custom -------------------------------------------- Let's explore Bootstrap's navbar component, but you'll decide how much to use. **Explore Bootstrap Navigation:** :::info **Option A: Full Bootstrap Navbar** Here's a complete Bootstrap navbar you can adapt: ```html <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="#">Your Name</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"><a class="nav-link" href="#about">About</a></li> <li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li> <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li> </ul> </div> </div> </nav> ``` ::: :::info **Option B: Custom Navigation with Bootstrap Grid** Keep your navigation design but use Bootstrap's responsive utilities: ```html <nav class="your-custom-nav-class"> <div class="container d-flex justify-content-between align-items-center"> <div class="logo">Your Name</div> <ul class="nav-links d-none d-md-flex">  </ul>  </div> </nav> ``` ::: :::success **Your Choice:** Try both approaches. Which feels right for your portfolio's personality? **Design Decision Time:** - Do you want the polished, familiar Bootstrap navbar look? - Or do you prefer maintaining your unique navigation style with Bootstrap's layout helpers? - What about mobile? Bootstrap's collapse component vs. your own solution? ::: :::danger 🔄 **Git Checkpoint #1:** Document your navigation decision ```bash git add . git commit -m "Experiment with Bootstrap navigation - chose [your approach] because [reason]" git push ``` ::: --- Step 3: Layout - Explore the Grid System ------------------------------------------- Bootstrap's grid is one of its most powerful features. Let's understand how it works, then you'll design your layout. :::info **Understanding Bootstrap Grid:** **Basic Structure:** ```html <div class="container">  <div class="row">  <div class="col-md-6">  Content here </div> <div class="col-md-6">  More content </div> </div> </div> ``` **Breakpoints to Know:** - `col-sm` (≥576px), `col-md` (≥768px), `col-lg` (≥992px), `col-xl` (≥1200px) - `col-12` = full width, `col-6` = half width, `col-4` = one-third width **Experiment:** Try these layouts for your hero/about section and see what feels right: ::: :::info **Layout Option 1: Side-by-side** ```html <section class="py-5"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6"> <h1>Your headline</h1> <p>Your intro text</p> </div> <div class="col-lg-6"> <img src="your-image.jpg" class="img-fluid"> </div> </div> </div> </section> ``` ::: :::info **Layout Option 2: Centered content** ```html <section class="py-5"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center">  </div> </div> </div> </section> ``` ::: :::success **Your Design Challenge:** How do you want to lay out your sections? Full-width? Centered? Side-by-side? Try different combinations and see what suits your content. ::: --- Step 4: Projects Section - Components vs. Custom --------------------------------------------------- Here's where you'll make the biggest design decisions. Bootstrap has card components, but you might prefer your own approach. **Explore Project Display Options:** :::info **Option A: Bootstrap Cards** ```html <div class="row g-4"> <div class="col-lg-4 col-md-6"> <div class="card h-100"> <img src="project-image.jpg" class="card-img-top"> <div class="card-body"> <h5 class="card-title">Project Name</h5> <p class="card-text">Project description</p> <a href="#" class="btn btn-primary">View Project</a> </div> </div> </div>  </div> ``` ::: :::info **Option B: Custom Grid with Bootstrap Layout** ```html <div class="row g-4"> <div class="col-lg-4 col-md-6"> <div class="your-custom-project-style">   </div> </div> </div> ``` ::: :::info **Option C: Something Completely Different** Maybe you want a masonry layout, a carousel, or a filterable grid? Bootstrap provides the structure, but the design is yours. ::: :::warning **Questions to Consider:** - Do Bootstrap's cards match your aesthetic vision? - How do you want to highlight your projects differently? - What information is most important to show for each project? - How should the projects behave on mobile? ::: ::: :::success **Design Time:** Spend 15-20 minutes experimenting with different approaches. Don't just use the first thing that works - try multiple options and pick what best represents your style. **Icons Tip:** This is a great place to add icons! Technology badges, external link indicators, or project type icons can help organize information visually. ::: :::danger 🔄 **Git Checkpoint #2:** Document your layout and project decisions ```bash git add . git commit -m "Implement responsive layout and project section with icons - chose [approach] for [reasons]" git push ``` ::: --- Step 5: Adding Icons and Visual Polish ---------------------------------------- Icons can make your portfolio feel more professional and help guide users' attention. Let's explore different approaches. :::info **Icon Library Options:** **Option A: Lucide Icons (Recommended)** Clean, modern icons that work great with any design style: ```html  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> ``` Then use icons like this: ```html  <a href="#" class="btn btn-outline-primary"> <i data-lucide="github"></i> View Code </a>  <div class="skill-item"> <i data-lucide="code"></i> <span>JavaScript</span> </div>  <i data-lucide="mail"></i> email@example.com <i data-lucide="linkedin"></i> LinkedIn Profile ``` ::: :::info **Option B: Material Design Icons** Google's icon system, great for clean, familiar interfaces: ```html  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> ``` Use them like: ```html <span class="material-icons">code</span> <span class="material-icons">email</span> <span class="material-icons">download</span> ``` ::: :::info **Option C: Bootstrap Icons** Designed specifically to work with Bootstrap: ```html  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"> ``` Use with: ```html <i class="bi bi-github"></i> <i class="bi bi-envelope"></i> <i class="bi bi-download"></i> ``` ::: :::success **Your Choice:** Pick one icon library (don't mix them) and experiment with where icons enhance your design. ::: :::warning **🎨 Icon Design Questions:** - Where do icons add clarity vs. just decoration? - Which icon style matches your portfolio's personality? - How can icons help users navigate your content? **Common Places for Icons:** - Social media links - Contact information - Skill lists - Project technologies/tools - Navigation (mobile especially) - Call-to-action buttons **Try This:** Add icons to 2-3 places and see how they feel. Do they make your portfolio more intuitive or just cluttered? ::: **Styling Your Icons:** ```css /* Make icons consistent with your design */ i[data-lucide] { width: 20px; height: 20px; margin-right: 8px; vertical-align: middle; } /* Or for Material Icons */ .material-icons { font-size: 20px; margin-right: 8px; vertical-align: middle; } /* Custom colors and hover effects */ .social-link:hover i { color: var(--your-accent-color); transform: scale(1.1); } ``` --- Step 6: Make It Yours - Custom Styling Strategy -------------------------------------------------- Now for the fun part: adding your personal style while leveraging Bootstrap's foundation. **Styling Strategy Options:** :::info **Approach 1: Bootstrap Theme Customization** Override Bootstrap's CSS variables to change the entire color scheme: ```css :root { --bs-primary: #your-color; --bs-secondary: #your-secondary; --bs-success: #your-accent; /* This changes all Bootstrap components */ } ``` ::: :::info **Approach 2: Selective Overrides** Use Bootstrap for structure, custom CSS for personality: ```css /* Keep Bootstrap's .btn behavior but change appearance */ .btn-primary { background: linear-gradient(45deg, #color1, #color2); border: none; /* Your custom styling */ } /* Use Bootstrap classes but add your flair */ .card:hover { transform: translateY(-10px); /* Your hover effects */ } ``` ::: :::info **Approach 3: Bootstrap + Utility Classes** Use Bootstrap's utility classes for spacing/layout, custom classes for design: ```css .hero-section { /* Your custom background, typography, etc. */ } .project-item { /* Your unique project styling */ } /* Let Bootstrap handle the responsive behavior with col-*, p-*, m-* */ ``` ::: :::success **Your Design Challenge:** What's your strategy? Do you want to embrace Bootstrap's design language or use it mainly for functionality while maintaining your unique style? ::: ::: :::warning **🎨 Design Inspiration Questions:** - What kind of personality do you want your portfolio to have? (Minimal, bold, playful, professional, creative?) - What colors represent you as a developer? - How do you want people to feel when they visit your portfolio? - What makes your portfolio different from everyone else's? Use these answers to guide your styling decisions. ::: --- Step 7: Responsive Design Testing ------------------------------------ :::success **Test Your Design Decisions:** **Required Testing:** 1. **Desktop (1200px+):** Does your layout use space effectively? 2. **Tablet (768px-1199px):** Do elements reflow logically? 3. **Mobile (under 768px):** Is everything accessible and readable? **Testing Tools:** - Browser developer tools device simulation - Actually resize your browser window - Test on your phone if possible ::: :::warning **Questions to Ask:** - Does your navigation work on mobile? - Are your images responsive? - Is text readable at all sizes? - Do your design elements enhance or hinder mobile experience? ::: :::success **Fix Issues You Find:** Bootstrap provides responsive utilities like `d-none d-md-block` (hide on mobile, show on desktop) and responsive spacing classes like `p-2 p-md-4` (smaller padding on mobile). ::: --- Troubleshooting Common Issues -------------------------------- **Bootstrap Not Loading?** - Check CDN links are correct and before your custom CSS - Try hard refresh (Ctrl+F5) **Mobile Menu Not Working?** - Ensure Bootstrap JavaScript is loaded - Check `data-bs-toggle` and `data-bs-target` match your IDs **Spacing Looks Weird?** - Bootstrap adds default margins - you might need to override with utilities like `mb-0` - Custom CSS specificity issues - make sure your custom styles come after Bootstrap **Layout Breaking on Mobile?** - Make sure you're using responsive column classes like `col-md-6` not just `col-6` - Test with real content, not placeholder text --- Step 8: Final Polish and Reflection -------------------------------------- :::success **Polish Your Portfolio:** **Final Check:** - Does your portfolio represent you authentically? - Is it responsive across different devices? - Are all links working? - Is the code clean and commented where helpful? - Does it showcase your projects effectively? **Personal Touch Ideas:** - Custom typography that matches your personality - Unique color scheme that represents you - Subtle animations or hover effects - Personal branding consistency - Creative project presentations ::: :::danger 🔄 **Git Checkpoint \#3:** Portfolio 2.0 ready ```bash git add . git commit -m "Complete Bootstrap portfolio with custom styling - final design reflects [your style choices]" git push ``` ::: Step 9: Publish Your Portfolio with GitHub Pages --------------------------------------------------- Time to make your portfolio live on the internet! ### Action Required: Enable GitHub Pages hosting **Step 1: Go to your repository settings** - Navigate to your GitHub repository in your browser - Click the **"Settings"** tab (near the top right) - Scroll down to the **"Pages"** section in the left sidebar **Step 2: Configure GitHub Pages** - Under **"Source"**, select **"Deploy from a branch"** - Choose **"main"** branch (or **"master"** if that's what you have) - Leave the folder as **"/ (root)"** - Click **"Save"** **Step 3: Wait and get your URL** - GitHub will show you a message: "Your site is ready to be published at..." - **Copy this URL** - this is your live portfolio link! - It may take 2-5 minutes to become active **Step 4: Test your live site** - Visit the URL GitHub provided - Your portfolio should be live and accessible to anyone! - **Bookmark this URL** - you'll submit it to Blackboard ### Troubleshooting: - If the site doesn't load immediately, wait a few minutes and refresh - Make sure your main HTML file is named `index.html` - Check that your latest changes are pushed to GitHub ### 🎉 Congratulations! Your portfolio is now live on the internet. You can share this URL with friends, family, or future employers. Every time you push changes to GitHub, your live site will automatically update! --- Submission Requirements -------------------------- :::danger **Submit to Blackboard:** 1. **Portfolio URL:** Your live GitHub Pages portfolio link (e.g., `https://username.github.io/repository-name`) 2. **Git Checkpoint Links:** All three commit links showing your progress 3. **Screenshots:** - Desktop view of your completed portfolio - Mobile view showing responsive design **Double-check before submitting:** - [ ] Portfolio URL works and loads your complete site - [ ] All three git commit links are clickable and work (I don't need the one where you added your personal info) - [ ] Screenshots show your final design - [ ] Reflection questions are answered thoughtfully ::: --- Reflection Questions ----------------------- :::warning **Design Decision Reflection:** **Design Decision Reflection:** Answer these in your Blackboard submission: 1. **Framework Balance:** What percentage of your final design uses Bootstrap components vs. custom styling? What guided this balance? 3. **Navigation Choice:** Describe your navigation solution. Why did you choose Bootstrap's navbar vs. a custom approach? 5. **Project Presentation:** How did you decide to showcase your projects? What makes your approach different from the default Bootstrap cards? How did icons (if used) enhance the presentation? 7. **Personal Style:** How did you ensure your portfolio reflects your personality while using a framework used by millions of websites? Compare your experience using Bootstrap vs. writing custom CSS from previous labs. ::: --- Optional Challenges ---------------------- Want to push your skills further? **Challenge 1: Advanced Bootstrap Components** Explore modals, carousels, or accordions for your portfolio. How can these enhance user experience? **Challenge 2: Custom Bootstrap Build** Research how to customize Bootstrap variables and build a custom version with only the components you need. **Challenge 3: Performance Analysis** Use browser dev tools to analyze your page load time. How does Bootstrap affect performance? What trade-offs are you making? **Challenge 4: Accessibility Audit** Use accessibility tools to ensure your Bootstrap portfolio is usable by everyone. What accessibility features does Bootstrap provide by default? --- Looking Ahead ---------------- Next week, we'll build an interactive JavaScript game that you can add to your projects section! The professional portfolio you've built today provides the perfect foundation for showcasing all your future work. **Key Skills You've Developed:** - Framework evaluation and decision-making - Responsive design implementation - Balancing efficiency with personal expression - Documentation reading and adaptation - Design system thinking (prepares you for React!) **🎉 Congratulations!** You've created a portfolio that showcases both your technical skills and your design sensibilities. More importantly, you've learned to make informed decisions about when and how to use development frameworks.