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
OverviewSolutions5Comments18

All comments

  • Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi, Well done for doing this challenge! The final result is great!

    Back at your questions:

    • Using em or rem would be better than using just px. That's because px will be the same size for every screen resolution; this could be a problem in term of accessibility and responsiveness. So: yes, best practice suggests em or rem. You can read more here
    • Talking about commenting code: I usually comment code that it would be hard to understand if I read it after long long time. I would avoid to comment every single line and usually is best practice to write code that explains itself without the need of commenting every line.

    Hoping to be helpful, keep going and happy coding!

    Marked as helpful

    1
  • Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! Congratulations for completing this challenge! I think there was some error uploading your solution on github. That's because your project doesn't show your graphic solution. Maybe you're pointing to the wrong file or it is not where you're pointing to!

    That said, keep going and happy coding!

    Marked as helpful

    0
  • Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! Congratulations for completing this challenge! I think there was some error uploading your solution on github. That's because your project still has the same template frontend mentor provided when you enrolled in this challenge. Maybe you developed on another branch but you're pointing on master branch.

    0
  • Barenko91• 20

    @Barenko91

    Submitted

    Hello World ! I make this only with block and css margin and padding so it's not really responsive so if someone want to help me to improve the code feel free :)

    QR code responsive HTML CSS

    3

    Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! Well done completing this challenge! As you said, you used only margin and padding properties. This lets you achieve a pretty good result but it doesn’t guarantee a responsive behavior. A powerful property that can ease your job in term of responsiveness is flexbox (you can give a look at the documentation here). This property along with justify-content and align-items let you center automatically your DOM object without struggling with margins and paddings.

    Hope to be helpful, keep going and happy coding!

    0
  • Niklaus Mikealson• 170

    @Dhruv-mak

    Submitted

    Hi, Please help me if you can. If you notice in the mobile view the attribution is behaving weirdly. Can anyone tell me why that is the case?

    Results summary component

    1

    Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! Congratulation for completing this challenge! Answering your question: on mobile resolutions the attirbution element is acting weirdly due to a couple of reasons; I'll show you how:

    • Here it is your .container class: .container { display: flex; width: 50%; height: 500px; align-items: center; margin: auto; margin-top: 100px; background-color: rgb(248, 248, 241); border-radius: 10%; box-shadow: 0 0 20px 5px rgb(186, 186, 179, 0.5) }

    As you can see it has fixed height set at 500px, which is not correct since child elements get off this height value. You should remove height property in order to auto adjust the parent element.

    • Secondly, you're giving at attirbution element the following attributes position: absolute; bottom: 0; This put your attribution element on bottom of the visible screen, not at the bottom right after your card component. I'd suggest to delete these 2 properties; doing this will assure you to find it after your card component.

    Hoping to have given you helpful advices! Keep going and happy coding!

    Marked as helpful

    1
  • Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! Congrats on completing your challenge! Graphically speaking it’s pretty good, you did a great job! The corresponding GitHub code is not available at the moment, so I cannot give you further informations.

    That said, keep going and happy coding!

    0
  • David H.• 40

    @DavidDHDH

    Submitted

    My second challenge ! It was more difficult than expected, especially the 4 results components. I realized that I don't know Flexbox that well, it took me a long time to put everything in place. My mistake was to start by desktop design instead of mobile one, as tailwind is more mobile first.

    I've put some JS for the first time, just to update results with the data.json. I've tried to do a loop for that but without succeed. I don't know what else I could have done in JS?

    Thanks for futur feedbacks !

    Responsive results card made with Flexbox, Tailwind & JS

    #tailwind-css

    1

    Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! Congrats on completing this challenge! You did a really good job! Back to your question, it is possible to render your results dinamically using JS. I try to explain one of the multiple solutions you can develop:

    const scores = [ ]; // here you can put your score objects

scores.foreach(score => {
   const categoryId = score.category + ‘-score’; // Here I’m creating the Id of the HTML element I have to modify

   const categoryHtmlElement = document.getElementById(categoryId);
   categoryHtmlElement.innerText = score.score;
});

    This should give the desired output.

    Let me know if it can be useful! Keep going and happy coding!

    Marked as helpful

    0
  • Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! Well done completing this challenge! Just a simple tip: looking at your code I saw you using margin and padding properties. This lets you achieve a pretty good result but it doesn’t guarantee a responsive behavior. In fact you had to use media queries to adjust for specific screen size; A powerful property that can ease your job in term of responsiveness is flexbox (you can give a look at the documentation here). This property along with justify-content and align-items let you center automatically your DOM object without struggling with margins and paddings.

    Hoping to give helpful tips keep going and happy coding!

    Marked as helpful

    0
  • Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! Congratulations for completing your challenge! Just one thing:

    • height and width properties are fine on desktop resolution; but shrinking the window size I see that there is a resolution gap before mobile layout kicks in. In that gap components gets a little bit messy. In order to avoid this you can use media queries (more details here). Using media queries you can adjust card's width in order to contain everything until mobile responsiveness comes up. As another alternative, if you are using flexbox you can play with flex property (you can check flex documentation and flexbox in general).

    Hope you will find it useful! Keep going and happy coding!

    Marked as helpful

    0
  • Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! Well done doing this challenge! Looking at your code I see you have 5 html elements: one for each rating. If you'd like to change background color on hovering you should do the following:

    • Take the CSS class that defines background color of your rating components
    • Write this on your css: .<classname>:hover { background-color: <color>; }

    :hover property gets fired on CSS class when mouse passes over the targeted block.

    Hope you can find it useful! Keep going and happy coding!

    0
  • BalazsBanfi• 280

    @bally4h

    Submitted

    Hi!

    I have free subscription and I'm doing the newbie challenges one by one. I have a question.

    When doing the job, what is the best practice to compare the desktop and the mobile desig files with my solutions and part-solutions?

    Now I run the index.html on the vs code live server, in chrome. After I open in the background the design images and push the ALT+TAB several times and try to see the differences.

    Maybe there are a better method, what is more precise. If there is, please explain me.

    Thank you!

    3-column preview card using mobile-first css, flexbox

    1

    Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! Congratulations on completing this challenge! Talking about your questions:

    • The solution you provided is fine, not the best efficient I guess, because of the several ALT+TABs. But it's still fine to get similar result
    • Another solution could be: you get your index.html on a chrome page and, at the same time, on another chrome page you can have the desired output screenshot. Once you have these 2 web pages you can split your screen in half: on the left the first web page and on the right the second one. Alhough this is not the best practice either, it prevents you from clicking several times combination of your keyboard. The best one would be having the figma prototype, which is not available on free plan.

    By the way, I would suggest that the purpose of these challengese, here on frontend mentor, is not to get mad at getting the exact result pixel-by-pixel. Instead, the most important thing is to get max quality out of your project, no matter if they smaller/bigger/wider than the original; providing best quality code will be better than focusing on pixels

    After all, you did a great job on this challenge! Just keep going and happy coding!

    Marked as helpful

    0
  • P
    Alex Gonzalez• 70

    @luinrandir

    Submitted

    Oddly enough, figuring out how to calculate age was difficult due to the fact that we normally do not calculate age in that way. Other than that, I felt that this was a great step up from novice!

    Age Calculator App with JavaScript Validation

    #jest

    1

    Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! Congratulation for completing this challenge! Just some tips that might be helpful:

    • I see that the upper part of "calculator card" gets cut on browser window even if page is scrollable; in order to avoid this you could set min-height: 100vh;. This lets you to see the entire card without being cut.
    • Regarding dates calculation, if you don't want to use plain JS logic you can use MomentJS library (you can find more details here). It provides you a lot of methods like isValid() (giving a formatted date it returns a boolean which gives you the information about its correctness) or diff(), combined with duration(), that can be used to subtract 2 dates and get the results subdivided in days/months/years (you can give a look at my github code; I solved it using the methods I mentioned you before).

    Hope these suggestion will be helpful and, again, keep going! Happy coding!

    0
  • Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! Well done doing your first challenge! 😎 You’ve done a great job! Looking at your question I would say that you can’t import your json data directly into your HTML file; HTML is just a markup language, you can’t put logic in. In order to achieve your goal you have to write a JS file in which you import your JSON. After that you can create an array of object containing your scores; for each element you can create an HTML element (always JS speaking) with desired HTML/css attributes (“foreach” method in JS lets you iterate over array elements) and append every HTML element to its parent “div”. Once your JS file is done you have to import it in your HTML file. I hope to have given you some helpful tip. That said, keep going and happy coding 😎

    Marked as helpful

    1
  • Cornflakes• 290

    @CornflakesPlus

    Submitted

    Hello, super smart people! 🖐🏻

    This is my first JavaScript challenge, so disappointments are guaranteed. ;D

    It was a difficult challenge, especially dealing with Dates, truly a nightmare. I managed to complete the challenge the best I could. I would love to know some specifics and how you approach it.

    1. How much time(days/weeks) would you take to complete this project?
    2. What is the first thing you focus on? (HTML/CSS or JavaScript)?
    3. How much time do you spend on research? (Googling techniques or code solutions)
    4. What method/s do you take when stuck on a project?
    5. How to know when "is it good enough"?

    and finally, any feedback will be greatly appreciated. (And rewarded with points ;D )

    Age Calculator App | HTML/CSS + JAVASCRIPT + techniques ;)

    #accessibility

    1

    Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! I like your component! Well done 🎉 I’ll try to answer your questions trying to be helpful:

    • I solved this challenge in about 3/4 hours; this is un unhelpful statistic because it really depends on your skills and practice on doing front end components; so don’t be scared! If it takes you more than expected it’s normal, most important is to get knowledge that you didn’t have before
    • usually I start doing HTML along css. Once there is a sort of “skeleton” of what the final result will be I start developing JS code.
    • Here goes the same answer at first question: it really depends on what your knowledge is: the more you practice the less you need to search things
    • When I’m stuck on something I try to debug if it’s possible (if I’m stuck on JS code); otherwise I try to convert the problem in smaller ones (classic “divide et impera” approach). If not works then I’ll try to check on Google and understand what I’m doing wrong
    • I think that a project is “good enough” when you have a clean code and a neat html/css styles organization. Secondly the project has to be just as good as I imagined before implementing (in term of ux/ui and graphics).

    Marked as helpful

    1
  • Fin Tatum• 150

    @tdtatum2

    Submitted

    • How did you handle the varying font-sizes so that it looked large, yet still fit, on all screen sizes?

    • How did you go about calculating the age?

    • If you animated the numbers, how did you do so? Did you use a library or custom keyframes? How were your elements structured to allow the animation?

    • How did you go about validating dates to make sure things like February 31st weren't accepted by the form?

    Age Calculator using ReactJS

    #react

    1

    Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! Great job submitting your solution 😎 I try to answer your questions:

    • In order to fit your component on multiple size you could use “flex” properties combined with media queries (these will help you set the right font-size)
    • To calculate the current age I just used a JS library called “momentJS”. It provides a lot of APIs to format dates and make operations with dates. Anyway there are a lot of libraries that can get your work easier!
    • The animation of counting number was made it entirely with JavaScript code; is fairly simple but it doesn’t provide a lot of customization such as speed of the animation
    • Here momentJS can help you by passing the date to “isValid” method; this will return a Boolean giving you the information about the correctness of input date

    I hope these tips can be useful! Keep going and happy coding 👋🏻

    Marked as helpful

    1
  • Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! Great job doing this challenge! 🎉🎉 Just a few tips to improve graphically:

    • set same width and height for the circle surrounding your score; doing this you will achieve a full circle
    • instead of having 2 separate cards (score and summary) you could have a parent div that contains the 2 sections: score at left and summary at right (you can achieve this using “display: flex” and setting each section width at 50%). The left card gets background color as it is now, you just have to set border radius appropriately. Doing this it will get easier to set “box shadow” property because you can apply it directly at the parent div (you can have a look at my GitHub code just to understand better what I am saying).

    That said, congrats for having submitted your solution! Well done and keep going; happy coding! 😎

    Marked as helpful

    0
  • Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! 👋🏻 I gave a look at your GitHub code; looks really nice! Congrats on your first challenge 🎉

    Just one thing: Your “preview site” button redirects to a white landing page (You’re using Vercel as hosting service). This issue is given because Vercel is pointing to your “index.HTML” file (which is the one created by front end mentor) and not to your .jsx file where all your components are declared. You should set this configuration on your Vercel dashboard.

    By the way, keep going with your challenges, you’re doing a great job! Happy coding! 😎

    0
  • Giovanni Ruberto• 280

    @Rabberpoli

    Posted

    Hi! Well done, you did a great job 😎

    Below some advice just in case you would like to improve your code

    • HTML :

    Best practice is to use <main> tag to wrap all the main content of the page instead of the <div> . This can help you improving the accessibility of the page. The tag header ‘<h1>’ should be present even if you are not displaying it. You can create it and let it be hidden visually and, at the same time, readable by screen readers.

    • Alt text:

    The purpose of ‘alt’ text is to provide useful information about the meaning of the image. In this case the QR code will redirect the user to the frontendmentor.io site, so you could improve your attribute explaining what it does.

    I hope these information could be useful as they were (and actually still are) to me! ☺️

    Don’t stop creating great solution and seek for continuous improvement 😎

    Happy coding!

    0