HTML_Advanced_Build_Your_Professional_Portfolio_Website.html - master - ict/techshare_sites

HTML_Advanced_Build_Your_Professional_Portfolio_Website.html
918 строк31 KB
root
Added HTML Basics and HTML Advanced
18 ноя 2025, 13:56
18 ноя 2025, 13:566922e63
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Website Builder - Learning Portal</title>
    <style>
        :root {
            --russian-blue: #0039a6;
            --russian-red: #d52b1e;
            --russian-white: #ffffff;
            --russian-gold: #ffd700;
            --light-blue: #e6f0ff;
            --dark-blue: #002766;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: var(--light-blue);
            color: #333;
            line-height: 1.6;
        }
        
        header {
            background: linear-gradient(to right, var(--russian-blue), var(--russian-red));
            color: var(--russian-white);
            padding: 1rem 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .logo h1 {
            font-size: 1.8rem;
        }
        
        .logo-icon {
            font-size: 2rem;
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 1.5rem;
        }
        
        nav ul li a {
            color: var(--russian-white);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        nav ul li a:hover {
            color: var(--russian-gold);
        }
        
        .hero {
            background-color: var(--russian-white);
            padding: 3rem 0;
            text-align: center;
            border-bottom: 3px solid var(--russian-red);
        }
        
        .hero h2 {
            color: var(--russian-blue);
            margin-bottom: 1rem;
            font-size: 2.2rem;
        }
        
        .hero p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto 1.5rem;
        }
        
        .btn {
            display: inline-block;
            background-color: var(--russian-red);
            color: var(--russian-white);
            padding: 0.8rem 1.5rem;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: var(--dark-blue);
        }
        
        .main-content {
            padding: 3rem 0;
        }
        
        .section-title {
            color: var(--russian-blue);
            border-bottom: 2px solid var(--russian-red);
            padding-bottom: 0.5rem;
            margin-bottom: 2rem;
            font-size: 1.8rem;
        }
        
        .project-structure {
            background-color: var(--russian-white);
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 3rem;
        }
        
        .structure-image {
            max-width: 100%;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 1.5rem 0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .structure-explanation {
            margin-top: 1.5rem;
        }
        
        .structure-explanation h3 {
            color: var(--russian-blue);
            margin-bottom: 1rem;
        }
        
        .structure-explanation ul {
            margin-left: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .structure-explanation li {
            margin-bottom: 0.5rem;
        }
        
        .analogy {
            background-color: var(--light-blue);
            padding: 1.5rem;
            border-left: 4px solid var(--russian-gold);
            margin: 1.5rem 0;
            border-radius: 0 5px 5px 0;
        }
        
        .analogy h4 {
            color: var(--dark-blue);
            margin-bottom: 0.5rem;
        }
        
        .lesson-steps {
            background-color: var(--russian-white);
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 3rem;
        }
        
        .step {
            margin-bottom: 2.5rem;
            padding-bottom: 2rem;
            border-bottom: 1px dashed #ccc;
        }
        
        .step:last-child {
            border-bottom: none;
        }
        
        .step-header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .step-number {
            background-color: var(--russian-red);
            color: var(--russian-white);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 1rem;
        }
        
        .step-title {
            color: var(--russian-blue);
            font-size: 1.4rem;
        }
        
        .code-block {
            background-color: #2d2d2d;
            color: #f8f8f2;
            padding: 1.5rem;
            border-radius: 5px;
            margin: 1.5rem 0;
            overflow-x: auto;
            position: relative;
        }
        
        .code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            color: #ccc;
            font-size: 0.9rem;
        }
        
        .copy-btn {
            background-color: var(--russian-blue);
            color: white;
            border: none;
            padding: 0.4rem 0.8rem;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.8rem;
            transition: background-color 0.3s;
        }
        
        .copy-btn:hover {
            background-color: var(--dark-blue);
        }
        
        .copy-btn.copied {
            background-color: #28a745;
        }
        
        .code-explanation {
            background-color: var(--light-blue);
            padding: 1.5rem;
            border-radius: 5px;
            margin: 1.5rem 0;
        }
        
        .code-explanation h4 {
            color: var(--dark-blue);
            margin-bottom: 0.8rem;
        }
        
        .troubleshooting {
            background-color: #fff8e1;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 3rem;
            border-left: 4px solid #ffc107;
        }
        
        .troubleshooting h3 {
            color: var(--dark-blue);
            margin-bottom: 1rem;
        }
        
        .troubleshooting ul {
            margin-left: 1.5rem;
        }
        
        .troubleshooting li {
            margin-bottom: 0.8rem;
        }
        
        footer {
            background-color: var(--dark-blue);
            color: var(--russian-white);
            padding: 2rem 0;
            text-align: center;
        }
        
        .footer-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .footer-logo {
            margin-bottom: 1rem;
        }
        
        .footer-links {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .footer-links a {
            color: var(--russian-white);
            text-decoration: none;
        }
        
        .footer-links a:hover {
            color: var(--russian-gold);
        }
        
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                text-align: center;
            }
            
            nav ul {
                margin-top: 1rem;
                justify-content: center;
            }
            
            nav ul li {
                margin: 0 0.8rem;
            }
            
            .hero h2 {
                font-size: 1.8rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            .step-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .step-number {
                margin-bottom: 0.5rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <span class="logo-icon">🚀</span>
                    <h1>Portfolio Website Builder</h1>
                </div>
                <nav>
                    <ul>
                        <li><a href="#structure">Project Structure</a></li>
                        <li><a href="#lessons">Lessons</a></li>
                        <li><a href="#troubleshooting">Troubleshooting</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    
    <section class="hero">
        <div class="container">
            <h2>Build Your Professional Portfolio Website</h2>
            <p>Learn HTML, CSS, and JavaScript by creating a complete portfolio website with GitHub API integration, interactive maps, and responsive design.</p>
            <a href="#lessons" class="btn">Start Learning</a>
        </div>
    </section>
    
    <div class="container main-content">
        <section id="structure" class="project-structure">
            <h2 class="section-title">Project Structure</h2>
            <p>Let's start by understanding the folder structure of our portfolio website project:</p>
            
            <!-- Placeholder for the screenshot - in a real implementation, you would embed the actual image -->
            <div class="structure-image">
                <div style="background-color: #f5f5f5; padding: 2rem; text-align: center; border-radius: 5px;">
                    <p style="color: #666; font-style: italic;">[Screenshot of the project structure would be displayed here]</p>
                    <p style="margin-top: 1rem; color: #333;">portfolio-website/<br>
                    ├── index.html<br>
                    ├── resume.html<br>
                    ├── contact.html<br>
                    ├── interests.html<br>
                    ├── github.html<br>
                    ├── 404.html<br>
                    ├── assets/<br>
                    │   ├── css/<br>
                    │   ├── js/<br>
                    │   └── images/<br>
                    └── cv/<br>
                        └── sample-cv.pdf</p>
                </div>
            </div>
            
            <div class="structure-explanation">
                <h3>Understanding the File Structure</h3>
                <p>Our portfolio website is organized into different files and folders, each with a specific purpose:</p>
                
                <div class="analogy">
                    <h4>🏗️ Building Analogy</h4>
                    <p>Think of your website like a house:</p>
                    <ul>
                        <li><strong>HTML files</strong> are the rooms (structure)</li>
                        <li><strong>CSS files</strong> are the paint and decorations (style)</li>
                        <li><strong>JavaScript files</strong> are the electrical system and appliances (functionality)</li>
                        <li><strong>Images folder</strong> is your photo album (visual content)</li>
                    </ul>
                </div>
                
                <h3>Key Files Explained:</h3>
                <ul>
                    <li><strong>index.html</strong> - The main homepage of your portfolio</li>
                    <li><strong>resume.html</strong> - Your professional resume/CV page</li>
                    <li><strong>contact.html</strong> - A page with a contact form for visitors</li>
                    <li><strong>interests.html</strong> - A page showcasing your interests with an interactive map</li>
                    <li><strong>github.html</strong> - A page that displays your GitHub repositories using the GitHub API</li>
                    <li><strong>404.html</strong> - A custom error page for when visitors try to access non-existent pages</li>
                    <li><strong>assets/css/</strong> - Contains all the styling files for your website</li>
                    <li><strong>assets/js/</strong> - Contains JavaScript files that add functionality to your website</li>
                    <li><strong>assets/images/</strong> - Stores all images used throughout your website</li>
                    <li><strong>cv/</strong> - Contains your downloadable CV/resume in PDF format</li>
                </ul>
            </div>
        </section>
        
        <section id="lessons" class="lesson-steps">
            <h2 class="section-title">Learning Steps</h2>
            
            <div class="step">
                <div class="step-header">
                    <div class="step-number">1</div>
                    <h3 class="step-title">Setting Up the Basic HTML Structure</h3>
                </div>
                <p>Let's start by creating the basic HTML structure for our homepage (index.html).</p>
                
                <div class="code-block">
                    <div class="code-header">
                        <span>index.html</span>
                        <button class="copy-btn">Copy Code</button>
                    </div>
                    <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;My Portfolio&lt;/title&gt;
    &lt;link rel="stylesheet" href="assets/css/style.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;header&gt;
        &lt;nav&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="resume.html"&gt;Resume&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="interests.html"&gt;Interests&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="github.html"&gt;GitHub&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
    &lt;/header&gt;
    
    &lt;main&gt;
        &lt;section id="hero"&gt;
            &lt;h1&gt;Welcome to My Portfolio&lt;/h1&gt;
            &lt;p&gt;I'm a web developer passionate about creating amazing digital experiences.&lt;/p&gt;
            &lt;a href="contact.html" class="btn"&gt;Get in Touch&lt;/a&gt;
        &lt;/section&gt;
        
        &lt;section id="about"&gt;
            &lt;h2&gt;About Me&lt;/h2&gt;
            &lt;p&gt;Add your introduction here...&lt;/p&gt;
        &lt;/section&gt;
    &lt;/main&gt;
    
    &lt;footer&gt;
        &lt;p&gt;&copy; 2025 My Portfolio. All rights reserved.&lt;/p&gt;
    &lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                </div>
                
                <div class="code-explanation">
                    <h4>What This Code Does:</h4>
                    <ul>
                        <li><strong>&lt;!DOCTYPE html&gt;</strong> - Declares this is an HTML5 document</li>
                        <li><strong>&lt;html lang="en"&gt;</strong> - Defines the root element with English language</li>
                        <li><strong>&lt;head&gt;</strong> - Contains metadata and links to external resources</li>
                        <li><strong>&lt;meta charset="UTF-8"&gt;</strong> - Ensures proper character encoding</li>
                        <li><strong>&lt;meta name="viewport"&gt;</strong> - Makes the site responsive on mobile devices</li>
                        <li><strong>&lt;body&gt;</strong> - Contains all the visible content of the webpage</li>
                        <li><strong>&lt;header&gt;, &lt;main&gt;, &lt;footer&gt;</strong> - Semantic HTML5 elements for better structure</li>
                    </ul>
                </div>
            </div>
            
            <div class="step">
                <div class="step-header">
                    <div class="step-number">2</div>
                    <h3 class="step-title">Creating the Main CSS Styles</h3>
                </div>
                <p>Now let's add styling to make our portfolio look professional with a Russian-themed color scheme.</p>
                
                <div class="code-block">
                    <div class="code-header">
                        <span>assets/css/style.css</span>
                        <button class="copy-btn">Copy Code</button>
                    </div>
                    <pre><code>/* Russian-themed color scheme */
:root {
    --russian-blue: #0039a6;
    --russian-red: #d52b1e;
    --russian-white: #ffffff;
    --russian-gold: #ffd700;
    --light-blue: #e6f0ff;
    --dark-blue: #002766;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: var(--light-blue);
}

/* Header styles */
header {
    background: linear-gradient(to right, var(--russian-blue), var(--russian-red));
    padding: 1rem 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    color: var(--russian-white);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: var(--russian-gold);
}

/* Hero section */
#hero {
    background-color: var(--russian-white);
    padding: 4rem 2rem;
    text-align: center;
    border-bottom: 3px solid var(--russian-red);
}

#hero h1 {
    color: var(--russian-blue);
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

#hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.btn {
    display: inline-block;
    background-color: var(--russian-red);
    color: var(--russian-white);
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: var(--dark-blue);
}

/* About section */
#about {
    padding: 3rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

#about h2 {
    color: var(--russian-blue);
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Footer */
footer {
    background-color: var(--dark-blue);
    color: var(--russian-white);
    text-align: center;
    padding: 2rem;
    margin-top: 2rem;
}

/* Responsive design */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }
    
    nav ul li {
        margin: 0.5rem 0;
    }
    
    #hero h1 {
        font-size: 2rem;
    }
    
    #hero, #about {
        padding: 2rem 1rem;
    }
}</code></pre>
                </div>
                
                <div class="code-explanation">
                    <h4>CSS Concepts Explained:</h4>
                    <ul>
                        <li><strong>:root</strong> - CSS custom properties (variables) for consistent colors</li>
                        <li><strong>box-sizing: border-box</strong> - Makes element sizing more predictable</li>
                        <li><strong>Flexbox</strong> - Modern CSS layout for responsive navigation</li>
                        <li><strong>Media queries</strong> - Makes the design responsive for different screen sizes</li>
                        <li><strong>CSS transitions</strong> - Adds smooth hover effects</li>
                        <li><strong>Gradient backgrounds</strong> - Creates visually appealing header</li>
                    </ul>
                </div>
            </div>
            
            <div class="step">
                <div class="step-header">
                    <div class="step-number">3</div>
                    <h3 class="step-title">Adding JavaScript for GitHub API Integration</h3>
                </div>
                <p>Let's create dynamic content by fetching data from the GitHub API to display your repositories.</p>
                
                <div class="code-block">
                    <div class="code-header">
                        <span>assets/js/github-information.js</span>
                        <button class="copy-btn">Copy Code</button>
                    </div>
                    <pre><code>// GitHub API integration for portfolio
document.addEventListener('DOMContentLoaded', function() {
    const githubUsername = 'your-github-username'; // Replace with your GitHub username
    const reposContainer = document.getElementById('github-repos');
    
    // Fetch GitHub repositories
    fetch(`https://api.github.com/users/${githubUsername}/repos?sort=updated&per_page=6`)
        .then(response => {
            if (!response.ok) {
                throw new Error('GitHub API request failed');
            }
            return response.json();
        })
        .then(repositories => {
            displayRepositories(repositories);
        })
        .catch(error => {
            console.error('Error fetching GitHub data:', error);
            reposContainer.innerHTML = '<p>Unable to load GitHub repositories at this time.</p>';
        });
    
    // Function to display repositories
    function displayRepositories(repos) {
        if (repos.length === 0) {
            reposContainer.innerHTML = '<p>No repositories found.</p>';
            return;
        }
        
        let html = '<div class="repos-grid">';
        
        repos.forEach(repo => {
            html += `
                <div class="repo-card">
                    <h3><a href="${repo.html_url}" target="_blank">${repo.name}</a></h3>
                    <p>${repo.description || 'No description available'}</p>
                    <div class="repo-stats">
                        <span>⭐ ${repo.stargazers_count}</span>
                        <span>🍴 ${repo.forks_count}</span>
                        <span>📝 ${repo.language || 'Not specified'}</span>
                    </div>
                </div>
            `;
        });
        
        html += '</div>';
        reposContainer.innerHTML = html;
    }
});</code></pre>
                </div>
                
                <div class="code-explanation">
                    <h4>JavaScript Concepts Explained:</h4>
                    <ul>
                        <li><strong>DOMContentLoaded</strong> - Ensures code runs after HTML is fully loaded</li>
                        <li><strong>fetch() API</strong> - Modern way to make HTTP requests in JavaScript</li>
                        <li><strong>Promises</strong> - Handle asynchronous operations (API calls)</li>
                        <li><strong>Template literals</strong> - Easy way to create HTML strings with variables</li>
                        <li><strong>forEach()</strong> - Loop through array of repositories</li>
                        <li><strong>Error handling</strong> - Catch and display errors if API call fails</li>
                    </ul>
                </div>
            </div>
            
            <div class="step">
                <div class="step-header">
                    <div class="step-number">4</div>
                    <h3 class="step-title">Integrating Yandex Maps for Interests Page</h3>
                </div>
                <p>Let's add an interactive map to showcase places of interest using Yandex Maps API.</p>
                
                <div class="code-block">
                    <div class="code-header">
                        <span>assets/js/maps.js</span>
                        <button class="copy-btn">Copy Code</button>
                    </div>
                    <pre><code>// Yandex Maps integration for interests page
function initMap() {
    // Check if Yandex Maps API is loaded
    if (typeof ymaps === 'undefined') {
        console.error('Yandex Maps API not loaded');
        return;
    }
    
    // Initialize the map
    ymaps.ready(function() {
        const map = new ymaps.Map('map-container', {
            center: [55.7558, 37.6173], // Moscow coordinates
            zoom: 10,
            controls: ['zoomControl', 'fullscreenControl']
        });
        
        // Add custom placemarks
        const places = [
            {
                coords: [55.7520, 37.6175],
                title: 'Red Square',
                description: 'Historic square in the heart of Moscow'
            },
            {
                coords: [59.9343, 30.3351],
                title: 'Hermitage Museum',
                description: 'One of the largest museums in the world'
            },
            {
                coords: [56.3269, 44.0059],
                title: 'Nizhny Novgorod Kremlin',
                description: 'Historic fortress in Nizhny Novgorod'
            }
            // Add more places as needed
        ];
        
        // Create placemarks for each location
        places.forEach(place => {
            const placemark = new ymaps.Placemark(
                place.coords,
                {
                    balloonContent: `<strong>${place.title}</strong><br>${place.description}`
                },
                {
                    preset: 'islands#icon',
                    iconColor: '#d52b1e' // Russian red color
                }
            );
            
            map.geoObjects.add(placemark);
        });
        
        // Add behavior: open balloon on click
        map.geoObjects.each(function(geoObject) {
            geoObject.events.add('click', function() {
                geoObject.balloon.open();
            });
        });
    });
}

// Load Yandex Maps API
function loadYandexMaps() {
    const script = document.createElement('script');
    script.src = 'https://api-maps.yandex.ru/2.1/?lang=en_RU&apikey=YOUR_API_KEY';
    script.onerror = function() {
        console.error('Failed to load Yandex Maps API');
        document.getElementById('map-container').innerHTML = 
            '<p>Map could not be loaded. Please check your internet connection.</p>';
    };
    document.head.appendChild(script);
}

// Initialize when page loads
document.addEventListener('DOMContentLoaded', function() {
    loadYandexMaps();
});</code></pre>
                </div>
                
                <div class="code-explanation">
                    <h4>Yandex Maps API Concepts:</h4>
                    <ul>
                        <li><strong>API Key</strong> - You'll need to get a free API key from Yandex</li>
                        <li><strong>ymaps.ready()</strong> - Ensures the map API is fully loaded before initialization</li>
                        <li><strong>Map center and zoom</strong> - Defines the initial view of the map</li>
                        <li><strong>Placemarks</strong> - Markers for specific locations on the map</li>
                        <li><strong>Balloon content</strong> - Popup information displayed when clicking a placemark</li>
                        <li><strong>Error handling</strong> - Graceful fallback if the API fails to load</li>
                    </ul>
                </div>
            </div>
        </section>
        
        <section id="troubleshooting" class="troubleshooting">
            <h3>Troubleshooting Common Issues</h3>
            <p>If you encounter problems while building your portfolio website, here are some solutions:</p>
            <ul>
                <li><strong>Images not displaying:</strong> Check file paths and ensure images are in the correct folder</li>
                <li><strong>CSS not applying:</strong> Verify the link to your CSS file in the HTML head section</li>
                <li><strong>JavaScript not working:</strong> Check browser console for errors and ensure scripts are loaded</li>
                <li><strong>GitHub API not loading repositories:</strong> Verify your username is correct and check browser network tab</li>
                <li><strong>Yandex Map not displaying:</strong> Make sure you have a valid API key and internet connection</li>
                <li><strong>Website looks different on mobile:</strong> Test your media queries and viewport settings</li>
                <li><strong>Links not working:</strong> Check that file paths are correct and files exist</li>
            </ul>
        </section>
    </div>
    
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <h3>Portfolio Website Builder</h3>
                    <p>Learn • Build • Showcase</p>
                </div>
                <div class="footer-links">
                    <a href="#structure">Project Structure</a>
                    <a href="#lessons">Lessons</a>
                    <a href="#troubleshooting">Help</a>
                </div>
                <p>&copy; 2025 Portfolio Website Learning Portal. Designed for educational purposes.</p>
            </div>
        </div>
    </footer>
    
    <script>
        // Copy code functionality
        document.querySelectorAll('.copy-btn').forEach(button => {
            button.addEventListener('click', function() {
                const codeBlock = this.parentElement.nextElementSibling.textContent;
                navigator.clipboard.writeText(codeBlock).then(() => {
                    // Visual feedback
                    const originalText = this.textContent;
                    this.textContent = 'Copied!';
                    this.classList.add('copied');
                    
                    setTimeout(() => {
                        this.textContent = originalText;
                        this.classList.remove('copied');
                    }, 2000);
                }).catch(err => {
                    console.error('Failed to copy code: ', err);
                });
            });
        });
        
        // Smooth scrolling for navigation links
        document.querySelectorAll('nav a, .btn[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>