Web Development & Design Mentorship Session

🎯Session Overview

Welcome to our comprehensive 2-hour mentorship session! Today we'll cover three essential skills for modern web development: version control with GitHub Desktop, design prototyping with Figma, and fundamental HTML structures.

📅 Session Timeline

0:00-0:30

GitHub Desktop fundamentals and setup

0:30-1:00

Version control workflow and collaboration

1:00-1:30

Figma design tool mastery

1:30-2:00

HTML lists, tables, and forms

🎓 Learning Objectives

Master GitHub Desktop interface and core features
Understand version control workflows and collaboration
Create professional designs using Figma
Build semantic HTML lists, tables, and forms
Apply modern CSS styling techniques

🔧GitHub Desktop Mastery

What is GitHub Desktop?

GitHub Desktop is a user-friendly graphical interface for Git version control, making it easy to manage repositories, track changes, and collaborate with others without command-line complexity.

🚀 Getting Started

Download from desktop.github.com
Sign in with your GitHub account
Configure your name and email
Choose your default editor

🏗️ Core Concepts

Term	Definition	Usage
Repository	A project folder tracked by Git	Contains all project files and history
Commit	A snapshot of changes	Save progress with descriptive messages
Branch	Parallel version of your project	Develop features without affecting main code
Pull Request	Request to merge changes	Collaborate and review code changes

Exercise 1: Create Your First Repository

Open GitHub Desktop
Click "Create a New Repository"
Name it "my-first-project"
Add a README file
Create and publish to GitHub

📝 Making Changes Workflow

                        1. Make changes to files
                        2. Review changes in GitHub Desktop
                        3. Write descriptive commit message
                        4. Commit to current branch
                        5. Push changes to remote repository
                    

Exercise 2: Your First Commit

Create a new HTML file in your repository
Add some basic HTML content
Return to GitHub Desktop
Review the changes shown
Write a commit message: "Add basic HTML page"
Commit and push changes

Homework Assignment 1

Create a personal portfolio repository with the following structure:

README.md with project description
index.html for your main page
styles.css for styling
images/ folder with a profile photo

Make at least 5 meaningful commits showing your progress. Practice writing good commit messages!

🎨Figma Design Tool

Why Figma?

Figma is a cloud-based design tool that's perfect for UI/UX design, prototyping, and collaboration. It's free to start and runs in your browser!

🎯 Core Features

Tool	Shortcut	Purpose
Move Tool	V	Select and move objects
Frame Tool	F	Create containers/artboards
Rectangle	R	Draw rectangular shapes
Text Tool	T	Add and edit text
Pen Tool	P	Create custom shapes and paths

🎨 Design Principles

Hierarchy: Use size, color, and spacing to guide attention
Consistency: Maintain uniform spacing, colors, and typography
Alignment: Keep elements properly aligned for clean appearance
Contrast: Ensure text is readable and elements stand out
White Space: Use breathing room to improve readability

Exercise 3: Design a Landing Page

Create a new Figma file
Add a desktop frame (1440x1024)
Design a header with navigation
Add a hero section with title and CTA button
Include a features section with icons
Design a footer with contact info

🔧 Advanced Features

                        Components: Reusable design elements
                        Auto Layout: Responsive design system
                        Constraints: How elements resize
                        Styles: Consistent colors and text styles
                        Prototyping: Interactive connections
                    

Exercise 4: Component System

Create a button component with variants
Design a card component for content
Build a navigation component
Use components throughout your design
Create a simple prototype with interactions

Homework Assignment 2

Design a complete mobile app interface:

Create 3-5 screens (login, home, profile, etc.)
Use a consistent color scheme and typography
Build reusable components
Add interactive prototyping between screens
Export your design as developer handoff specs

📄HTML Lists, Tables & Forms

📋 HTML Lists

Lists are fundamental for organizing content. There are three types: ordered, unordered, and definition lists.

                        <!-- Unordered List -->
                        <ul class="feature-list">
                        <li>Responsive design</li>
                        <li>Fast loading</li>
                        <li>SEO optimized</li>
                        </ul>

                        <!-- Ordered List -->
                        <ol class="steps">
                        <li>Plan your project</li>
                        <li>Design the interface</li>
                        <li>Develop the code</li>
                        <li>Test thoroughly</li>
                        </ol>

                        <!-- Definition List -->
                        <dl class="glossary">
                        <dt>HTML</dt>
                        <dd>HyperText Markup Language</dd>
                        <dt>CSS</dt>
                        <dd>Cascading Style Sheets</dd>
                        </dl>
                    

📊 HTML Tables

Tables display structured data in rows and columns. Always include proper headers for accessibility.

                        <table class="data-table">
                        <thead>
                        <tr>
                        <th>Name</th>
                        <th>Role</th>
                        <th>Experience</th>
                        <th>Location</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                        <td>Sarah Chen</td>
                        <td>Frontend Developer</td>
                        <td>5 years</td>
                        <td>San Francisco</td>
                        </tr>
                        <tr>
                        <td>Mike Rodriguez</td>
                        <td>UX Designer</td>
                        <td>3 years</td>
                        <td>New York</td>
                        </tr>
                        </tbody>
                        </table>
                    

📝 HTML Forms

Forms collect user input. Always include proper labels and validation for accessibility and usability.

Contact Form Example

Full Name *

Email Address *

Your Role

Experience Level 0 = Beginner, 10 = Expert

Message *

Subscribe to our newsletter

                        <form class="contact-form" action="/submit" method="POST">
                        <div class="form-group">
                        <label for="name">Full Name *</label>
                        <input type="text" id="name" name="name" required
                        placeholder="Enter your full name">
                        </div>

                        <div class="form-group">
                        <label for="email">Email Address *</label>
                        <input type="email" id="email" name="email" required>
                        </div>

                        <div class="form-group">
                        <label for="message">Message *</label>
                        <textarea id="message" name="message" rows="4" required></textarea>
                        </div>

                        <button type="submit" class="btn">Send Message</button>
                        </form>
                    

Exercise 5: Build a Complete Page

Create an HTML page with navigation using an unordered list
Add a table showing project data
Include a contact form with various input types
Style everything with modern CSS
Make it responsive for mobile devices

Homework Assignment 3

Create a complete business website with:

Homepage with navigation menu (unordered list)
About page with team table
Services page with pricing table
Contact page with comprehensive form
Consistent styling and responsive design
Upload to GitHub using GitHub Desktop

📚Additional Resources

🔧 GitHub Desktop Resources

🎨 Figma Learning Resources

📄 HTML & CSS Resources

💡 Quick Tips for Success

Practice regularly - consistency beats intensity
Join developer communities for support and networking
Build projects that interest you personally
Don't be afraid to experiment and make mistakes
Keep learning new technologies as they emerge
Document your learning journey and share your progress

🎯 Next Steps

Week	Focus Area	Goal
Week 1	GitHub Workflow	Complete 10 commits, create 2 repositories
Week 2	Figma Mastery	Design 3 different interfaces
Week 3	HTML/CSS Practice	Build 5 different page layouts
Week 4	Integration	Combine all skills in one project

Final Challenge Project

Combine all your new skills:

Design Phase: Create a complete website design in Figma with multiple pages and interactive prototypes
Development Phase: Convert your Figma design to HTML/CSS with proper lists, tables, and forms
Version Control: Use GitHub Desktop to track your progress with meaningful commits
Collaboration: Share your repository and get feedback from peers
Deployment: Publish your site using GitHub Pages

📋 Session Checklist

🎓Certificate of Completion