@devPauloski
João Pedro
@johnstone14All comments
- @johnstone14
Your code is incredible, and it's also well organized! One detail if you want to add to make the h1 and h2 with their weight more similar to that of the design, you can remove the:
font-weight: var(--fw-bold); from h1, h2.
While the:
.preparation-time-wrapper you add the weight of 600.
I hope I helped you, have a good code :)
Marked as helpful - @vedantvardhan02@johnstone14
The project is great, a tip to make it more similar to the design, you can reduce the padding to approximately 2rem, and the div box with a width of 300px
- @yashrj3002What challenges did you encounter, and how did you overcome them?
One of the biggest challenges I faced was making the site responsive across different screen sizes. Initially, some elements were not aligning properly, and the layout broke on smaller screens. To overcome this, I used CSS media queries to adjust styles based on screen width. Additionally, I tested the site by using browser developer tools to debug and refine the responsiveness."
@johnstone14Your project is perfect, however, the zoom that should be on the button is on the entire card. In the case of this card, you can use figma to help you, it will give you all the information needed for the project. Have good code :)
- @SIVADA007@johnstone14
You have a good code, but it is good to improve the organization of it and its folders a little. For example: leave only the index.html, style.css, readme and a folder to place your photos, fonts or other necessary items.
To organize the text of your code automatically in vscode, you can format the document, either by clicking on the right side of the mouse, or press shift+alt=F
Another easy way to import a font is using (@import url('your font imported by google fonts'); in CSS.
To make a line break in HTML you can use the <br> tag
in the title you can also use an h2 with a weight of 700, while p is 400.
I hope I helped you, have a good code :)
- @OghosaAgbontaenWhat are you most proud of, and what would you do differently next time?
I was able to make my webpage responsive for various devices
What challenges did you encounter, and how did you overcome them?I had issues centering the div, I used margin and align-item to center the div
@johnstone14You have great code, for your project more similar to design you can remove the screen scroll, use it in the body (height: 100vh), and in the main you can use one (padding of approximately 15px).
