All solutions

So I have to say I'm childishly proud of something that's probably really easy for a lot of you out there. But my Javascript skills getting better every day. Because I use nunjucks for these projects, my normal route would be to just iterate over this data with a foreach loop, but knowing I need to challenge myself on Javascript I tried to use native javascript instead.

Not knowing where to start led me to a solution of @elaineleung and this was really helpful. I never heard of things like createRange or createContextualFragment but these were really helpful. Thanx @elaineleung!

One thing I did a bit differently is the way a render the bars. While @elaineleung is appending it to each bar,

<div id="barsEl" class="spending__bars bars">
            <div class="bars__day"></div>
            <div class="bars__day"></div>
            <div class="bars__day"></div>
            <div class="bars__day"></div>
            <div class="bars__day"></div>
            <div class="bars__day"></div>
            <div class="bars__day"></div>
          </div>

I appended each bar inside its main container.

<div data-chart class="flex justify-between mt-[52px] items-end"></div>

I'm not sure if this is totally not the way to go but I thought it was a nice personal touch to some 'stolen' ideas ;).

I hope you like it and please give me some feedback on how to improve.

So this was a fun one to try. To be honest. I think this wasn't especially hard to do. This is mainly because the phone (in this case) doesn't need a lot of responsive work. Probably if you needed (or created) a responsive version of the phone it would be different story.

So for this, I used my tool of choice, Tailwind, and have to say it works well. It's so easy to use custom values and write them directly in your HTML.

I'm wondering if I missed something that makes this an intermediate challenge because, as I said, didn't think it was really hard to do. Other challenges are more difficult IMO. Like the 'Interactive card details form' which is a junior challenge.

So, I hope you like it and feedback is always welcome and much appreciated.

Simple Advice generator app to practice making an API call. Now I'm looking forward to doing some more with API calls. Always open to feedback and tips ;)

P.s. I also had some code written to load a piece of advice on page load but wanted to start with the default from our design. So I could see if my code is as pixel-perfect as I could be.

Fun project to practice some CSS grid and flexbox. I think it's quite pixel-perfect, but I wonder what you think about the skill boxes. Are they designed right? Wouldn't it make way more sense if they had some logical sizes? Is there someone who made this section pixel-perfect without being specific on each block?

Then about the slider. I know I can be done with pure javascript, but who is doing that these days? I always use swiper.js for this kind of slider. Are there reasons to code these manually besides practicing?

So. This took me crazy long and not because of any css or html challenges but because i'm really sh*t at javascript so it seems. I know im not good at js, but thought this would be easier because it's 'only' a junior challenge.

Probably i could have gone an easier route by just adding/toggle a active class on a parent list item and style everything based on that class, but because tailwind is my go to at this moment i really wantend to switch classes based on a event listener.

So i ended up doing this (after trying lots of things).

const toggles = document.querySelectorAll('.js-toggle');

// Toggle Dropdowns
toggles.forEach(toggle => {
    toggle.addEventListener('click', function (e) {
        // If the clicked item already is open then close it and rotate svg back
        if (toggle.querySelector('ul.menu').classList.contains('grid')) {
            toggle.querySelector('ul.menu').classList.remove('grid');
            toggle.querySelector('ul.menu').classList.add('hidden')
            toggle.querySelector('svg').classList.remove('rotate-180')
        } else {
            // Close all submenus forst before opening the cliked one.
            toggles.forEach(element => {
                element.querySelector('ul.menu').classList.remove('grid');
                element.querySelector('ul.menu').classList.add('hidden');
                element.querySelector('svg').classList.remove('rotate-180');
            });
            // Open submenu
            toggle.querySelector('ul.menu').classList.remove('hidden');
            toggle.querySelector('ul.menu').classList.add('grid');
            toggle.querySelector('svg').classList.add('rotate-180')
        }
    });
});

I hope you can give me some feedback so i can improve on this area.

Something else i'm always struggle with are mobile navigations. In the old day's i often made 2 navigations. One for dekstop and one for mobile. Then i would just show and hide these based on media queries. But these day's i try to convert one nav to desktop and mobile. Is this the way to go, or are you guys (and girls) still doing two navs?

Lastly i didn't make it pixel perfect because my focus was js. Will make thing pixel perfect when i upgrade to pro ;)

So my third project is just one to practice some basic GSAP animation. I used inline svg code to be able to add some classes on the separate devices so i could animate them in separately.

Further more i positioned the mockups a bit 'out of bounds' on tablet sized devices. This look better then a resized image imo. Wouldn't you agree? Or would you do something else?

Lastly i didn't focus on making it pixel perfect. I think it looks good on multiple screens and i don't have acces to design files.

I hope you like this basic project and looking forward to any feedback or comments.

So my second project on Frontend Mentor. I really liked it as it is a simple but well designed card to code. The difficult things on such a 'simple' design is how to give it something extra.

I tried to add some sparkles by adding some focus states and by adding a small effect on pressing the "Add to Cart" button. I tried to change the "add to cart" to "add to bag" because i tought this suits better for a parfum brand. At the end switched back to add to cart because it just looked better.

Hope you like it and thanks for watching.

So this is my first project on Frontend Mentor and i mainly wanted to test the workflow and see how this promising tool works.

Most of my recent projects are build with tailwind css and i have to say i love this workflow. Mainly because i love building in components and think that this follows the SMACSS Atomic css principle i always wanted to follow.

Im not sure if i can further improve this solution after submission but thats also what this first test is for ;)