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

All comments

  • P
    Kevin Rasata Andrianome• 60

    @kevinrasata

    Submitted

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

    This was actually the first challenge that I took on Frontend Mentor.

    I can tell you struggled big time with the layouts. Hahahah!

    Like it took me 3 days to figure it out.

    But now I'm more confident with it and the other challenges felt easy afterwards.

    I guess good practice makes perfect?

    Recipe page solution

    2

    Adhi• 240

    @Adhi-S12

    Posted

    Looks great! 👍🏻

    Marked as helpful

    0
  • Cynthia Agu• 110

    @cynthiachinenye

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of what I have achieved so far I was able to use:: before and:: after methods at least now I understand what and how it is been used for and when to apply it . I was able to learnt tooltip in the design and it made lots of sense.

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

    I encountered lots of challenge on javascript because I didn't use jquery to answer I did make enquires on js sheet to call on things when using add event listener. since I used bootstrap positioning outside a card was kind of wired at first but it beginning to make lots of sense now.

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

    z-index on my share btn isn't displaying

    Article preview component

    1

    Adhi• 240

    @Adhi-S12

    Posted

    Hey, the solution looks good, here are a few things that you can improve.

    The card does not need a border. Since the background color is different and the card is white, the card is already separated from the background, You can use a box-shadow to make it look elevated.

    Instead of using z-index and using the same button, just copy and use that button on the component.

    Try to focus a bit more on font-size, padding. Also try to write without using any framework at first, it'll help you a lot.

    Marked as helpful

    0
  • P
    Koda👹• 3,810

    @kodan96

    Submitted

    What are you most proud of, and what would you do differently next time?

    Made with:

    • HTML 🦴
    • SCSS 🖌️
    • JS 🤖
    • animated the hero section with gsap 💨
    • jQuery for easier DOM manipulation 📗
    • autoprefixer for browser compatibility 🧭🧭
    • minified files for better performance 🚀

    easybank Landing Page 💵💵 w/HTML, CSS & JS

    2

    Adhi• 240

    @Adhi-S12

    Posted

    That gsap animation is sick🔥

    1
  • P
    Bamo-D-Abdallah• 280

    @Bamo-D-Abdallah

    Submitted

    What are you most proud of, and what would you do differently next time?

    It was completely horrible, I need to learn the fundamentals of CSS better

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

    The most difficult was setting the list bulletpoints and numbers which I couldn't do so I gave up.

    Also sizing anything was horrible and the responsive is inconsistent.

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

    Overall review of my weaknesses, why do I think my code is a pile of garbage.

    Why it feels like I don't know CSS.

    Responsive Recipe page

    1

    Adhi• 240

    @Adhi-S12

    Posted

    Hey your solution is good, here are a few things that you can change/improve:

    • If you want to make only a certain parts of the text to be bold, you <strong> tag around them. Don't use <b> tag as it is not semantic HTML.
    • Don't set height on image containers, instead use the object-fit: cover or object-fit:contain property on the image element to fit the image inside the container.
    • In the top of the page, you've given an height for the image container, since the image's width is 100%, there is some empty white space in the container. Also you've given a gap property which give some space, And use used margin top on the heading too, this is the reason there is so much space between the image container and the h1 heading.
    • You forgot to use the fonts for preperation-block__header class and a few other elements.

    Other than this, your solution is actually good

    0
  • ricardomjr300• 80

    @ricardomjr300

    Submitted

    What are you most proud of, and what would you do differently next time?

    display grid

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

    display grid

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

    display grid

    testemunhas

    1

    Adhi• 240

    @Adhi-S12

    Posted

    Good work, here are a few things you can improve,

    • Cards look way too big till it reaches the media query breakpoint. You could've added a max-width to individual cards and centered it and removed it later for large screens.
    • Could have slightly increased the font size and line height of the testimonial title.

    Everything else looks good

    0
  • Ralph• 190

    @RalphPastel972

    Submitted

    What are you most proud of, and what would you do differently next time?

    Not much. I took way too long for such a simple result.

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

    I was not sure the best option to place the tiles between 2 lines.

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

    n/a

    Responsive Four card feature section solution

    2

    Adhi• 240

    @Adhi-S12

    Posted

    Good work and the site looks great, some things that can be improved are,

    • The headers h1 and h2 should be centered in smaller screens
    • In bigger screen size, you could have restricted the size of the paragraph tag below the h2, so that it does not span the entire row. You could have used max-width along with some character length like 60ch or something to achieve this.
    • Could have reduced the card-description's font size a little so that it better matches the design.
    1
  • Abdi• 190

    @abdizahir

    Submitted

    What are you most proud of, and what would you do differently next time?

    Iam proud of my project and make my project better next time.

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

    one of the challenges was change image based on screen size.

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

    in all of the project.

    product-preview-card-component

    1

    Adhi• 240

    @Adhi-S12

    Posted

    Good work on completing the challenge. Here are a few things that I would improve.

    • Don't set fixed width to the component(section), It will make the component static and it will not be responsive.
    • If you read the style guide provided in the folder you can see that there are two fonts mentioned in there. You can use google fonts to add them to your project and use them so that your design will match closely to the challenge.
    • The challenge has asked us to use images based on the screen size of the user. You should use '<picture>' tag with source attribute and media attribute , so that end-user will not download unnecessary additional image file. Example: <picture class="product-img"> <source srcset="images/image-product-desktop.jpg" media="(min-width: 500px)" /> <source srcset="images/image-product-mobile.jpg" media="(max-width: 500px)" /> <img src="images/image-product-mobile.jpg" alt="Perfume bottle" /> </picture>
    • Border radius should have been applied to the figure element.

    Marked as helpful

    1
  • P
    Martín Beltrán• 260

    @JMBeltranDev

    Submitted

    What are you most proud of, and what would you do differently next time?

    I feel happy to have completed another challenge.

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

    I had some problems with the nutrition table but it's just a matter of doing a little research.

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

    Any help is welcome.

    Recipe-Page-Main Mobile First & Responsive Design

    1

    Adhi• 240

    @Adhi-S12

    Posted

    Looks great, here are a few things you can improve:

    • Increase line height on texts to improve readability
    • Increasing space between the list items on Ingredients and Instructions list

    Marked as helpful

    0
  • P
    Celeste Rhoades• 40

    @Celeste-Rhoades

    Submitted

    What are you most proud of, and what would you do differently next time?

    I feel I did a good job. However, there is always room for improvement

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

    For the most part, it was easy to implement. I did almost forget to make the buttons active

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

    Im pretty happy with it but any advice is welcome

    Social links

    1

    Adhi• 240

    @Adhi-S12

    Posted

    You component looks good, here are a few improvements you could make:

    • You set height:70% on your .main class which breaks the application on desktop size.
    • Also a general tip, never use height:100vh, always try to use min-height:100vh.
    • Also try not to explicitly set height to any items, heights should always be determined by the contents within the element.
    • Since the social links are used to take us to other site, it is better to use anchor tag instead of a button. Also it is a list of social links, so the better structure would be <ul><li><a href="">Github</a>...</li></ul>
    • You used a div with class button and text inside for each links, you try to apply font-weight: bold but it is not applied because you are trying to apply font-weight property to a div element which does not work, if you had used something like <p> or <a> element, it would have worked.
    • Instead of making the card 100vh, try applying display: flex; justify-content: center; align-items: center`. This will center the card so that you don't have to set the height manually. Height will increase as you give padding and margin to elements inside.
    1
  • Bakhtawar Jamadar• 20

    @bakhtawar0111

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of that I did not expected that I can complete this task but I have completed it with such basic knowledge of HTML and CSS.

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

    As I am beginner I got problem while making it responsive I got solution from simple google search.

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

    I need help for learning how to make responsive components

    Blog Preview Responsive

    1

    Adhi• 240

    @Adhi-S12

    Posted

    Shows 404 Error instead of your actual page

    0
  • marijapavic• 20

    @marijapavic

    Submitted

    What are you most proud of, and what would you do differently next time?

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

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

    QR code

    1

    Adhi• 240

    @Adhi-S12

    Posted

    Good work, you can improve it by making some changes like,

    • Reducing the padding inside the card.
    • Increasing spacing below the card header.
    • You centered the element using flex correctly but since there is an attribution div("Challenge by .."), your card element is not centered properly. There are many ways to fix this, one simple fix would be make the attribution to be of postion:fixed and place it in the bottom, so that it is taken out of flow and your element will sit in the middle perfectly.
    0