All solutions

Getting my grid groove on

This one took longer than anticipated. I decided to create the desktop version first, but it seemed more tricky doing it this way. I also wasn't able to make the width of the mobile view image, stretch in the container once I locked in the height so ended up locking in the width of the card to the width of the image.

This one took a while. I struggled trying to get a perfect circle with text centered inside with CSS. I still don't think my text is quite centered in the circles. (I centered the container housing the text, but wasn't able to get the text to be centralized in it's container. I also struggled with some aspects of the Javascript (creating & using a variable) - I've added this to my readme file.

HTML/CSS project cause I was too scared to attempt a Javascript one. I used grid to house the image/heading/paragraph; This seemed to work, I'm not sure if there's a better way.

After struggling a little with a previous challenge I thought I'd attempt this newbie one and try to make sure my fundamentals are correct. Thankfully I managed reasonably comfortably with this one.

My 1st Javascript project - I feel like there's probably much more efficient methods of doing this, rather than a long SWITCH statement & IF statement.

Other than this, I really struggled with the CSS on this project. I got there with lots of trial and error in the end. I'll need to practice more of this.

I struggled centering my eye icon. I eventually remembered that the container needs to have position: relative, to house the absolute icon.

I decided to watch a tutorial before starting this challenge to make sure I'm heading in the right direction with my coding and choices. I still faced many challenges.

The tutorial was by Kevin Powell after seeing a comment by @MattPahuta. Thanks Matt he's very insightful.

I wasn't sure how to get my footer to align to the bottom of the page without un-centering the rest of the content. In previous challenges I was able to sit the footer outside of the body which did the trick. It wouldn't budge from the other content here.

I'm currently doing Dr Angela Yu's Web Dev bookcamp on 'Udemy' and feel like I'm understanding it (currently midway through Javascript) but these challenges are a whole different thing. This one's taken me forever to get through

I added variables to store the colours. I feel like I should have done the same with 'margins & padding'. It probably would have made things easier when doing the media query for mobile view.

I also wasn't sure how to split the 'reaction/memory...' on the left, from the 'numbers' on the right. I ended up hacking it together using different margins. I'm sure that's not the "correct" way.

Created using 2 Flex-boxes (1 for the QR content, and other for the page layout) - I'm unsure if 'grid' would be "better" for layout, or if it doesn't matter.