Front-end web development (also known as client-side development) is the process of using HTML, CSS, and JavaScript (along with JavaScript libraries and frameworks) to build graphical user interfaces, for web and mobile applications, that users can view and interact with. Put another way: It's a type of software engineering that powers the visuals and interactions on the web and mobile devices.
Due to modern front-end frameworks like React, Vue, and Angular, web development has shifted significantly to the front-end. More and more, the back-end simply serves up the data for the front-end to manage, prepare, and display to the end user.
The tutorials and articles on TestDriven.io teach how to build and test modern user interfaces with React, Vue, Angular, Svelte, htmx, and Tailwind CSS.
Nik Tomazic
Add session-based authentication to a Single-Page Application (SPA) powered by Django and React.
Nik Tomazic
Add authentication to Django REST Framework and integrate it with Auth.js
Michael Herman
Develop a web app for selling products using Stripe, Vue.js, and Flask.
Michael Herman
Step-by-step walkthrough of how to set up a basic CRUD app with Vue and Flask.
Patrick Kennedy
Leverage the JAMstack with Python and Flask by creating a static site and deploying it to Netlify.
Michael Herman
Step-by-step walkthrough of how to set up a basic CRUD app with Vue and FastAPI.
Patrick Kennedy
Test Pinia data stores in Vue applications.
Amal Shaji
Add session-based authentication to a Single-Page Application (SPA) powered by Flask and Svelte.
Patrick Kennedy
This article serves as a guide for unit testing Vue components.
Amir Tadrisi
Improve Pyodide code maintainability and add a persistent data layer with PouchDB.
Amir Tadrisi
Configure web workers to work with Pyodide and analyze data with Pandas in the browser.
Amir Tadrisi
Build a Single Page Application with Python and Pyodide.
Abdulazeez Abdulazeez Adeshina
Build a CRUD app with FastAPI and React.
Amal Shaji
Add htmx and Tailwind CSS to Flask to improve developer productivity.
Amir Tadrisi
Build a Python code editor in the browser using WebAssembly (WASM), via Pyodide, and CodeMirror.
Amal Shaji
Add htmx and Tailwind CSS to Django to improve developer productivity.
Jace Medlin
Three different methods for combining Flask and Vue.
Caleb Pollman
In part 1, we'll set up the overall project and then dive into developing the UI with Test-Driven Development.
Caleb Pollman
In part 2, we'll finish the UI before we dive in to adding the basic calculator functionality.
Andros Fenollosa
This article looks at a new approach for achieving a Single-page Application (SPA) -- HTML over WebSockets.
Austin Johnston
This articles serves as an introduction to CSS Grid where you'll look at how to create complex grid-based layouts with simple CSS.
Austin Johnston
This article looks at how the useContext and useReducer hooks can be used to make React applications and their state management clean and efficient.
Austin Johnston
An introduction to React Hooks.
Michael Herman
In the following tutorial, we walk you through configuring Cypress to run tests in parallel with CircleCI.
Michael Herman
This post looks at how to introduce Cypress into your test-driven development workflow.
Michael Herman
This post details how to add end-to-end tests to an Angular app with Cypress and Docker.
Pete Jeffryes
This post organizes some of the best tutorials on the web to migrate from Heroku to AWS.
Join our mailing list to be notified about updates and new releases.