Web Development Skill Tutorial

Learn the fundamentals of modern web development by building your very own portfolio website! This hands-on tutorial covers project planning, setting up a React + TypeScript project with Vite, styling with Tailwind CSS, and more.

Welcome

• Who is this for: Developers who want to improve their web development skills, learn best practices, and build a professional portfolio website.
• What you'll learn:
  • How to plan a web project and define requirements
  • Setting up a Vite project with React and TypeScript
  • Styling with Tailwind CSS and responsive design techniques
  • Building reusable React components and implementing state management
  • Integrating external APIs, error handling, and CI/CD deployment workflows
• What you'll build: A basic portfolio website that showcases your skills, projects, experience and more.
• Prerequisites: Basic programming knowledge and familiarity with HTML, CSS, and JavaScript.
• Estimated Time: This exercise typically takes at least one day to complete.

In this exercise, you will:

1. Set up a React + TypeScript project with Vite.
2. Plan your project by defining requirements and user stories.
3. Build and style a portfolio website using Tailwind CSS.
4. Implement fundamental and advanced React patterns, including state management.
5. Integrate APIs and configure environment variables for dynamic content.
6. Set up GitHub Actions for testing, building, and automated deployment.

How to Start This Exercise

Important

This exercise assumes basic programming knowledge.

Simply copy the exercise to your account and then refresh the page after a brief wait.

Having trouble? 🤷

When copying the exercise, we recommend the following settings:

• Use node version 20.

• You can also chase the chapter number in the .github/steps/-steps.txt file to start at a specific chapter.

• For owner, choose your personal account or an organization to host the repository.

• We recommend creating a public repository, since private repositories will use Actions minutes.

• If the exercise isn't ready in 20 seconds or you want to troubleshoot the exercise errors, please check the Actions tab and the corresponding workflow logs.

• Check to see if a job is running. Sometimes it simply takes a bit longer.

• If the page shows a failed job, please submit an issue. Nice, you found a bug! 🐛

---

© 2025 GitHub • Code of Conduct • MIT License