Hello everyone! 👋
Welcome back to Day 11 of my web development journey!
Today’s project was special — I designed a tribute webpage dedicated to Michael Jackson, using the CSS position property, along with font styling, box properties, classes, and IDs.
And believe me… this one made me moonwalk through some tricky CSS concepts! 😄
🌟 What I Built Today
I created a Michael Jackson Tribute Webpage that highlights:
His iconic image
A short biography
Some of his legendary songs
And a stylish footer saying “Long Live The King of Pop” 🕺
But the main focus was understanding how to perfectly place each element using the CSS position property.
🧠 Concepts I Learned Today
🎯 1. CSS Position Property
This was the heart of today’s learning.
I explored how each positioning type behaves:
Static – The default; elements flow naturally on the page.
Relative – Let’s you nudge elements slightly without breaking layout flow.
Absolute – My favorite! Used it to fix MJ’s image exactly where I wanted.
Fixed – Great for sticky headers (tried it on the “MJ Forever” banner).
Sticky – A mix of relative + fixed — fun to experiment with!
It felt like controlling a concert stage — every performer (element) had its exact spotlight position. 🎤✨
✍️ 2. Fonts and Styling
Fonts make a massive difference in how your page feels.
I used:
Google Fonts for stylish typography (perfect for a tribute theme).
Font-weight, font-size, and font-style properties to bring variety.
CSS selectors like .class and #id to target and style specific elements.
Also explored text-shadow to make the “King of Pop” title pop literally!
📦 3. Box Model Magic
No design is complete without spacing done right.
Learned how to control:
Padding — space inside the element.
Margin — space outside the element.
Border — to make the layout neat and framed.
Box-sizing — to keep things consistent when adding padding/border.
It really helped balance the layout visually and keep it responsive.
💡 My Key Takeaways
position: absolute; can be tricky — always check its parent element’s positioning.
Good font pairing can transform the vibe of your page.
The box model is the unsung hero of web design!
Using IDs and classes smartly keeps your CSS clean and readable.
🔥 The Final Result
A clean, minimal tribute page that feels classy and nostalgic — just like MJ’s music.
Next up, I’ll move towards CSS Flexbox and Layout Designing, which will make my webpages more responsive and dynamic.
Today’s task wasn’t just about coding — it was about feeling the rhythm of structure and style.
If Michael Jackson can create magic with beats, we can do the same with HTML & CSS. 😎
See you tomorrow in Day 12, where I’ll probably flex my way into Flexbox layouts!
SOCIAL SHARE CARD GENERATOR