@kevin20001022Submitted 4 months ago
What specific areas of your project would you like help with?
Fonts & Margin plz
Thomas James
@turtlethomAll comments
- @turtlethomPosted 4 months ago
Hey kevin20001022, nice job on completing your project! I like your attention to detail when it comes to spacing elements. I saw you needed some help with margins and font size, so here are some techniques I can recommend:
- Instead of using the
pxunit, I would recommend usingremoremunits for your padding/margin sizing. They are helpful for making more maintainable designs. You can learn more about why they are more useful to use here. CSS Units When To Use One. - For dynamic font-sizes, you can utilize the
clampfunction to keep the font size 'clamped' between a minimum and maximum value. I've left a resource here for you to learn more about it if you'd like to use it in your projects. CSS Clamp.
Hopefully this helps. Keep up the great work :)
0 - Instead of using the
- @kevinrasataSubmitted 4 months agoWhat 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?
@turtlethomPosted 4 months agoHey Kevin, solid layout!
I was checking out your design of the recipe page in Google Chrome. One thing I saw was around 700px view width, some of the text gets cut off on the left before transitioning to the mobile design.
- I saw it in Chrome, but I'm not sure if it's affecting other browsers.
- It's probably just a small adjustment with your media queries, but it's hardly noticeable.
Other than that, great job! It looks like a 1:1 ratio to the solution!
PS: Huge fan of your use of CSS variables throughout your application as well as your naming conventions :)
Marked as helpful0 - @Alex-Archer-ISubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
"What is done cannot be now amended."
William Shakespeare
What challenges did you encounter, and how did you overcome them?"In the middle of every difficulty lies opportunity."
Albert Einstein
What specific areas of your project would you like help with?"If you want happiness for a year, inherit a fortune. If you want happiness for a lifetime, help someone else."
Confucius
@turtlethomPosted 4 months agoHaha loved what you did there in the retrospective section (Especially that Einstein quote). I LOVE the hover animation over the dice button and the JavaScript logic you've written for this application.
I'm fairly new to writing in Vanilla JS, but the way you organize the logic into separate files is very inspiring to me! (
dice-animation.jsis super cool, with the recursivegetRandomDicefunction).Keep up the great work my friend :)
Marked as helpful1 - @O-Julia-OSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of working with grid, and position it like on providing design:)
What specific areas of your project would you like help with?Any feedback would be helpful :)
@turtlethomPosted 4 months agoHey Yuliya, awesome grid layout. It's quite responsive and looks fantastic. Your usage of utility classes and CSS variables are great as well!
Just wanted to let you know that you could substitute some of the hard-coded values in your styling with the CSS variables you already defined. For example:
--Very-dark-grayish-blue: #48556a; .light-card-text-color { color: #48556A; /*Could be replaced with `color: var(--Very-dark-grayish-blue);` */ }This can help make your codebase more extensible in the long term and is generally better practice, especially in larger, more long-term projects.
- You'd be able to change the color in the
:rootand be able to change it everywhere else. Another area I saw was here:
.card { color: white; padding-top: 26px; padding-left: 32px; padding-right: 32px; padding-bottom: 32px; border-radius: 8px; margin-bottom: 24px; } /*Can be condensed into this*/ .card { color: var(--White); padding: 26px 32px 32px; /* top, left & right, bottom */ border-radius: 8px; margin-bottom: 24px; }Just a few areas I saw that you could change to write less code. I'm just nitpicking those few things, but the presentation of the content is on point! I hope this information helps and again, great work as always :)
Marked as helpful1 - You'd be able to change the color in the
- @ZahinRakinSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I am mostly proud of the way I pulled of the text sizing without using the media query. To pull that off I used the font-size: clamp(14px, 2vw, 16px); I don't know if it is alright. but I learned this new.
What challenges did you encounter, and how did you overcome them?when i was adding the padding the div's size was getting bigger which I didn't want. To solve that I needed to use box-sizing: border-box; this is an amazing css property that I learned doing this project.
What specific areas of your project would you like help with?the border radius of the image. when i scale down the image's border radius disappears. This happens because the image is getting zoomed in. how should I solve this? should I use div then inside that img?
@turtlethomPosted 4 months agoHey Zahin, your project looks great! Using clamp is also a great way to create responsive font sizes on different screens.
If you are encountering weird styling issues (such as the image resizing), I suggest checking out Normalizing CSS. It helps "reset" CSS styles to allow the behavior of those styles to be more predictable.
- You can incorporate it into your main CSS file or link it to your
index.htmlvia another stylesheet (Ex:normalize.css).
The
box-sizing: border-boxproperty is super useful and can be applied to more than just a singlediv.*, *::before, *::after { box-sizing: border-box; } img, picture { max-width: 100%; display: block; }I hope this can help with the image sizing issue :)
Marked as helpful1 - You can incorporate it into your main CSS file or link it to your
- @O-Julia-OSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
The most proud of solution with borders in table, there was a small space and i found a way new for me which I've never met before.
table { border-collapse: collapse; }- the code helped to delete the annoying small space between cells.
Next time i will do everything starting by centering all tags by flexbox;
What challenges did you encounter, and how did you overcome them?The most proud of solution with borders in table, there was a small space and i found a way new for me which I've never met before.
table { border-collapse: collapse;- the code helped to delete the annoying small space between cells.
Oopps, about tables....
What specific areas of your project would you like help with?I would like to find out your opinion about my code and how to improve it. It would be so nice from you. Thanks in advance for your help :)
@turtlethomPosted 4 months agoHello Yuliya, I think your project looks fantastic. It's very responsive and looks great on all viewports. The presentation of the content on the recipe page is very professional.
I see you have used CSS variables to store the corresponding colors. You can reduce the amount of CSS you have written by defining your own CSS Utility Classes.
- Basically, utility classes group styles that you use very often into one class so you don't need to write the same line over and over.
Example:
/* Your colors */ :root { --rose-800: #7a284e; --rose-50: #fff7fb; --stone-900: #312e2c; } /* Your CSS Utility Classes */ /* Text Colors */ .text-rose-800 { color: var(--rose-800) } .text-rose-50: { color: var(--rose-50); } .text-stone-900: { color: var(--stone-900); } /* Background Colors */ .bg-rose-800 { background-color: var(--rose-800) } .bg-rose-50: { background-color: var(--rose-50); } .bg-stone-900: { background-color: var(--stone-900); }<body class="bg-stone-100">...</body>You can apply these classes to the necessary elements and reduce the amount of times that you write
background-color: var(--stone-100);. This is a small example, but I hope this helps!- It's a bit tricky to get the hang of at first (I struggled understanding when to create utility classes), but it's very worth it, especially for larger projects.
- You'll speed up the performance of your application, as reducing the duplicate styles will lead to a smaller CSS file.
- These classes can expand to
font-family,font-weight,padding-left, etc.
If you'd like to learn more, I found this resource to be quite informative: How I use utility classes to write more efficient CSS
I hope this helps!
Keep up the great work! You have a good eye for details :)
Marked as helpful1 - @Alex-Archer-ISubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I decided to practice the tailwind for this project. I'm proud that I practiced and learned something new. But I have a mixed feelings about tailwinds. But that's another story.
What challenges did you encounter, and how did you overcome them?Tailwind documentation is quite easy, so it was more a hitch than challenge, but nothing more fit in this category.
What specific areas of your project would you like help with?Open for any comments, as always.
@turtlethomPosted 4 months agoHey Alex!
Very impressed with your design! I haven't utilized Tailwind yet, but it's amazing how concise you've made your code base.
- Your code is very readable (DRY).
Personally haven't used Tailwind because I like defining my own classes, but it seems very efficient for applying quick, reusable styles. Definitely looking into utilizing it in the future, especially for more urgent projects.
Two questions I have are:
- For the preset style values provided for this project (colors, font-sizes, etc..), did you use any CSS variables to store these values or did Tailwind provide everything you needed to complete the project?
- I saw you have mixed feelings about Tailwind. What are some personal pros and cons you have about it?
Overall, you did awesome :)
Marked as helpful1
