🗓️ Day 2: Starting My MERN Stack Journey – Mastering CSS Basics
Today marks the second step of my MERN Stack journey, where I focused on strengthening my front-end foundation through CSS — the language that brings life and design to web pages.
🌈 What I Learned
Here’s a summary of the core topics I explored today:
Introduction to CSS: Understanding inline, internal, and external stylesheets, and how CSS controls the look and feel of HTML elements.
Positions in CSS: Explored static, relative, absolute, fixed, and sticky positioning.
Box Model & Units: Learned how margin, border, padding, and content interact, and practiced using units like px, em, rem, %, and vh/vw.
Display Property: Difference between block, inline, inline-block, flex, and grid.
Colorbox & Overflow: Styled boxes with background colors, borders, and shadows while managing overflowing content with hidden, scroll, and auto.
Grid Layouts: Created responsive layouts using grid-template-columns, gap, and grid-area.
Grid Portfolio Section: Designed a simple grid-based portfolio section to visualize practical layouts.
Media Queries: Made the site responsive for different screen sizes.
Transitions & Transforms: Added smooth hover effects and rotations.
Keyframe Animations: Experimented with basic CSS animations for interactive elements.
💻 Project Work
I applied all these concepts by creating a live webpage for a mock brand:
👉 https://mernstackloundry.netlify.app/
This website was built from scratch using only HTML and CSS, focusing on layout, responsiveness, and subtle animations.
Top comments (0)