Site icon Qianhe Chen
← Back to Blog

Step into Development: A Beginner's Guide

dev101 developer-tools git github svelte sveltekit react next vue nuxt tailwindcss python vscode ai-tools

This guide outlines essential tools you’ll encounter in development and provides a lightweight checklist to help you navigate the landscape of software development.

1. Code management and collaboration

  • Git: Learn version control to track and manage your code changes — git-scm.com
  • GitHub: Collaborate with others and showcase your projects — github.com
  • Git Flow: A branching model for Git — nvie.com posts
  • Conventional Commits: A specification for adding meaning to commit messages — conventionalcommits.org
  • Markdown: Master this lightweight markup language for documentation — markdownguide.org

2. Front-end and Full-stack Frameworks

Front-end frameworks help build modern, interactive web applications:

  • Svelte: A modern compiler-powered framework for building user interfaces — svelte.dev
  • Vue.js: A progressive JavaScript framework for building user interfaces — vuejs.org
  • React: A JavaScript library for building user interfaces — reactjs.org

Full-stack frameworks provide a full-stack solution (front-end + back-end):

  • SvelteKit: The official application framework for Svelte — kit.svelte.dev
  • Next.js: The React framework for production — nextjs.org
  • Nuxt.js: The intuitive Vue framework — nuxtjs.org

3. UI Component Libraries

UI component libraries can speed up development and help create consistent, attractive UIs:

  • Tailwind CSS: Utility-first CSS framework for rapidly building custom designs — tailwindcss.com
  • Ant Design: A design system for enterprise-level products — ant.design
  • shadcn/ui: Beautifully designed components you can copy and paste — ui.shadcn.com
  • Element Plus: Vue 3 based component library for designers and developers — element-plus.org

4. Design and Development Tools

Tools that enhance your design process and help you inspect/debug your UI:

  • Figma: Collaborative interface design tool — figma.com
  • Chrome DevTools: Built-in developer tools in Chrome — developer.chrome.com
  • Chrome DevTools Intro: Notes on using Chrome DevTools — Feishu doc

5. Python-based Development Tools

Python is widely used across domains. Here are essential Python tools/libraries:

  • Python: A powerful, easy-to-learn programming language — python.org
  • Python Cookbook: Comprehensive guide to Python programming recipes — readthedocs
  • Python Type Hints: Static typing for Python — typing docs
  • pip: The package installer for Python — pip.pypa.io
  • venv: Python’s built-in virtual environment module — venv docs
  • virtualenv: Create isolated Python environments — virtualenv docs
  • conda: Package/dependency/environment management — conda docs
  • pyenv: Simple Python version management — GitHub
  • uv: Extremely fast Python package installer and resolver — docs.astral.sh/uv
  • Black: The uncompromising Python code formatter — black docs
  • FastAPI: Modern, fast web framework for building APIs — fastapi.tiangolo.com
  • PyTorch: Open source machine learning framework — pytorch.org
  • ONNX: Open Neural Network Exchange — onnx.ai
  • NumPy: Fundamental package for scientific computing — numpy.org
  • Pandas: Data analysis and manipulation tool — pandas.pydata.org

When setting up your Python development environment, consider:

  • Environment Management: Use virtual environments (or tools like uv) to isolate dependencies and avoid conflicts.
  • Code Formatting: Use a formatter like Black to keep code consistent across projects.
  • Type Annotations: Use type hints and tools like mypy for static checks to catch errors early.

By selecting and combining these tools, you can build a robust Python development environment tailored to your needs.

Choosing the right editor can significantly improve your development experience:

  • JetBrains IDEs: Professional tools for students (free) and developers — jetbrains.com
  • Visual Studio Code: Free, powerful, rich plugin ecosystem — code.visualstudio.com
  • GitHub Codespaces: Remote dev environment provided by GitHub — feature page
  • Cursor: AI-powered code editor — cursor.sh

Each option has trade-offs:

  • JetBrains IDEs: free for students, feature-rich, user-friendly.
  • VS Code: free, powerful ecosystem, compatible with many technologies.
  • Codespaces: remote environment with good connectivity and pre-configured setups.
  • Cursor: AI-first features; may have stability/compatibility issues depending on your setup.

Explore them and pick the one that fits your workflow.

7. AI-powered Development Tools

AI tools can boost productivity and help with code generation, problem solving, and documentation:

Experiment and keep what truly improves your day-to-day.

8. Other Essential Tools

Tools that help you stay connected and collaborate:

⚠️ Important Safety Notice

As you explore these tools and engage with the tech community, always prioritize your information security and personal safety:

  • Be cautious of potential scams or illegal activities
  • Protect your personal information
  • Verify the authenticity of resources and contacts

Remember: Your actions and their consequences are your own responsibility. The creators and maintainers of this guide are not liable for any misuse or negative outcomes resulting from the use of these tools or resources.

These tools can help you stay connected with the tech community, manage projects efficiently, and collaborate effectively with team members.