# Harvard's free web course fills the JavaScript gap for Python FDEs

> Nine free weeks run from fetch to React and CI/CD, and the Harvard Extension version bases 90% of the grade on projects.

Original: https://fdetimes.net/en/books-courses/harvard-cs50-web-javascript-python-fdes/

A Python FDE can build a data pipeline, call an LLM and wire up an agent in a few days. Then the client says "let me try it", and what they need is a web page. That is where many engineers get stuck.

Harvard's CS50's Web Programming with Python and JavaScript is one way to close the gap. The course is free through OpenCourseWare, has nine weeks of material and asks only that you already have experience with one programming language.

For an FDE, this is not learning for its own sake. A demo that runs in the client's browser is often what keeps an engagement moving, and being able to build it yourself means you don't have to wait for anyone.

## What does the course actually teach?

The official page describes CS50 Web as the follow-on to CS50x, going further into the design and building of web applications with Python, JavaScript and SQL. The stack is Django, React and Bootstrap, along with APIs and cloud services such as GitHub and Heroku.

It covers more than an introductory front-end course. The topic list also includes database design, scalability, security and user experience, and the edX listing names the same topics.

The prerequisite is CS50x or prior programming experience, so if you write Python every day you can skip CS50x and go straight in. Over the nine weeks, three ideas are worth an FDE's attention.

## Idea one: JavaScript is code that runs on the client's side

The JavaScript lecture notes (2020 edition) open with a simple point: JavaScript lets you run code on the client side, meaning in the browser. For an engineer who knows only Python, this is exactly the gap, because everything they write runs on a server or in a notebook.

The notes often explain new concepts through things a Python learner already knows. The browser's local storage is described as a set of key-value pairs, much like a Python dict. The lecture also teaches the `fetch` function for sending HTTP requests, which is precisely the integration work an FDE does every week.

Imagine a client has an internal API that returns a list of support tickets, and they want to see how your agent classifies them, with a filter by status. A minimal page needs only a few lines:

```javascript
const select = document.querySelector('#filter');
select.value = localStorage.getItem('filter') || 'open';
select.addEventListener('change', () => {
  localStorage.setItem('filter', select.value);
  location.reload();
});

fetch(`/api/tickets?status=${select.value}`)
  .then(response => response.json())
  .then(tickets => {
    tickets.forEach(t => {
      const li = document.createElement('li');
      li.textContent = `${t.title}: ${t.label}`;
      document.querySelector('#list').append(li);
    });
  })
  .catch(err => console.error('Could not load tickets', err));
```

The second line reads back the saved filter each time the page opens, and falls back to `'open'` if nothing is stored. When the user changes the filter, the new value is written to localStorage and the page reloads, with the filter still in place.

If you think of these two operations as `filters.get('filter', 'open')` and `filters['filter'] = value` in Python, you have most of the idea.

## Common mistakes when putting client data on a page

The most common mistake is assigning API data to `innerHTML`. A single ticket title containing a `` tag or `` is enough for the browser to run it, and your demo becomes an XSS hole on the client's own machine. For data you did not write yourself, use `textContent`.

The second mistake is ignoring the error path. When the client's internal API returns a 401 or times out, a blank page looks like a broken product; one `.catch` line and a clear message can save the whole demo. Security is on the course's topic list, so this is a part to read carefully rather than skim.

## Idea two: don't reload the whole page

The User Interfaces lecture moves learners on to single-page applications: load one page, then use JavaScript to change the DOM, instead of loading a new page on every click. From there the course introduces React, a framework built around components, each with its own state, where the DOM updates itself when the state changes.

For an FDE working in applied AI, this model fits a chat interface for an agent. The state is the list of messages; each time the agent replies, you add an item to the list and React redraws. Without React, you would be hunting down and editing individual DOM nodes by hand, and the demo is likely to break as soon as the client asks a third question.

**Key point:** A demo that runs in the client's browser is more persuasive than any notebook.

## Idea three: tests and CI/CD are your job

The week on Testing and CI/CD is the part many introductory web courses leave out. The notes explain CI/CD, Continuous Integration and Continuous Delivery, as a set of good practices in software development.

At a client site, the code you leave behind will be maintained by someone else after you go. A test suite and an automated pipeline are a more reliable handover than any hand-written document. That is why this week deserves the same weight as the JavaScript week, not treatment as an extra.

## In what order should you study so the nine weeks aren't wasted?

If you already know Python and SQL well, move quickly through the lectures before Lecture 5, stopping only where something is unfamiliar. Put the time saved into three consecutive lectures: Lecture 5 (JavaScript), Lecture 6 (User Interfaces, where React comes in) and Lecture 7 (Testing, CI/CD). Don't just watch the videos.

The syllabus for the Harvard Extension version, Fall 2022 semester, grades five assigned projects and a final project, which together make up 90%; the remaining 10% is for attending sections. That grading belongs to the Extension version, not the free OpenCourseWare one, but it shows the course's creators value what you build with your own hands.

So even on the free version, treat the final project like a real FDE demo: a Django backend calling an API, a React front end, with tests and CI running on GitHub. On your CV, write one concrete line such as "built a Django + React application integrating an external API, with automated tests and CI", plus a link to the repo.

When you read FDE job postings, look for the words React, REST API and CI/CD. If all three are in your repo, you have concrete evidence to point to rather than a list of skills.

Good Python engineers rarely lack the thinking; they just haven't yet got their results onto the client's screen. Nine weeks is a small price for never again having to say "let me ask the front-end team".

**Try this week:**

- Read the JavaScript lecture notes (Lecture 5), then write an HTML page that uses fetch to call a public API and displays the results as a list using textContent
- Save a user's filter with localStorage, treating it like a Python dict, and check that the filter survives a page reload
- Open an FDE job posting you are aiming for, mark the words React, REST API and CI/CD, and compare them with what you have already built

## Sources

- [CS50's Web Programming with Python and JavaScript](https://cs50.harvard.edu/web/)

- [CS50's Web Programming with Python and JavaScript (edX)](https://discover.edx.org/xgs/course/cs50s-web-programming-with-python-and-javascript?hsLang=en)

- [CS50 Web 2020, Lecture 5 notes: JavaScript](https://cs50.harvard.edu/web/2020/notes/5/)

- [CS50 Web 2020, Lecture 6 notes: User Interfaces](https://cs50.harvard.edu/web/2020/notes/6/)

- [CS50 Web 2020, Lecture 7 notes: Testing, CI/CD](https://cs50.harvard.edu/web/2020/notes/7/)

- [CS50 Web Programming with Python and JavaScript, Fall 2022 syllabus](https://cs50.harvard.edu/extension/web/2022/fall/syllabus)