What is the difference between Git and GitHub in web development?

Git is a version-control tool that tracks changes locally, while GitHub is an online platform for hosting and collaborating on Git repositories.

Which command line commands are covered for creating and deleting folders?

The course covers commands such as pwd for showing the current directory, mkdir -p for creating nested folders, and rm -r for deleting a folder and its contents.

How do HTML, CSS, and Flexbox work together to build a web page?

HTML provides page structure, CSS controls appearance, and Flexbox arranges and aligns elements in flexible layouts.

Free Course Image Web Development Foundations: HTML, CSS, Git and Command Line

Free online course Web Development Foundations: HTML, CSS, Git and Command Line

Duration of the online course: 14 hours and 11 minutes

New

Build job-ready web skills with a free course in HTML, CSS, Git and command line—create real pages, use DevTools, and earn confidence for projects.

In this free course, learn about

Foundations outcomes: mindset, learning strategy, and how to get unstuck effectively
How to ask for help well: include details, context, and clear questions to get faster answers
Computer/OS basics and how the web works (internet vs web, basic request/response concepts)
Dev environment setup: browser, text editor (VS Code), and creating SSH keys for GitHub
Command line fundamentals: pwd, mkdir -p, and recursive deletion (rm -r) workflows
Git vs GitHub, basic Git workflow, pushing commits, and writing good commit messages (~50 chars)
HTML structure: elements/tags, boilerplate, text/paragraphs, lists, links, images, attributes
Building a simple multi-page project (recipe site) with correct file/folder structure
CSS fundamentals: external stylesheets, classes vs IDs, selector syntax and combinators
Cascade and specificity, plus using DevTools (strikethrough rules) to debug styling
CSS box model order: content, padding, border, margin; block vs inline element behavior
Flexbox essentials: display:flex, axes, direction, alignment, and flex shorthand behavior

About the free online course

Learn how modern websites are built from the ground up and gain the confidence to create, edit, and publish your own work online. This free online course is designed for beginners who want a clear path into web development, combining core front-end fundamentals with the practical tooling used by real teams. You will move from understanding how the web and your operating system work to writing clean code in a proper editor, navigating files efficiently, and developing habits that make learning faster and less frustrating.

Instead of treating HTML and CSS as abstract theory, you will build a solid foundation for structuring pages with semantic elements, writing readable text content, adding links and images, and creating layouts that feel professional. You will also learn how styling actually works in the browser, including cascade behavior, selector specificity, and the box model—so you can predict results instead of guessing. As you progress, Flexbox becomes a practical tool for arranging content, controlling alignment, and creating responsive sections that adapt to different screen sizes.

Strong web developers also know how to work with their tools, and that is where the command line and Git come in. You will practice essential terminal commands for moving around your system and managing folders, then connect your workflow to GitHub using secure authentication. Version control skills help you track changes, write meaningful commit messages, and collaborate or showcase your work in a portfolio-ready repository.

Along the way, you will adopt an effective problem-solving mindset: how to get unstuck, how to ask for help productively, and how to use the developer community and browser DevTools to debug issues. By the end, you will have a practical understanding of how the pieces fit together—code, tools, workflow, and web concepts—so you can keep learning with momentum and start building real projects with confidence.

Course content

Video class: Introduction - The Odin Project 07m
Exercise: What is a key outcome of completing the Foundations unit in web development?
Video class: Introduction to Web Development - Foundations - The Odin Project 33m
Exercise: Which set of languages is described as the core front-end tech stack used to build what users see in the browser?
Video class: Motivation and Mindset - Foundations - The Odin Project 19m
Exercise: Which approach is recommended when you get stuck while learning web development?

Video class: Asking For Help - Foundations - The Odin Project 35m
Exercise: When asking for programming help, what is usually the most effective thing to include?
Video class: Join the Odin Community - Foundations - The Odin Project 22m
Exercise: When asking for help in an online developer chat, what approach is recommended to get useful answers faster?

Video class: Computer Basics - Foundations - The Odin Project 24m
Exercise: What is the main job of an operating system (OS) on a computer?
Video class: How Does the Web Work? - Foundations - The Odin Project 53m
Exercise: What is the difference between the internet and the web?

Video class: Installation Overview - Foundations - The Odin Project 04m
Exercise: Which item is specifically mentioned as being created during setup to identify you to GitHub and other services?
Video class: Installations - Foundations - The Odin Project 04m
Exercise: What is the key step to install Google Chrome on macOS after downloading it?
Video class: Text Editors - Foundations - The Odin Project 06m
Exercise: Why is a plain text editor like VS Code preferred over a rich text editor like Microsoft Word for writing code?

Video class: Command Line Basics - Part 1/3 - Foundations - The Odin Project 53m
Exercise: Which command prints your current working directory in the command line?
Video class: Command Line Basics - Part 2/3 - Foundations - The Odin Project 1h08m
Exercise: Which command creates a directory and any necessary parent directories in one step?
Video class: Command Line Basics - Part 3/3 - Foundations - The Odin Project 16m
Exercise: Which command deletes a directory and everything inside it from the command line?

Video class: Setting Up Git - Foundations - The Odin Project 17m
Exercise: What is the main purpose of adding an SSH key to your GitHub account?
Video class: Introduction to Git - Foundations - The Odin Project 30m
Exercise: Which option best describes the difference between Git and GitHub?
Video class: Git Basics - Foundations - The Odin Project 24m
Exercise: In the basic Git workflow, which command uploads your local commits to the remote repository on GitHub?

Video class: Introduction to HTML and CSS - Foundations - The Odin Project 14m
Exercise: Which language is primarily responsible for styling and presentation (colors, fonts, layout) on a web page?
Video class: Elements and Tags - Foundations - The Odin Project 03m
Exercise: Which statement best describes an HTML element?
Video class: HTML Boilerplate - Foundations - The Odin Project 12m
Video class: Working with Text - Foundations - The Odin Project 09m
Exercise: Which HTML element should you use to create separate paragraphs instead of having the browser compress all text into one line?
Video class: Lists - Foundations - The Odin Project 09m
Exercise: Which HTML tags are used to create an ordered (numbered) list with list items?
Video class: Links and Images - Foundations - The Odin Project 18m
Exercise: Which HTML attribute tells an anchor () element where to navigate?

Video class: Commit Messages - Foundations - The Odin Project 23m
Exercise: According to common Git conventions, what is the recommended maximum length for a commit message subject line?
Video class: Project Recipes - Foundations - The Odin Project 45m
Exercise: Which structure best matches the basic recipe website setup?

Video class: Intro to CSS - Initial Reading - Foundations - The Odin Project 45m
Exercise: In CSS, what is the key difference between using a class selector and an ID selector?
Video class: Intro to CSS - CSS Methods Project - Foundations - The Odin Project 19m
Exercise: Which method correctly applies CSS using an external stylesheet?
Video class: Intro to CSS - Class id Selectors - Foundations The Odin Project 16m
Exercise: In CSS, which selector syntax should you use to target an element by its ID (e.g., id="second-element")?
Video class: Intro to CSS - Grouping Selectors - Foundations - The Odin Project 07m
Exercise: In CSS, how do you apply the same font styles to two different button classes using a grouping selector?
Video class: Intro to CSS - Chaining Selectors - Foundations - The Odin Project 05m
Exercise: In CSS, how do you target an element that has BOTH the classes avatar and proportioned?
Video class: Intro to CSS - Descendant Combinator - Foundations - The Odin Project 07m
Exercise: Which CSS selector targets only p elements that are descendants of a div?

Video class: The Cascade - CSS Foundations - Foundations - The Odin Project 28m
Exercise: In CSS, which selector type has the highest specificity among these?
Video class: Inspecting HTML and CSS - Foundations - The Odin Project 06m
Exercise: In Chrome DevTools, what does a CSS rule shown with a strikethrough mean?
Video class: The Box Model - CSS Foundations - Foundations - The Odin Project 07m
Exercise: From the inside to the outside, what is the correct order of the CSS box model layers?
Video class: Block and Inline - CSS Foundations - Foundations - The Odin Project 30m
Exercise: Which statement best describes the default behavior of block vs. inline elements in CSS?

Video class: Introduction to Flexbox - Flexbox - Foundations - The Odin Project 08m
Exercise: Which CSS declaration turns an element into a flex container?
Video class: Growing and Shrinking - Flexbox - Foundations - The Odin Project 08m
Exercise: In CSS Flexbox, what three properties are set by the flex shorthand?
Video class: Axes - Flexbox - Foundations - The Odin Project 07m
Exercise: How do you make flex items arrange vertically instead of horizontally in a flex container?
Video class: Alignment - Flexbox - Foundations - The Odin Project 1h32m
Exercise: In Flexbox, which property aligns items along the main axis (e.g., horizontally in the default row direction)?

Learn aboutHTML

Explore free online HTML courses designed for beginners and aspiring web developers. Learn HTML basics, semantic markup, forms, tables, accessibility, and modern web page structure at your own pace. Build practical coding skills with expert-led lessons and hands-on projects, and earn a certificate upon completion to showcase your HTML knowledge.

Learn aboutCSS

Explore free online CSS courses designed to help beginners and aspiring web developers master styling, layouts, responsive design, Flexbox, Grid, animations, and modern best practices. Learn at your own pace, build practical front-end skills, and earn a certificate with every course to showcase your CSS expertise.