Skip to content
OverviewSolutions
46
Comments
19
Mehdi
@siavhnz

All comments

  • Ali khaled•170
    @ALI-KHALED-13Submitted almost 2 years ago

    What did you find difficult while building the project? 1- making it social media sharable since the build tool (vite) I used had some issues with linking assets from meta tags. 2- the vertical carousel in the technology page (desktop mode)

    Which areas of your code are you unsure of? I coded the website so its content can be fully configurable, and this is how I created the cartoonish variable by creating one extra file only. however, I am unsure of some decisions I made about its architecture.

    Do you have any questions about best practices? what would be the best design pattern for such project? creating templates for pages, or pages components as it's now, how can I make the configuration system more solid

    Space tourism website using React, with a cartoonish twist ;)

    1
    Mehdi•990
    @siavhnzPosted over 1 year ago

    Hello Ali

    I liked your solution especially vertical slider in technology page and also cartoon mode is funny I didn't expect that, I enjoyed it :)

    Happy coding

    2
  • Mehdi•990
    @siavhnzSubmitted over 1 year ago

    Hello Dear Community

    For practice more on grid system in css I worked on this challenge, I have some doubt about my solution and I think there is a better solution for this challenge, so I excited to see your solutions to get more out of this challenge

    Thanks for viewing my solution, any suggestion is appreciated

    Testimonials Grid Section

    1
    Mehdi•990
    @siavhnzPosted over 1 year ago

    I forget to mention that I decided to work with Clockify to track my work time if you like that you can view My Clockify Report. this solution took me about 4 hours to complete, with all preparation, README.md, and so on, I think it is much more than It should be :)

    0
  • Mehdi•990
    @siavhnzSubmitted over 1 year ago

    Hello Dear Community

    this challenge has a lot of work to do that I did not expect particularly Slider was very challenging in coordinate to LightBox, but in more challenges is more stuff to learn.

    Thanks for viewing my solution, any advice is appreciated

    E-commerce Product Page

    1
    Mehdi•990
    @siavhnzPosted over 1 year ago

    For this solution I used Framer Motion and created a slider by myself but I realized that it doesn't work consistently in some situations so I searched for a better approach and found out maybe Swiper was a better one for this challenge.

    0
  • Gus•60
    @angusgeeSubmitted about 2 years ago

    1. Is this solution complete, or should I really create a separate class for the rating buttons' active states? At the moment there's no "state" as such, only the variable ratingScore.

    2. The "You selected 3 out of 5" text looks slightly too high in it's div to me, can you confirm? I can't see any reason why it would be out, it has 8px top and bottom padding and should inherit display:flex, align-items:center and justify-content:center from its parent.

    3. How important and relevant is it to use a CSS preprocessor like SASS? Would you recommend that I change? I'm aiming to become a full-stack dev one day.

    4. Do my commits look okay? Any feedback there about using Github in a professional setting.

    5. Any other suggestions about best practices? Again bearing in mind that I'm aiming to learn to produce production-quality code.

    Cheers!

    Interactive rating component in Vanilla JS and CSS

    3
    Mehdi•990
    @siavhnzPosted about 2 years ago

    Hello MaltaWebDev

    In Slack, you asked about comparing work and design, I use perfect pixel extension for my solutions which is a great tool for comparing when working on a challenge.

    here is a link to the Pixel Prefect Chrome extension

    Happy coding

    Marked as helpful
    0
  • LauSan•190
    @Lau-SanSubmitted about 2 years ago

    I really like working on this. Now I feel a lot more confident about working with forms in the future :P

    As always, if you see any way that I could improve I'd love to hear about it :)

    Responsive Intro With Signup Form with CSS Grid

    1
    Mehdi•990
    @siavhnzPosted about 2 years ago

    Hello LauSan

    You've done a nice job, I like your clear comments in the script.js file 😉

    1
  • Ozioma Odoemelam•190
    @ozeechristineSubmitted about 2 years ago
    • I found it difficult applying the hover effect/over lay on the card image. Any suggestions on how I can go about this will be very welcome. Thank you.

    Edit: I've resolved it now. Thank you every one.

    NFT Preview Card Solution using Tailwind CSS

    3
    Mehdi•990
    @siavhnzPosted about 2 years ago

    Hello Ozioma Odoemelam

    One solution for creating an image overlay is to use a div with opacity:0 next to the image.

    check out this great article on w3schools

    I did this challenge with Tailwindcss too, you can check out this link to see my solution, any feedback to improve my solution is welcome.

    I hope this helps you.

    Marked as helpful
    0
  • Mehdi•990
    @siavhnzPosted about 2 years ago

    Hello Nugget

    One solution for creating an image overlay is to use a div with opacity:0 next to the image.

    check out this great article on w3schools

    Happy coding

    1
  • Mehdi•990
    @siavhnzPosted about 2 years ago

    Hello Dan, congrats on completing first challenge

    About your question Stephanie Eckles has a great article that I used in my challenge today.

    Here's the article link: Keep the footer at the bottom: Flexbox vs. Grid

    Happy coding.

    Marked as helpful
    2
  • Mehdi•990
    @siavhnzPosted about 2 years ago

    Hello Nien, Congrats on completing this challenge

    I like your comments on the CSS custom variable; I'll apply your approach in my upcoming solutions.

    I have some recommendations if you don't mind:

    It will be better to use landmark tags like <main> and <article> for accessibility instead of a bunch of <div>; More on this topic

    It's easier to start with mobile workflow and proceed to the desktop mode. To begin with the mobile-first design, you can use chrome dev tools. This also may help you

    Don't put your images in the CSS file; instead, use the below code with the appropriate media value.

    <picture>
    <source media="(max-width: 1023px)" srcset="./assets/images/image-header-mobile.jpg" />
    <source media="(min-width: 1024px)" srcset="./assets/images/image-header-desktop.jpg" />
    <img class="" src="./assets/images/image-header-mobile.jpg" alt="" />
</picture>

    More on picture tag

    I hope this helps you.

    That will be great if you come to my solutions page and tell me what you think and which part I must improve.

    Happy coding

    Marked as helpful
    1
  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlineSubmitted over 2 years ago

    Hello, Frontend Mentor community! This is my solution to the Fylo landing page with two column layout.

    I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

    Thank you

    Fylo landing page with two column layout

    7
    Mehdi•990
    @siavhnzPosted about 2 years ago

    Dear Catherine

    What a great job, I enjoy seeing your excellent adjustment.I admire you for that.

    0
  • Mehdi•990
    @siavhnzPosted about 2 years ago

    One thing that I forgot to mention is that I learned to use gap instead of padding from you; your solution is creative. Thanks for that

    1
  • Mehdi•990
    @siavhnzPosted about 2 years ago

    Hello Suleman, Congrats on completing the challenge

    I saw your solution on the live site, You've done good work, and I am happy for you. Completing a challenge excites me.

    One thing that I saw immediately after visiting the live site was the line height of your paragraph. Maybe it's better to apply some more line height for a better look; by the way, you've done good work :)

    Happy coding

    1