Skip to content
OverviewSolutions
5
Comments
17
Giovanni Ruberto
@Rabberpoli

All comments

  • Giovanni Ruberto•260
    @RabberpoliPosted over 1 year ago

    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•260
    @RabberpoliPosted over 1 year ago

    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•260
    @RabberpoliPosted over 1 year ago

    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
    @Barenko91Submitted over 1 year ago

    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•260
    @RabberpoliPosted over 1 year ago

    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
  • Giovanni Ruberto•260
    @RabberpoliPosted over 1 year ago

    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
    @DavidDHDHSubmitted over 1 year ago

    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

    1
    Giovanni Ruberto•260
    @RabberpoliPosted over 1 year ago

    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•260
    @RabberpoliPosted over 1 year ago

    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•260
    @RabberpoliPosted over 1 year ago

    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•260
    @RabberpoliPosted over 1 year ago

    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
    @bally4hSubmitted over 1 year ago

    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•260
    @RabberpoliPosted over 1 year ago

    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
  • Giovanni Ruberto•260
    @RabberpoliPosted over 1 year ago

    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•260
    @RabberpoliPosted over 1 year ago

    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