Edit: I've recently learned doom scrolling is a very specific act of scrolling through negative story/post after negative story/post and not just mindlessly watching cute dog vids, reading random recipes and show reviews until somehow it's bedtime (my bad) 🤯.

I was eager to create layouts when I started this journey.

But my dive-right-in approach saw me fall flat on my face a fair few times.

It had always been the same.

Kerry 2010 "sigh, CSS causing me headaches",
kerry 2011 "ugh it's always the CSS"
Kerry 2012 "Argh I hate CSS"
Kerry 2013 ... had given up 😔

But CSS in 2023 is different, it's fun.

It's like a lego set.

I keep wanting to pick it up and play with it.

Sorry Netflix, YouTube and co.

Kerry 2023 "You've changed CSS. So have I. Maybe now is our time."

3 weeks into learning, I'm feeling ready to put that practice to the test.
And in this post, I'll be going throught the process of putting together 7 standard web page layouts with a focus on just the elements,

Here is the Upwork article where I found the 7 layouts.

Things to know

1. I'm focusing on the layout, not the finer elements.

2. I'm using CSS grid, I'm not experienced with Flexbox at all.

Layout 1 - Single Column

Layout 2 - Full page - Full Image background

Layout 3 - Split screen layout

Layout 4 - F shaped layout

Layout 5 - Z shaped layout

Layout 6 - Fixed Sidebar layout

Conclusion

This was a lot harder than I expected and showed me that I need to practice a lot more with grid.

Several of the above designs were far from my first attempt.

One YouTube video that especially helped me grasp the grid layout approach was this one by Kevin Powell.

Overall, this challenge has opened me up to many new learning opportunities and some styles of selecting and declarations I'm certain will be indispensable in the future.