Setup a Dev Environment

Welcome to Jyn's Basics of Engineering Environments

Designer Development Environment Setup Guide

Pre-Workshop Checklist

Please install the following before the workshop:

GitHub Desktop - Download GitHub Desktop
Cursor - Download Cursor

Workshop Steps

1. Create GitHub Account

Go to github.com
Click "Sign up"
Choose a username (tip: use something professional)
Verify your email address

2. Set Up GitHub Desktop

Open GitHub Desktop
Click "Sign in to GitHub.com"
Sign in with your GitHub account
Configure your Git settings:
- Name: Your full name
- Email: The email you used for GitHub
Click "Finish"

3. Create Your Projects Folder

Open GitHub Desktop
Go to Preferences/Options → Integrations
Note the default folder location (usually ~/Documents/GitHub)
This is where all your projects will live!

4. Fork the Repository

Go to the original repository on GitHub
Click the "Fork" button (top right)
Select your account as the destination

5. Clone Your Fork with GitHub Desktop

Click "Clone a Repository from the Internet..."
Go to the "GitHub.com" tab
Find your forked repository in the list
Click "Clone"
Wait for the download to complete

6. Open in Cursor

In GitHub Desktop, click "Open in Visual Studio Code" button
If Cursor isn't listed, click "Open in..." and browse to Cursor
Or simply open Cursor and File → Open Folder → select your project

7. Create Your First Branch

In GitHub Desktop, click "Current Branch" dropdown
Click "New Branch"
Name it something descriptive (e.g., "add-my-bio")
Click "Create Branch"

Git Concepts for Designers

Key Terms

Repository (Repo): A project folder tracked by Git
Fork: Your personal copy of someone else's repository
Clone: Download a repository to your computer
Branch: An independent line of development (like a Figma branch)
Commit: A saved snapshot of your changes (like saving a Figma file)
Push: Upload your changes to GitHub
Pull: Download changes from GitHub

Visual Workflow

Cursor (Edit)    →    GitHub Desktop (Save)    →    GitHub.com (Share)
     ↓                        ↓                           ↓
  Make changes          Commit changes              Push to cloud

code

GitHub Desktop Interface

┌─────────────────────────────────────────┐
│ Current Repository ▼ │ Current Branch ▼ │
├─────────────────────────────────────────┤
│ Changes │ History                       │
├─────────┴────────────────────────────────┤
│ ✓ file1.md                              │
│ ✓ file2.js          │  Diff View       │
│                     │  - old code      │
│ Summary             │  + new code      │
│ [_______________]   │                  │
│                     │                  │
│ Description         │                  │
│ [_______________]   │                  │
│                     │                  │
│ [Commit to main]    │                  │
└─────────────────────────────────────────┘

code

Cursor Setup for Designers

Why Cursor?

Cursor is an AI-powered code editor that helps you write code faster with AI assistance. Perfect for designers learning to code!

Key Features

AI Chat - Ask questions about your code directly in the editor
AI Autocomplete - Get intelligent code suggestions as you type
Generate Code - Describe what you want and Cursor will write it
Explain Code - Highlight any code and ask Cursor to explain it

Recommended Extensions

GitLens - Visualize Git history
Prettier - Auto-format code
Live Server - Preview HTML files
Color Highlight - See colors in your code
Material Icon Theme - Better file icons

Install Extensions

Open Cursor
Click Extensions icon (or Cmd/Ctrl + Shift + X)
Search and install each extension

Cursor AI Tips

Press Cmd/Ctrl + K to generate code
Press Cmd/Ctrl + L to open AI chat
Highlight code and press Cmd/Ctrl + Shift + L to ask about it

GitHub Desktop Workflow

Making Changes

Edit files in Cursor
See changes in GitHub Desktop (left sidebar)
Review changes in the diff view (right panel)
Write commit message (bottom left)
Click "Commit to [branch]"
Push changes with "Push origin" button

Common Actions in GitHub Desktop

Action	How to Do It
See what changed	Look at the "Changes" tab
Save your work	Write message → Commit
Upload to GitHub	Click "Push origin"
Get latest changes	Click "Fetch origin" → "Pull"
Switch branches	Current Branch dropdown → Select
Create new branch	Current Branch → New Branch
Undo last commit	History → Right-click → "Undo Commit"
Discard changes	Right-click file → "Discard Changes"

Troubleshooting

Make sure you're using the right email/password
Try signing in through the browser instead
Check if two-factor authentication is enabled

"Repository not found" when cloning

Make sure you forked it first
Refresh the repository list (Cmd/Ctrl + R)
Try cloning from URL instead

Changes not showing up

Save your files in Cursor first (Cmd/Ctrl + S)
Click "Fetch origin" to refresh
Make sure you're on the right branch

Merge conflicts

Don't panic! This happens when two people edit the same file
GitHub Desktop will show you the conflicts
Click "Open in Cursor" to resolve
Ask Cursor's AI: "Help me resolve this merge conflict"

"Failed to push"

Click "Fetch origin" first
You might need to pull changes before pushing
Check if you have write access to the repository

Post-Setup Verification

Check Everything is Working:

GitHub Desktop
- Can you see your cloned repository?
- Does it show your GitHub username in the top left?
Cursor
- Can you open your project from GitHub Desktop?
- Try making a small change to see if it appears in GitHub Desktop
Test the Workflow
- Make a small edit (like adding your name to a README)
- See the change in GitHub Desktop
- Commit with a message like "Test commit"
- Push to GitHub
- Check github.com to see if your change is there!

Creating Your First Pull Request

With GitHub Desktop:

Make your changes and commit them
Push to GitHub (Push origin button)
Click "Create Pull Request" button in GitHub Desktop
This opens GitHub in your browser
Add a title describing what you changed
Add a description with more details
Click "Create pull request"
Wait for review and feedback!

Pull Request Best Practices:

Keep changes small and focused
Write clear commit messages
Test your changes first
Add screenshots if it's visual
Be patient with feedback

Next Steps

Make your first commit using GitHub Desktop
Create your first pull request
Join team Slack/Discord
Star the repository you're working on
Explore other repositories to fork and contribute to

Resources

Remember: GitHub Desktop handles all the complex Git stuff for you. Focus on creating, not on commands!

🎨 Designer-Friendly Resources

Visual Learning

Flexbox Froggy - Learn CSS flexbox with a game

Design to Code Tools

Figma to Code - Export designs as code

💡 Quick Tips

GitHub Desktop Shortcuts

Cmd/Ctrl + Shift + A - Open in Cursor
Cmd/Ctrl + Shift + F - Open in Finder/Explorer
Cmd/Ctrl + R - Refresh repository
Cmd/Ctrl + P - Push changes
Cmd/Ctrl + Shift + P - Pull changes

Cursor AI Commands

Cmd/Ctrl + K - Generate code
Cmd/Ctrl + L - Chat with AI
Highlight + Cmd/Ctrl + K - Edit selection
Highlight + Cmd/Ctrl + L - Ask about selection

Common Gotchas

Always save files before checking GitHub Desktop
Pull before push to avoid conflicts
Small commits are better than large ones
Test locally before pushing
Read error messages - they usually tell you what's wrong!

🚀 Starter Code Examples

Simple JavaScript Interactions

// Change colors on click
document.querySelector('.color-button').addEventListener('click', () => {
    document.body.style.backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16);
});

// Show/hide elements
function toggleElement(id) {
    const element = document.getElementById(id);
    element.style.display = element.style.display === 'none' ? 'block' : 'none';
}

// Smooth scroll to section
function scrollToSection(sectionId) {
    document.getElementById(sectionId).scrollIntoView({ 
        behavior: 'smooth' 
    });
}

code

React Component (Advanced)

// A simple component designers might build
function DesignCard({ title, description, imageUrl }) {
    return (
        <div className="card">
            <img src={imageUrl} alt={title} />
            <h3>{title}</h3>
            <p>{description}</p>
            <button>Learn More</button>
        </div>
    );
}

code

🎯 Designer Challenges

Week 1: HTML/CSS

Create a personal bio page
Style it with your brand colors
Make it responsive

Week 2: JavaScript

Add dark mode toggle
Create an image gallery
Add hover animations

Week 3: Git/GitHub

Fork a project
Fix a typo in docs
Submit your first PR

Week 4: Build Something!

Portfolio site
Design system docs
Interactive prototype

🔗 Communities

Designer-Coders

Designer Hangout Slack
CodePen - Share code sketches
Dribbble - Design + code shots
Dev.to - Friendly dev community

Getting Help

Stack Overflow - Q&A
MDN Web Docs - Web reference
CSS-Tricks - CSS tutorials
Can I Use - Browser support

📚 Recommended Learning Path

HTML/CSS (2-4 weeks)
- Structure & styling
- Flexbox & Grid
- Responsive design
JavaScript Basics (2-4 weeks)
- Variables & functions
- DOM manipulation
- Event handling
Version Control (1 week)
- GitHub Desktop
- Commits & branches
- Pull requests
Framework (4-8 weeks)
- React or Vue
- Components
- State management
Build Projects!
- Start small
- Copy things you like
- Make it your own

Remember: Every developer was once a beginner. You're a designer - you already understand user experience, visual hierarchy, and problem-solving. You've got this! 🎨💪

Setup a Dev Environment

Designer Development Environment Setup Guide

Pre-Workshop Checklist

Workshop Steps

1. Create GitHub Account

2. Set Up GitHub Desktop

3. Create Your Projects Folder

4. Fork the Repository

5. Clone Your Fork with GitHub Desktop

6. Open in Cursor

7. Create Your First Branch

Git Concepts for Designers

Key Terms

Visual Workflow

GitHub Desktop Interface

Cursor Setup for Designers

Why Cursor?

Key Features

Recommended Extensions

Install Extensions

Cursor AI Tips

GitHub Desktop Workflow

Making Changes

Common Actions in GitHub Desktop

Troubleshooting

Can't sign in to GitHub Desktop

"Repository not found" when cloning

Changes not showing up

Merge conflicts

"Failed to push"

Post-Setup Verification

Check Everything is Working:

Creating Your First Pull Request

With GitHub Desktop:

Pull Request Best Practices:

Next Steps

Resources

🎨 Designer-Friendly Resources

Visual Learning

Design to Code Tools

💡 Quick Tips

GitHub Desktop Shortcuts

Cursor AI Commands

Common Gotchas

🚀 Starter Code Examples

Simple JavaScript Interactions

React Component (Advanced)

🎯 Designer Challenges

Week 1: HTML/CSS

Week 2: JavaScript

Week 3: Git/GitHub

Week 4: Build Something!

🔗 Communities

Designer-Coders

Getting Help

📚 Recommended Learning Path