# 🎨 CSS — Styling & Layout This directory documents my CSS learning journey, covering everything from basic styling and selectors to advanced layouts, responsive design, animations, and practical web development projects. It includes **24 course practice exercises**, **4 independent projects**, and a dedicated collection of CSS notes, built to apply and strengthen CSS concepts through hands-on implementation. ## 🌐 Live Preview **CSS Portfolio:** [Complete CSS Live Preview](https://css-ritamxyz.netlify.app/) ## 📁 Folder Structure ```text 02-CSS/ │ ├── 01-Course-Practices/ │ ├── Attachments/ │ ├── CSS-Files/ │ └── HTML-Files/ │ ├── 02-Aurora-Cafe-Site/ │ ├── 03-Ben10-Photo-Album-Site/ │ ├── 04-Get-Together-Site/ │ ├── Assets/ │ ├── CSS-Files/ │ ├── HTML-Files/ │ └── index.html │ ├── 05-Spotify-Clone-v1.0/ │ ├── CSS-Notes.pdf ├── README.md ├── index.html ├── style.css └── app.js ``` --- ## 📚 01. Course Practices A collection of **24 practice exercises** completed alongside the CSS course. These exercises focus on understanding individual CSS properties, selectors, layout systems, and their practical applications. ### 🧠 Concepts & Topics Practised | Practice Range | Topics | |---|---| | Q1–Q2 | CSS introduction, implementation methods, colours and text styling | | Q3–Q4 | CSS selectors, combinators and attribute selectors | | Q5–Q6 | Typography, pseudo-classes and pseudo-elements | | Q7–Q8 | Box model, dimensions, borders and traffic-light implementation | | Q9–Q10 | Transforms, transitions, hover effects and card styling | | Q11–Q12 | Positioning: static, relative, absolute and fixed | | Q13–Q16 | Flexbox, layout arrangements and practical playground exercises | | Q17 | Number Pad layout | | Q18 | Responsive navigation bar | | Q19–Q22 | CSS Grid, track sizing, placement, spanning and alignment | | Q23 | CSS animations and keyframes | | Q24 | Practical Pet Adoption page | ### 🛠️ Practical Learning The exercises move from basic styling to combining multiple concepts in practical UI components. Some practical implementations include: - 🚦 Traffic light using CSS styling and positioning. - 🃏 Styled cards with hover effects and transitions. - 😊 Smiley face using CSS properties. - 📐 Positioning exercises using different CSS position values. - 🧭 Responsive navigation bar with dropdowns. - 🔢 Number Pad layout. - 🧩 Flexbox and Grid playground exercises. - 🐾 Pet Adoption page combining cards, layouts and styling. - ✨ CSS animations using keyframes. The practice collection is organized into separate HTML and CSS files, with attachments included where applicable. --- ## 🚀 02. Projects Four independent projects built to apply CSS concepts beyond individual exercises and understand how different styling techniques work together in complete interfaces. ### ☕ 02 — Aurora Café Site A modern café landing page featuring a structured homepage with multiple content sections. The project focuses on creating a consistent visual layout, organizing content, and styling different sections of a business website. **✨ Implemented Sections** - Navigation bar and hero section. - Drinks and speciality menu. - About section and opening hours. - Contact information and footer. **🎯 CSS & Layout Learning** - Flexbox and Grid for arranging page sections and content. - Sticky positioning for navigation behaviour. - Background overlays and image handling using `object-fit`. - Typography, spacing and visual hierarchy. - Hover effects and transitions for interactive elements. - Backdrop filtering for visual effects. - Media queries for adapting layouts across screen sizes. 🔗 **Live Preview:** [Aurora Café Site](https://auroracafe-ritamxyz.netlify.app/) ### 👽 03 — Ben 10 Photo Album Site A themed photo album website featuring categorized image collections and a slide-out sidebar. The main focus was building a gallery layout and adding animated navigation behaviour. **✨ Implemented Features** - Categorized image gallery. - Slide-out sidebar navigation. - Multiple image collections. - Social links and navigation elements. **🎯 CSS & Layout Learning** - CSS Grid for organizing image galleries. - Flexbox for arranging interface elements. - Fixed positioning for the sidebar. - CSS transforms for slide-out navigation. - Transitions and keyframe animations for smoother interactions. - Responsive styling for smaller screens. A small JavaScript helper handles sidebar interactions, while CSS controls the visual effects and animations. 🔗 **Live Preview:** [Ben 10 Photo Album Site](https://ben10album-ritamxyz.netlify.app/) ### 🎓 04 — Get Together A multi-page campus platform interface designed around college-related information and student-facing features. This project focuses on building a consistent design across multiple pages and organizing CSS into separate stylesheets. **✨ Implemented Pages & Sections** - Homepage. - Features and academics. - Events and about sections. - Login and signup pages. - Shared navigation and footer. **🎯 CSS & Layout Learning** - Modular CSS organization across multiple pages. - Flexbox and Grid for structured page layouts. - Fixed navigation and backdrop filtering. - Responsive layouts for desktop and mobile screens. - Form styling and input field design. - Checkbox-controlled navigation and mobile menu behaviour. - Consistent styling across different sections and pages. Small JavaScript helpers support interactive navigation and menu behaviour. 🔗 **Live Preview:** [Get Together](https://gettogether-ritamxyz.netlify.app/) ### 🎵 05 — Spotify Clone v1.0 A desktop-focused visual recreation of Spotify's interface. The project focuses on recreating a familiar music application layout using structured sections, reusable visual patterns and detailed CSS styling. **✨ Implemented Interface** - Sidebar navigation. - Your Library section. - Recently Played content. - Podcast cards. - Featured charts and playlists. - Fixed bottom music player. **🎯 CSS & Layout Learning** - Flexbox for arranging interface elements. - Fixed and sticky positioning for persistent interface elements. - Scrollable main content area and overflow handling. - Card-based layouts for playlists and podcasts. - Hover transitions for interactive visual feedback. - Custom range slider styling. - Scroll-driven CSS animations. *Note: This is a desktop-only visual UI clone. It does not include responsive mobile layouts or actual music playback functionality. Future versions will introduce JavaScript and additional web technologies to extend its functionality.* 🔗 **Live Preview:** [Spotify Clone v1.0](https://spotifyclone-v1.netlify.app/) --- ## 📝 03. CSS Notes A dedicated collection of CSS notes covering important concepts, properties, syntax, and examples studied throughout the course. This section serves as a quick reference for revision and future development work. --- ## 🧰 Technologies Used - **HTML5** — Page structure and content. - **CSS3** — Styling, layouts, animations and responsive design. - **JavaScript** — Small interaction helpers in selected projects. ## 🎯 Learning Approach This stage focused on understanding how CSS transforms basic HTML structures into properly styled, organized and responsive interfaces. The workflow followed throughout this stage: 1. 📖 **Learn** — Understand concepts through course lectures. 2. 💻 **Practise** — Solve individual exercises independently. 3. 🏗️ **Build** — Apply multiple concepts in practical projects. 4. 🔍 **Review** — Examine layouts, styling and implementation. 5. 🔧 **Improve** — Fix issues and refine the overall presentation. --- **✅ Status:** CSS learning and practice milestone completed. **➡️ Next Stage:** JavaScript — Programming fundamentals, DOM manipulation and interactive web development.