All comments

• 

  gauravk2203•270

  @gauravk2203Submitted 2 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 2 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 2 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 2 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 2 months ago

  

  Blog preview card

  1

  30
  

  Adam•340

  @nadam-designPosted 2 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 3 months ago

  

  Responsive Four Card Feature Section using CSS Grid

  2

  30
  

  Adam•340

  @nadam-designPosted 2 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 3 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 2 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 2 months ago

  

  Product preview card component

  1

  10
  

  Adam•340

  @nadam-designPosted 2 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
• 

  Lateefah Raji•10

  @lateefahrajSubmitted 3 months ago

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

  I am glad I was able to do this task in few minutes.

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

  I didn't encounter any problem.

  

  QR Code

  1

  50
  

  Adam•340

  @nadam-designPosted 3 months ago

  Hi Lateefah Raji!

  Almost there, a few things to consider:

  • Absolute positioning is a useful tool, but in this case, it's easier to center the content using modern CSS techniques. Give the body a min-height: 100vh; to make it full screen height. Then you can use display: flex; align-items: center; justify-content: center; (you can remove the absolute positioning and the top margin).
  • Pay attention to even the smallest details; the fonts differs from what is shown in the design (Outfit font). If you have trouble with fonts, here is a Google fonts Helper solution: https://gwfh.mranftl.com/fonts

  You're on the right track—keep it up! 😊

  Marked as helpful

  0
• 

  P

  Leyla Babayeva•100

  @leyla-devSubmitted 3 months ago

  

  flex

  1

  40
  

  Adam•340

  @nadam-designPosted 3 months ago

  Hi Leyla Babayeva!

  You did a great job here, but a few thing to consider:

  • Fonts: it's different than we see in the design. What is the reason behind this? There's a Google Fonts Helper, I hope it's helps: https://gwfh.mranftl.com/fonts
  • The "add to cart" button SVG is not loading. Since it's an SVG, it might be better to include it inline rather than loading it as an image.
  • Headings: You marked the category with an H1 tag and the product name with an H2. In this case, the product name is more important, so it should be the H1 instead. (Note that if the page features a product grid with multiple product cards, the product name would then be an H2 or H3, depending on the page structure.) Meanwhile, the category is less prominent and can be styled as a simple paragraph.
  • Spacing: Pay close attention to even the smallest details; the spacing differs from what is shown in the design!

  You're on the right track—keep it up! 😊

  1
• 

  P

  Destiny•100

  @DetDet91Submitted 3 months ago

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

  I had trouble getting the diamond formation right and keeping my boxes from shifting shape when the screen size changed. After researching solutions online, I found something that would work with my coding style.

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

  I don't feel like my boxes are the correct sizes, and I feel like everything I do will not change the actual look of the boxes.

  

  Responsive four card feature section

  1

  10
  

  Adam•340

  @nadam-designPosted 3 months ago

  Hello Destiny!

  I see where should you change the css for the optimal layout:

  • .cards: Change the grid-template-areas to this (you made 3 rows but 2 is enough):

  "supervisor team-builder calculator"
  "supervisor karma calculator";
  

  • and change the grid-template-columns to repeat(3, 1fr);

  Hope it helps!

  Marked as helpful

  0
• 

  Houlaymatou B.•110

  @code-techhbSubmitted 3 months ago

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

  I need help with the @font-face rule. I'm wondering why the fonts are not applying. Also, I will appreciate any assistance with adding spaces between the li markers and the text.

  

  Recipe page

  2

  20
  

  Adam•340

  @nadam-designPosted 3 months ago

  Hi @code-techhb!

  There is a page that helps with self-hosting Google Fonts. Check it out!

  Google Fonts Helper

  https://gwfh.mranftl.com/fonts

  Marked as helpful

  1
• 

  Akash A Benki•190

  @AAB007209Submitted 3 months ago

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

  I am proud that I built this component just using plain HTML and CSS. I was doing backend from last 2 months and now came here did this Component just to feel little bit of confidence that I did not forget CSS completely. I would try to write more efficient code next time.

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

  Few CSS properties I knew but still searched on Google for them to make sure I am writing it right.

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

  Padding and Spacing. Also the Strike through price needs to be little aligned above I guess looking at the design. I did not do that because I had less time to complete this.

  

  Used Responsive Design and Flexbox

  1

  10
  

  Adam•340

  @nadam-designPosted 3 months ago

  Hello @AAB007209!

  You did a great job here, a few things to consider:

  • Prices can align centered with flexbox: add the container (.pricing) display: flex; and align-items: center;
  • For the "add to cart" button: the <button> element was a good choice. Adding border: 0; or making it transparent ensures it matches the button design seen in the graphics. (You can add a :focus and :focus-within states too)
  • For .cart-icon: using an <img> is a good solution, but if you have a vector icon, inline SVG is even better. It’s a resource-efficient option that saves one additional request.

  Go on, keep up the good work!

  Marked as helpful

  1
• 

  P

  pankajb085•290

  @pankajb085Submitted 3 months ago

  

  Responsive Four Card Page using Grid

  1

  20
  

  Adam•340

  @nadam-designPosted 3 months ago

  Hi @pankajb085!

  Your Grid solution (2 / span 2) is excellent! :)

  You’ve done a good job overall, aside from a few small points. Here are some suggestions:

  • The .tools > div approach works, but from a performance perspective, it’s better to assign a shared class to the divs, such as .card, and style that instead. Always aim for the shortest possible CSS selectors!
  • The text colors don’t match the design in some places. Pay closer attention to the details!

  Great work—keep it up!

  Marked as helpful

  1
• 

  lois-m•40

  @lois-mSubmitted 5 months ago

  

  Four Card Feature using GRID

  1

  10
  

  Adam•340

  @nadam-designPosted 3 months ago

  Hi @lois-m!

  I believe the foundation of your solution is solid. The desired effect can also be achieved with a 3-column layout using Flexbox instead of CSS Grid. If you use grid-template-areas, the project can be built without the extra .col columns, resulting in cleaner and more readable HTML code.

  One additional note: the devil is in the details. The font sizes and spacing in your design don’t always match the original graphics. If you were working from a JPG, I understand it’s more challenging—it requires extra attention and precise measurements, but it’s worth it because the expectation is typically for a design to be faithfully reproduced. Open the image in a graphic editing program, measure the distances and font sizes, and work from there. Strive to ensure the final result matches the design mockup down to the smallest detail!

  Keep up the good work!

  Marked as helpful

  0
• 

  P

  Tomas Moucha•100

  @Tomas-1979Submitted 3 months ago

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

  I didn't use responsive font size and spacing. First attempt with Figma. :)

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

  Learning to use Figma is the first step to perfection...

  

  Product preview card - fixed dimensions

  1

  20
  

  Adam•340

  @nadam-designPosted 3 months ago

  Hello Tomas!

  If you don't mind, here are a few small things that could be improved:

  • The background color of the card in the design is white, but in your case, it's #f2f2f2, which is a bit softer and duller.
  • The line-height of the title also differs from what's in the design.
  • The font-weight for the category is off.

  Other than that, great work, and you're using flex very well!

  Plus tip: It would be good to review the button from an accessibility perspective and add: aria-label="Add item to cart"

  The devil is in the details, it's worth striving for perfection!

  Keep up the good work!

  Marked as helpful

  0
• 

  Phantuan2004•40

  @Phantuan2004Submitted 3 months ago

  

  css

  2

  10
  

  Adam•340

  @nadam-designPosted 3 months ago

  Hi @Phantuan2004!

  If I may, I'd like to highlight a few things that could be optimized:

  • The build isn't fully responsive: You assigned a fixed width to the card. This can be avoided by using max-width like this: max-width: 738px; width: 100%;. This way, the card element will behave responsively.
  • Card height: You've set a fixed height for the card, which is unnecessary in this case. The content should determine the overall height.
  • Border radius are inconsistent: The Preparation time block is missing a border radius, while others have it, but differs from what is shown in the design.
  • Typography: Font sizes don't align with the design, and the spacing between the list items (<li> tags) is also off.

  The devil is in the details—pay close attention to these! This is how you master precise and accurate site building.

  If I understand correctly, you worked from a static JPG, which is more challenging and time-consuming than building from a Figma file. One of the key roles of a frontend builder is to faithfully follow the design. If you're working from a JPG, try opening the file in Photoshop and manually measuring distances, border radiuses, font sizes, etc. It’s meticulous work, but necessary for achieving the best result if no other option is available.

  After completing enough builds, your eye will adjust, and you'll start to notice these details instinctively, producing almost perfect results at a glance. Until then, it’s all about measuring by hand.

  You’ve got this—keep going! 😊

  0
• 

  P

  pankajb085•290

  @pankajb085Submitted 3 months ago

  

  Social Profile Card using Grid and Flex-box

  1

  20
  

  Adam•340

  @nadam-designPosted 3 months ago

  Hi @pankajb085!

  I appreciate that you filled out the alt tag for the image and considered SEO - great job! I have a few suggestions if you don't mind:

  • The profile card's size is noticeably smaller than in the design. You can address this (in your solution) by setting font-size: 31.5px; on the :root element. Alternatively, a more effective approach might be setting the HTML font size to 10px and using rem units for easier calculations. This would also help fix inconsistencies in spacing, such as the card padding being larger than intended in the design.
  • The card elements can't be navigated with the keyboard. The buttons are displayed as list items, which makes them non-clickable. Instead, consider using anchor tags, for example: <a href="https://github.com" class="btn">GitHub</a>

  Keep up the good work - it's coming along nicely!

  Marked as helpful

  0
• 

  Tunde Ogunde•170

  @tundeogundeSubmitted 3 months ago

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

  I'm glad to discover how to import and use a google font in my propject. I also discovered the how to use clamp() to define font-size and make it responsive according to the size of the view-port. CSS just makes things a lot easier.

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

  One challenge was how to make the text responsive according to the viewport size.... and also creating a shadow for the card. I consulted W3Schools (https://www.w3schools.com/cssref/index.php) and chatgpt told me about using the clamp() value to make the font-size of the text responsive.

  

  Responsive Blog Preview card using HTML and CSS

  1

  50
  

  Adam•340

  @nadam-designPosted 3 months ago

  Hi @tundeogunde!

  Almost perfect, a few things to consider:

  • In your build, the card width is narrower than in the design (384px vs 327px). Try using max-width to keep the card responsive.
  • For btn_learning: The font is still set to Arial. Also, I understand why you used a button, but in this case, an anchor tag would be a better solution instead of a button. The design doesn’t clearly specify whether the element is clickable, so your solution is proactive in this case.
  • Since your card component is using flex, you can utilize the gap property, as the spacing between text elements is consistent throughout the design: 12px.

  Great job, keep it up!

  Marked as helpful

  0
• 

  Aliphia•30

  @AliphiaSubmitted over 1 year ago

  

  QR code card using CSS Flex

  #bem

  1

  10
  

  Adam•340

  @nadam-designPosted 3 months ago

  Hi @Aliphia!

  Great job on the implementation! However, the devil is in the details, and I noticed a few small discrepancies compared to the design:

  • The width of the component is slightly different from what is specified in the design (375px vs 320px).
  • The border-radius of the component is set to 1rem, while the design shows 2rem (you can tell because the QR code container also has a border-radius of 1rem, which makes it look a bit odd...).
  • The bottom margin of the title is 15px in your code, but the design specifies 16px.
  • You're mixing rem and px units in places, and it would be better to stick to one unit, ideally rem, for consistency across the project.

  If you fix these little details, the result will be perfect! Keep up the great work!

  0