Summary of "HTML & CSS Full Course: Beginners to Pro 2024 | 3 Mini Projects Included 🔥 Web Development Course"

HTML (HyperText Markup Language) is a markup language, not a programming language.
It is used to structure web pages.
Basic HTML structure includes tags like <html>, <head>, <body>.
Tags have opening and closing parts, e.g., <h1>...</h1>.
Elements consist of opening tag, content, and closing tag.
Headings (<h1> to <h6>) and paragraphs (<p>) are fundamental tags.
Line breaks (<br>) create new lines within paragraphs without starting a new paragraph.
Images are inserted with <img> tag using attributes src (source) and alt (alternative text).
Anchor tags <a> create hyperlinks with href attribute; can open links in new tabs using target="_blank".
Boilerplate code for HTML can be generated quickly using shortcuts in VS Code (! + Enter).
The <head> section contains metadata like the page <title>.

CSS is used to style HTML elements and make web pages visually appealing.
Three types of CSS:
- Inline CSS: Using style attribute inside HTML tags.
- Internal CSS: Using <style> tag inside <head>.
- External CSS: Linking an external .css file.
Common CSS properties:
- color, background-color, font-family, font-size, text-align, width, height, margin, padding, border.
CSS syntax: selector { property: value; }
CSS units: pixels (px), percentages (%).
The difference between margin (outside spacing) and padding (inside spacing).
CSS Box Model: content, padding, border, margin.
CSS selectors: element selectors, class selectors (.), ID selectors (#).
Classes can be reused; IDs are unique per page.

<div> tags are containers to group elements.
Divs can be styled with CSS for layout and design.
Width and height can be set in pixels or percentages.
Using display: flex on parent containers to arrange child divs side by side.
Flexbox properties:
- justify-content: controls horizontal alignment.
- align-items: controls vertical alignment.
Nesting divs for complex layouts.
Using IDs and classes to style individual or groups of divs.

Squares and rectangles: set equal or different width and height.
Circles: use border-radius: 50%.
Diamonds: rotate squares by 45 degrees using transform: rotate(45deg).
Managing size and positioning of shapes with CSS properties like margin, padding, and transform: translate().
Grouping shapes inside containers for better layout control.

Cards are containers with images and text.
Setting card size with height and width.
Adding borders and border-radius for rounded corners.
Positioning cards using:
- Flexbox for horizontal alignment.
- position: absolute with top, left, and transform: translate(-50%, -50%) for centering.
Using z-index to control stacking order of overlapping cards.
Rotating cards using transform: rotate(deg) for visual effect.
Handling image sizing inside cards:
- Use width and height properties.
- Use object-fit: cover to maintain aspect ratio and prevent distortion.
Using overflow hidden on cards to clip overflowing images.
Adding multiple cards with different sizes, colors, and stacking order.
Using external images from sources like Unsplash.

Category