Hi, I hope you like my solution for this challenge.
I'm doing responsive design for the first time, and I found all the solutions regarding responsiveness on YouTube, but I also tried to do the challenge in my own way.
If you have any questions or advice, feel free to write.
You're welcome :) Here are some links about the topics I've mentioned. Kevin Powell is the path to follow when we talk about css. Have fun ! :) ______https://www.youtube.com/watch?v=IWFqGsXxJ1E________https://www.youtube.com/watch?v=VQraviuwbzU__________https://www.youtube.com/watch?v=N5wpD9Ov_To.
Hi, I hope you like my solution for this challenge.
I'm doing responsive design for the first time, and I found all the solutions regarding responsiveness on YouTube, but I also tried to do the challenge in my own way.
If you have any questions or advice, feel free to write.
Hi! Looking good. Well done for the box images small challenge. It was tricky. If you're looking for advice, I can give you a couple. Avoid pixels as much as you can, when comes to responsiveness. They can be good for certain things, but try to dive a bit deeper into em/ rem/ %/1fr/ etc. Try to use them in margins, paddings, width, etc. Another good practice is to avoid setting a height on divs, containers, etc. One last small thing, not technical. It would be great to see some transitions on dropdowns and arrows. Few lines of code, but huge difference. Good Luck and have Fun :)
Looking to imbibe the best practices as I progress, please let me know if there is a line of code you would have written differently. I take every suggestion into account.
Hi! Looks all good, well done. Few things to consider. DRY - Don't Repeat Yourself- try to think about how to write styles and use correct selectors to avoid repetitive lines as much as possible. You can do it by planning your CSS before touching the keyboard and in the future using SASS. @mixins are GREAT! Naming methodology such as BEM is a great addition. PX's, well px are ok in some cases like border-radius, but once you learn when and how to use REM/EM you will love it and it will be a game changer. Try to add more comments to your CSS file. The last thing is the Prettier code formater. I would say it's a must-have and yes again, you will love it. Other than this, the solution looks great, and again, well done!
I tired adding some css animations .
I had some issues with positioning the image in desktop mode but finally made it to work.
Any suggestions to improve this site is appreciated.
Hi! I like the animations, nice ones! Unfortunately, validation doesn't work on my computer. I get the error even if my email address is correct. As you can see, I am a beginner as well so I can't help you with JS code. Feel free to check my way to solve the issue. I cannot guarantee that is the smartest solution but might be helpful. I understand the value of feedback and different way to fix the same problem. Maby in your case, only valid Regex is missing. Good Luck and happy new year!
I was able to discover details and summary tags, making it possible to do the assignment without JS. Making the box show with position set to absolute and overflow set to hidden was not possible. I guess the alternative would have been changing the box's parent and making it absolute, but it wouldn't make much sens semantically i think. Any feedback (positive or negative) is more than welcome.
Hi! I've faced the same problems with images and had the same idea about placing one of them in parent div. Worked for me. Not sure about semantic issues, so I will follow the comments in this thread. The functionality works just fine, nice to see this approach. I can see that the size/shape of the images aren't right, on desktop and mobile size screens. Feel free to check my solution to this challenge, and my way to deal with it. As you realize, I'm a beginner, the same as you, so I'm not trying to convince you to follow my way. I just understand the value of feedback and solutions for identical issues. Good Luck and happy new year!
Didnt do some part bcs was difficult. Will be proud if you will help me :)
Hi! Well, it looks like the whole HTML is wrong, so the CSS and JS won't work as they should. It would take a long to get into the details, so as a help I can provide two solutions for you. First is amazing, because YouTuber building this exact project "live". It's a great way to see how professionals work, think, face and solve problems. Here's a link to the first part https://www.youtube.com/watch?v=FboXxLxg8eo. The second solution is my solution. I wouldn't offer you it if I would think that is all wrong. I just think that my JS and "open-close" system plus animation approach is just more simple for us, the beginners. I'm not saying is better, it's just easier. You can ignore it and stick 100% to professional way. Links to my approach: https://www.frontendmentor.io/solutions/faq-accordion-card-sAcMv60Rtf, https://github.com/Lukasz-Milde/FAQ-Card. In the comment section of my solution, you can find an even easier way to solve this challenge, without Java Script. I hope I was helpful. Good Luck! Lukasz
Hello Friends,
Please review my code, any feedback or suggestions from yours will be very beneficial to me
Thank you!
Hi! It's working, that's the good thing. On the other side, it looks like a few things aren't as the design. On the desktop size, the background in the card is missing plus the orange box should be half away from the card and visible, while the "desktop IMG woman" overflow should be hidden. If the card itself would be bigger, as the design shows, there would be more "space" between the question and an arrow. Would look more clear and more like the design. When the answer is open, there is a problem with the margin/padding-top. Is too high. It would be the cherry on the top of the cake if you would add some animation, and transition while opening and closing the answers. Good Luck and happy coding!
I have a feeling my solution is not the most elegant when it comes to the CSS styling for the mobile design. I had to "tweek" a few things in the product div to get it to be the correct height and background color.
I would love any suggestions on how to get better at making mobile-friendly designs. I'm open to specific suggestions to this project or general resources. Thanks.
Hi! First of all, consider using CLASS instead of ID in HTML. If we talk about CSS and responsive designs, is good to use less PX as possible. Dive into EM, REM, and even %. One of my skilled friends told me to NOT set height if possible. Good Luck!
Feel free to point out all of my mistakes and downfalls
Czesc Kasiu :) Thank you for your good words about the code and documentation. I'm very glad to read that. I've often seen a default score somewhere on the web and thought it was quite cheeky so decided to give it a go and practice some DOM manipulation and classList at the same time. Although I will keep in mind your approach. I would be happy to hear more of your feedback in the future. Have a lovely day !
i couldn't made the font awesome icon show in github live site but it's shown using live-server extension on vscode
Hi! Try to use a different icon, maybe this one is Premium.
