All comments

• 

  Andrew•10

  @maneki-kakutasuSubmitted 1 day ago

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

  Centering div (just kidding)

  Probably just not bloating stuff. Small things like separating selectors via comma and adding the necessary property to both at the same time instead of adding the same property to multiple selectors separately.

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

  Giving proper values to height, width, padding, an so on to match the design as close as possible

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

  • Should I keep using custom properties and at-rules for simple projects such as this one? Or should I ignore those for now and focus on the more basic stuff?

  • Is using position: absolute a good practice in cases like this? Or should I've used flex instead?

  

  QR code component solution using custom properties and variable font

  1

  10
  

  Huy Phan•2,300

  @huyphan2210Posted 1 day ago

  HI, @maneki-kakutasu

  I checked out your solution and I have some thoughts:

  Focus on mastering the basics before moving on to more advanced concepts. A solid foundation is key to building better solutions.

  I’m not quite sure what you meant by "customer properties" and "at-rules." Could you clarify or explain further?

  Deciding between position: absolute and Flexbox depends on the specific situation. Here are some guiding questions to help you decide:

  • Does this approach achieve the desired result?
  • Which option is more maintainable or aligns with your familiarity?
  • Does it impact other parts of the layout?
  • Are there any additional considerations specific to the project?

  Take on as many challenges as possible with thoughtful effort. Focus on:

  • Articulating clear answers and feedback.
  • Developing your own coding style and reasoning.
  • Building habits that encourage deliberate thinking—an essential skill for any developer.

  Hope this helps! 🚀

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  manishkumar12i•110

  @manishkumar12iSubmitted 1 day ago

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

  I feel proud I am able to make repsonsive webpages and landing pages using html and css and improving old skills and learning something new in every project.

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

  I face challenge in make responsive this webpage and setting background image.

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

  HTML ,CSS and I am able to do make ui designs and landing pages.

  

  responsive order summary compnent

  2

  20
  

  Huy Phan•2,300

  @huyphan2210Posted 1 day ago

  Hi, @manishkumar12i

  I checked out your solution and I have some thoughts:

  • Avoid overusing divs. Aim to make your HTML more semantic by using appropriate tags like main, footer, article, etc. Eliminate unnecessary divs wherever possible.
  • Establish a clear heading hierarchy. A page should have only one h1 (Heading 1). I noticed you used h1 for both "Order Summary" and "Annual Plan." "Order Summary" is the appropriate choice for h1. For "Annual Plan," ask yourself: Is it a heading? If so, consider using h2. If not, choose a more suitable tag.
  • Simplify your structure. If a parent element has only one child, ask yourself if that child can stand on its own. For example, your current structure:

  <div class="container">  
    <div class="main">  
      <div class="common">  
      </div>  
    </div>  
  </div>
  

  could be simplified into something more semantic, like this:

  <main>  
  </main>
  

  Simplifying your structure not only improves readability but also makes your HTML more meaningful.

  • Improve your CSS organization. Your CSS could use some improvement, and there’s a lot to discuss here. If you’re not already familiar with browser DevTools (a tool built into browsers to inspect and debug HTML and CSS), I highly recommend learning it—it’s an essential skill for frontend developers.
  • On UI design and landing pages: If you're wondering whether you can create good UI designs and landing pages—the answer is yes, but it takes practice. Keep in mind that design is a distinct discipline from software development. While you can gain some insights into design through frontend development, it’s worth studying design as its own field. For now, focus on mastering the basics. When you feel ready, try tackling landing page challenges on this platform to gauge feedback from others.

  Hope this helps!

  0

  This comment has received 1 replyShow
• 

  denise•270

  @moncadadSubmitted 1 day ago

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

  Proud of taking on the challenge. It may not be pixel perfect but I'm proud of how it came out.

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

  The biggest challenge tends to figuring out how to break the design down but once thats figured it's pretty smooth sailing from there on. Grid as a whole still pretty new to me but I'm slowly but surely picking it up.

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

  Maybe recommendations on frameworks or libraries that you feel would be helpful for a project like this.

  

  Testimonials grid section

  1

  10
  

  Huy Phan•2,300

  @huyphan2210Posted 1 day ago

  Hi, @moncadad,

  Great job completing the challenge! 🎉

  Regarding your question about frameworks and libraries: while there are plenty to explore, I’d recommend holding off for now.

  Frameworks and libraries are designed to speed up development, but for now, your priority should be mastering the basics. Use this platform as a training ground to strengthen your skills in HTML, CSS, and JavaScript/TypeScript. Once you’re confident in these fundamentals, transitioning to frameworks or libraries will feel much more natural.

  Starting with frameworks too early might help with simpler problems, but when you face more complex challenges, a lack of foundational knowledge can become a significant obstacle.

  I’d suggest working through all the Newbie and Junior challenges. Focus on making your HTML as semantic as possible, crafting meaningful CSS class names, developing your own coding style, and articulating your thought process clearly. By doing this, you’ll build strong habits that will prepare you for larger projects. Then, when you tackle more advanced challenges, you can confidently use frameworks and truly understand how they work under the hood.

  Hope this helps! 🚀

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Nisha Kumari•110

  @workdotnishaSubmitted 2 days ago

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

  I’m proud of creating a responsive and visually appealing testimonials grid that works well on all devices. Next time, I’d plan the layout better, test on more devices, and add animations to make it more engaging. I’d also involve feedback earlier to improve the design.

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

  I faced challenges in making the grid fully responsive and ensuring perfect alignment across screen sizes. I overcame this by reading documentation and experimenting with different CSS techniques. Maintaining consistency in styling was another challenge, which I solved by organizing the code better and reusing styles effectively.

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

  I’d like help with improving the responsiveness further, especially for smaller devices. I also want guidance on adding subtle animations to make the section more interactive and tips on optimizing the code for better performance.

  

  testimonials-grid-section-main solution

  1

  10
  

  Huy Phan•2,300

  @huyphan2210Posted 2 days ago

  Hi, @workdotnisha

  I checked out your solution and I have some thoughts:

  1. Add subtle animations

  Consider enhancing the user experience with animations on hover. For example, you could add effects to "items" or their titles. Look into CSS properties like animation, @keyframes, transition, and transform to achieve this.

  2. Adopt a mobile-first approach

  I noticed you’re using media queries for smaller devices. To improve responsiveness, why not start with smaller devices first and then scale up with media queries for larger screens? This "mobile-first" approach is widely recommended as it helps address smaller device issues before scaling up.

  3. Refine your breakpoints

  Your media query breakpoint is set at 768px. However, I noticed the layout experiences horizontal scrolling between 769px and 985px due to the padding: 8rem. This isn't user-friendly, as users have to drag the scrollbar. To fix this, either increase the breakpoint's upper limit or adjust the layout within this range for better usability.

  4. Use semantic HTML

  Avoid overusing div elements where more semantic tags could improve structure and accessibility. For example:

  • .grid-container could be a <main>.
  • Each .container could be an <article>.
  • .profile could use a <figure> tag.
  • .detail could be a <hgroup> with titles inside as <h1> or <h2>.

  This practice not only improves readability but also enhances accessibility.

  5. Improve CSS class naming Naming classes like item1, item2, etc., is not scalable. What if more items are added dynamically? Use descriptive names that convey purpose (e.g., profile-card, user-detail). Scalable naming makes your code maintainable and reusable. Research CSS naming conventions like BEM (Block-Element-Modifier) for inspiration.

  Hope this helps!

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Guillermo Eguizabal•150

  @cgeguizabalSubmitted 3 days ago

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

  Hello, I need help again with background-image: URL()

  this one works on my computer background-image: url(/assets/img/bg-pattern-quotation.svg);

  previously I was told to try these and worked on the previous challenge but not on this one background-image: url(/Testimonials/assets/img/bg-pattern-top.svg); background-image: url(../img/bg-pattern-top.svg);

  I also tried this but it didn't work either background-image: url('./assets/img/bg-pattern-quotation.svg');

  

  ThirteenthChallenge-testimonials-CSSGrid

  2

  40
  

  Huy Phan•2,300

  @huyphan2210Posted 3 days ago

  Hi @cgeguizabal,

  I’d like to help with your background image issue. While I’m not completely sure of the specifics of your situation, here are a few possible explanations that might help:

  1. The visibility and size of a background-image are heavily influenced by its container. If the container lacks dimensions, the image won’t be visible. For example, if you’re applying a background-image to a <div> that has no content and no assigned width or height, the background image won’t show. Example:

  .background-div {
      background-image: url('example.jpg');
      background-size: cover; /* Ensure the image scales properly */
      background-position: center;
      /* No width or height */
  }
  

  To fix this, ensure the container has defined dimensions:

  .background-div {
      width: 100%; /* Or any specific width */
      height: 300px; /* Or any specific height */
      background-image: url('example.jpg');
      background-size: cover;
      background-position: center;
  }
  

  It seems like you’ve resolved the issue, but considering the point above might help you avoid similar problems in the future.

  Hope this helps!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  HuntsberryS•10

  @HuntsberrySSubmitted 5 days ago

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

  Im proud that I recalled a good deal of the HTML and CSS properties and that I was able to create a repository without issues. Next time I would review the read me files a bit more closely before beginning.

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

  The positioning was a challenge for me so I'm proud that I was able to figure it out but could do with more practice. I wasn't able to open to figma file which I believe could have been an asset so I would like to figure that out for the future.

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

  I need help opening the figma file on my computer.

  

  projectOne

  2

  20
  

  Huy Phan•2,300

  @huyphan2210Posted 4 days ago

  Hi, @HuntsberryS

  You can use the Figma desktop app to open Figma files. While the web version might also support this, I recommend giving it a try to confirm.

  Hope this helps!

  0
• 

  KhutsoJ•70

  @KhutsoJSubmitted 5 days ago

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

  Making the website responsive and using the rem relative units. also not just using the div tags and making use of the paragraph, span, and heading tags.

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

  Changing the website from a desktop to a mobile screen layout. To overcome this challenge, I started from a mobile layout, which is much simpler, and added the desktop layout afterwards.

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

  Any areas where I could make the website more responsive or different methods to do so. Also, where I could have used more semantic tags.

  

  Product Preview Card Component using Flexbox

  3

  20
  

  Huy Phan•2,300

  @huyphan2210Posted 4 days ago

  Hi, @KhutsoJ

  I checked out your solution and I have some thoughts:

  1. Good job starting with the mobile-first approach!

  Designing from mobile to desktop is a popular and effective strategy. If you're not already familiar with it, you might want to dive deeper into the concept—it can make your designs more adaptive and efficient.

  2. Consider semantic HTML tags instead of excessive <div> elements.

  • Use <main> for .product-preview-container.
  • Use <figure> for .product-image-container.
  • Use <section> for .product-info-container.
  • Use <footer> for .attribution.
  • The .card-button doesn’t need a wrapper like .cart-button-container; it can stand on its own.

  3. Establish a clear heading hierarchy. I noticed you're using <h2> and <h3>, but there’s no <h1>. Start with <h1> for the main heading, followed by <h2> and <h3> in descending importance.

  "Gabrielle Essence Eau De Parfum" seems perfect for an <h1>. The word "Perfume" feels more like a label for the main heading and could work as a <label>.

  4. Responsive design. I see you’re already using media queries, which is good! To further improve responsiveness, experiment with CSS features like:

  • Functions: clamp(), calc(), min(), max().
  • Attributes: min-height, max-width, etc.
  • Units: rem, em, %, vw, vh, etc.

  Hope this helps!

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  darlanvsvs•20

  @darlanvsvsSubmitted 4 days ago

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

  I am proud getting it done.

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

  Challenges: Positioning image on the center and texts on the left.

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

  I would like to know if there's any semantics, acessiblity, etc improvements that I should or could do.

  

  Blog preview card using flexbox

  1

  40
  

  Huy Phan•2,300

  @huyphan2210Posted 4 days ago

  Hi, @darlanvsvs

  I checked out your solution and I have some thoughts:

  Simplifying HTML Structure

  Instead of this:

  <main>
    <div class="container">
      <div class="card">
    
      </div>
    </div>
  </main>
  

  You could simplify it to:

  <main class="card">
  
  </main>
  

  This removes unnecessary div elements, which helps streamline your HTML.

  Using Semantic Elements

  1. Headings (h1, h2, h3, etc.) You’re using an h3 for "Learning," but it seems more like a tag or label for the .card rather than a heading. Consider using a <span> instead, as HTML does not have a dedicated tag element.
  2. Dates and Metadata The text "Published 21 Dec 2023" should ideally use a <time> element, possibly wrapped in a <label>:

  <label>
    <time datetime="2023-12-21">Published 21 Dec 2023</time>
  </label>
  

  This better represents the semantic meaning of the content.

  3. Anchor and Heading Order You’ve wrapped an h1 inside an <a>, but the <a> tag doesn’t point anywhere. If you intend to make the heading a link, you should wrap the a within the h1 (not the other way around):

  <h1><a href="#">Your Heading</a></h1>
  

  This maintains proper semantics as h1 is a block-level element, and a is inline.

  4. User Section (.user Class) Instead of a div with .user, you might consider using a <figure> for the user info and a <figcaption> for accompanying details. For example:

  <figure class="user">
    <img src="user.jpg" alt="User Name">
    <figcaption>User Name</figcaption>
  </figure>
  

  This provides semantic meaning to the relationship between the user’s image and their name.

  Hope this helps!

  0
• 

  munylo14•20

  @munylo14Submitted 7 days ago

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

  There were many new concepts that I gleaned from CSS references online (mainly W3Schools) while working on this project. It was a fun one, and I learned a bit about FlexBox in the process of working it out, which was nice!

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

  As mentioned above, I struggled to get the text containing the author's name to display centered with the profile pic image. I was able to overcome this by utilizing FlexBox principles in Vanilla CSS.

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

  Like all of my projects, I am still learning so much. If you see any glaring issues with semantics or logic of my code, please let me know. It works, but that doesn't mean that it is done correctly or even conventionally.

  

  Blog Component using Vanilla CSS

  1

  30
  

  Huy Phan•2,300

  @huyphan2210Posted 7 days ago

  Hi, @munylo14

  I reviewed your solution and wanted to share a few thoughts:

  The body doesn't fill the entire viewport: (The viewport is the visible area of a webpage in the browser.) To fix this, you can apply min-height: 100vh to the body. This ensures it always spans the full height of the viewport. It's a good practice to use this property on the body in most of your solutions moving forward.

  Centering the card: Once the above is done, you can use Flexbox to center the card. Set display: flex and flex-direction: column on the body. You might want to explore Flexbox further to understand its capabilities.

  Improving semantic HTML: In the .card-content-text class, you're using section for everything, which isn't ideal. Instead, choose HTML tags that align with the content's purpose. For instance:

  • Use <h1> for the card's title.
  • Use <p> for paragraphs.

  Avoid overusing generic tags like div. Making your HTML more semantic (i.e., meaningful and aligned with the content's structure) improves accessibility and search engine optimization. Spend some time researching semantic HTML to make your code more effective.

  There are still a few issues to address, but overall, great job completing the challenge! Keep practicing, and you'll improve steadily over time.

  Hope this helps! 😊

  Marked as helpful

  0
• 

  Tanyaradzwa(Tanya)•60

  @Tanya-abiSubmitted 8 days ago

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

  I am mostly proud that I completed the project, I was starting to get a bit frustrated and discouraged because I struggle with css flex.

  Next time, I will seek help sooner. I tried to do exeuthing from the top of my head but eventually used pintrest to get a cheatsheet for css flex.

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

  As I said before, I struggled with positioning the contents correctly using css flex. It took a while to get it right.

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

  When I used css flex I set the content to be set with space-around. However in the figma design I can tell the paragraphs are much closer to each other and I failed to do that.

  

  Qr code page with HTML and CSS

  3

  80
  

  Huy Phan•2,300

  @huyphan2210Posted 8 days ago

  Hi, @Tanya-abi

  I checked out your solution and I have some thoughts:

  • Flexbox on the Card: Your deepest div (the card) doesn’t actually need Flexbox, as its child elements align naturally in a vertical flow. Since two of the three elements are block-level by default, removing display: flex on the card and adding margin directly on the img and the two p tags should help address the spacing issues you mentioned between the paragraphs.
  • HTML Structure: Your current structure has extra div wrappers that can be simplified. Instead of this:

  <body>
    <div>
      <div id="container">
        <div>
  
        </div>
      </div>
    </div>
  </body>
  

  You could streamline it like this:

  <body>
    <main class="card">
  
    </main>
  </body>
  

  Replacing div with main makes the HTML more semantic, indicating the primary content of the page.

  • Semantic Elements: Instead of using two p tags (one for the title and one for the paragraph), consider using h1 for the title to enhance readability and improve HTML semantics.

  There are a few other areas for improvement, but good job on completing the challenge! Keep at it, and you’ll keep improving over time.

  Hope this helps!

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  P

  FriedHamm•100

  @FriedHammSubmitted 9 days ago

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

  I’m proud that I took the initiative to start something on my own, and next time, I’d like to make it responsive.

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

  It was challenging to read even the simple instructions, and creating the Git repository and uploading it to Netlify was also difficult. I took my time reading through the instructions carefully and made steady progress.

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

  I focused solely on completing the task successfully. As a result, it’s not responsive, the selector names feel unnatural, and I think the readability could be improved. I’d appreciate feedback on these areas.

  

  QR code with html and css

  1

  30
  

  Huy Phan•2,300

  @huyphan2210Posted 9 days ago

  Hi, @FriedHamm

  I checked out your solution and I have some thoughts:

  • You're using max-width: 20% on the .container, which limits it to 20% of the body's width. Since .container is a div (a block-level element), max-width: 20% behaves similarly to width: 20%. While this is technically responsive, it may not be the most flexible solution. I recommend replacing 20% with a specific value, such as 300px. While not perfect, it might be more suitable for this challenge.
  • Instead of height: 100vh, consider using min-height: 100vh on the body. This ensures that the body element will always cover the full viewport height but allows it to expand if necessary.
  • For better readability and accessibility, try to use more semantic HTML elements instead of div tags where possible (e.g., section, header, main). This helps with both structure and accessibility. Also, consider researching CSS naming conventions like BEM for your class names to keep things more consistent and maintainable.
  • Well done on completing the challenge! There are still a few things to improve, but overall you're on the right track. It's normal to face challenges when learning new concepts, but you made good progress with Git and Netlify. Keep pushing yourself, and you’ll continue to improve!

  Hope this helps!

  0
• 

  Ifechukwu Osakwe•60

  @Icode-designsSubmitted 10 days ago

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

  i like how responsive it is and how easy it was to achieve that, however there is still work to be done and i know.

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

  it was mostly smooth sailing as this project was right at the edge of my comfort zone

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

  code based reviews, how improve my codes and make them cleaner, how to improve my BEM naming techniques, how to write better css and media queries

  

  in this project i tried to implement BEM techniques

  1

  10
  

  Huy Phan•2,300

  @huyphan2210Posted 10 days ago

  Hi, @Icode-designs

  I checked out your solution and I have some thoughts:

  • Width Properties on body and Block-Level Elements: There’s no need to set max-width: 100vw on body or max-width: 100% on block-level elements, as they naturally expand to the full width of their container. You can safely remove these styles.
  • Structural Elements: Good use of header and footer! Since section tags and .buttons represent the main content, they should be wrapped within a main element for semantic structure.
  • Content Grouping: Consider grouping "Keep track of your snippets," "Access Clipboard anywhere," "Supercharge your workflow," and "Clipboard for iOS and Mac OS" into individual section elements. The current .info, .brands, .outro divisions and .buttons div (which isn’t associated with any section) could be organized more meaningfully.
  • CSS with Sass/SCSS: I noticed you’re following the BEM naming convention in your CSS. Switching to Sass/SCSS could streamline your styling with nested selectors, variables, and mixins. Also, instead of linking fonts in the HTML, you can import them directly into your CSS/SCSS file for a cleaner structure.
  • Semantic HTML: To improve semantics, consider replacing generic divs with more descriptive tags like hgroup, article, etc., to better convey the page's content.

  Hope this helps!

  Marked as helpful

  0

  This comment has received 1 replyShow