Hello everyone, greetings to you all, welcome to this week's engagement challenge which is week 4 so far. I am so interested and excited To be participating in this week's engagement challenge brought to us by day dynamic dev team.

Using CSS, we are able to organizes web page elements using the box model, treating each element as a rectangular box with content, padding, border, and margin.

Add to this, the display property determines how elements are positioned. This could be in the form of a block, inline, flex. By using the position property, we can specify the positioning method Such as; static, relative, absolute, fixed.

In the case of a precise placement, Flexbox gives a an amazing layout system for organizing elements within a container, providing control over alignment, distribution, and order. Incorporating these tools, we can create well-organized and good-looking appealing web designs.

solution to practice work

---

Explain Difference between in-line display and block display,?

• Inline display: with inline display, elements are displayed in line with surrounding content. They do not begin with a new line and do not possess width or height set. They strictly respect horizontal margins and padding. Inline elements make use of span, a, or em

(<p>This is a paragraph.</p>
<span style="color: red;">This is inline text.</span>

---

---

• Block display: With Block display , elements start on a new line, take up the 100% of width available, and can be assigned widths and heights. They respect all margins and padding. Commonly used block display include; div, p, and header.

<p>This is a paragraph.</p>
<div style="background-color: blue; width: 150px; height: 50px;"></div>

What's the difference between Margin, Padding and Border?

• Padding: paddings are use to define the space that an element possess, that is between the content and its border. It creates space around the content within an element. Padding are essential box model style use by developers with special properties such as padding; left, top right or bottom.

div { padding: 20px; Padding: top; }

---

• Margin: margins defines the space outside an element, between it and other elements. It precise the distance between elements. Margin could be align either; left, right ,top or bottom.

div { margin: 20px; }

---

• Border: this property gives the style, width, and color of the border around an element. It could make use of properties such as border-width, border-radius, border-color and style.

div { border: 2px solid black; }

Define Position property

---

The position property use in CSS identify the positioning of an element within a given document. It defines how an element is positioned with respect to its normal position, parent element, or the viewport.
It exist in five main values positioning property;

---

1. static: from it name we can say it doesn't move. This element follows the default position according to the normal profile of the document.

div {
Position: static;
}

---

2• relative: This element is exist in its normal position. Using properties as; top, right, bottom, or left. It can altered its position without affecting the document.

div {
Position: relative;
top: 5px;
left: 10px;
}

---

3• Absolute: This element is positioned relative to its nearest already existing ancestor. if there are no positioned ancestor co-existing, It's displaced from the normal document flow.

div {
Position: absolute;
top: 20px;
left: 50px;
}

---

4• Fixed: This element is positioned relative to it's viewport, and it remains in place even if the page is being scrolled.

div {
Position: fixed;
top: 0;
left: 0;
}

---

5• Sticky: With the element, it act in the same manner like relative and become fixed when it reaches a specified offset, that's the top or bottom of the page.

div {
Position: sticky;
top: 0;
bottom: 0;
}

Differentiate between Grid and Flex display properties?

---

Display flex and display grid are two most powerful display tools use in CSS layout. Each is designed to function unique from the other. It's but true they both help in display but their mode of display is different. Lets discuss their differences.

Display flex is designed to arrange elements in a single row or column, responsibility for simple tags such as navigation bar and other simple alignment.

It make use of key properties such as display: flex;, flex-direction, justify-content, align-items, flex-wrap.

*.container {
display: flex;
flex-direction: row; /* Default is row, can be row-reverse, column, or column-reverse */
justify-content: space-between; /* Aligns items horizontally */
align-items: center; /* Aligns items vertically */
}*

While grid display is use for more complex alignment and algorithms with precision control over it elements. It use in design multiple rows and columns.

It make use of key properties such as display: grid;, grid-template-columns, grid-template-rows, grid-gap, place-items.

*.container {
display: grid;
grid-template-columns: 1fr 2fr; /* Creates two columns, first is 1/3 width, second is 2/3 width */
grid-template-rows: 100px auto; /* Creates two rows, first is 100px, second is auto-sized */
grid-gap: 10px; /* Adds spacing between grid items */
}*

practical work.

---

Recreate a web page with unique design.

---

---

Here I'm task to recreate this webpage in my own unique style. Making sure I apply my box model, display, flex and position base on the knowledge I have acquired so far.

^source

---

Step 1.

Introduction of header 1.

Image in this section should be zoomed for proper viewing

HTML

Input	output

---

Step 2.

Apply CSS code to the above HTML file

Input	code

Output

---

Step 3.

Applying a second header.

HTML code

Input	output

Applying CSS code

Input	code

Output display

---

Step 3.

Inserting the navigation bar

HTML	CSS

output

---

Step 4

Post content area.

HTML	input

Output

Applying CSS code

CSS	input

Output.

---

Here's an overview of the Web page display.

Final layout.

---

Display video.