Building a Complete Project
• Creating a Portfolio Website
• Presented by: [Your Name]
• Date: [Insert Date]
Introduction
• Objective: Build a fully responsive portfolio
website.
• Key Features:
• - Responsive navbar
• - Hero section
• - About, portfolio, and contact sections.
Planning the Project
• 1. Define structure.
• 2. Design layout.
• 3. Choose technologies:
• - HTML, CSS, JavaScript.
File Structure
• Example:
• - index.html
• - css/
• - styles.css
• - js/
• - script.js
• - images/
Creating the Navbar
• HTML Structure:
• ```html
• <nav>
• <ul>
• <li><a href='#'>Home</a></li>
• <li><a href='#about'>About</a></li>
• </ul>
• </nav>
• ```
Styling the Navbar
• CSS Example:
• ```css
• nav {
• background: #333;
• color: white;
• }
• nav ul {
• list-style: none;
• }
Making Navbar Responsive
• Use Media Queries:
• ```css
• @media (max-width: 768px) {
• nav ul {
• display: flex;
• flex-direction: column;
• }
• }
• ```
Hero Section: HTML Structure
• HTML Example:
• ```html
• <section class='hero'>
• <h1>Welcome to My Portfolio</h1>
• </section>
• ```
Hero Section: Styling
• CSS Example:
• ```css
• .hero {
• background: url('hero.jpg') no-repeat center
center;
• background-size: cover;
• height: 100vh;
• }
• ```
About Section: HTML Structure
• HTML Example:
• ```html
• <section id='about'>
• <h2>About Me</h2>
• <p>Details about yourself.</p>
• </section>
• ```
About Section: Styling
• CSS Example:
• ```css
• #about {
• padding: 2rem;
• background: #f4f4f4;
• }
• ```
Portfolio Section: HTML Structure
• HTML Example:
• ```html
• <section id='portfolio'>
• <h2>My Work</h2>
• <div class='projects'>
• <div class='project'>Project 1</div>
• </div>
• </section>
• ```
Portfolio Section: Styling
• CSS Example:
• ```css
• .projects {
• display: grid;
• grid-template-columns: repeat(auto-fit,
minmax(300px, 1fr));
• gap: 1rem;
• }
• ```
Contact Section: HTML Structure
• HTML Example:
• ```html
• <section id='contact'>
• <h2>Contact Me</h2>
• <form>
• <input type='text' placeholder='Name'>
• <button>Submit</button>
• </form>
• </section>
Contact Section: Styling
• CSS Example:
• ```css
• form {
• display: flex;
• flex-direction: column;
• }
• form input {
• margin-bottom: 1rem;
• }
Adding Responsiveness
• CSS Media Queries:
• ```css
• @media (max-width: 768px) {
• .hero h1 {
• font-size: 2rem;
• }
• }
• ```
JavaScript: Navbar Toggle
• Example:
• ```javascript
• const toggle =
document.querySelector('.toggle');
• const nav = document.querySelector('nav ul');
• toggle.addEventListener('click', () => {
• nav.classList.toggle('show');
• });
• ```
JavaScript: Smooth Scroll
• Example:
• ```javascript
• document.querySelectorAll('a[href^="#"]').for
Each(anchor => {
• anchor.addEventListener('click', function(e) {
• e.preventDefault();
•
document.querySelector(this.getAttribute('hre
f')).scrollIntoView({
Deployment: GitHub Pages
• Steps:
• 1. Push project to GitHub.
• 2. Go to repository settings.
• 3. Enable GitHub Pages.
Deployment: Netlify
• Steps:
• 1. Create Netlify account.
• 2. Drag-and-drop project folder.
• 3. Get live link instantly.
Custom Domain Setup
• 1. Buy a domain.
• 2. Link domain to GitHub Pages or Netlify.
• 3. Configure DNS settings.
Adding Favicon
• HTML:
• ```html
• <link rel='icon' href='favicon.ico'
type='image/x-icon'>
• ```
Performance Optimization
• 1. Minify CSS and JavaScript.
• 2. Optimize images.
• 3. Use lazy loading for images.
SEO Optimization
• 1. Add meta tags.
• 2. Use semantic HTML.
• 3. Optimize loading speed.
Testing Responsiveness
• Use developer tools to test on:
• 1. Mobile devices.
• 2. Tablets.
• 3. Desktop screens.
Code Example: Complete HTML
• ```html
• <!DOCTYPE html>
• <html lang='en'>
• <head>
• <meta charset='UTF-8'>
• <meta name='viewport'
content='width=device-width, initial-
scale=1.0'>
• <link rel='stylesheet' href='styles.css'>
Project Showcase
• Demonstrate the completed project with:
• 1. Live preview.
• 2. Code walkthrough.
Conclusion
• Built a responsive and deployable portfolio
website.
• Reviewed navbar, sections, and deployment
steps.
Thank You
• Questions? Contact: [Your Email/Website].
