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

Free online courseWeb 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

Course Description

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)?

This free course includes:

14 hours and 11 minutes of online video course

Digital certificate of course completion (Free)

Exercises to train your knowledge

100% free, from content to certificate

Ready to get started?Download the app and get started today.

Install the app now

to access the course
Icon representing technology and business courses

Over 5,000 free courses

Programming, English, Digital Marketing and much more! Learn whatever you want, for free.

Calendar icon with target representing study planning

Study plan with AI

Our app's Artificial Intelligence can create a study schedule for the course you choose.

Professional icon representing career and business

From zero to professional success

Improve your resume with our free Certificate and then use our Artificial Intelligence to find your dream job.

You can also use the QR Code or the links below.

QR Code - Download Cursa - Online Courses

More free courses at Web Development

Free Ebook + Audiobooks! Learn by listening or reading!

Download the App now to have access to + 5000 free courses, exercises, certificates and lots of content without paying anything!

  • 100% free online courses from start to finish

    Thousands of online courses in video, ebooks and audiobooks.

  • More than 60 thousand free exercises

    To test your knowledge during online courses

  • Valid free Digital Certificate with QR Code

    Generated directly from your cell phone's photo gallery and sent to your email

Cursa app on the ebook screen, the video course screen and the course exercises screen, plus the course completion certificate