The Odin Project Foundations Syllabus

Foundations syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Foundations in The Odin Project, not a summary of it.

1. 1

   Introduction & Prerequisites

   6 topics

   • Introduction to Web Development
   • Motivation and Mindset
   • Asking For Help
   • How Does the Web Work?
   • Installations & Text Editors
   • Command Line Basics
2. 2

   Git Basics

   3 topics

   • Setting up Git
   • Introduction to Git
   • Git Basics
3. 3

   HTML Foundations

   8 topics

   • Introduction to HTML and CSS
   • Elements and Tags
   • HTML Boilerplate
   • Working with Text
   • Lists
   • Links and Images
   • Commit Messages
   • Project: Recipes
4. 4

   CSS Foundations

   5 topics

   • Intro to CSS
   • The Cascade
   • Inspecting HTML and CSS
   • The Box Model
   • Block and Inline
5. 5

   Flexbox

   5 topics

   • Introduction to Flexbox
   • Growing and Shrinking
   • Axes
   • Alignment
   • Project: Landing Page
6. 6

   JavaScript Basics

   8 topics

   • Language Fundamentals
   • Installing Node.js
   • JavaScript Developer Tools
   • Problem Solving
   • Understanding Errors
   • Clean Code
   • DOM Manipulation and Events
   • Foundations Projects

Foundations flashcards for The Odin Project

21 of 50 cards from the Foundations deck — real questions with worked answers.

1. What is the difference between a front-end, back-end, and full-stack web developer?

   A front-end developer builds the parts of a website users see and interact with in the browser (using HTML, CSS, JavaScript). A back-end developer works on the server side: databases, servers, and application logic. A full-stack developer works on both the front end and the back end.

2. What are the distinct roles of HTML, CSS, and JavaScript in a web page?

   HTML provides the structure and content (the raw material), CSS controls the style and presentation (layout, colors, fonts), and JavaScript adds behavior and interactivity (making the page dynamic).

3. What is a growth mindset, and how does it differ from a fixed mindset?

   A growth mindset is the belief that abilities can be developed through effort and practice, so challenges and failures are opportunities to learn. A fixed mindset assumes intelligence and talent are static, so failure is seen as a limit. Learning to code requires a growth mindset because struggling is a normal part of the process.

4. What is 'tutorial hell,' and what is the recommended way to escape it?

   Tutorial hell is endlessly watching or following tutorials while passively copying code without being able to build anything independently. The cure is active learning: build your own projects, struggle through problems yourself, and use tutorials only as references.

5. What is 'rubber duck debugging'?

   A debugging technique where you explain your code and problem out loud, line by line, to an inanimate object (like a rubber duck). Articulating the problem forces you to slow down and often reveals the solution on its own.

6. What is the 'XY problem' when asking for help?

   Asking about your attempted solution (Y) instead of your actual underlying problem (X). Helpers waste time on Y when a better solution to X may exist. Always describe the original problem and end goal, not just the workaround you are stuck on.

7. What should a good programming help question include?

   Context about the goal, the exact code (or a minimal reproducible example), the full error message, what you expected to happen versus what actually happened, and what you have already tried. Show your research effort and don't ask to ask, just ask.

8. List the main steps that happen after you type a URL into a browser and press Enter.

   1) The browser asks a DNS server to resolve the domain name into an IP address. 2) The browser sends an HTTP(S) request to the server at that IP. 3) The server processes the request and sends back a response (HTML, CSS, JS, images) in data packets. 4) The browser assembles the packets and renders the page.

9. What is an IP address?

   An Internet Protocol address: a unique numerical address identifying each device on a network (e.g., 172.217.7.142 for IPv4), used so computers can find and communicate with each other.

10. What is DNS and what problem does it solve?

    The Domain Name System is like the internet's phone book: it translates human-readable domain names (e.g., google.com) into machine-usable IP addresses, so people don't have to memorize numeric addresses.

11. What are packets in the context of the web?

    Small chunks into which data is broken before being sent across the internet. Each packet travels independently (possibly by different routes) and the pieces are reassembled in order at the destination; this makes transfer faster and more fault-tolerant.

12. What is the difference between a client and a server?

    A client is the device/software (typically a web browser) that requests resources. A server is a computer that stores websites and services and responds to client requests by sending the requested data. Together they form the web's request-response model.

13. What is HTTP, and how is HTTPS different?

    HTTP (HyperText Transfer Protocol) is the protocol defining how clients and servers exchange web data via requests and responses. HTTPS is HTTP with encryption (TLS/SSL), so data in transit cannot be read or tampered with by third parties.

14. What is the difference between a web browser and a search engine?

    A web browser (e.g., Chrome, Firefox) is software on your device that retrieves and displays web pages. A search engine (e.g., Google, Bing) is a website you visit through a browser that indexes and helps you find other web pages.

15. Why must code be written in a plain-text editor (like Visual Studio Code) rather than a word processor?

    Word processors embed hidden formatting characters that break code. Plain-text editors save only the raw characters and add developer features like syntax highlighting, auto-completion, extensions, and an integrated terminal.

16. In the command line, what do `pwd`, `cd`, `..`, and `~` do or mean?

    `pwd` prints the current working directory; `cd <path>` changes directory; `..` refers to the parent directory (so `cd ..` moves up one level); `~` is shorthand for your home directory.

17. What do the commands `ls`, `mkdir`, and `touch` do?

    `ls` lists the files and folders in a directory (`ls -a` includes hidden files); `mkdir <name>` creates a new directory; `touch <name>` creates a new empty file.

18. How do you delete files and directories from the command line?

    `rm <file>` deletes a file; `rmdir <dir>` deletes an empty directory; `rm -r <dir>` recursively deletes a directory and everything inside it. Deletions are permanent (no trash bin), so use with care.

19. What is the difference between the `cp` and `mv` commands?

    `cp source destination` copies a file or directory (leaving the original in place; use `cp -r` for directories), while `mv source destination` moves it or renames it (the original no longer exists at the old path).

20. Which two Git configuration commands must you run when first setting up Git, and why?

    `git config --global user.name "Your Name"` and `git config --global user.email "you@example.com"`. They set the identity that Git attaches to every commit you make.

21. What is the purpose of an SSH key when connecting to GitHub?

    An SSH key pair (private key kept on your machine, public key uploaded to GitHub) lets you authenticate securely without typing a username/password each time you push or pull. The private key must never be shared.

See more Foundations flashcards →

Planning Foundations for The Odin Project

Foundations (The Odin Project) FAQ