05_introduction-to-css-box-model

Introduction to CSS Box Model

📝 Description

The CSS box model is a rectangular layout paradigm for HTML elements that consists of the following:

• Content - The content of the box, where text and images appear

• Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content)

• Border - A border surrounding the padding (if any) and content

• Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)

📋 Prerequisites

• Introduction to HTML and HTML5.

• Introduction to CSS and Basic CSS.

• Introduction to CSS Colors.

• Introduction to HTML Forms.

🎯 Learning Objectives

• Understand the basic structure of CSS box model.

• Basic understanding of CSS box model properties.

• Basic understanding of CSS box model properties values.

📹 Video

• Please watch the following videos:

  • CSS Box Model

  

🔧 Instructions

• If you don't have an account on freecodecamp, please create one and familiarize yourself with the platform. Then complete all the challenges provided in the excerises section below and submit your work.

🚀 Excersises

• Please complete the following excersises:

  • Learn the CSS Box Model by Building a Rothko Painting

📫 Submittion

• After completing the excersises, please fill in the following form and submit your work so that we can know your progress:

  • Submittion Form.

📌 Additional Materials

---

These are all optional, but if you're interested in exploring this topic further, here are some resources to help you.

• CSS Box Model

• CSS Box Model

• How to use freecodecamp

---

If you spot any bugs or issues in this activity, you can open an issue with your proposed change