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
OverviewSolutions16Comments29

All comments

  • Yehan Nilanga• 690

    @Yehan20

    Posted

    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• 690

    @Yehan20

    Posted

    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

    @karimAoulallay

    Submitted

    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

    #react#react-router#tailwind-css#vite

    2

    Yehan Nilanga• 690

    @Yehan20

    Posted

    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

    @Fede2797

    Submitted

    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

    #tailwind-css

    1

    Yehan Nilanga• 690

    @Yehan20

    Posted

    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

    @KathrynDavies123

    Submitted

    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• 690

    @Yehan20

    Posted

    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

    @monstermaash

    Submitted

    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• 690

    @Yehan20

    Posted

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

    @catherineisonline

    Submitted

    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• 690

    @Yehan20

    Posted

    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• 50

    @guilepereira

    Submitted

    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

    #bem

    1

    Yehan Nilanga• 690

    @Yehan20

    Posted

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

    Submitted

    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• 690

    @Yehan20

    Posted

    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• 690

    @Yehan20

    Posted

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

    Marked as helpful

    0
  • Yehan Nilanga• 690

    @Yehan20

    Posted

    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• 690

    @Yehan20

    Posted

    Hey Your Solution Looks so neat , and clean its awesome

    Marked as helpful

    1
  • Yehan Nilanga• 690

    @Yehan20

    Posted

    Looks clean , and Great Nicely done , good luck for other challenges

    Marked as helpful

    0
  • Nguyen Nguyen• 340

    @jesuisbienbien

    Submitted

    Hi everyone,

    It's been a while because this challenge was quite difficult for me. I've finally finished (and very proud of myself hehe). Please take some time to review my solution. I'd love to receive as many feedbacks as possible.

    One thing I noticed is that, when on a few specific mobile devices (iphone SE, next hub, and galaxy S8+), the overlay effect acted weird. There was a white part at the top of the page. This doesn't happen in other mobile devices though. Any help on this issue would be greatly appreciated.

    Any other feedbacks are welcome. Thank you in advance!

    Happy coding :)

    Intro Section With Dropdown Navigation (challenging but rewarding)

    2

    Yehan Nilanga• 690

    @Yehan20

    Posted

    Hey Congratulations on Completing the Challenge , I noticed that the nav bar did not expand on my laptop and once i inspected it , it expanded once it exceeds 1400px , i think you could add your break point on around 768 px , and in my laptop there were some side scrolling as well , in addition if your wanted to rotate the arrow near the navlink your could do that using js when you add the click effect for the drop down you can select the image next to it and change the src to the new arrow and when you click it again change the src back.

    For the overlay you could use the help of pseudo selectors to generate it , for an example when your nav is open you could add a class may be opened/toggled and for that add a pseudo selector. i did some testing and found this will make a full size overlay

    div#nav-menu:before {
    content: '';
    position: absolute;
    top: 0;
    width: 79%;
    height: 100%;
    left: 0;
    background: rgba(0,0,0,0.5);
    transform: translateX(-99%);

}

    you could try this. I Hope by answer was helpful , good luck for the next challenge

    Marked as helpful

    0
  • Troy• 170

    @troy03

    Submitted

    When to use max-width or min-width?

    Is using rem are good for font-size and em for margin and padding and I always guessing to use a unit size.

    Pure HTML and CSS

    1

    Yehan Nilanga• 690

    @Yehan20

    Posted

    Max width means , the element you assign it will not grow its width more than that , unlike the normal width max width can shrink as the viewport decreases , so its responsive while a normal width in pixels wont do that , min width means , the element cannot get smaller than this value , so if you want a particular element not so shrink at a particular width you can use a min-width,

    Rem's and Em's are relative units , using ems for margin and padding it will change with the font size of that particular element , for example you have button of font size 1.5rem and padding 0.75em as you increase font size padding will increase , i recommend watching this video.

    I hope this helped ,

    1
  • Hrishikesh kadam• 30

    @hrishikdm

    Submitted

    Hi, this is hrishikesh and I accepted this challenge and made this responsive drop-down Navigation bar by using HTML, CSS, and javascript, and I hope you like my final solution

    problem = I really struggled with the drop-down SVG arrow because when I add a hover effect on it for stroke color change it's not working I tried everything but it's not working If you have any solution then please show me it could be very helpful.

    Thanks for looking at my solution

    intro-section-with-dropdown-navigation-main

    #itcss#jss

    1

    Yehan Nilanga• 690

    @Yehan20

    Posted

    Hey Firstly congratulations , on completing the challenge , you could look at the report and fix those html issues and accessibility issues in the report to make your solution better, now regarding the hover thing , I used js to remove the event listeners at large screen I added by break point after 768px , then I was able to add the hovers with ease, and again when i reach sizes less than 768px I would add the event listeners back , I used the window.addEventlistender("resize",()=>{ // Code here ) do achieve this , i used inner Width to get the width. Regarding the svg , you could just use a transform rotate on the svg to rotate it in large screens , to select the svg image on hover nav ul li:hover img this selector would work and you could rotate it . I hope my answer was helpful good luck in other challenges.

    0
  • Ojas Dubey• 20

    @ojninja16

    Submitted

    I am not sure why my name is not being displayed within the same line as "Challenge by Frontend Mentor Coded by" ...... Thanks for help....

    Qr-code-project-using-CSS-and-HTML

    3

    Yehan Nilanga• 690

    @Yehan20

    Posted

    Hey Congratulations for completing the challenge , your name is not displaying in the same line because there isn't enough space for it to display within one line it may be because of padding or the width of the card , try to increase the width a bit and try , also try to fix the html and accessibility issues to improve the solution , i hope my feedback was helpful, good luck for the next challenges.

    Marked as helpful

    1
  • Yehan Nilanga• 690

    @Yehan20

    Posted

    Congratulations on Completing the Challenge , you could make your solution better by fixing the html issues, as an example i think in here there is no need nest a section tag inside a section because for each section tag you need an heading , so if its not there , there will be an html issue in the report so removing the 2nd section will be fine . and you could just add some padding to fix it back . I hope this was helpful. good luck for the rest of the challenges.

    Marked as helpful

    0
  • Yehan Nilanga• 690

    @Yehan20

    Posted

    Hey Congrats on Completing the Challenge , you could always look can fix the accessibility issues, regarding the design , you could give a min -height or a height for the body for example min-height:100vh which will make it centered perfectly, also try giving a max-width instead of the width and try to match it with the original design.I hope this was helpful , good luck for other challenges

    0
  • Frankie Adams• 0

    @Adams05

    Submitted

    What is the best way to make the dropdown menus responsive? I positioned them absolutely so they are not responsive. Any feedback would be helpful.

    Javascript Dropdown Menus

    1

    Yehan Nilanga• 690

    @Yehan20

    Posted

    It would be easy if you start with mobile first, because the mobile part is a bit trickier , talking about the desktop you could position absolute on the sub ul and add a position relative to the li that is the parent , and at default you could put a display none to the sub ul and your could , select each ul when we hover the particular li , like nav ul li:hover ul and set the display to block . and here is my Solution hope this helps.

    Marked as helpful

    0
  • isaac nabil• 220

    @nabil4416

    Submitted

    my head is broken, can someone take a look at this test, I started with the creation of the mobile design, then I wanted to switch to the desktop screen, of course using the flex display, and I I found that the first box is smaller than the others, I found myself having to change the width of the desktop design... what do you say about it?

    3-column preview card component

    3

    Yehan Nilanga• 690

    @Yehan20

    Posted

    When you use flex by default the height are same , if you change the align items values to like center, start, end the height may be changed , also make sure there is not extra padding or margin or any fixed height on the boxes , Hope it helps.

    1
  • Yehan Nilanga• 690

    @Yehan20

    Posted

    Hey Congratulations on completing the challenge, The image and the icon doesn't seem to be displaying i think the path is wrong , <img class="card__image" src="./images/illustration-hero.svg" alt="music man">, <img class="music-img" src="./images/icon-music.svg" alt="">. I Changed the path by adding a dot before the slash and it displayed. also try to add some margin top to the card so it has some space vertically. I hope this was helpful good luck in other challenges

    Marked as helpful

    1
  • Yehan Nilanga• 690

    @Yehan20

    Posted

    Congratulations on Completing the challenge , Your solution looks nice , you could look the report and go through the html issues and accessibility issues , as there a some and try to fix them , Also when resizing the browser , around iPad width I noticed the second image ( the two phones), increase its size suddenly and , covers some of the content , other than that it looks awesome . good luck on the other challenges

    0
  • Yehan Nilanga• 690

    @Yehan20

    Posted

    Hey Congratulations on completing the challenge , It would be good if you could make the grids divide at a lower width , when I viewed from my laptop it was not like the screenshot. You could divide it after around 991px may be , also the the footer looks kind of , together with the content, you could just always keep it in the bottom, You could do this by changing your height in the body to min-height and the flex direction to column, also having border-radius to 20px in the * selector may not be ideal since the body is also affected. Also remove the position absolute from the attribution tag , since it will cause some issues , I hope my feedback was helpful , Good luck for the next Challenges.

    Marked as helpful

    0