All solutions

What are you most proud of, and what would you do differently next time?

I chose this challenge because my javascript skills need a lot of work. It was a good learning experience. I wanted to do it all in vanilla JS (and CSS) and then try it again in react to see how it differs in design and implementation.

I changed the design colours to fit my own theme this time around. Not something I usually do in these challenges, but I wanted to put my own spin on it.

I'm proud that I got everything working, even the drag & drop, even if it doesn't work amazingly it still works!

What challenges did you encounter, and how did you overcome them?

All of the JS was difficult. I had to try several different things before finding the correct solutions for everything. Amazon Q helped me when I needed it! 😅

What specific areas of your project would you like help with?

Improving my JS skills, mostly. Also, would you do this in vanilla JS yourself? What would you use?

What are you most proud of, and what would you do differently next time?

I decided to do this challenge because I wanted to build the card with a tilt mechanic to give it some depth. The challenge itself was simple, and it took me a couple of hours from start to finish.

What are you most proud of, and what would you do differently next time?

This was a great challenge with lots of little css tricks. It was fun trying to build the phone screen as I've never had to do that before. The hardest part was getting it all to be responsive so it scales up and down at the same rate.

I added a couple of little easter eggs just for funsies. Can you find them both? 🐶

What challenges did you encounter, and how did you overcome them?

I used clamp() for the first time and it's a good way of controlling the min and max restrictions of an element.

I changed some of the colours slightly to make sure they meet the WCAG contrast requirements.

I was able to complete the bonus challenge of having the screen load progressively upon opening the window, as well as adding a couple of little easter eggs and a nice floating animation on the phone container.

What specific areas of your project would you like help with?

Any feedback would be awesome. Thank you!

What are you most proud of, and what would you do differently next time?

I learned more about svgs, using the tag instead of wrapping it in an. More importantly I learned about how to create a timer using Javascript and output the results into the specified fields.

What challenges did you encounter, and how did you overcome them?

I was unable to do the bonus objective of animating the card. The only ways I could find to do this were to import a jquery file and use their code, but I didn't find one that allowed me enough control over the css to keep the style the same as the design.

What specific areas of your project would you like help with?

How would the animated flip card come into play? Would it be created with JS or CSS?

What are you most proud of, and what would you do differently next time?

I wanted to keep the max-width on this to 1440px instead of allowing it to go fullscreen at any size because it compromises the quality of the hero image.

I learned more about forms, inputs and aligning with position: absolute. I'm also getting more familiar with the javascript behind simple forms.

What challenges did you encounter, and how did you overcome them?

Aligning the submit button within the email input was difficult. I had to look up how to do that, and ended up positioning it with position: absolute within a container holding both the email input and the button.

What specific areas of your project would you like help with?

What do you think I can improve? How can I make the javascript behind the form better? How can I submit the form without refreshing the page?

What are you most proud of, and what would you do differently next time?

This challenge was surprisingly easy - I finished it a lot quicker than I expected. Because of this, I added some extra touches to make the site pop, such as some quirky movement on the headers when hovering and scaling on the images. The design of this page is really not my cup of tea with all the big blocky images - especially in mobile where the 'transform' egg image is directly below the hero orange image, it takes up a lot of space needlessly.

What challenges did you encounter, and how did you overcome them?

The mobile nav menu was the hardest part of the challenge for me. I know this is still an area I need to work on - and any tips with this would be great!

What specific areas of your project would you like help with?

Is my code any good? How can I improve my mobile nav menu? Any comments would be great. Thanks!

What are you most proud of, and what would you do differently next time?

It took me way too long to remember flex-direction: column-reverse was a thing.

This project as a whole also took me a lot longer to fininsh than I expected. I didn't do my usual thing of trying to match the pixels as closely as possible... but I did try to stick to the design as close as I could. I'm learning more about flex and responsive design as well as small snippets of javascript where necessary.

I used a lot of css nesting and I actually found it to be a slight detriment in some situations, as I had a few too many layers of nesting and the code got a bit messy as a result (or in spite of).

What challenges did you encounter, and how did you overcome them?

I wanted to make sure the page was accessible and perhaps it still has some nuances to overcome - if you point anything out I'll try my best to fix it! - such as a the pink in the design having too much contrast with white text on top, so I adjusted the pink hues to make them darker. Admittedly it doesn't pop as much, but I wanted to keep the text white on the buttons.

I experimented with variable font sizes based on viewport width as well, and I think that came out nicely and I'll try to make better use of this in future projects.

What specific areas of your project would you like help with?

Any feedback at all is appreciated. I've still got a long way to go before I can consider myself good at this.

What are you most proud of, and what would you do differently next time?

I got really caught up making the page as close to the design provided as possible, without the use of the figma file. I enjoy matching the brief and it gives me something to work towards, but it did end up taking me a few extra hours to line everything up. I think I'm still a pixel or two off in some pages, but I'm not sure how much closer I can get.

I decided to use table for the nutritional info, and I know I probably should have used grid or something instead, but I figured I'd stick with it this time around as I haven't had much experience using tables.

Overall, happy with the result but I probably should spend less time on basic challenges and more time time learning new skills!

What specific areas of your project would you like help with?

The issue with the generated screenshot not being the same size as the design screenshot really bugs me even though it probably shouldn't. Is there anything I can reasonably do about this?

What are you most proud of, and what would you do differently next time?

This was pretty new to me as I haven't worked much with contact forms before. The styling wasn't too difficult but getting everything to process correctly was a pain. A lot of the javascript went over my head and I used copilot to aid in much of the JS (which means it works, but probably not very efficiently!).

This was my first project where I leaned heavily into CSS nesting and I like it a lot, it feels like a natural way to do things.

What challenges did you encounter, and how did you overcome them?

I had to turn off the form sending as when it sent, the page refreshed and I wasn't able to show the success state. That's something I need to figure out in the future.

I used accent colours to style the radio and checkbox inputs instead of the provided SVGs (oops).

What specific areas of your project would you like help with?

I would like to know what I can do better in terms of accessibility and efficiency. The JS in particular. How can I actually process the form and also show the success state?

Thank you in advance. This was a tough but fun challenge!

What are you most proud of, and what would you do differently next time?

This challenge was quite difficult and provoked me to learn more about how Javascript works and include various functions. The hardest part was getting the correct number to display properly on the thank you section.

What challenges did you encounter, and how did you overcome them?

A couple of things I did differently from the brief - I slightly changed the colours to better match the design screenshot, as they seemed a bit off. I added the radial gradient on the ratings-container, although it's not perfect it does get quite close to matching the original.

I also put a button on the second part of the page to let users go back and start again. This was helpful for testing and allowed me to expand my learning a bit more.

What specific areas of your project would you like help with?

More than anything I'd like to know if my JS is satisfactory. I'm still learning and it seems pretty complicated!

What are you most proud of, and what would you do differently next time?

I'm proud that I finally got the JSON to work correctly! Learning Javascript/JSON has been a whole different ball game to what I'm used to.

What challenges did you encounter, and how did you overcome them?

The styling was initially problematic, but I was able to work through it with some time. The implementation of the JSON file for those sweet bonus points is what stopped me from submitting this project for so long. I finally got round to fixing that after a couple of months. I still have a long way to go to be comfortable with JS.

What specific areas of your project would you like help with?

Just to make sure everything looks ok, the code is clean and what can be improved in future projects.

What are you most proud of, and what would you do differently next time?

I didn't look up too much for this project, and I experimented with CSS nesting. Next time I'd hopefully just write the code much cleaner and more efficient.

What challenges did you encounter, and how did you overcome them?

A simple design but it took a lot longer than expected. Mostly getting the image right on both desktop & mobile since it's a different image on each layout. I used two different divs and hid the one that wasn't needed. That is probably not the best way to do it, but it works!

What specific areas of your project would you like help with?

Any feedback regarding CSS nesting, responsive flex, custom CSS properties... or just anything haha. All comments are appreciated. Thanks!

What specific areas of your project would you like help with?

This was a very quick project, any feedback is appreciated!

For this challenge I tried to match the design as closely as possible in as short time as I could. It took me approx 20 minutes to finish.

Any feedback would be appreciated. Thanks!

For this challenge I tried to get my design as close to the preview as possible, spending a lot of time tweaking it to match. It didn't end up perfect, but I'm happy with the result nonetheless.

With this being basically my first time with JS, I wasn't able to write the code myself, but instead relied on snippets from w3schools & copilot to assist. Going forward I want to rely on these sources less, and my own coding abilities more.

I'm sure this can be done a lot better, so any feedback is welcome and appreciated. Thanks!

Frontend Mentor - Blog preview card

This is my first submission to Frontend Mentor! I am new to using github, haven't used javascript before and I'm extremely rusty with CSS, so these challenges will hopefully help me improve my skills in the frontend space.

Any feedback on this task would be greatly appreciated!

Extras

• added keyframe animation to the box-shadow on hover.

Thanks!