All comments

• 

  Juriya• 140

  @juriya

  Submitted about 8 hours ago

  

  Testimonials Grid Section using Grid and Flex layouts

  1

  10

  

  jen067• 120

  @jen067

  Posted about 5 hours ago

  Great Job !!

  0
• 

  Anusree P• 60

  @Anusree-P-dev

  Submitted 4 days ago

  

  Responsive four card feature section using css grid

  1

  00

  

  jen067• 120

  @jen067

  Posted 4 days ago

  1. The footer content easily overlaps with the last card on mobile.
  2. Only the top-left and top-right corners of each card's colored area should have rounded corners, while the rest should remain straight.
  3. You can use box-shadow: 0 y-axis offset blur to create the shadow effect initially requested.
  4. The card's title text should have a font-weight set.
  5. Mobile sizes are typically below 768px, but in your case, the layout switches to mobile around a screen width of 980px.

  Another interesting thing is that when the screen size is reduced to below 300px, it applies the desktop styles again, which is also something that can be adjusted

  Marked as helpful

  0
• 

  musaabuu• 140

  @musaabuu

  Submitted about 1 month ago

  

  product-preview-card-component

  1

  10

  

  jen067• 120

  @jen067

  Posted 8 days ago

  1. In terms of CSS, it might be helpful to use a CSS reset more frequently, followed by the :root selector, and then proceed with other style settings.

  2. For using font-family, consider using CSS variables, like: --ff-montserrat: 'Montserrat', sans-serif; --ff-fraunces: 'Fraunces', serif;

  3. gap: 1rem; only needs a single semicolon.

  4. Good use of flex-basis helped me solve my layout problems.

  0
• 

  P

  Igorsimic1988• 70

  @Igorsimic1988

  Submitted 10 days ago

  

  Recipe Page

  2

  20

  

  jen067• 120

  @jen067

  Posted 10 days ago

  1. You can add padding-left to the li elements to increase the spacing between the list-style and the text.
  2. On mobile or smaller screens, according to the illustration, the content should be aligned to the top, bottom, and edges, and the border-radius should be removed.
  3. There should be a divider between "Ingredient" and "Instruction" to distinguish the sections, which can be achieved by using pseudo-elements in the container.
  4. You can add a CSS reset to help with the layout.

  0
• 

  P

  Denisa Orlikova• 80

  @denisaorlikova91

  Submitted 15 days ago

  

  Social Links Profile HTML/CSS

  1

  60

  

  jen067• 120

  @jen067

  Posted 12 days ago

  Pros: The overall design is clean and well-organized, and the cursor icon on hover is very cute.

  Areas for Improvement:

  The background color set for @media screen and (max-width: 375px) is somewhat abrupt; using a darker color might enhance consistency. The top and bottom of the cards tend to stick to the edges of the page. Consider adding padding to the body to avoid this issue.

  For me, I would set text-align: center on <p class="card-header--role">"Front-end developer and avid reader."</p> to ensure that the text remains centered when the screen is resized and the line breaks.

  That's just my solution to this project; your design is good enough!

  0
• 

  Rabin Gapi• 40

  @DeveloperRabin12

  Submitted 13 days ago

  

  blog card using html and css

  2

  00

  

  jen067• 120

  @jen067

  Posted 13 days ago

  • Did not write in Markdown. Writing in Markdown would help clearly identify any issues and the process of styling.

  • HTML

  1. Add Classes to Tags to Differentiate Elements
  2. Since the styles of p tags differ, adding a class can effectively apply paragraph styles to individual sections.
  3. Avoid Overusing ID: When there are many image elements, using id="image" is not a good choice. Switching to classes would allow for consistent styling across similar tags.
  4. Footer Setup: In my opinion, there are too many wrapping layers. Instead of using <div id="avname"><h4>greg hooper</h4></div>, it could be simplified to <h4>greg hooper</h4> with a class added to the h4.

  • CSS

  1. font-family: 'figtree'; should be changed to 'Figtree', sans-serif;.
  2. Use rem instead of width, padding, and margin sizes to adjust according to the font size when the screen scales.
  3. For the footer, justify-content: flex-start; is the default style and does not need to be set additionally.

  0
• 

  Adriverion• 80

  @Adriverion

  Submitted 14 days ago

  

  QR Code Componente

  1

  31

  

  jen067• 120

  @jen067

  Posted 14 days ago

  The implementation of CSS variables is truly commendable, as it enhances the maintainability and flexibility of the code. Additionally, the overall structure of the code is remarkably concise, which not only improves readability but also ensures that the design adheres to the principles of responsive web design. This adherence guarantees that the layout remains intact and visually appealing across various screen sizes and devices, preventing any issues related to misalignment or distortion. Overall, the combination of these practices contributes to a robust and user-friendly web experience.

  Marked as helpful

  0