🚀 Week 4 of My Web Development Journey
I’ve just wrapped up Week 4 of my web development journey, and it was packed with some seriously powerful CSS concepts. From layout mastery to a full personal portfolio — here’s everything I learned and practiced this week:
📚 Topics I Covered:
🔹 CSS Positioning
Learned how to use static, relative, absolute, and fixed positioning. Finally understood how to layer and control layout elements precisely.
🔹 CSS Flag Project – The Flag of Laos
Applied all my positioning knowledge to build a mini CSS flag project. It was a fun challenge that helped solidify my understanding!
🔹 Advanced CSS
This was a deep dive into some core CSS skills that make modern web design possible:
-> CSS Display: Learned and practiced how elements behave: block, inline, inline-block, and none.
-> CSS Float: Got a look into how float was used for layouts before Flexbox became standard.
-> Responsiveness: Learned how to design websites that adapt gracefully to different screens.
-> Media Queries: Practiced using conditional CSS to target mobile, tablet, and desktop views.
-> Mini Project – Web Design Agency: Built a small responsive agency website to apply everything.
🔹 Flexbox
Flexbox is a layout superpower!
I practiced building responsive layouts using: justify-content, align-items, flex-direction.
So much control with such little code. 🔥
🔹 CSS Grid
Explored Grid with properties like: grid-template-columns, grid-area, gap
Grid + Flexbox = Layout mastery! 💪
🔹 Bootstrap
Learned and practiced how to create fast, responsive UIs using Bootstrap: Utility classes, Grid system, Components like navbar, cards, and buttons.
It’s like CSS on steroids — great for rapid prototyping.
🔹 Capstone Project – Personal Portfolio
To wrap up the week, I built a personal portfolio using only HTML and CSS. It showcases everything I’ve learned so far and marks a huge milestone in my journey!
🧠 Key Takeaways:
Positioning and layout are essential for responsive design.
Flexbox and Grid solve so many alignment headaches.
Bootstrap speeds up workflow massively — especially for quick designs.
⚡ Challenges I Faced:
Understanding how Flexbox and Grid interact took a few trial-and-error rounds.
Bootstrap’s class naming took a bit of practice to get used to, but it’s clicking now!
📌 Projects & Code:
You can check out all my projects and code here:
🔗 GitHub Repo: github.com/AdhyanJain2512
💬 Let’s Connect!
Which layout method do you prefer — Flexbox or Grid?
Drop your thoughts in the comments or share your layout wins and fails! Let’s learn together. 😄
Top comments (0)