The biggest challenge with this one was the images and having them to the right and then doing something with them on mobile/tablet. To be very honest, I probably could do a lot more with the smaller viewports and might revisit them.

This was my first true effort at emulating a print magazine article. Using Pinterest has really helped finding inspiration and I found a selection of magazine templates that stood out.

This was one of the more simpler pages. Be interesting to see what happens should it have more content below and how that works. Have used object-fit to ensure the photo fills the space.

This ended up being a pain to get right on mobile and tablet based on how I built it for desktop. I think the biggest issue with this layout is the empty column in the middle where the page split would be. Maybe I would lose this column in future. This was the 3rd template from the collection I mentioned off Pinterest.

Mo Salah Mo Salah, running down the wing! I saw the original article and fell in love with the image cut out in the text so had to give it a go. I've never used background-clip before so this was a good lession. This was hard to get right across devices as things moved around a lot but I think it worked. Really battled with CSS on this one and I'm pleased with how it came out although the choice of image will make or break this thing.

Biggest challenge of this was getting the text to fit top to bottom and then the image to fill the space. Image was easy enough in the end but the text simply would not play ball. In the end, I had to resort to getting it to fit with plenty of space should it adjust and try and break out.

Pretty much the same as the last one. There is much less screen to play with compared to the print design and then you have to consider what happens on smaller screens. What a beautiful man though.

Quite a simple one this really. I like the layout and seemed to work down to mobile quite straightforward. No dramas here.

On the face of it, pretty simple and it was. Biggest challenge was what to do with it on tablet.

This has been my favourite. The original article is lovely. This was pretty hard to do with Grid or at least it started off that way. I tried using Grid areas to achieve what I wanted but found that limiting around the header and the images so resorting back to using my usual method. Once I had to cracked on desktop, I hard to start from scratch with mobile and tablet and it took a bit of time to make it looks alright on smaller screens and then fixing what I used but I got there. Was a challenge for sure.

So in summary…

First off, I've found a new love. Print. For years we've been saying print designers should not be designing for the web. well just maybe we were wrong. There is some absolutely lovely work out there. It's made me want to explore the print side and also to improve my typography.

Secondly, CSS Grid is just brilliant, as is flexbox. You've changed my life, my outcome and my desire to do cool stuff.

This was a really hard exercise at times to fight with devices and thinking of solutions but I think what I've done it alright. Like I said before, it's not going to win designer awards but it's stepping stones to hopefully making nicer things where layouts can be pushed. In hindsight, some of the stuff is not that complicated and some of it not that impressive but simply getting some of it to work on smaller screens was a challenge in itself.

Lastly, to those that drove me on to do this. I feel like I've spammed a fair bit with this so sorry in advance but it seems some people do like what I've doing and maybe they might be influenced to have a go. I'm no expert, there are far better people out there to learn from that's for certain.

If you decide to have a go at doing something similar, let me know. I can't wait to see what you did with it as the Udemy adverts go.