From 7a90cb85a3aba991a80cefae93fe12986deeeec4 Mon Sep 17 00:00:00 2001 From: Ajay Dhangar Date: Mon, 23 Feb 2026 22:43:01 +0530 Subject: [PATCH] added css docs --- .../frontend-beginner/css/_category_.json | 8 + .../css/colors-and-backgrounds.mdx | 87 +++++++++++ .../frontend-beginner/css/css-challenge.mdx | 137 ++++++++++++++++++ .../frontend-beginner/css/flexbox-part-1.mdx | 87 +++++++++++ .../frontend-beginner/css/flexbox-part-2.mdx | 88 +++++++++++ .../frontend-beginner/css/index.mdx | 1 - .../frontend-beginner/css/intro-to-css.mdx | 47 ++++-- .../css/positioning-basics.mdx | 73 ++++++++++ .../css/responsive-design.mdx | 89 ++++++++++++ .../frontend-beginner/css/selectors.mdx | 116 +++++++++++++++ .../frontend-beginner/css/text-styling.mdx | 85 +++++++++++ .../frontend-beginner/css/the-box-model.mdx | 77 ++++++++++ .../frontend-beginner/html/_category_.json | 8 + 13 files changed, 886 insertions(+), 17 deletions(-) create mode 100644 absolute-beginners/frontend-beginner/css/_category_.json create mode 100644 absolute-beginners/frontend-beginner/css/colors-and-backgrounds.mdx create mode 100644 absolute-beginners/frontend-beginner/css/css-challenge.mdx create mode 100644 absolute-beginners/frontend-beginner/css/flexbox-part-1.mdx create mode 100644 absolute-beginners/frontend-beginner/css/flexbox-part-2.mdx delete mode 100644 absolute-beginners/frontend-beginner/css/index.mdx create mode 100644 absolute-beginners/frontend-beginner/css/positioning-basics.mdx create mode 100644 absolute-beginners/frontend-beginner/css/responsive-design.mdx create mode 100644 absolute-beginners/frontend-beginner/css/selectors.mdx create mode 100644 absolute-beginners/frontend-beginner/css/text-styling.mdx create mode 100644 absolute-beginners/frontend-beginner/css/the-box-model.mdx create mode 100644 absolute-beginners/frontend-beginner/html/_category_.json diff --git a/absolute-beginners/frontend-beginner/css/_category_.json b/absolute-beginners/frontend-beginner/css/_category_.json new file mode 100644 index 0000000..a6bc757 --- /dev/null +++ b/absolute-beginners/frontend-beginner/css/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "CSS", + "position": 2, + "link": { + "type": "generated-index", + "description": "Getting started with CSS, how to add style, color, and personality to your HTML." + } +} \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/css/colors-and-backgrounds.mdx b/absolute-beginners/frontend-beginner/css/colors-and-backgrounds.mdx new file mode 100644 index 0000000..f1c4e9d --- /dev/null +++ b/absolute-beginners/frontend-beginner/css/colors-and-backgrounds.mdx @@ -0,0 +1,87 @@ +--- +sidebar_position: 3 +title: "Colors & Backgrounds" +sidebar_label: "Colors & Backgrounds" +description: "Learn how to use Hex, RGB, and background images to make your site pop." +--- + +In the physical world, paint comes in buckets. In the digital world, paint comes in **codes**. To build a professional-looking site, you need to understand how computers "read" color and how to layer backgrounds to create depth. + +## Three Ways to Define Color + +While you can use names like `red` or `skyblue`, there are actually 140 named colors in HTML. Professionals need more variety, so we use these three systems: + +### 1. Hexadecimal (The Industry Standard) +Hex codes start with a `#` followed by 6 characters. It is the most common way to share colors between designers and developers. +* **Example:** `#ff5733` (A vibrant orange). + +### 2. RGB (The Digital Screen Way) +Stands for **Red, Green, Blue**. It tells the screen how much of each light to mix. +* **Example:** `rgb(255, 87, 51)` + +### 3. RGBA (The Transparency Trick) +The `a` stands for **Alpha**. This allows you to make colors see-through! +* **Value:** `0.0` (invisible) to `1.0` (fully solid). +* **Example:** `rgba(0, 0, 0, 0.5)` (A 50% transparent black). + +## Beyond Solid Colors: Backgrounds + +You can style the background of any element (a button, a section, or the whole page) using the `background` properties. + +### Background Images + +Want a cool photo behind your text? + +```css +.hero-section { + background-image: url('ocean.jpg'); + background-size: cover; /* Makes the image fit the whole area */ + background-position: center; +} + +``` + +### Linear Gradients + +Gradients are a smooth transition between two or more colors. They look very modern in 2026! + +```css +.gradient-box { + background: linear-gradient(to right, #ff7e5f, #feb47b); +} + +``` + +## Interactive CodePen: Color Mixer + +Check out how these different color types look in real-time. Try changing the `background-color` of the second box to a `rgba` value to see it become transparent! + + + +### Challenge Tasks: + +1. Find a color you love on [Adobe Color](https://color.adobe.com/) and copy the **Hex code**. +2. Apply that Hex code to the `h1` in the CodePen. +3. Try making the background a `linear-gradient`. + +## Accessibility: The Contrast Rule + +As a developer at **CodeHarborHub**, you have a responsibility to make sure everyone can read your site. + +:::danger Don't do this! +Never put light gray text on a white background. It's impossible for people with low vision to read. +::: + +:::tip +Always use a [Contrast Checker](https://webaim.org/resources/contrastchecker/) to ensure your text "pops" against the background. +::: + +## Summary Checklist + +* [x] I know that Hex codes start with `#`. +* [x] I can use `rgba()` to create transparent overlays. +* [x] I understand that `background-size: cover` helps images fit properly. +* [x] I checked my color contrast for accessibility. \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/css/css-challenge.mdx b/absolute-beginners/frontend-beginner/css/css-challenge.mdx new file mode 100644 index 0000000..646ebd1 --- /dev/null +++ b/absolute-beginners/frontend-beginner/css/css-challenge.mdx @@ -0,0 +1,137 @@ +--- +sidebar_position: 10 +title: "Final Challenge: Style Your Portfolio" +sidebar_label: CSS Challenge +description: "The ultimate test! Apply all your CSS skills to your personal portfolio." +--- + +It’s time to take your "plain" HTML Portfolio and give it a professional makeover. This is the exact process developers use: starting with a wireframe, building the structure, and then adding the "visual polish." + +## Step 1: The Design Strategy + +Before writing code, we need a plan. We will use a **Mobile-First** strategy. This means we will style the mobile version first, then use Media Queries to adjust it for Desktop. + +## Step-by-Step Implementation + +### Step 1: Reset & Setup + +At the very top of your `style.css`, add the "Universal Reset." This ensures every browser starts with the same clean slate. + +```css title="style.css" +* { + margin: 0; + padding: 0; + box-sizing: border-box; /* The layout savior! */ +} + +body { + font-family: 'Segoe UI', sans-serif; + line-height: 1.6; + color: #333; + background-color: #f4f4f4; +} + +``` + +### Step 2: Flex the Navigation + +Use Flexbox to move your Logo to the left and your Links to the right. + +```css title="style.css" +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 5%; + background: #2d3436; + color: white; +} + +nav a { + color: white; + text-decoration: none; + margin-left: 20px; +} + +``` + +### Step 3: The "Hero" (About) Section + +This is the first thing people see. We want it centered and impactful. + +```css title="style.css" +#about { + display: flex; + flex-direction: column; /* Stacked for mobile */ + align-items: center; + text-align: center; + padding: 50px 20px; +} + +#about img { + border-radius: 50%; /* Makes your photo a circle */ + border: 5px solid #0984e3; + width: 150px; + margin-bottom: 20px; +} + +``` + +### Step 4: The Skills Grid + +We’ll use Flexbox to make your skills look like neat badges. + +```css title="style.css" +#skills ul { + display: flex; + flex-wrap: wrap; + justify-content: center; + list-style: none; +} + +#skills li { + background: #0984e3; + color: white; + padding: 10px 20px; + margin: 10px; + border-radius: 20px; + font-weight: bold; +} + +``` + +### Step 5: Make it Responsive + +Now, add a Media Query to make the "About" section look better on big screens. + +```css title="style.css" +@media (min-width: 768px) { + #about { + flex-direction: row; /* Side-by-side for desktop */ + text-align: left; + justify-content: center; + } + + #about img { + margin-right: 40px; + margin-bottom: 0; + } +} + +``` + +## See the Final Result on CodePen + +Check out how these steps come together in this interactive demo. Try clicking the "Mobile View" in CodePen to see how the layout shifts! + + + +:::success YOU ARE NOW A CSS STYLIST! +You've completed the CSS Basics module. You have the power to take any boring HTML page and turn it into a beautiful, responsive experience. + +**What's next?** +Would you like to start **JavaScript: The Brains of the Web**, or would you like to explore **CSS Grid** for even more complex layouts? +::: \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/css/flexbox-part-1.mdx b/absolute-beginners/frontend-beginner/css/flexbox-part-1.mdx new file mode 100644 index 0000000..7127564 --- /dev/null +++ b/absolute-beginners/frontend-beginner/css/flexbox-part-1.mdx @@ -0,0 +1,87 @@ +--- +sidebar_position: 7 +title: "Flexbox Part 1: Modern Layouts" +sidebar_label: "Flexbox (Basics)" +description: "Learn the modern way to align and distribute space on your page." +--- + +Imagine you have a row of boxes. You want to center them, space them out evenly, or turn them into a column. Doing this with margins is a nightmare. Doing it with **Flexbox** is easy! + +Flexbox is a "One-Dimensional" layout system. This means it handles content in **either** a row or a column at a time. + +## The Parent & The Children + +Flexbox works on a **Parent-Child** relationship. +1. **Flex Container (Parent):** The box that holds everything. +2. **Flex Items (Children):** The boxes inside. + +To start the magic, you simply tell the Parent: + +```css +.container { + display: flex; +} + +``` + +## The Two Axes + +This is the most important concept to visualize: + +* **Main Axis:** Usually horizontal (Left to Right). +* **Cross Axis:** Usually vertical (Top to Bottom). + +## The "Big Three" Properties + +Once you set `display: flex`, you use these three properties on the **Parent** to control the children: + +### 1. `justify-content` (Main Axis) + +Moves items horizontally (if in a row). + +* `flex-start`: Items at the beginning. +* `center`: Items in the middle! (Finally!) +* `space-between`: Items push to the edges with equal space between them. + +### 2. `align-items` (Cross Axis) + +Moves items vertically. + +* `flex-start`: Top. +* `center`: Perfect vertical centering. +* `stretch`: Stretches items to fill the height. + +### 3. `flex-direction` + +Changes the direction of the flow. + +* `row`: Default (Side-by-side). +* `column`: Stacks items vertically like a list. + +## Interactive CodePen: Flexbox Playground + +In this Pen, try changing `justify-content` to `space-around`. See how the boxes react! + + + +### Challenge Tasks: + +1. Set `justify-content: center` AND `align-items: center`. You have now achieved the **"Holy Grail" of web design**: Perfect centering! +2. Change `flex-direction` to `column`. +3. Try `justify-content: space-evenly`. + +## Why use Flexbox? + +* **No more floats:** You don't need to use old, broken layout methods. +* **Responsive:** Items can shrink or grow to fit the screen. +* **Simplicity:** Centering takes seconds, not hours. + +## Summary Checklist + +* [x] I know that `display: flex` goes on the **Parent**. +* [x] I can use `justify-content` to move items along the Main Axis. +* [x] I can use `align-items` to center items vertically. +* [x] I understand the difference between a `row` and a `column`. \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/css/flexbox-part-2.mdx b/absolute-beginners/frontend-beginner/css/flexbox-part-2.mdx new file mode 100644 index 0000000..fd40b41 --- /dev/null +++ b/absolute-beginners/frontend-beginner/css/flexbox-part-2.mdx @@ -0,0 +1,88 @@ +--- +sidebar_position: 8 +title: "Flexibility & Wrapping" +sidebar_label: "Flexbox (Advanced)" +description: "Learn flex-grow, flex-shrink, and wrapping for dynamic layouts." +--- + +In Part 1, we learned how to move items around. But what happens when there are too many items to fit in one row? Or what if you want one specific item to take up all the extra space? + +Now, we look at the properties that live directly on the **Flex Items (Children)**. + +## 1. Flex Wrap: Don't Squash the Content + +By default, Flexbox tries to jam every item into a single line, even if they have to shrink to the size of a toothpick! To allow items to move to a new line, we use `flex-wrap` on the **Parent**. + +```css +.container { + display: flex; + flex-wrap: wrap; /* Items will now drop to the next line if they run out of space */ +} + +``` + +## 2. Flex Grow: Filling the Gaps + +`flex-grow` tells an item to take up any remaining empty space in the container. + +* **Value 0 (Default):** The item stays its original size. +* **Value 1:** The item will stretch to fill the empty space. + +If you give one item `flex-grow: 2` and another `flex-grow: 1`, the first one will grow **twice as fast** to fill the gap. + +```css +.big-item { + flex-grow: 2; +} + +``` + +## 3. Flex Basis & Shrink + +* **`flex-basis`**: Sets the "ideal" starting size of an item before it grows or shrinks. Think of it as a more flexible version of `width`. +* **`flex-shrink`**: Tells an item if it’s allowed to get smaller than its basis if the screen is too tight. + +## The Shorthand: `flex` + +Instead of writing three lines of code, pros use the `flex` shorthand: + +```css +.item { + /* flex: [grow] [shrink] [basis] */ + flex: 1 1 200px; +} + +``` + +## Interactive CodePen: The Flexibility Lab + +In this Pen, try resizing your browser window (or the preview pane). Watch how the items wrap and how the "Main Feature" box grows to fill the extra space. + + + +### Challenge Tasks: + +1. Change the `flex-grow` value of Item 2 to `3`. Watch it hog all the space! +2. Set `flex-wrap: nowrap` on the container. What happens to the items? +3. Use `align-self: flex-end` on Item 1 to move just that one item to the bottom. + +## 4. Align Self: The Rebel Item + +What if you want all items at the top, but **one** item at the bottom? You can override the parent's `align-items` by using `align-self` on a specific child. + +```css +.rebel-child { + align-self: flex-end; +} + +``` + +## Summary Checklist + +* [x] I used `flex-wrap: wrap` to prevent items from squishing. +* [x] I used `flex-grow` to make items fill empty space. +* [x] I used `flex-basis` to set a starting size. +* [x] I know that `align-self` controls a single item's vertical position. \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/css/index.mdx b/absolute-beginners/frontend-beginner/css/index.mdx deleted file mode 100644 index e345ed2..0000000 --- a/absolute-beginners/frontend-beginner/css/index.mdx +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/css/intro-to-css.mdx b/absolute-beginners/frontend-beginner/css/intro-to-css.mdx index 7c944bc..7527ede 100644 --- a/absolute-beginners/frontend-beginner/css/intro-to-css.mdx +++ b/absolute-beginners/frontend-beginner/css/intro-to-css.mdx @@ -1,18 +1,20 @@ --- +sidebar_position: 1 title: Making the Web Beautiful sidebar_label: Intro to CSS -description: Learn how to add style, color, and personality to your HTML. +description: "Learn how to add style, color, and personality to your HTML." --- -If **HTML** is the skeleton of your house, **CSS** (Cascading Style Sheets) is the paint on the walls, the style of the furniture, and the layout of the rooms. +If **HTML** is the skeleton of your house, **CSS** (Cascading Style Sheets) is the paint on the walls, the furniture, and the decorations. Without CSS, the web would be a very boring, black-and-white research paper! -Without CSS, every website would look like a boring black-and-white research paper. With CSS, you can turn that paper into a masterpiece! +CSS tells the browser how to make things look: "Make this text huge," "Make that button glow," or "Move this image to the right." ## How CSS Works: The Rulebook -CSS works by creating "Rules." You tell the browser: *"Hey, find all the **H1 tags**, and make them **Blue**."* +To style something, you need to follow a specific "Recipe" called a **Rule**. ### The Anatomy of a CSS Rule: + 1. **Selector:** The HTML element you want to style (e.g., `h1`). 2. **Property:** What you want to change (e.g., `color`). 3. **Value:** How you want to change it (e.g., `blue`). @@ -26,6 +28,15 @@ h1 { ``` +## Try it on CodePen! + +Below is a live example. Notice how the HTML defines **what** the content is, but the CSS defines **how** it looks. Experiment by changing the `background-color` in the CSS tab! + + + ## 3 Ways to Add CSS How do you actually connect your CSS "Paint" to your HTML "Walls"? There are three ways, but professionals almost always use **Number 3**. @@ -34,7 +45,7 @@ How do you actually connect your CSS "Paint" to your HTML "Walls"? There are thr Writing styles directly inside the HTML tag. -* *Best for:* Quick tests. *Worst for:* Large projects. +* *Best for:* Quick tests. *Worst for:* Maintenance. ```html

Hello World

@@ -56,7 +67,7 @@ Writing styles inside a `