All solutions

I did the masonry look via flex-box with flex-direction: column. It looks good but isn't perfekt at all because the order of the items is top-down, not left right. And you have to set the correct height for the items to wrap to another column. Do you have any other suggestions to realize a masonry look??

I used localStorage to save created board over page-refresh. It worked well while I was developing on my local machine. But there came up a problem, when I deployed to github. This is the issue: The id of a specific bord is part of the url-path. When I refresh the page with an id in the url-path it responses with 404 because there is no such path including the id on the server.

Any Idea how to deal with this issue? Thank you for your help or any other advice!

I did this solution mostly in accordance with the video series by Kevin Powel https://www.youtube.com/@KevinPowell. I learned a lot from him.

Personally I think that he is overdoing in terms of utility-classes and custom variables. What do you think about this topic?

Please test the accessiblity of this project as this is a topic I'm currently focusing on.

I used aria-expand on the hamburger menu-button to improve accessibility. What do you think of it? I would like to get some advices on how to make the card-preview (pop-up) accessible for screenreaders. I didn't get that.

I also build a fully functional slider with auto-play and gallery-navigation. But due to that I waved the extra modal meant in the design... Feel free to comment on my work! :)

I used input-checkboxes and labels to realize a touchable slide-menu. Thus no JS. I also implemented some utitlity-classes for the design-system (font-properties and colors).

Please feel free to review my code and help me optimize...

I used some utilty-classes for fonts and colors. What do you think of this approach?

I have used some utility-classes for the fonts and other properties. What do you think of it? I also added some liquidity in the mobile-layout. Please feel free to test and comment.

No further questions on my side. Any feedback for improvements is welcome!! :)

At first I didn't notice that there's supposed to be JS involved in this Challenge. So I started tackling the challenge using css only. Now I'm wondering what do you need JS for in this challenge? I think I got all the functionality and interactivity using only css. Did I miss something? To make the slidebar visible I used <input type="checkbox" id="Name"> and <label for="Name"> together with pseudo-class input:checked as selector.

Any feedback welcome and highly appreciated !!! :)

No further questions on my site. Any feedback is welcome!!

No further questions on my site. Any feedback an improvments highly welcome!! :)

No questions here form my side. Yet any feedback regarding the code is highly welcome!! :)

I am welcome for any best-practice feedback and optimizations. How to make css more robust and open to changes?

I have one problem left that I simply don't understand and I hope for help. The black button in upper right corner (and only this one ) doesn't show hover-states when in tablet or desktop mode. It does however show hover state when in mobile mode. I don't get it why... :/ May be someone feels challenged to find the mistake in my code? Thanks a lot!!!!

I had trouble syncronizing the change of layout and the change of the picture. My solution was to put the flex-wrap:wrap behind media-query that also controls the picture.

I am glad for any best-practice advices. Thaks a lot!!