Adam

Latest comments

• 

  gauravk2203•290

  @gauravk2203Submitted 4 months ago

  What are you most proud of, and what would you do differently next time?

  I began by designing the mobile view first, ensuring it was responsive and could scale up to the desktop view. Working with CSS Grid was a great experience, as it helped me understand layout flexibility better. Although I know I made a few mistakes during the process, I’m choosing not to fix them right now. I’m submitting the project as is and will focus on improving it in the future when I revisit it. This experience has been valuable, and I look forward to refining it later.

  

  ArticlePreviewCard

  1

  20
  

  Adam•340

  @nadam-designPosted 4 months ago

  Hi @gauravk2203!

  I saw your solution and have a few observations:

  • Social icons issue: When I tap the share icon on mobile, the social media options appear. However, if I increase the viewport size while the share menu is active, the layout breaks, and the author section disappears. I understand that this isn't typical user behavior, but such issues can arise during testing and should be addressed.
  • Padding mismatch: The padding doesn't fully align with the design. As a frontend developer, it's important to ensure the final result matches the design as closely as possible. Don't settle for "close enough"; strive to replicate the design exactly! Aim for perfection!
  • SVG optimization: If you're working with vector icons (SVG), using them inline can be a great way to reduce the number of requests (each img creates a separate request). This approach can optimize performance.
  • Flexbox and best practices: I noticed that justify-content: space-evenly; might not be necessary in this case. Additionally, avoid using !important. For instance, you already declared .authordetails as a flex object earlier. There's no need to repeat this within a media query, especially with !important. Try to avoid using !important. While it can be useful and has its place, in this case, it’s unnecessary and only adds complexity.

  Keep up the great work—you're doing well!

  Marked as helpful

  0
• 

  Hossam Hussein•110

  @Hossam-ThabetSubmitted 4 months ago

  What are you most proud of, and what would you do differently next time?

  learning grid layouts more deeply.

  What challenges did you encounter, and how did you overcome them?

  how to deal with SVG files and still not dealling well.

  What specific areas of your project would you like help with?

  still not know whats the benifit of file settings.json on intial project's file.

  

  Responsive Testimonials grid section

  1

  20
  

  Adam•340

  @nadam-designPosted 4 months ago

  Hi Hossam Hussein!

  I think you do a great job here, a few things to consider:

  • You’ve set the .grid-container and .card elements to a fixed width, which isn’t responsive. Try using max-width: 1112px; width: 100%; instead—this will make your layout and cards responsive.
  • The build switches to mobile view quite quickly (1439px). Consider adding intermediate steps to make the layout smoother and more fluid (e.g., a tablet view where the content breaks into two columns etc.). Mobile view only needs to kick in at smaller resolutions.
  • Try to avoid using px units; instead, use em or rem for better scalability and consistency.
  • Using .card:nth-child(3) p works, but in larger projects, it can make your code harder to follow and maintain. Instead, add a specific class to the .card element (e.g., .card--purple) and then target the content with something like .card--purple p.

  Overall, great work! If you address these points, it’ll be good!

  Go for it!

  Marked as helpful

  0
• 

  Azhagan-24•10

  @Azhagan-24Submitted 4 months ago

  

  Blog preview card

  1

  30
  

  Adam•340

  @nadam-designPosted 4 months ago

  Hi @Azhagan-24!

  I’ve seen your solution, and here are a few tips to make it even better:

  • Container: No need to specify the height of the card in this case (height: 468px;), as it depends on the content.
  • Centering: If you want to align the card to the center of the screen, add to the body: justify-content: center; and min-height: 100vh; (and remove the card's margins). This sets the body's minimum height to 100% of the viewport, and flexbox will center the card within it.
  • Fonts: I noticed you’re not using the font from the design. If you’re having trouble with Google Fonts, here’s a helpful solution worth checking out: https://gwfh.mranftl.com/fonts
  • Bootstrap: You’re using .col-sm-4, which is most likely a Bootstrap class, but the library isn’t linked, so it’s a bit confusing. Use descriptive class names instead (e.g., .card, .card-image, .card-title, etc.).
  • Simplification: The .min-container div is unnecessary here; it doesn’t serve a purpose and only complicates the structure. Strive for simplicity!
  • HTML tags and landmarks: Make sure to use proper HTML elements like h1, h2, or article. For example, you haven’t used a heading for the title. span is not a heading element!
  • Inline styles: While it’s okay to use inline styles in some cases, here they’re unnecessary and not ideal.

  Go for it!

  0
• 

  P

  M Rafay•110

  @the-ExalterSubmitted 4 months ago

  

  Responsive Four Card Feature Section using CSS Grid

  2

  30
  

  Adam•340

  @nadam-designPosted 4 months ago

  Hi M Rafay!

  A few things to consider:

  • Grid columns: grid-template-columns: 415px 415px 415px; could be optimized, don't use px, instead use fr which is much more flexible. Use the repeat() if you have equal width columns: grid-template-columns: repeat(3, 1fr);
  • Grid rows: as Grace mentioned above no need to set the row heights. If you don't declare it's going to be auto, which means it's depends on content. You can use: grid-template-rows: repeat(2, 1fr); which means you only need two rows in this case.
  • As a frontend builder, your task is to faithfully follow the design plan in every detail: spacing, fonts, sizes, and colors. Strive for perfection, as this is a key expectation in this field. For example, in your solution, the colors were swapped. While this might seem like a small issue, it reflects a lack of attention to detail. Developing an eye for aesthetics takes a lot of practice, but it's essential if you want to improve and excel in this area.
  • Responsiveness: You’re currently using two layouts, mobile and desktop. While the task only specifies these two, it’s worth considering adding a third, tablet version (e.g., two columns, two rows) to create a more fluid experience.
  • There are still some discrepancies, such as the box shadows and widths. If I’m correct, you worked from a .jpg, which can make things more challenging. In this case, open the design in an image editor and measure everything precisely. It’s a meticulous process and requires more time and effort, but it will help you develop a mindset that pays closer attention to details.

  I believe you’ve got the basics down, but there’s still room for improvement in many areas. I’m confident you’ll get there! Keep it up!

  0
• 

  P

  cookie-monster01•220

  @cookie-monster01Submitted 4 months ago

  What are you most proud of, and what would you do differently next time?

  • Writing semantic html.
  • Understanding CSS Grid and Flexbox.

  What challenges did you encounter, and how did you overcome them?

  • Aligning images correctly using object-position.
  • I used background-blend-mode to blend the background color and image.

  What specific areas of your project would you like help with?

  • The footer background is not the same color as the design, the cyan background seems a lot darker. How could I reach the same result?

  • Is there any way to avoid media-queries on changing margins and padding? Or size of the images? I tried to use min() and calc() but did not get me the right results. So I used media-queries.

  • How else could improve my code?

  

  Meet Landing Challenge with CSS Grid and Flexbox

  2

  11
  

  Adam•340

  @nadam-designPosted 4 months ago

  Hi @cookie-monster01!

  You’ve done an excellent job! Here are a few small things I noticed:

  • Buttons: On hover, the cursor doesn’t change to indicate that the element is clickable. In this case, it might be more effective to use an anchor (<a>) instead of a button, as it provides clearer feedback to the user.
  • Section numbering: The outline color differs from what’s shown in the design.
  • Images: Instead of using object-fit: fill;, try object-fit: cover;. This will help avoid image distortion, especially on smaller viewport sizes (currently, images get distorted in such cases).

  Keep up the great work—go for it!

  0
• 

  Hager Yasser•80

  @hageryasser2002Submitted 4 months ago

  

  Product preview card component

  1

  10
  

  Adam•340

  @nadam-designPosted 4 months ago

  Hi Hager Yasser!

  A few tips for your solution:

  • Naming: Be consistent with your naming conventions, like cardImage, card-content. Stick to one format throughout (e.g., cardImage and cardContent or card-image and card-content). Check out BEM naming methodology (https://getbem.com/naming/) for guidance.
  • Image: Your image is getting distorted because both its width and height are set to 100%. To fix this, add the following line: object-fit: cover;. This property ensures that the image completely fills the available space while maintaining its original aspect ratio.
  • Precision: Don’t just throw elements into place so they “kind of” look like the design. Strive to replicate it pixel-perfectly! As a frontend developer, this level of attention to detail is a basic expectation. The sooner you get used to this, the better! Don’t settle for half-done work. (Here’s a helpful Chrome extension: PerfectPixel by WellDoneCode).

  Keep it up—you’re on the right track! Aim for excellence!

  Marked as helpful

  0