Skip to content
OverviewSolutions
5
Comments
10
Vincent
@Vincent-Bouton

All comments

  • Jazziel Puente•290
    @jazzielpSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    Having been able to carry out this project with Astro and Tailwind. I am in the learning process and have finished with the best design I could.

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

    The part of structuring the page was a little difficult for me since while I was still learning tailwind it was difficult for me to style some parts

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

    I need help with the image on the right since I didn't know how to place it and it overflows to the right. It would help me a lot if you could give me a PR or some advice.

    Skilled e-learning landing page solution

    1
    Vincent•190
    @Vincent-BoutonPosted 9 months ago

    Hello Jazzlel!

    You can simply put an overflow-x-hidden and max-w-screen classes on your <body></body>

    Like this:

    <body class="[... whatever class you have] overflow-x-hidden max-w-screen">
  <!-- your content here -->
</body>
    • overflow-x-hidden will simply remove all content that goes beyond x axis
    • max-w-screen will set the width of your body to the entire screen available.

    Hope it helped! :D

    Keep the good work

    0
  • Scott•280
    @Scott1UPSubmitted 9 months ago

    Hey, Frontend Mentor community,

    Question re. best practices: For this challenge, to achieve a nice responsive feel on Desktop I opted to use Grid.

    This presented challenges on mobile, where the image had to be placed second in the order of elements. To get around this, I added a secondary 'hero image' element and disabled the desktop version using CSS when viewing the mobile breakpoints.

    Is this considered bad practice? Is there another method which I could have used to achieve the same result?

    Thanks!

    Waiting list sign up page – CSS Grid, Flexbox, JS validation

    2
    Vincent•190
    @Vincent-BoutonPosted 9 months ago

    Hello Scott! 👋

    Good job on completing the challenge ! 💪

    Answer to your question

    This is a good way, altough you can use the <picture> tag to display different picture on different size.

    Keep the good work! 👌

    1
  • Vincent•190
    @Vincent-BoutonPosted 9 months ago

    Hello Abhishek! 👋

    Good Job finishing the challenge!

    Small improvements 🧐

    • Some text are hard to read on the Hero banner, maybe using a filter to have a darker background might help

    • Same for the cards in Our Creations Section. Maybe there simply make a gradient from the bottom to the top. Like in the design.

    • Some indications when we hover elements might be cool!

    You did very good! Keep the good work! 👌

    Marked as helpful
    0
  • Vincent•190
    @Vincent-BoutonPosted 9 months ago

    Hello Rok Andic 👋

    You did a very good job! 👽

    Very small improvement 🧐

    • Using a transition on buttons when we hover them to make it smooth

    That's it! Keep the good work! 💪

    0
  • Tolulope Oluwabukunmi•240
    @TheTreeveloperSubmitted 9 months ago

    Hello guys,

    I can't figure out why my desktop page has a huge whitespace at the bottom. I've combed through my code and still had problems figuring this out. Any help/feedback would be really helpful! Thank you.

    Responsive component page with css

    1
    Vincent•190
    @Vincent-BoutonPosted 9 months ago

    Hello Tolulope ! 👋

    Explanation to your question

    The reason why you have a large white space is because you used position:absolute/relative. Using relative will not remove the allocated space the box should take and so, once moved to the space YOU want, the big white space will stay.

    Solutions

    Yes SOLUTIONS with S, there are a huge amount of solutions.

    • Using position:absolute/relative

    if you really want to use position:absolute/relative you might want to place a position:relative on a box that's parenting all your card. And then place a position:absolute on your cards and playing with top, right, bottom, left. Altough I do not recommend this solution since in can be painfull to make it responsive for all type of device.

    • Using display:grid

    I cannot explain to you in details here but, display:grid is for me the best solution for your challenge. You can allocate space and rearange the way you want easely with simple CSS code.

    • Using display:flex

    it's doable but can be a little painfull to do, and using more <div> to create container for each row, etc. Not recommended but doable.

    • And I'm sure there are more

    Hope it helped! Keep the good work! 💪

    Marked as helpful
    0
  • Rahul Kumar•570
    @rahulkumar215Submitted 9 months ago

    Hi there!

    This was a fun project. It took me one to two hours to make.

    I faced some difficulties on the way, So I will mention them here, kindly share your feedback and suggestions.

    1. I struggled to centre the container without the help of flexbox, I used absolute positioning but it didn't help. Kindly share How can I centre it.

    2. I tried to indent the text within list elements but couldn't find a solution. I would greatly appreciate it if you could provide some insight.

    That's all. I faced some other difficulties but I googled it and found the answers.

    Thank You!

    I had fun 😁.

    Recipe Page

    2
    Vincent•190
    @Vincent-BoutonPosted 9 months ago

    Hello Rahul! 👋

    Like Bishal said, Absolute isn't the best solution altough you can center your container with the position:absolute if you really want to.

    body:{
    position:relative; /* This is base style for body and don't need to by write */
}
.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    For your text indent on some list points : <ul> and <ol> have really annoying style. The best is sometimes to remove all base style from it and make your own. In this case I would have done it this way and hard write the numbers of the list. 🧐

    This is one way (if not the only) to center a container using absolute and relative position. 😎

    Your solution is very good! Keep the good work. 💪

    Marked as helpful
    1
  • Jessica Arvizu•180
    @jessicaArvizuSubmitted 9 months ago

    Hello Front-End Mentor Community! I'm Jessica and this is my solution for this challenge! 😊

    Built with:

    • HTML 🧾
    • Tailwind CSS 🎨
    • Mobile first workflow approach 📲
    • Perfect Pixel

    Thrilled to be diving into the world of Tailwind CSS for the second time! 🚀 I'm on a mission to grasp all the fundamentals and weave them seamlessly into my tech toolkit. Embracing the learning journey as I strive to master Tailwind and level up my web development skills. Exciting times ahead as I explore the vast possibilities this powerful utility-first framework brings to my coding adventures! 🌐💻

    🔥 Blog preview card with HTML & Tailwind CSS 🔥

    1
    Vincent•190
    @Vincent-BoutonPosted 9 months ago

    Hello Jessica! 😎 Very good, I see that you use the CDN of TailwindCSS. Tailwind bring also a lot with his configuration and can be much more powerfull with a good configuration. This is worth the time you invest to it. 👽 Keep the good work!💪

    Marked as helpful
    2
  • Luis Vera•240
    @LuisVera1Submitted 9 months ago

    Hi, here is my solution to the challenge. 💻

    I'm using the data from the .json file, both to show the categories, as well as to show the mean.

    Your feedback is welcome. 👍

    Results summary component

    1
    Vincent•190
    @Vincent-BoutonPosted 9 months ago

    Hello Luis Vera! 😎 Very good, Keep the good work!

    0
  • Gab•170
    @gab-holikSubmitted 9 months ago

    I found this project quite challanging so my solution is not the most elegant. Thank you for any feedback. 🐾

    Workit landing page

    2
    Vincent•190
    @Vincent-BoutonPosted 9 months ago

    Hello Gab! This is very good.

    1
  • Vincent•190
    @Vincent-BoutonPosted about 1 year ago

    I've just completed a front-end coding challenge from @frontendmentor! 🎉

    You can see my solution here: https://www.frontendmentor.io/solutions/vanilla-js-flexbox-grid-little-animation-for-the-burger-Vv2xT-_Hm8

    Any suggestions on how I can improve are welcome!

    0