"A collection of small, isolated static pages and UI components built using foundational HTML and CSS. This repository serves as a showcase of my early learning in core CSS styling and fixed-width desktop layouts."
This repository demonstrates my practice and early understanding of the following core HTML and CSS concepts:
- CSS Selectors and Specificity
- Box Model (Padding, Margin, Border)
- CSS Layouts: Practical use of basic Flexbox and Table structures
- Pseudo Elements (
::before,::after) - CSS Transitions for simple hover animations
- HTML Structure and Semantic Tags
| # | Folder Name | Primary Focus | Description |
|---|---|---|---|
| 1 | CSS-transitions |
CSS Transitions | Practicing smooth animations for hover effects and interaction. |
| 2 | flex-layout |
Basic Flexbox | Demonstrating fundamental usage of Flexbox for element arrangement. |
| 3 | flex-layout-2 |
Advanced Flexbox | Detailed application of Flexbox for more complex component layouts. |
| 4 | logos-section |
Alignment & Styling | Arranging and styling various brand logos within a designated section. |
| 5 | HTML-CSS-Table |
HTML Tables | Styling content organized into a basic HTML table format. |
| 6 | Table-Layout |
Structuring Content | Utilizing CSS layout properties for content structuring. |
| 7 | pseudo element |
::before/::after | Using pseudo-elements for decorative effects and minor structural additions. |
| 8 | Use-of-nth-child |
Structural Pseudo-classes | Practicing styling patterns using the nth-child selector. |
| 9 | positions and sign-in |
CSS Positioning | Practicing CSS position properties (relative, absolute) and sign-in form styling. |
| 10 | html-entities |
HTML Special Characters | Correct usage of HTML entities and special characters. |
| 11 | video embed code |
Media Integration | Embedding video content into a webpage using basic HTML. |
| 12 | embed-map |
Iframe and Media Embedding | Using iframes to embed external content like maps (and practicing basic mailto/tel links). |
These projects primarily reflect my initial learning phase and focus on fixed-width desktop layouts. They are not yet fully Responsive for mobile or tablet devices.