Jaylou Rasonabe
@JlordS32All comments
- @Subhadip757Submitted 12 months ago@JlordS32Posted 12 months ago
Hi Subhadip,
Congrats on finishing this challenge. This must have given you enough challenge to learn a lot of things and I hope you continue in doing so. To answer your question about the problem. Due to me not being to directly see the code (please add the github repo source code).
I can see that you might have some javascript going that toggles
container
tonone
when rating is submitted, however because you set it toblock
when Rate Again is clicked, it puts the container at the top left of the page.What you can do in this scenario is to adjust the javascript to adjust from
none
toflex
, instead ofnone
toblock
. I hope that helps.Marked as helpful1 - @Hibi4Submitted about 1 year ago
I didn't get to make the height divide the button in the middle like what was on the design picture. **Any help is welcome. **
For the rest, everything works correctly.
@JlordS32Posted about 1 year agoCongrats on completing this challenge Hibi4. A couple of suggestions that I can maybe add to your solution:
You can try adding
padding: 0 30px
for yourdiv_advice
just so it looks a little nicer and also add 'box-shadow: 0px 0px 30px -3px #52FFA8;' for the class.dice_icon_logo
to give that green shadow effect as the design suggested and make sure that it only happens on hover.I have also noticed that the quote never loads on page reload, you can maybe try invoking the function you've created
generateAdvice()
at the bottom of your main.js, make sure to wrap it in DOMContentLoaded listener so it only calls the function on page reload. It should look something like this:document.addEventListener('DOMContentLoaded', () => { generateAdvice() })
Overall, you're doing pretty great! You're off in a good start my friend. Happy coding!
Marked as helpful0 - @GitDbRSubmitted about 1 year ago
Actually I should have used column-start, column-end for spanning the grid columns but I also wanted to try grid-templete-areas. So I have used that.
Any feedback is welcomed....
@JlordS32Posted about 1 year agoYour project looks absolutely awesome. Congrats for finishing this challenge, I hope you enjoyed your time while doing this.
There is no problem in using
column-start
/column-end
orrow-start
/row-end
. This all comes down to preference,grid-template-areas
is just a shorthand for writing column/row-start/end for shorter code, if you feel more comfortable and maybe you find it easier to read column/row-start/end, then go for it.Overall, your code looks all good to me, I can suggest to maybe remove
margin: 6rem auto auto
for yourtestimonial.container
, just so the container is centered. Nicely done!Marked as helpful1 - @mericcintosunSubmitted about 1 year ago
Hello Frontend Mentor community!
In this project, I tackled Frontend Mentor's Responsive Web Design Challenge and I'd like to share my solution with you all. This project was a learning experience aimed at improving my HTML and CSS skills.
Technologies and Tools Used:
HTML5 CSS3 (Using Flexbox and Grid) Visual Studio Code Google Chrome Developer Tools
Objectives: While working on this project, I aimed to achieve the following goals:
Learn and apply the fundamental concepts of responsive web design. Gain a better understanding and usage of CSS Flexbox and Grid.
Challenges and Learning Experience: I encountered some challenges during the project, particularly the intricacies of responsive design kept me engaged. However, overcoming these challenges significantly enhanced my skills, making me a better frontend developer.
Thank you for taking the time to review my project. I welcome any feedback and suggestions. Your input is invaluable as I strive to further my learning journey.
I'm also looking forward to seeing your projects on the Frontend Mentor platform. Let's continue learning and growing together!
Thanks, [Meric Cintosun]
@JlordS32Posted about 1 year agoHere's some suggestions to make it a little better:
- Try looking up
before
andafter
pseudo classes to give the image that purple filter effect. - Alternatively, you can add a sibling element for the img and set
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: COLOROFYOURCHOICE
Marked as helpful1 - Try looking up
- @ABidhasan134Submitted about 1 year ago
I have found many difficulties in this project like an array or for each loop working, selecting a number value in times and sending the value of this to a new js file. My thanking page is unsure. How could I improve my for each (array) logic?
@JlordS32Posted about 1 year agoYou should try looking up
localStorage
. It may solve your problem.0 - @jennurayenSubmitted about 1 year ago@JlordS32Posted about 1 year ago
you may need to work a little with the image, maybe some issue with linking it
0 - @JlordS32Submitted about 1 year ago
Can't seem to figure out the background bit. Tips and feedback are appreciated!
@JlordS32Posted about 1 year agoThanks to that random guy who did the same challenge. I figured out background without going through so much complexity like I did previously.
0 - @YASHAKETANSubmitted about 1 year ago@JlordS32Posted about 1 year ago
You're a legend for that background. I couldn't figure it out until I looked at yours.
0