Yanna• 120
@yannancls
Submitted
Vitor Emanoel da Silva Nogueira
@VitorEmanoelNogueira
All comments
@VitorEmanoelNogueira
Posted
Hello, Yanna, great job!
After seeing your codes, I have some tips that may help you:
- If you want your project to be more like the design, I recommend you to pay attention to the "Powered by Technology" and cards titles, since the have different font weigths, and to the border-radius of the cards aswell, since your project has a value higher than the original design (that I personally like better XD);
- For improvement in general, I recommend you to studying the 'em' and 'rem' unit of CSS, since using px can limit acessibility for custom configurations of font-size, etc. Here's why font-size should not be in pixels: https://fedmentor.dev/posts/font-size-px/. By learning these units and understanding when to use which one, you can use them on the font-size, margin, paddings, etc.
- Other thing I recommend is learning CSS GRID, that will alow you to place the cards like in the desktop version with much less effort.
Keep on the great work! You did great!
Marked as helpful
0- Virshree Desai• 100
@Virshree
Submitted
What are you most proud of, and what would you do differently next time?
Finishing this project..
What challenges did you encounter, and how did you overcome them?
Challenges faced was for mobile view layout and i searched for tutorial for responsiveness layout ..
@VitorEmanoelNogueira
Posted
Hi Virshree Desai! Great job!
After reviewing your code, I have a few tips that might help:
- Change the font for the paragraph and title. You accidentally confused them with each other, so the paragraph font should be in h1 and vice versa;
- Use the Fraunces font for the green price tag;
- Increase some padding and margins between the elements.
I think using a div for the card itself was unnecessary, since the main content of the template is the card, and I think that might be why your mobile design had an overflow causing the scroll bar to appear. What I used in this layout was to use the main tag for the card and just separate the other elements (image, text) using divs and sections.
I hope my tips help you and keep up the great work!
0 - Davi Souto• 30
@davisoutoneri
Submitted
@VitorEmanoelNogueira
Posted
Hello, Davi Souto! Great job!
I couldn't access your code or preview site, so it will make a little more difficult to help, but I have some tips. From what I see in the screenshot, what you should focus mostly for your solution to look more like the design is:
- Increase the body padding to make the main container go more in the middle;
- Fix some paddings on the main container, the table rows and the list items. You should increase then a little;
- Increase the main container border radius;
- Fix the font color in the "preparation time" section.
Sorry if it's a little confusing, english is not my primary language. Hope it helps! Keep on the good work!
0 - PPurnama S Rahayu• 250
@catreedle
Submitted
What are you most proud of, and what would you do differently next time?
I am more comfortable with my workflow this time, compared to the previous two challenges. I would like to implement the best CSS practices for the next project. I am confident with my HTML structure, but maybe I have some blind spots. I am open to feedback.
What challenges did you encounter, and how did you overcome them?
I struggled a bit in showing the anchor tags as buttons, I am not sure that I've done the best approach. The list element positions were slightly off to the right, a quick search helped me override that behavior.
What specific areas of your project would you like help with?
The mobile design doesn't look exactly like my final project. I have too wide horizontal gaps compared to what's shown in the design. Some help with this will be very much appreciated.
@VitorEmanoelNogueira
Posted
Hello, Purnama S Rahayu, great job, the design is great!
I have some tips that I hope help you:
- For displaying the anchor tags as buttons, what would get them to look more similar to those of the original design is adjusting the height of them so they look bigger. On my project I used 45px of height with 13px of padding-top to adjust the content of the button;
- Adjust the margin between the name and the location. I think just 10px between these two would get the design closer to the original;
- If you want to get it even closer to the original, you can try to resize the image to look a little smaller;
- To get the mobile design closer too, you can try reducing the padding a little (30px to 25px) or/and increasing the cointeiner width a little.
Overall, it's a great design! Keep improving!
Marked as helpful
0 - Jani-B• 270
@Jani-B
Submitted
@VitorEmanoelNogueira
Posted
Hello, Jani-B! Great job!
After seeing your code, I have 4 tips to give:
- Learn how to vertically centralize conteiners, instead of using margin, because while it can look good on your device, on others it can create scrollbars (like on mine XD) and it won't be really centralized like it should be. You can learn it seeing the position and transform:translate properties method first and then using flexbox when you get to study it, which it will make things easier;
- Reset the padding and the margin of the HTML in general in the global selector of CSS (*) to 0 before starting to stylize everything. It helps to get rid of some unwanted paddings and margins that can be a problem while you stylize your own;
- Adjust some of the paddings and margins. The main conteiner padding should be 24px and the margin between the image and the "learning" should be increased a little (24px);
- Configure the cursor on the title so when the hover is active it changes. You can do that by going in the card:hover selector and adding the property "cursor: pointer;" to it.
Overall, you did a great job and the design is pretty good, keep on improving!
Marked as helpful
0 - Baegan-189• 90
@Baegan-189
Submitted
@VitorEmanoelNogueira
Posted
Hello, Baegan-189! Great work!
After seeing your code, I have some modifications to suggest:
- Studying and using semantic HTML. You can use for the main conteiner (which here contains the QR code and the texts), using the <main> tag. It's a good practice and it would help for using the padding on all the itens simutaneously and then just needing to do some ponctual changes for the rest;
- Studying how to vertically align conteiners in the center. I would recomend you to look how to do it with the position and transform:translate properties first and, when you get a little more advanced, using flexbox, which is an easier alternative.
I believe that with just these two tips your solution will be exactly like the design. Sorry if my feedback it's a little confusing, English is not my first language.
Marked as helpful
0
