Skip to content
OverviewSolutions
16
Comments
28
Yehan Nilanga
@Yehan20

All comments

  • Yehan Nilanga•670
    @Yehan20Posted over 1 year ago

    Hello Congratulations on Completing the challenge your solution looks amazing. regarding feedback you can try to match the design a bit more. and its considered good practice import the google font from your html file , instead of the css file. you can change the box-sizing to border-box in your ```*`` selector which tells you to. tells the browser to account for any border and padding in the values you specify for an element's width and height. other than that every thing was perfect, i hope this helped , good luck in the next challenges

    0
  • Yehan Nilanga•670
    @Yehan20Posted over 1 year ago

    Hello there , congratulations on completing the solution it looks awesome , it would be good practice to name the alt tag in the image , with a meaningful name, also i noticed that you have installed the Google font in your CSS and HTML both , that's not needed you can remove one of them , I'd recommend removing the CSS import. Next its considered good practice to add a universal selector in the top of your style sheet and set the box-sizing to border box which tells your the browser to account for any border and padding in the values you specify for an element's width and height. You can try to increase the width of the card as it kind of looks less long than in the design , i hope this helped good luck in other challenges .

    Marked as helpful
    0
  • karim•220
    @karimAoulallaySubmitted over 1 year ago

    How do I resolve the 404 code status error I get when refreshing the Detail page on my web app? I've been struggling with this technical issue and would really appreciate some assistance. Any advice or suggestions on best practices for handling routing and 404 errors in React apps would also be welcomed. Thank you in advance.

    responsive design built with react, react-router, vitejs and tailwind

    2
    Yehan Nilanga•670
    @Yehan20Posted over 1 year ago

    Hey congrats for making the solution , I Belive the issue is that since we refresh the use params hook gives you undefined so it will give 400 status error. Therefore you can basically get the exertions from the URL when you refresh the page and then call the API request, i assume you are using the useParams hook to get the country code when clicked , so you can do this

        let { id } = useParams(); //
    if (id === undefined) {
        id = (window.location.pathname).split('/')[2]
    } 
//https://restcountries.com/v3.1/alpha/id/ - this will be the new url then it would fetch the data

    so now you have the country code, and then you can send it with your AJAX request to get the data , I hope this helped.

    Marked as helpful
    0
  • Fede2797•190
    @Fede2797Submitted over 1 year ago

    Hi there!, I’m Federico and this is my solution for this challenge.

    Built with TailwindCSS and plain HTML

    Any suggestions or comments are really appreciated.

    Thank you 😊

    Blogr landing page with tailwindcss

    1
    Yehan Nilanga•670
    @Yehan20Posted over 1 year ago

    Hey Congratulations on completing the challenge , the solution looks cool , however i the nav bar doesn't work for me in mobile view , also the drop-down item styles have not been applied , also i see some side scrolling in the mobile view , also there is some additional padding in some parts , I hope this was helpful good luck in other challenges

    Marked as helpful
    0
  • Kathryn•320
    @KathrynDavies123Submitted almost 2 years ago

    This was a tricky one but eventually got there with the dropdowns :) Any general advice would be appreciated!

    Edit: added some of the suggested changes and also added that the nav menus close when another one opens. Thought this would be better from a UX perspective :)

    Intro page with dropdown menus

    3
    Yehan Nilanga•670
    @Yehan20Posted almost 2 years ago

    Hello there you solution looks awesome and clean , congratulations. For the register and learn more buttons , I think having an <a> tag would be fine because in a real use case it will be some sort of link. instead of the button. and if you have decided to make the header fixed , try to make the nav bar fixed as well so it will better. Also check out on the html report. include and alt tag on the image elements. Good Luck in other challenges as well.

    Marked as helpful
    0
  • andy•170
    @monstermaashSubmitted almost 2 years ago

    great challenge to do as a beginner! did have some trouble with the collapsible sidebar hamburger menu for the mobile version which required some javascript. any help is appreciated!

    PS: I also noticed that i should have used css grid instead of bootstrap columns in order to have a more accurate version of the layout.

    front-end mentor news homepage exercise

    2
    Yehan Nilanga•670
    @Yehan20Posted almost 2 years ago

    Hey Congratulations on Completing the challenge. The Solution Looks neat. you can focus on the accessibility issues on the issues to make your improve your solution. For the mobile menu you just need to create a button and set the display: none in large screen and then make it visible in small screens using display: block. and you need to make the mobile menu get full height of the view port . I used fixed position for this and. I assume if you are using flex box. you could make the nav links to column using flex direction Coolum. and in order to make the nav bar full height just set the top , left , bottom values to 0 and. set the width to x% depend on the layout. after that create a class that would make Tthe nav bar hide , you can use transform:translateY(100%) to archive this then. from your JS you need to make an event that would toggle the classes of the nav bar when you click so your functionality. works. I hope this helped .

    Marked as helpful
    0
  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlineSubmitted about 2 years ago

    Hello, Frontend Mentor community! This is my solution to the Huddle landing page with alternating feature blocks.

    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

    Huddle landing page with alternating feature blocks

    6
    Yehan Nilanga•670
    @Yehan20Posted about 2 years ago

    Congratulations on finishing the challenge, your solution looks amazing. I was wondering whether the email and number on the footer needs to be links or not , so when someone hovers, they can call or send a mail.

    Marked as helpful
    1
  • Guile Pereira•60
    @guilepereiraSubmitted about 2 years ago

    I'm not very confident in the way I added the shopping cart icon, is there any recommended way to add icons?

    The icon I added belongs to Material Design, is it ok to use it in this layout?

    I tried to use the BEM methodology to name the elements, but when I added the shopping cart icon, the class was already defined, would that be noise? should adjust for the BEM?

    I would like feedback on responsiveness adjustments, I just added a screen variation, is it recommended to complement?

    This is a simple project, but I'd be happy to get any additional feedback! Thanks!

    Product Preview Card using BEM

    1
    Yehan Nilanga•670
    @Yehan20Posted about 2 years ago

    Hello there, Solution looks neat, Congratulations. You might not need to add fixed widths, it will be kind of trouble when making them responsive, instead you can go with a max-width, which will be easy to play with. Secondly, regarding the image, I would use it as a background image since it will easy to control. That's my preference, really. I don't think you need to give fixed heights really, you can use padding to achieve that. I hope this was helpful, good luck for the other challenges.

    Marked as helpful
    0
  • Jonatan Trindade•120
    @Jonata-trSubmitted about 2 years ago

    Using flex and grid almost made me give up, butt thank god a could find a good tutorial to learn about grid and flex usage, and the best situation for both of them. And any tips, tricks or corrections are welcome... please give me some feedback!!!

    Order Summary using flex and grid

    1
    Yehan Nilanga•670
    @Yehan20Posted about 2 years ago

    Hello Congratulations on the on Completing the challenge, I noticed that you have used a position absolute on the footer, which had caused some overlapping with card, I don't think you really need that, since by default the footer is after your main, by removing the position properties and adding some margin top, that can be resolved. Also don't use fixed widths since it will not be helpful when making it responsive. Use a max-width instead of it and see. I hope this was helpful, good luck for other challenges as well.

    Marked as helpful
    1
  • Yehan Nilanga•670
    @Yehan20Posted about 2 years ago

    Hey it looks really nice , good job good luck for the rest of the challenges

    Marked as helpful
    0
  • Yehan Nilanga•670
    @Yehan20Posted about 2 years ago

    Hello Congratulation's on the challenge .Instead of using a fixed width you could use a max width for each cards , which means it will act responsively. also , in order to make it responsive from the mobile device break point , you could change the size of the dimension of your media query for example in your style.

    @media (max-width: 375px) {}
    you could change it to 
@media (max-width: 767px) {} so your layout would look more cleaner

    I hope my feedback was helpful.

    Marked as helpful
    2
  • Yehan Nilanga•670
    @Yehan20Posted over 2 years ago

    Hey Your Solution Looks so neat , and clean its awesome

    Marked as helpful
    1