Day 11 of My Web Dev Journey — Creating a Michael Jackson Webpage with CSS Position & Styling

100DaysOfCode #WebDevJourney #CSSLearning #MichaelJacksonWebpage #FrontendDevelopment #CodingInPublic 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: 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! Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse