Learn HTML and CSS

Overview

This course is perfect if you want to learn how to code websites from scratch. You will learn the basics of HTML and CSS through interactive challenges. Along the way, you will build multiple projects, like a Google.com clone, a Space Exploration page, and a fun birthday site filled with GIFs. While most of the challenges are done in Scrimba's interactive editor, you will also learn how to use professional tools like VS Code for code editing, GitHub for hosting your code, and Netlify for deploying your projects to the world wide web.

Syllabus

🟨 Intro to HTML: Part 1

Learn the fundamentals of HTML, including essential tags, document structure, and how to create basic web pages.

🟨 Intro to HTML: Part 2

Apply your HTML knowledge to build interactive pages, add navigation, and deploy a personal website.

🟨 Intro to HTML: Test Your Knowledge

Test what you have learned with an interactive quiz.

🟦 Intro to CSS: Part 1

In this module, you will learn the basics of CSS by building a clone of the Google.com homepage.

🟦 Intro to CSS: Part 2

This module introduces advanced CSS concepts such as centering, padding, borders, buttons, and flexbox. You will finish building your Google clone.

🟦 Intro to CSS: Test Your Knowledge

Test your new knowledge with this interactive quiz.

🟩 Intermediate CSS: Part 1

In this module, you will deepen your CSS skills by building a digital business card for yourself.

🟩 Intermediate CSS: Part 2

Enhance your design with inheritance, colors, fonts, and shorthands before making it uniquely yours and deploying it.

🟩 Intermediate CSS: Test Your Knowledge

Check your understanding with a Graded Assignment.

🟧 CSS for a Modern UI: Part 1

In this module, you will build a website about space exploration. It will teach you several techniques for making your projects look beautiful and polished.

🟧 CSS for a Modern UI: Part 2

Learn to enhance your site design with better formatting, images, and readability techniques.

🟧 CSS for a Modern UI: Test Your Knowledge

Assess your progress with an interactive quiz.

⬛️ Next-level CSS: Part 1

In this module, you will build a fun website that you can use for a friend or family member's birthday while deepening your layout and styling skills.

⬛️ Next-level CSS: Part 2

Take your project to the next level with interactivity, personalization, and deployment strategies.

⬛️ Next-level CSS: Test Your Knowledge

Reinforce your learning with a hands-on assignment.

Bonus Module: Solo Projects

This bonus module gives you the chance to build Solo Projects—optional, real-world coding challenges where you apply your skills, experiment freely, and gain hands-on experience without a guided solution.