All solutions

Credits @Cheosphere

Made this project and then checked against @Cheosphere pixel perfect design. Not gonna lie took a lot of time. I learned a lot how to properly structure my html and css also different ways to achieve the same result.

It took quite a while to figure out first landing page.

I'm baffled by this one. I measured pixels on the photo and translated to rem. Absolutely no idea how h1 looks smaller when I measured 36px(2.25rem) wrote 2.5 by mistake and still looks too small by the look of it it should be closer to 3rem... the photo they provide is messed up or is there more to it just measuring pixels on ipiccy?

Same with input field, measured font 12 pixels and padding 20 px but just look at the difference...

Great example that practice makes perfect and I can learn something new even with small projects. Took me a long time to learn that I can load two background images on body element. Until then I spent 1h to add them through two div elements with absolute positioning but that was messing up page flow and entire body element was getting moved to the right. Also I've found that using margin: 0 auto; is more elegant than using flex twice on parent and child to get it in to the middle.

Fairly straight forward

Pretty standard but never heard of mix-blend-mode so had to look it up which took a while to figure out that I even need it. Little things like that can make our own projects more interesting.

Good practice and refresher about transition. Also interesting effect on hover with the eye. Small things like this are great to build experience i implement things later in our own projects.

Not gonna lie after a month without coding JS got really hazy I'm happy that CSS and HTML were quite easy to recall. Nevertheless project finished.

I learned couple new things about js:

• how to prevent default behaviour (and refreshing the web every time when clicked submit)
• styling css with js but mostly I try to avid it and use CSS for styling

also a little refresher about html form was useful.

Not gonna lie took longer that it should but shorter than previous one :)

I couldn't be bothered to fight with transition for smoother animation on desktop. Any suggestions would be greatly appreciated!

It took me close to 10h to finish this. Way more than it supposed to. I learned a ton and hope it will stick around.

• Weird relation between position:relative; and sudo elements couldn't get the arrow to spin on clicking the header for the life of me even chat.gpt and phid but were prompt to explain once I figured it out after 1.5h hour of "research"

• Positioning was another challenge that kept me on my toes until the last minute as hidden just made a fool of me with this last box and took me a while to appreciate position:relative; many youtubers seem to love absolute but fail to mention relative as a parent which makes life so much easier

• as I'm fairly new to JS that was fairly difficult for me and I learned a ton

• in general, learned ton of new staff for which there is no tutorial on youtube that could prepare me. Practice is completely a different beast compared following a tutorial.

I've learned a lot about JavaSctipt about event handlers, especially forEach method to sort through elements with the same class/id. Also, I practiced basic local storage management, when score given before submitting will carry on and change innerHTML to match the score given.

Guided creation to improve as a web designer with thinking from a pro. Practising grid

Grid can be a blessing and a nightmare at the same time.

First time used grid

For some reason it doesn't scale down to "phone view" with media query easely. I have to pull up dev tools otherwise it refuses to minimise the browser further.