Sameh• 430
@SamehCode
Submitted
Sameh
@SamehCode
All comments
- Sameh• 430
@SamehCode
Posted
Cheosphere should i save in local storage ? what's ur suggestions , bro ?
0 - LySabrina• 180
@LySabrina
Submitted
I had difficulties with:
- Positioning the images using position
- Some window size does not correct align the image
- units for responsive design
These were the main things I struggled with. Making sure the image is aligned even when you resize the window was difficult. Additionally, I was unsure of the units for the containers as when a user opens the questions, the image may be pushed out of view.
I wonder if % are best for containers width and height for responsive design?
Overall, fun project on responsive design and touching a bit of JavaScript.
Sameh• 430@SamehCode
Posted
here is my advice to you , i made this challenge before. you can do it use positioning between parent container(position: relative) and image element with (position: absolute) then use left with negative values to get out of the box ;) example(left: -30px, left: -2rem, etc...) hope it help you at all good luck .
0 - Nazim Filzer• 110
@NazimFilzer
Submitted
Sameh• 430@SamehCode
Posted
nice work , but here is my idea to you , dismiss button must have function to return you back to form. good luck my friend
0 - Melvin Aguilar 🧑🏻💻• 61,440
@MelvinAguilar
Submitted
Hi there 👋, I’m Melvin, and this is my solution for this challenge. 🚀
🎁 Features:
- Achieved 100% in Lighthouse score for performance, accessibility, best practices, and SEO. 📊
- Progressive Web App (PWA) support. 📱🌐
- Utilized TailwindCSS for responsive styling. 🎨
- Codebase is well-maintained and formatted using Prettier. 💻
- Resemblance with the original design. 🎨
- No media queries were used. 📱
- Integrated very small animation. ✨
💻 Two Solutions in Two Branches:
- Native HTML Solution: Utilizing
<details>and<summary>tags without the need for JavaScript. 🚀 - Accessible Disclosure Solution: Implementing Accessible Disclosure with a11y in mind for enhanced accessibility. 🌐
🛠️ Built With:
- TailwindCSS. 🎨
- npm - prettier - prettier-plugin-tailwindcss. 💻
-
📚 Further Resources:
If you're interested in creating an Accessible Disclosure, I recommend checking out this informative article by Grace Snow: Tutorial: Let's Build an Accessible Disclosure
Any suggestions on how I can enhance this solution or achieve even better performance are welcome!
Thank you. 😊✌️
Sameh• 430@SamehCode
Posted
what about the main idea of accordion ? when select a topic the rest of topics must be not visible
https://getbootstrap.com/docs/5.3/components/accordion/
search for accordion to get the main idea
i've added link for you from bootstrap accordion check it out
0 - Gary Yeung• 160
@garyeung
Submitted
Sameh• 430@SamehCode
Posted
#wow , you look so professional, ##how did you do that ! ###how long u learn programming my friend ?
0 - subodh16728• 100
@subodh16728
Submitted
Hi community, This is the first project that I've build using JavaScript. Please share feedback if you have any. I would love to hear that and make the improvements. I want to enhance my Javascript knowledge and that's why can you please suggest which other project should I go with now? Thank you!
Sameh• 430@SamehCode
Posted
nice my friend but why use alert or prompt it seems ugly um , dunno . but nice work anyway. how long u learn programming ? and what is your resources my friend i want to upgrade my js skills more and more
Marked as helpful
1 - Melvin Aguilar 🧑🏻💻• 61,440
@MelvinAguilar
Submitted
Hi there 👋, I’m Melvin, and this is my solution for this challenge. 🚀
🎁 Features:
- Progressive Web App (PWA) support. 📱🌐
- Achieved 100% in Lighthouse score for performance, accessibility, best practices, and SEO. 📊
- Utilized TailwindCSS for responsive styling. 🎨
- Codebase is well-maintained and formatted using Prettier. 💻
- Resemblance with the original design. 🎨
🛠️ Built With:
- TailwindCSS. 🎨
- npm - Prettier. 💻
Any suggestions on how I can enhance this solution or achieve even better performance are welcome!
Thank you. 😊✌️
Sameh• 430@SamehCode
Posted
#wow looks gr8 , ##seems pixel perfect too , ###<3 nice work.
1 - Josh• 100
@Joshua-Farr
Submitted
CSS Grid Experts, I need your help!
The only thing that tricked me was justifying the time remaining to the right. For some reason when I moved it over, there was extra space in the container and it would leave an unsightly gap between the text and the clock icon. Any insights would be greatly appreciated!
Sameh• 430@SamehCode
Posted
nice work, josh. i really appreciate your hard work iam just a newbie. wish me good luck , bro
0 - Vaibhav Sachdeva• 70
@sachdevavaibhav
Submitted
This is my first challenge on Front-End Mentor. Is my css code readable and maintainable. If no, then what are the things that I can improve. Your feedback is appreciated.
Sameh• 430@SamehCode
Posted
@sachdevavaibhav: oh man ur great. i hope i be like you once. if could anyone tell me some tips and tricks and some great content i could learn more and more from.
1 - Raymart Pamplona• 16,140
@pikapikamart
Submitted
Hello. This is my 23rd challenge here and trying to be good at framer-motion^^
It's been really fun doing this even if I finished for days since got loads of school activs :>>.I am still new to using framer-motion so I don't really know if I used it correct but it works for now and i'm glad with that. I also reuse some animations that I used before :>
I tried to add more animation like page load but I really lack what to add so I kind of erase that one but I added some animations on the different tabs interactive elements and happy with the result. I forgot to right now a navlinks trap-focus but could done in other day:>
But overall, i'm happy with this one. Would be really great if you have find any other bugs on this one. Thank you^^
Sameh• 430@SamehCode
Posted
great job .bro . i hope i be professional once.
1
