lazydroide• 110
@lazydroide
Submitted
Кристина
@KristinaHorbenko
All comments
- Кристина• 140
@KristinaHorbenko
Posted
interesting solution, looks good adaptability on a 900px wide monitor. Well thought out design and structure.
0 - Кристина• 140
@KristinaHorbenko
Submitted
What challenges did you encounter, and how did you overcome them?
I encountered some difficulties arranging the cards in the desktop version.
Кристина• 140@KristinaHorbenko
Posted
This is a very interesting solution, and I appreciate the approach you've taken. I would love to see more examples like this to gain more experience. Thank you!
Could you please explain why you used a <span> tag in this case?
0 - Allan Sancley• 100
@AllanSancley
Submitted
Кристина• 140@KristinaHorbenko
Posted
This is a very interesting solution for card placement. The chosen grid and responsiveness add structure to the design and make it user-friendly across different devices. However, it's worth paying attention to the fixed margins for images. In the CSS, the fixed margins for images (margin: 25px 0 0 200px; and margin: 30px 0 0 232px;) can cause issues with responsiveness. It would be better to use flexible values like percentages or rem for smoother scaling across various devices. Unoptimized CSS: There are many repeated styles for the article element. For instance, width, height, border-radius, and padding-left could be placed in a common class for all articles, which would reduce the code volume and make it easier to maintain. Lack of color variables: Color values (hsl(...)) are repeated multiple times in the code. Using CSS variables for colors would make it easier to change the color scheme in the future.
Marked as helpful
0 - Isaias• 70
@Isa696
Submitted
What specific areas of your project would you like help with?
I couldn't make fonts works correctcly, i see it a litle pixelated. and seems not to match desing. i download fonts and import locally
Кристина• 140@KristinaHorbenko
Posted
Your code already has a good structure and functionality. With a few adjustments to the media queries and improvements to the attribution section, as well as considering accessibility, it will become even higher quality. Keep up the good work!
1 - Andymiguel25• 60
@Andymiguel25
Submitted
Кристина• 140@KristinaHorbenko
Posted
"This code is too simple and requires improvements to ensure correct functionality across different screens. One of the main drawbacks is the lack of media queries for adapting styles to various devices. In its current state, the page will not display properly on mobile devices, as the element sizes are statically defined without considering the screen width.
Additionally, it's worth noting the design inconsistencies. For instance, the use of inline styles for headings and text reduces flexibility and creates challenges for future style modifications. The font is chosen arbitrarily, and in the mobile version, it does not scale according to the screen size, making the text hard to read on smaller displays.
To enhance this code, I would add media queries to properly adapt elements for different screen sizes. Improving typography and the overall structure of the styles would also make them more universal and supportive of scaling."
Marked as helpful
0 - Andres Lamar• 150
@AndresLamar
Submitted
Кристина• 140@KristinaHorbenko
Posted
The code looks good and well-structured. It uses modern approaches in layout, such as CSS variables for colors and typography, as well as adaptive styles with media queries for users with accessibility needs. The use of CSS Grid and Flexbox makes the code flexible and cross-browser compatible.
1 - PThiago Rodriguez• 120
@thiagorodriguezdev
Submitted
What are you most proud of, and what would you do differently next time?
do desenvolvimento
What challenges did you encounter, and how did you overcome them?
projeto fácil
What specific areas of your project would you like help with?
gostaria de receber qualuer feedback
Кристина• 140@KristinaHorbenko
Posted
I think this code is well written and clean. Its structure makes it easier to understand and maintain. The use of CSS variables for controlling colors and typography enhances flexibility and consistency throughout the code. Additionally, the implementation of responsive design ensures that the layout displays correctly on different devices. I also appreciate the inclusion of fonts via @font-face, which adds a nice personal touch. Overall, this is an excellent example of quality code that adheres to modern web development standards.
Marked as helpful
0 - P
@praditia
Submitted
Кристина• 140@KristinaHorbenko
Posted
The code is structured and readable. The use of CSS variables makes it more flexible and manageable. However, it is worth paying attention to the consistency in the use of indents and whitespace to improve the overall appearance of the code. The solution is consistent with the given project, although it is worth paying attention to details such as indents, sizes and styles to match the layout 100%. Some design improvements such as shadows or borders can make the card more attractive.
0
