Web development tools for a frontend workflow

A useful web development setup is a small set of tools that makes a task easier. You do not need every editor extension or service. Start with the browser, a code editor, version control, and a way to test the site you are building.

Code editor

A source-code editor helps navigate files, edit markup and styles, and run project-specific tools. Visual Studio Code is one option; use the editor you can configure and maintain. Keep extensions limited to needs such as formatting, language support, or accessibility checks, and review extension permissions.

Browser developer tools

Browser developer tools help inspect the DOM and CSS, check console errors, review network requests, and test responsive layouts. Use the Network panel to find unexpectedly large files and the Accessibility pane where available to inspect names and roles. These tools are built into modern browsers and are useful before adding a dependency.

Source control

Git records code changes so you can compare revisions and recover from mistakes. A hosted repository can make source available to collaborators and visitors. Keep credentials and private configuration out of committed files, and write a short README that explains how to run the project.

Performance and accessibility checks

Use Lighthouse or PageSpeed Insights to identify possible performance, accessibility, SEO, and best-practice issues. Treat a score as a diagnostic snapshot, not a guarantee of real-world experience. Check field data when available and manually test keyboard use, reduced motion, and narrow screens.

Design and deployment

A design tool can help organize page structure and visual decisions before implementation. For small static sites, a static host may be enough; larger sites may need builds, previews, or server features. Choose based on the project rather than a generic “best tools” list, and verify pricing and capabilities on the provider's current documentation.

Official references: Visual Studio Code documentation, Chrome DevTools, and web performance metrics.

See my selected web projects for examples with live and source links.