Today I learn HTML & CSS fundamentals

*HTML *- hyper text markup language
<a href="https://www.wikipedia.org/"target="_blank">Wikipedia</a>

- opening tag
- closing tag
Everything between the opening tag and closing tag is called the content.
Within the opening tag (but never the closing tag), there might be attributes.
- Each attribute comprises a name, then a =, then a value.
- Values should always be within a pair of quotes (" "). --------------------Collectively, all of that is called one element.--------------------------------

Layout systems

To position content wherever we wish, we need to choose one of the many layout systems that HTML provides:
-Flow
-Flexbox
-Positioned, Grid, and a few others;

IN Flow:
Words, images, and other inline items are placed side by side horizontally.
Paragraphs, headings, and other blocks are placed above and below one another vertically.
How can we make an element act as a block instead of inline? With the display: block CSS declaration.
<div> - We’re going to need a lot of block level elements. It would be a pain to have to add style="display: block" to s over and over and over every time we wanted a block element, so HTML provides a shortcut — the element: A is just a with display: block already set.
The box model
For elements that are display: block, we can set a few useful properties:

width: How much space we want the content of the element to take up.
padding: How much space we want outside the content of the element, but inside the border.
border: How much space we want the border to take up.

margin: How much space we want outside the border of the element (between it and its neighbors).

CSS style rules
CSS provides a better way: style rules. First, we need a element in our document. Then, within that element, we can write style rules. Syntax: <code>selector{declaration block}</code> - all together style rule. example: div { width: 200px; padding: 20px; border: solid red 5px; margin: 30px; } CSS selectors The two main types of selectors we’re going to focus on for now are tag-type selectors and class-level selectors. what if we wanted to make text in the second div red, but leave the first div alone? div is a tag-type selector, which means that if we add color: red to the declaration block, it will apply to all <div> elements in the document We could achieve the more precise targeting we want by dropping back down to an inline style="" attribute, this does what we want, but we’ve lost the nice ability to affect hundreds or thousands of elements at once with a style rule. What’s the solution? A class-level selector: add to element attribute <code>class=name</code> Notice there’s no . when applying a class, only when writing the selector. Flexbox layout The three inner divs have the class child, so they have a border, etc. They are still vertically stacked on top of each other even though they are narrow, because they are blocks and the parent element uses flow to lay them out. Example: `<style> .parent { border: dotted blue 1px; } .child { width: 50px; padding: 20px; border: solid red 5px; }

If we want to change the parent’s layout mode to flexbox, we use the display: flex property Example: .parent { border: dotted blue 1px; <div class="highlight"><pre class="highlight plaintext"><code>display: flex; </code></pre></div> } .child { width: 50px; padding: 20px; border: solid red 5px; }

`
Boom! All of a sudden, within the parent element, we’re in a whole new world. Within an element that is display: flex, “block” and “inline” don’t really mean anything anymore. Those terms are relevant for typesetting, but flexbox is for more dynamic, responsive, app-type layouts.
Importantly, display: flex only affects how immediate children (nested only up to one level) are positioned within the parent element. The position of the parent element itself, and anything outside the parent element, is unaffected by setting display: flex on the parent element.

By default, flex-direction is row (horizontal). You can also set flex-direction to be column, in which case children will be laid out vertically (similar to block layout). We mostly use flexbox layout when we want to break out of flow layout to achieve horizontal positioning, so for now we’ll focus on row, but we’ll use both directions eventually.

justify-content and align-items

Now that the children elements are being laid out with flexbox, we have a few new properties available to us on the parent. Most importantly: justify-content and align-items.

justify-content

When flex-direction is row, the justify-content property determines how any leftover horizontal space within the parent is used. There are five values we can set:

align-items
When flex-direction is column, the align-items property determines how children are placed vertically within the parent. There are five values we can set:

stretch: Make children as tall as the parent, so that there is no leftover vertical space. (This is the default value.)
center: Place children in the middle of the parent and split any leftover space evenly across the top and bottom.
flex-start: Place the children at the top of the parent and any leftover space on the bottom.
flex-end: Place the children at the bottom of the parent and any leftover space on the top.
baseline: Place the children such that the bottom of the text within them is lined up along the center of the parent, regardless of their font-size. Useful for things like navbars.

Flexbox Froggy
That’s all you need to know about flexbox for the moment, but if and when you run into a situation where you want to know how to do more, here is an interactive game you can play through to become a flexbox expert:
Flexbox Froggy
You don’t have to play through it right now, but keep it in mind.

Top comments (1)

Shahrouz Nikseresht • Dec 7

Welcome to DEV! Really nice first post, the explanations are clear and the images make the Flexbox concepts easy to visualize.

One small tip: for better readability, try using code blocks for your examples.

You can wrap longer pieces of code with triple backticks (


), and inline code with single backticks (`code`).  
This helps separate the code from the text and makes the tutorial much easier to follow.

Keep going, you're off to a great start! 🚀