Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions46Comments19

All comments

  • Ali khaled• 170

    @ALI-KHALED-13

    Submitted

    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 ;)

    #react#styled-components#vite

    1

    Mehdi• 990

    @siavhnz

    Posted

    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

    @siavhnz

    Submitted

    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

    #react

    1

    Mehdi• 990

    @siavhnz

    Posted

    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

    @siavhnz

    Submitted

    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

    #react#framer-motion

    1

    Mehdi• 990

    @siavhnz

    Posted

    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

    @angusgee

    Submitted

    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

    @siavhnz

    Posted

    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-San

    Submitted

    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

    #sass/scss

    1

    Mehdi• 990

    @siavhnz

    Posted

    Hello LauSan

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

    1
  • Ozioma Odoemelam• 190

    @ozeechristine

    Submitted

    • 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

    @siavhnz

    Posted

    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

    @siavhnz

    Posted

    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

    @siavhnz

    Posted

    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,640

    @catherineisonline

    Submitted

    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

    @siavhnz

    Posted

    Dear Catherine

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

    0
  • Mehdi• 990

    @siavhnz

    Posted

    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

    @siavhnz

    Posted

    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
  • Mehdi• 990

    @siavhnz

    Submitted

    Hello dear community

    I've just completed this challenge with Tailwindcss.

    I started to create a mobile-first workflow by flexbox, and when I came to desktop design, I realized that using the Grid layout system was a better choice, so I continued with Grid for desktop.

    Any feedback will be appreciated.

    Product preview card component with Tailwindcss

    #accessibility#semantic-ui#tailwind-css

    3

    Mehdi• 990

    @siavhnz

    Posted

    In my live site, everything is ok but in this DESIGN COMPARISON something goes wrong.

    any guess?

    0
  • Mehdi• 990

    @siavhnz

    Posted

    Hello Andrea Ruiz, Congrats on the first challenge completion and starting this nice path to becoming a Frontendmentor challenger.

    You've done great work. If you want to get better results, consider using this excellent chrome extension

    Happy coding

    0
  • Mehdi• 990

    @siavhnz

    Posted

    Hello Patosinsuerte, Congrats on the first challenge completion and starting this nice path to becoming a Frontendmentor challenger.

    I have some recommendations if you don't mind:

    It's better to use landmarks like <main> and <article> for creating semantic HTML5 pages to improve navigation for screen readers and assistive technologies. more info

    Instead of tying all elements inside a <p> tag with <br> and <span> separate them into <h1> and <p> element.

    And finally, use a bigger font size for your title and paragraph.

    I hope this helps you. Happy coding.

    Marked as helpful

    1
  • P
    Luke Knipe• 10

    @lukeknipe

    Submitted

    This seemed really simple, but I worry I missed something. I saw people submitting stuff with box shadows and stuff. Oh well, here goes...

    Simple CSS/HTML Exercise

    4

    Mehdi• 990

    @siavhnz

    Posted

    Hello Luke Knipe, Welcome to Fronendmentor, and Congrats on completing the first challenge.

    For me, this path is the best for starting to become a frontend developer; I mean starting with creating small building blocks, reading resources, seeing other solutions, communicating with others to learn from them, and growth in this path to creating a more complex design. I think this path establishes a good mental model for getting a favorite job.

    About your solution, @vcarames mentioned great stuff, and; I want to add two more recommendations if you don't mind:

    -- Consider using alt in <img /> tags. definition and usage

    -- For the src attribute on the img tag consider using slash / instead of using backslash \.

    Happy coding

    Marked as helpful

    0
  • Mehdi• 990

    @siavhnz

    Posted

    If you want to compare your work with design images consider using this chrome extension pixel perfect

    I enjoy using it I hope you enjoy it too

    0
  • Mehdi• 990

    @siavhnz

    Posted

    Hello Shoku, Congratulations to you on joining Frontentmentor and publishing your first solution.

    You've done great work, and I'm happy for you. This is a good path to making a nice portfolio although this challenge seems easy, it's the best start.

    Note that use style tag inside of <head> not <body> tag or create your CSS in a separate stylesheet and reference to in on the Index.html file by <link> E.g., <link rel="stylesheet" href="./style.css" type="text/css"/>

    Your component height and width are bigger than they must be because of the font of the text, margins, paddings, and a very important missing attribute box-sizing: border-box.

    "The CSS box-sizing property allows us to include the padding and border in an element's total width and height." box-sizing

    usage:

    *{
    box-sizing: border-box;
}

    And finally, use CSS reset to reset the predefined styles of tags like

    h1, p, body {
    padding: 0;
    margin: 0;
}

    About the responsive image:

    img {
    display:block;
    width: 100%;
}

    You can find some tips about image responsiveness in these links:

    make an image responsive - w3schools

    make an image responsive - stackoverflow

    Hope this helps you, happy coding

    Marked as helpful

    1
  • Mehdi• 990

    @siavhnz

    Posted

    Hello Jesús Yadiel, Congratulations on your first challenge completion.

    You have done great work, and I'm happy for you. I saw your solution, and I have some tips to improve your work accordingly:

    • In your index.html file, you can grab font-weight from google fonts with this query string ?family?=Outfit:400,700 and use it in p and h1 CSS selector
    h1 {
 font-weight: 700;
 ...
}
p {
  font-weight: 400;
 ...
}
    • If h1 and p have padding surrounding all the edges not only on top for h1 and bottom for p they look better
    h1{
 padding: 1rem;
 padding-bottom: 0.5rem;
}
p {
 padding: 1rem;
 padding-top: 0.5rem;
}

    I hope this is helpful. Happy coding

    1