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

Free beginner course to learn HTML, CSS, Git and command line basics, plus Flexbox layout and dev tools for real-world web workflows.

In this free course, learn about

  • Course Orientation and Learning Mindset
  • Getting Help and Community
  • Computer and Web Fundamentals
  • Development Environment Setup
  • Command Line Essentials
  • Git and GitHub Foundations
  • HTML Foundations
  • Git Collaboration and Project Workflow
  • CSS Foundations and Selectors
  • CSS Core Concepts and Debugging
  • Flexbox Layout Fundamentals

Course Description

Build a solid starting point in modern web development with this free course focused on the essentials you need to begin creating and managing real websites. Designed for beginners, it guides you through core concepts and practical workflows used by developers every day, helping you move from curiosity to confident hands-on practice.

Start by understanding how the web works and setting up a productive environment, including tools and text editors commonly used for coding. You will get comfortable with the command line and learn how to navigate your system efficiently, forming habits that make development faster and less frustrating.

Version control is covered early so you can track changes, collaborate, and recover work with confidence. You will practice Git fundamentals, learn how to create clear commit messages, and build a workflow that supports steady progress on projects.

From there, you will write clean HTML and style it with CSS, covering page structure, semantic elements, links, images, lists, and the standard boilerplate used to start new pages. As you advance, you will work with selectors, the cascade, and debugging techniques using browser developer tools, then dive into layout fundamentals such as the box model, block versus inline behavior, and responsive layout patterns with Flexbox, including sizing, axes, and alignment.

Along the way, the course emphasizes mindset, motivation, and effective ways to ask for help and connect with a learning community, making it easier to stay consistent and overcome common beginner roadblocks. If you want a structured, practical introduction to web development foundations, this course is a strong place to start.

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