All solutions

Hi all,

Please let me know your thought's.

Thanks, Nick

Hi all,

Please let me know your thoughts.

Thanks, Nick

Hi all,

I really enjoyed doing this one. I was expecting it to be really difficult to get my head around all the styling, but felt like it came pretty easy to me. Seems all the previous projects are paying off lol

As always please leave any and all feedback.

Thanks, Nick

Hi all,

Is there a way to make the curved bg-images responsive? So you don't have to keep adding media queries everytime their hight goes out of sync.

Also has anyone got any idea how you're meant to size the gaps in the curved sections? With the figma files there is no way I can see (unless I'm missing the obvious) to get a margin / padding reference. So pretty much had to eyeball the gaps, which I'm sure won't go well lol

Any and all feedback on my work is most welcome, if you have the time.

Thanks, Nick

Hi all,

any and all feedback is more than welcome.

Thanks, Nick

Hi all,

Any and all feedback is most welcome, so please take a look and let me know your thoughts.

Thanks, Nick

Hi all,

My biggest project to-date and I'm pretty pleased with how it came out.

I used BEM for the first time. So if there is anyone out there well versed in it, I'd appreciate your feedback on my effort :) I was kind of getting the hang of it and feel like it actually helped when it came to my CSS.

& of course any more feebdack on the project in general.

Thanks as always,

Nick

Hi all,

I must admit I did not enjoy doing this one lol

I'm curious how others would have made the white text box / speech bubble, any comments on my way would be appreciated. And also the clip-path I used to create the bottom of the speach bubble.

Thanks,

Nick

Hi all,

Really enjoyed this one. Learning more things about GRID as well which is great. I think I got the page to be 100% resonsive. If anyone wants a really good FREE course on GRID then might I suggest Wes Bos - CSS GRID. I learned a lot of good things from this course.

Please let me know your thoguhts.

Thanks, Nick

Hi all,

Just a couple of questions on this one please. Would be great to hear your feedback.

1 - I played around with min & max for things like font-size and my .logo to make it responsive. Is this a good practice at all? Or should I just hard code the changes in my media queries?

    width: max(120px, 14.71%);
}```

2 - Given that I get the figma drawings, is it best to actually hard code the paddings into my `.wrapper` class the way I do? As I use it to set out where elements start / end. When ever I come to the complete 1440 desktop version, I'm always off and have to play around with them a bit.

I'm juist wondering how the professionals would tackle responsive mobile first workflow knowing the desktop version needs to be a certain size.

Thanks again for all comments.

Nick

Hi all,

I went with grid again for this one and also practiced my responsive design.

Please take a loot at what I could have done better, I'm happy for all feedback.

Thanks, Nick

Hi all,

This was my first attempt at using GRID. I'm pretty pleased with the way it came out in the end. Having never used grid, there were a lot of properties to take in.

If someone could take a look at how I used it and let me know if I could have made the code any cleaner that would be great.

I also made a lot better attempt at making the page fully responsive, please let me know your thoughts on that.

Thanks, Nick

Hi all, please let me know what you think of this effort.

Can someone take a look at how I went about setting this up for being responsive please? In my .wrapper class I set width: min-content max-content;. I done this as I've been setting widths to everything of late in the hopes of making it picture perfect, only to be terrible responsively. I don't even know if the above is correct, but it seemed to do what I wanted it to.

I actually had to code this twice, as the first time I coded it desktop first and set the width for everything and couldn't do sod all with it in mobile view lol So If someone could let me know the best practice on this it would be much appreciated.

I also tried setting a couple of media queries and played with the design. It is not my strong point as you will see lol But at full screen and mobile I think it looks OK.

Thanks, Nick

Hi all,

Background images and how to move them around absolutely kills me. It would be great if I can get some tips on how best to do this. The two on this little project were a nightmare lol

What is the go to way for getting a background image to appear? This time round I used padding but it was confusing and I had to use a random % number for it to work. Any tips would be great on this one.

If you could let me know if I went he best way about adding them in to the HTML and then positioning them in the CSS, that would be great.

Thanks, Nick

Hi all,

Please can someone take a look at the way I done my buttons? I'm not convinced I went about them in the best way tbh. Should I have actually made them <buttons>, or was it OK using an <a> the way I did?

I also could not for the life of me work out why my hover effect on them was shifting them slightly on the page. I guessed this was to do with the hover effect adding a border. So I ended up adding the border to the element but making it transparent before the hover. If there is a better way to do this then please let me know.

Thanks for any advise and tips as always.

Nick

Hi all,

I tried the mobile first workflow for a change, I think I prefer desktop first tbh lol. But will try and stick with mobile first from now on, as it seems to be the way to go.

I had fun with the image overlay, thankfully the mix-blend-mode property is referred to in the figma designs. Once I hacked about for a bit, I think I got it done OK with the least amount of code in my .overlay and .overlay .img classes.

Any feedback on my coding again would be most appreciated.

Thanks, Nick

Got to learn about CSS background properties on this one.

Any thoughts on my code, please let me know. I'm always thinking I could have coded something in a simpler way.

Thanks, Nick

Hi all, please let me know if the image overlay could have been done different or in anyway better.

Any feedback from anyone on my work is much appreciated.

Thanks, Nick

Hi all.

I was left a little confused as to why 'text-align: center' on my .card class wasn't working when I tried setting my paragraph to 'max-inline-size: xxch'. When ever I did this, it would push the entire paragraph off to the left in an odd way.

To correct the issue I ended up setting 'margin: 0 auto' on my .text class. So I'm just wondering is 'max-inline-size' the correct way to set line length? Or which is the preffered method, that would not have affected the centering?

Thankyou for any feedback.