All solutions

I am looking forward to your feedback.

I really enjoyed working with tailwindcss again. It definitely made my coding faster but I very much prefer vanilla CSS. but sometimes it's great that I don't have to leave a .css file to change the style. I also designed a second-page using react-router that will show up when you submit the offer. it already took so much time so I didn't have time to redesign the second page. But I should definitely do it soon.

I used Tailwind CSS for this project alongside with ReactJS library. it was fun working with Tailwind CSS but it took a lot of my time. I don't know why, but I still prefer Vanilla CSS for my projects. Maybe with time and practice, I will get used to it.

Also, I will add some other functionalities to this project soon. Hopefully, I will update my solution as soon as I get my desired results. I'm looking forward to your advice. I would appreciate any feedback.

Thank you, Frontend Mentor, and the community for everything I've learned during these couple of months.

What I learned For this challenge, we could have several options to achieve what we want. first of all i wanted to try this one with CSS background-image way. in this method, i defined every div that we could have in our page and by assigning a background image with CSS on them, i controlled changing pictures from mobile state to desktop state. I think i could also assign a picture directly to divs and then hide mobile or desktop images in opposite cases with CSS or even js. but i preferred this method and despite the complexity, it added to the project, i liked the experience. But if i had to start over this project, I will not do it with this approach, because with no content the divs were hard to assign a non-specific height or width and it added a little to the time i finished the project. overall i liked the experience and I hope I can do much better work in the future.

Continued development I do feel that it could be done much faster and easier with ReactJS. but I decided to go with vanilla JS and I didn't regret the experience. Maybe next time...

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library

I used this opportunity to practice my ReactJs knowledge and also CSS Custom-Properties. I managed to do all CSS responsiveness with only CSS Custom Properties and I really liked it. it felt amazing to only change a couple of things and Voila! now it works both in mobile mode and also desktop mode. To see how you can add code snippets, see below:

I definitely would want to cut off some of my repeated code and also reach the goal with much fewer lines of code. Maybe I have to try using useRef, but that was not something I intended for this challenge.

this challenge was a good way to practice SASS and SCSS and also I learned about its limitations. still, by now, I prefer CSS and its custom properties more. also, it was good practice for my CSS grid knowledge, and watched a couple of videos about it.

I hope I can write a more concise and also shorter code for this kind of application, it's not that hard, and also it was tricky because I tried to DRY as much as I can but in the end, I could do what I wanted to. for example i don't know yet how to replace an addressed directory of an array with our state

const directory = data.timeframes.daily.current;

for example, I wanted to change the directory when our state changes and just replace "daily" with our new state. but I wasn't able to do that yet. hopefully ill find another way around it.

Hi everyone it was really fun and also challenging to do this challenge. learning about chartJS was absolutely challenging and also joyful. I enjoyed my time with their documentation but still, I struggled at some points. for example in the tooltip hover effect, I couldn't put more time into adding the dollar signs and also removing the color. I would highly appreciate any feedback. Kamran

What I learned this challenge have challenged my JS knowledge and also i would learn about client-side authentication with JS

why we would consider this kind of validation? why we need to do this at all? well, this way it could be much faster to validate the data that entered by the user, and it would be much faster than sending data to server and process it that way. (that been said, we still need to validate our data also on server) with JS we can almost validate any form we want by simple functions and variables this way we will have only acceptable inputs from user (client) to be sent to our server so, according to MDN docs there are two types of client side form validation, first is the built in validation features in html that will allow us to basicly require data in required format from user. its much better performance wise and also much easier to keep track of it, but its much simpler and not so customizable the second type is by JS

--Useful resources [https://www.youtube.com/watch?v=CYlNJpltjMM] - a video from JavaScript Academy that helped me a lot with the js part of the challenge [https://codepen.io/javascriptacademy-stash/pen/oNeNMNR?editors=0010] - the codeOpen code example for the video above [https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation] - MDN doc for client side validation [https://www.frontendmentor.io/solutions/intro-component-with-signup-form-html-css-sass-js-By3rWK2Mq] - challnege done by dear Vanza. He is a perfect guy who i admire his passion for this profession. i really liked his challenge and it helped me a lot.

Hi! honestly, I struggled a little with this challenge. The layout was a little tricky especially the hero image in desktop view. But I tried a lot of possible styles and hope it's good, but just for now. I would really love to hear from you, I would appreciate any advice or tip a lot.

also, I want to thank dear @vanzasetia. he helped me a couple of times with his comments, and now with this challenge, I learned a lot from his code and his solution.

Good Luck to you all my friends.

Hi I tried my best to position the background pattern for the desktop perfectly but I couldn't make it 100% right for different screen sizes. I would appreciate any advice or a different approach to this problem. Thank you

It was a pretty simple challenge to do. But it has a few tricks to mention i struggled a little with that two pictures as the background, so I would appreciate any advice on that

I really struggled to change the direction of the Grid from row to column with media-query. something that definitely should put some more time on ...

I tried my best to match the styles. Also, it was a little hard for me to update my code on GitHub and also publish it using GitHub pages. so I simply put the link to sandbox from codesandbox. hopefully, it comes out good I would really appreciate any advice or tips

I tried to have three different media queries for each screen size but hopefully soon ill be using clamp and other modern CSS styling methods. Honestly, having an image with a color overlay was a bit of a headache and after some research, I couldn't do it any better. So I'll be grateful if anyone has any advice on that.

I tried to make an excellent copy of the template. hope I did it right!

I'm just trying to get the best style possible with just only design images. Hope it's good