All solutions

Hi all,

in this challenge i decided to use react and see how it goes. The challenge was simple enough to make it in couple of hours but allowed me to explore react world a little bit more. The goal was to focus on react alone and not waste any time on other stuff like pixel pushing it to oblivion. One question i have for this community is did i handled the logic behind toggling the state of the unread messages in proper way. I've extracted the snippets of code in the README file on the repository.

Thanks in advance.

Happy coding, Miran

Hi all,

this was a fun one!

Getting everyday practice with challenges like this really up your game a lot. I learned a bit like always but having some tough time with grid especially placing the Photography/Illustrations items on the grid like in design. Those of you who managed to complete this challenge will know what i'm talking about.

I really wanted to test myself in getting design without media queries but i finally decided to stop fighting and place some here and there. Probably could have done without it but switching text alignment is something i still need to learn without media queries. As far as i know this is not possible.

Anyhow looking forward to see your comments, probably the thing that i'm interested the most is markup for "Services" grid on the top of the page. Would it be possible to do it without extra markup for the middle column? I tried everything i can think of and was always one step away from the solution.

Also couldn't think of a better way to offset the image on the Tablet "breakpoint" so i used position:absolute to inherit height of the parent element and just align it to the right basically and let it overflow outside of the window.

Keep coding!

Cheers, Miran

Hi all,

first time using Vue.js and absolutely loved it!

Handling user input is a piece of cake and <Transition> component is a cherry on top. Looking forward to using Vue on other challenges as well.

Any recommendations or suggestions are always more than welcome.

Cheers, Miran

Hi all,

thinking about ways to solve this challenge I've made some research on the topic and found interesting diagram that helped me with laying out basic logic for how this thing would need to function. There is more than one way the user can change the theme/dark mode settings and all of them must act synchronized. Once the initial logic was set up it was only left to write it down in Javascript. I'm aware that this is not the prettiest piece of code and if anyone has any suggestions how to improve it please let me know.

There are also couple of things in CSS itself that could be beneficial of some kind of refactoring especially duplicating CSS custom properties in favor of setting up Theme/Dark Mode and some dirty hardcoding media query values for background switching.

If you want to know more details about this project you can find it either in Repo itself or ask a question here. I would be more than glad to answer it.

Keep coding!

Cheers, Miran

Hi all,

this challenge was a fun one and i'm gonna try and explain my process.

I've used Astro on this project for building .html files. I know this is kinda overkill for this challenge but i'm lazy with syncing individual .html files especially repeating sections like footer etc...

Next i decided to create a custom map on Location page with Mapbox as i have some experience with it. It can be improved for sure but for this example i think it looks ok. I also added custom Pin from design and added Popup functionality as well.

For layout i've mostly used CSS grid with some Flexbox along the way where needed.

Images are marked with Picture element with multiple Source's for responsiveness. I've also added @2x versions where needed.

Lastly i've played with :hover state on buttons with @media(hover) to only target supported devices.

Let me know what you think!

Cheers, Miran

Hi all,

another challenge completed but with lots of headaches along the way. I'm having some issues around spacing elements on the page as i'm trying to approach things with more holistic approach like flexible typography and using clamp/min/max functions etc. Figma/Sketch files would be helpful in some way but as i'm reading more and more about Tailwind i'm really interested in which way this exercise would be beneficial of using Tailwind instead of plain old class styling css/scss. I'm always having troubles regarding vertical rhythm of the page and fluidity of responsive design. Any suggestions as always would be really beneficial.

Keep coding! Miran

Hi all,

happy to hear your thoughts on my take on this challenge. I've added bar animation on load and disabled hover animations on mobile (because no available hover on mobile).

Keep coding!

Hi all,

some ideas to animate content height between advice's would be excellent.

Cheers, Miran

Hi all,

this was fun little project in which I learned something new about CSS custom properties. Never knew it is possible to create animated CSS counter with them. My focus in this exercise was to create some animations and make design more dynamic and i have completely ignored semantics and making sure that all components are accessible. Would love to hear some feedback about markup part because i'm not 100% sure which is the proper way to tag some of the elements in this design.

Cheers, Miran

Hi all,

this is one of those challenges that seems basic at first but will give you some headaches along the way. Nonetheless is was quite enjoyable in the end. It would definitely help if you have Figma/Sketch files alongside because it is pain-in-the-*** to guess values for colours/spacing sometimes. Took more time than i expected.

Keep coding! Cheers

Hi all, one question i have is regarding proper way to markup multiple star svg images, there is nothing wrong with my approach but i reckon there must be better way to do it. Having multiple images just for the sake of it seems kinda off.

Thanks anyway. Miran

Hi all,

what would be the best way to markup the "old price" for accessibility purposes?

Thanks, Miran

Hi all, is there any way to fine tune my solution to closely match the design without having an access to figma/sketch files? Maybe some common letter spacing values or drop shadows throughout the challenges? I don't want to fine tune it to oblivion but small differences are driving me crazy sometimes ;)