All solutions

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

I enjoyed this one and i'm happy to get an intermediate challenge under my belt

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

getting the slider section to work was interesting but i got there in the end

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

Let me know if there's a better way to get the slider to work, perhaps you can use tailwind for this?

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

Happy to get another challenge complete after a long break from coding

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

I couldn't figure out how to add a success message when you submitted the email, This wasn't a requirement but i feel it would have looked better.

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

How to add a success message for email validation. I tried but couldn't get my head around it. Maybe as this was an afterthought and i didn't want to mess up my javascript

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

I think the overall design looks great and i think my dropdown lists and my hamburger menu look smooth. The only thing i'm not happy with is the ay the image shrinks when reducing the screen size but i couldn't think of a good way to make this look better! Any suggestions?

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

Same challenge as always! Javascript. Chat GPT helps a-lot

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

I don't honestly think anyone can help me when it comes to Javascript it just doesn't make sense to me yet. I find it hard to get things in the correct order and get confused and overwhelmed.

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

Finding the tag which allowed me to add the dropdown for tag without the need for any javascript.

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

i couldn't figure out ow to transition the drop down accordion to make it look a little bit smoother using tailwind. I'm sure there is a way but i just couldn't seem to find a solution so if anyone knows how to get that to work please drop me a message please

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

If someone knows how to add a transition to the drop down accordion using tailwind css please drop me a message. thanks in advance

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

happy to get this one knocked of the list as i work my way through the different challenges.

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

interesting using things like and to make the html easier to understand. although the disc/dot is removed with tailwind so i had to figure out how to add it back again. same with the numbers on the but i got there in the end by adding the following: class="marker:text-DarkRaspberry opacity-90 flex flex-col gap-3 text-sm list-disc list-outside pl-5"

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

hard to get everything to match the original design with tailwind but i think i got it close?

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

As always i'm proud of my design and also my ability to us AI tools like ChatGPT to help me with the Javascript.

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

I found getting the input field for the custom tip difficult. but with the help of ChatGPT i was able to solve the issue and get the code to work correctly.

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

Im not going to pretend to be good at Javascript. I work full time and have to children so getting free time to learn frontend development is a challenge for me. If this was my full time job i think i would adapt and improve massively. but a few hours a night has got me this far. Javascript is for me a real challenge.

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

Im happy with my layout on this one, good challenge working with grid, flex and absolute positioning for background images also working with the different screen size adjustments. overall getting the json file to work with Javascript was hard work and once again i dont really understand how i finally got it to work.

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

My biggest struggle with this was fetching the json file. I spent far to long trying to figure out why it would work for me only to finally realise my mistake! BEFORE: const dailyBtn = document.getElementById(".daily"); const weeklyBtn = document.getElementById(".weekly"); const monthlyBtn = document.getElementById(".monthly"); AFTER: const dailyBtn = document.getElementById("daily"); const weeklyBtn = document.getElementById("weekly"); const monthlyBtn = document.getElementById("monthly");

something so simple can cause so much time and effort!!

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

Im not sure how semantic this ones going to be as i think i might have used divs more than i maybe should have. interested to know if anyone has any better ways to do this to make it easier to understand.

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

Im proud of the fact i've managed to create this with a minimal amount of code. especially the Javascript. hopefully it makes sense to other as i know tailwind can make things look more complicated than they actually are. I made the mistake of using flex much to often when designing the layout which resulted in me struggling to get the image to resize and adjust to screen sizes. toke me far to long to figure out the cause. so in future i will only use flex when absolutely necessary!

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

Few things i've learned from this challenge. creating and positioning the popup was fun. A little bit of research made this one fun. also looking at a-lot of other examples of his project i really couldn't grasp what other peoples javascript was doing. it seemed so over complicated for what we had to achieve. I think what i've done is simple enough for people to understand but feedback would be most welcome.

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

Honestly i would just love to know if the way i have went about this was a good enough way of doing it so as always please give me your advice.

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

I'm proud of how far i've come since the first time i done this project! The first time doing this i followed along to an online tutorial and barely had a clue what i was doing and now i've done this version using Tailwind css completely on my own and understood exactly what i was doing. If i was to do this again i would like to try and make it using less html by creating one card with all the styles and just adding required content without having to style every card. even though i only had to copy paste i'm sure there is a benefit to using less code when it comes to bigger projects to improve the speed of the website. Something i've not considered yet but still need to learn.

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

Remembering how to get the image to be behind the text on Daniels card. I knew i had to use absolute positioning and make the parent relative but i couldn't get the z-index to work. ended up just using negative z index on the image and that worked. I'm not sure that was the best way to do it but if somebody could let me know that would be great.

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

Im always open to constructive criticism. Please don't hesitate to let me know what i can do better mainly to reduce the amount of code perhaps needed?

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

Learning new ways to use Grid to position layouts and improving my working speed. If i was to do things differently i would try not to worry as much about font sizing and spacing. (Total project time 2hours 10 mins including getting tailwind set up)

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

positioning the cards was tricky to start with but this is when tailwind becomes so useful.

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

If theres a better way to lay this out let me know as i may be over complicating things.

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

Adding custom fonts to tailwind config file and custom colours. I also used Github desktop to upload to Github which is a super easy way of doing it but i toke a bit of time to learn so that slowed me down. total time for this project was 3 hours

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

Remembering how to get tailwind set up for my project slowed me down on this one. i entered the wrong script name for locating my output.css file needed to add ./output.css

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

I think i've got the Html correct but open to suggestions if i've made any mistakes

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

Finally getting my first project using javascript. I managed to get things working but i really don't know how to be honest. my hope is with time and more projects it will begin to make more sense.

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

Struggling with javascript to be honest as there seems to be so many ways to achieve the same goal and its hard to know the best way. Im also struggling with using tailwind with javascript. I find it hard to find solutions online when i encounter problems.

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

I would love to know what others use to link the html to the javascript when working with tailwind css as i find with all the classes you add with tailwind it makes more sense to get it with an id but you can only have one id and numerous class names. what is the common practise amongst developers using Tailwind css?

First project using ReactJs with Tailwind CSS. confused is an understatement! ready for your constructive criticism on this one! as always thanks in advance for taking the time to have a look at my code. Im not gunna lie i watch a lot of tutorials to get this one done and its gunna take a long time to get used to React.

This is my first project using Javascript. I hope you can take the time to have a look at my code and give me some feedback as like i've mentioned before this is all new to me. Ive spent the past 10 years working as a construction site manager with very little experience even using a computer. So for me this is a huge challenge that i'm enjoying more than i ever expected. I think on my next project i'm going to give React a go as i think this will work really well along with tailwind CSS? Anyone else use this combination let me know your thoughts and any tips for setting up my coding environment would be welcome. As always i look forward to you feedback good or bad. thanks in advance

This was my first project using CSS which i completed with the help of an online tutorial. My introduction into the coding world. I will eventually recreate this using tailwind CSS. for anyone who hasn't tried tailwind yet you should really give it a go!

You can practise with tailwind play on the main tailwind website and best of all its completely FREE!

Look forward to your feed back on this one.

Forgot to add max width for this one. Also find it annoying you have to have your index.html file on the top level and not in my usual pages folder. is there a way around this? keep in mind i'm a complete novice to using computers so any info you can give me would need to be super simplified to make it idiot proof.

As aways thanks in advance for all advice given!

Another simple Mentor challenge complete! Although this was a simple challenge i have managed to still learn from it. Working out how to get the shadow effect was tricky enough. but thankfully after watching a few youtube videos It seems it was easier than i thought! and i learned a little about absolute and relative positioning along the way. I also figured out to to stop the button/anchor tag from taking up the full width of the flexed section by using w-fit. who knew it was so simple eh?

As always please don't hesitate to give me some constructive criticism as for me its the best way to learn. Thanks in advance

I decided to give something a little more difficult a go for my second challenge. I struggle with knowing how to break up the different sections and understanding when to use certain tags. I feel like it would be very difficult for anyone to understand my way of thinking and i'm sure there is easier ways of doing things which i hope someone will give me some good advice. All in all i feel i've done well with this one but il let you guys be the judge. Thanks in advance to anyone who takes the time to have a look and looking forward to moving on to the next one.

This is my first time uploading to frontend mentor. Always good to try new things so i hope i can get some feedback on this one as i'm always open to constructive criticism. I used Tailwind css and flex-box. I couldn't get the background colour to change when adding the focus media query so if anyone can let me know how i could do that with tailwind please that would me much appreciated. looking forward to your feedback and now on to the next one.