Skip to content
OverviewSolutions
11
Comments
13
P
MAGENE Sem Joel
@Jomagene

All comments

  • MAGENE Sem Joel•320
    @JomagenePosted 2 months ago

    Feedback
    @luisv79 Congratulations on completing the challenge and implementing the required features—the content updates correctly when options are selected, and the hover effects and responsiveness are nicely done.

    One suggestion: when a menu item is clicked, the active state isn't visually indicated. To enhance user experience, you could highlight the selected item by keeping it styled in white while others are dimmed.

    Based on your code structure, you can achieve this by adding an "active" class to the clicked menu item and removing it from the others:

    dailyBtn.addEventListener("click", () => {
  dibujarElementos(dailyArray);
  dailyBtn.classList.add("active");
  weeklyBtn.classList.remove("active");
  monthlyBtn.classList.remove("active");
});

weeklyBtn.addEventListener("click", () => {
  dibujarElementos(weeklyArray);
  weeklyBtn.classList.add("active");
  dailyBtn.classList.remove("active");
  monthlyBtn.classList.remove("active");
});

monthlyBtn.addEventListener("click", () => {
  dibujarElementos(monthlyArray);
  monthlyBtn.classList.add("active");
  dailyBtn.classList.remove("active");
  weeklyBtn.classList.remove("active");
});

    And add this to your CSS:

    .active {
  color: white;
}

    This will visually indicate the active menu item, improving the user experience. Hope this was helpful!

    Marked as helpful
    0
  • Kikino02•160
    @Kikino02Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    .

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

    Form validation…

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

    .

    Newsletter by Kikino

    1
    MAGENE Sem Joel•320
    @JomagenePosted 2 months ago

    You've done a great job aiming for pixel-perfect accuracy. I especially like the gradient background color on hover, whith a nice shadow. However, on mobile devices, there is a significant gap between the paragraph content and the dismiss button that seems to be missing in your implementation. I also noticed that the container height is larger than in the design. For better responsiveness, consider using min-height instead of a fixed height, like this:

    article {
    min-height: 67.5rem;
}

    This approach, along with using percentages and padding for internal elements, will help maintain responsiveness. Your use of the <picture> element with <source> to handle image responsiveness is excellent too.

    Keep up the great work, and let me know if this was helpful or if you'd like to discuss further topics!

    0
  • MAGENE Sem Joel•320
    @JomagenePosted 3 months ago

    Fantastic Work!

    Your article preview component is visually appealing, and I really appreciate the smooth animations you've implemented. The tooltip transitions seamlessly on both desktop and mobile views, is awesome. It's clear you've put a lot of effort into this project, and it shows!

    HTML Structure:

    • Minor Tagging Issue: I noticed a small error in your code where the closing tags for <main> and <article> are in the wrong order near the end of your document. Since <main> is the parent of <article>, the <article> tag should be closed before the <main> tag. It's a simple fix that will enhance the semantic structure of your code.

    • Improving Semantics: You’ve done an excellent job using the <figure> tag for wrapping images. To further enhance the semantics and accessibility of your code, you might consider using <figure> for the profile section as well. This is more meaningful than a <div> and would better convey the content's purpose.

      • Suggested improvement: 
        <figure class="profile-box">
  <img src="./images/avatar-michelle.jpg" alt="Profile image" class="profile-img">
  <figcaption class="profile-txt">
    <h2>Michelle Appleton</h2>
    <p class="date">28 Jun 2020</p>
  </figcaption>
</figure>

    JavaScript:

    • Script Placement for Performance: To improve the loading performance of your site, consider placing your `` tag instead of at the bottom of the <body>. The defer attribute ensures that the script is executed after the document has been fully parsed, leading to a more efficient loading process. You can find more details on this in this article.

    CSS:

    • Consistency in Font Units: I noticed that you’ve used a mix of em and px for font sizes. While each unit has its own use case, rem is generally recommended as it scales better with user preferences for font sizes, making your design more accessible. I recommend sticking with rem to ensure that your text adapts to the user’s settings. This article explains why rem is often preferred: Read more.

    • Image Positioning: Your .drawer-img could be better positioned if you could use object-position: left; for the desktop view, but by default, images are centered. That's why we can see this slight difference with the design.

    • Optimizing Font Imports: It’s more efficient to only import the font weights and styles you actually use. Instead of this long import statement:

      @import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Manrope:[email protected]&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:[email protected]&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

      You can simplify it to:

      @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap');

      This will ensure faster load times and better performance.

    • SCSS Best Practices:

      • Use of Mixins: I really like how you’ve utilized @mixin to avoid repetitive code. This is a great practice that keeps your CSS DRY (Don't Repeat Yourself) and makes it easier to maintain.

      • Adding a Reset File: While using * { padding: 0; margin: 0; box-sizing: border-box; } is a good start, it’s often not enough to ensure consistency across all browsers. Including a _reset.scss file with a more comprehensive reset can help address browser inconsistencies. You might find this article useful for creating a custom CSS reset.

      • Splitting Your Sass Files: For future projects, consider organizing your Sass into multiple files. This approach enhances maintainability and keeps your codebase clean and organized. I highly recommend watching this video for tips on how to structure your Sass files effectively.

    Keep up the great work! Your progress is impressive, and these minor tweaks can make your solution even more polished.

    Was this feedback helpful? I’d love to know if these suggestions resonate with you or if there’s anything else you’d like to discuss. Keep pushing forward—you're doing awesome!

    Marked as helpful
    0
  • Micha Huhn•200
    @MichaHuhnSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I implemented the popover component of the Headless UI library.

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

    It was challenging to change the styling and behavior of the popover component on different screen sizes.

    Article preview component using Vue and Headless UI

    1
    MAGENE Sem Joel•320
    @JomagenePosted 3 months ago

    Hey @MichaHuhn!

    Great job on the pixel-perfect implementation! The precision in your layout is truly impressive, and it's inspiring to see such attention to detail.

    One area for further improvement is the use of semantic HTML tags. Semantic elements not only improve accessibility but also enhance the readability and maintainability of your code. Here are a few specific suggestions to make your HTML more semantically meaningful:

    1. Use <figure> and <figcaption> for images with captions:

      • Instead of using a <div> for the profile picture and its description, wrap them in a <figure> tag and use <figcaption> for the text. This approach better associates the image with its caption.
      • For example: 
        <figure class="profile-picture-wrapper">
  <img src="@/assets/images/avatar-michelle.jpg" alt="Profile picture of Michelle Appleton" class="profile-picture">
  <figcaption>
    <p class="name">Michelle Appleton</p>
    <p class="date">28 Jun 2020</p>
  </figcaption>
</figure>

    2. Replace the <div> wrapping the top image with a <figure> tag:

      • This change adds semantic meaning to the image, especially when paired with a descriptive alt text.
      • For example: 
        <figure class="top-image-wrapper">
  <img src="@/assets/images/drawers.jpg" alt="Furniture drawers">
</figure>

    3. Consider using <hgroup> to group related headings and subheadings:

      • If your <h1> and the introductory paragraph are conceptually connected, wrapping them in an <hgroup> can clarify their relationship.
      • For example: 
        <hgroup class="text-content">
  <h1>Shift the overall look and feel by adding these wonderful touches to furniture in your home</h1>
  <p>Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.</p>
</hgroup>

    These adjustments will improve the semantic structure of the HTML, making it more accessible and easier to maintain. For more insights on semantic HTML, you might find this guide helpful.

    Additionally, I want to commend you on your well-organized folder structure and meticulous attention to detail. Keep up the great work—your approach is sure to lead to even better projects in the future.

    Marked as helpful
    1
  • Micha Huhn•200
    @MichaHuhnSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to change the layout on the different views (mobile, tablet, and desktop). I am especially proud of the hero section, because the elements are arranged differently on desktop which was tricky.

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

    On desktop and tablet, the text-content element inside the hero section is exactly 448.3px wide in the Figma mockup. That's really confusing to me. It took me really long to find a solution on how to structure the hero layout on desktop. I decided to create the following grid layout:

    grid-template-columns: 1fr auto 1fr;

    The width of the center column is set to 28rem (448px). The hero images are placed in the left and right column and are moved by an offset with transform: translateX();

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

    I would like help with the hero section on desktop. It was really challenging to find a solution.

    • Why is the text-content element inside the hero section exactly 448.3px wide. What element/constraint is the width based on?
    • How did you create the hero section on desktop, do you have any tips?

    Meet landing page using Vue

    1
    MAGENE Sem Joel•320
    @JomagenePosted 3 months ago

    Hi MichaHuhn,

    Great job on the meet-landing-page! Your design looks fantastic. I noticed a few areas where you might simplify things:

    • Grid Layout: I see you've used grid-template-columns: 1fr auto 1fr with transform: translateX(); for positioning. In my experience, Flexbox can simplify this kind of alignment, making it easier to center and adjust elements naturally. For example, I used that fixed width as a max-width of the text-content beside the two images: left and right. All content are justified space-between which gives a more flexible layout. To handle responsiveness, a flex-direction column is sufficient to have the work done.

    • Layout Complexity: While your grid-based layout works, it might be more flexible and maintainable with a Flexbox. This could reduce the need for transformations.

    Overall, your work is impressive! A few small adjustments could make your design even stronger. Have you tried experimenting with Flexbox for layouts like this? I'd love to hear your thoughts.

    Best,
    Jomagene

    0
  • Adhyatma•470
    @r00kieAdSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Revised Grid layout. Will improve the grid structure next time.

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

    Had some difficulties setting the contents of grid items while managing the widths of each grid item on different screen sizes while main div was centered. To avoid this, instead of centering the div, I added a translateY of dynamic viewport height which will push the div to some extent to make it look centered.

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

    managing the content sizes while main div was centered and screen sizes were changing.

    Testimonials Grid Section

    1
    MAGENE Sem Joel•320
    @JomagenePosted 3 months ago

    @r00kieAd

    Congratulations on completing the challenge and crafting a responsive design that looks fantastic on both desktop and mobile views! 🎉

    You're definitely on the right track. I noticed that you put in a lot of effort with the grid system, which is commendable. To elevate your grid system even further, consider simplifying it by letting the grid handle most of the layout automatically. This will allow you to focus more on the overall structure, only intervening where necessary. This approach will make your code cleaner, more maintainable, and easier to work with in the long run.

    For example, you might try something like this:

    .grid-container {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5625rem 1.875rem;

  .i1, .i4 {
    grid-column: span 2;
  }

  .i5 {
    grid-area: 1 / 4 / span 2;
  }
}

    This method elegantly simplifies the layout while keeping everything flexible and easy to adjust.

    Keep up the great work, and remember, I'm here if you need any further guidance! Has this feedback been helpful to you? 😊

    Marked as helpful
    1
  • Micha Huhn•200
    @MichaHuhnSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I learned how to create a responsive layout with CSS Grid.

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

    It was a challenge to structure the responsive grid layout and to get its constraints right.

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

    border-top creates those curved borders.

    How to create such straight borders like in the mockup?

    Four card feature section using Vue

    2
    MAGENE Sem Joel•320
    @JomagenePosted 3 months ago

    @MikDra1, @Micha Huhn

    Thank you for the tips. I found something similar but prefer it over creating a new element. It involves using the ::before pseudo-class, which eliminates the need to add another HTML element. Here's an example:

    div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.25rem;
    background-color: $color;
}

    The parent of the div must be relative of course.

    What do you think?

    0
  • Micha Huhn•200
    @MichaHuhnSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I learned how to switch between a column and row layout.

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

    The quality of the Figma mockups weren't as professional as in other challenges unfortunately. That's why it was a bit hard for me to understand everything correctly.

    Product preview card component using Vue

    1
    MAGENE Sem Joel•320
    @JomagenePosted 3 months ago

    You're doing an amazing job with this project! The folder structure is impressively organized, and your use of variables shows great skill—well done! I genuinely enjoyed reviewing the presentation; it’s nearly pixel-perfect in matching the design. The only thing I noticed was a tiny mismatch in some padding, but it's hardly noticeable.

    One suggestion to make your project even better is to use rem for font sizes instead of pixels. This will help ensure that your design adapts beautifully when users adjust their preferred font size in the browser. You can check out this article for more insights.

    For accessibility, using the main tag as your primary container and wrapping images in a figure tag would be a great enhancement.

    I’ve really tried to find areas for improvement, but honestly, you’ve done a fantastic job! Keep up the excellent work—your attention to detail is clear.

    One final tip: consider using em for paddings instead of rem. Since padding is related to the parent element, em can be a better choice. This resource might be helpful.

    Keep pushing forward !

    1
  • tylerhyndman484•100
    @tylerhyndman484Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of using pseudo elements to create the bullet points for the lists to have more control with the positioning.

    I would do a better job next time of organizing my code by section as I got a little lost at times not having dedication flows for my sections of code.

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

    I faced a challenge of not resetting my margins and padding from the start. I forgot to do that, and after finishing the layout, i realized i needed to reset my margins and padding to be able to make my site behave how i wanted. I had to redo my layout after resetting which costed me some time.

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

    I would like some insight now how to make lines of text that wrap on lists start at the same point rather than one line being indented and the other starting at the beginning. I had to use position absolute and pseudo elements to fix this as everything i found as a fix on the internet didn't work, i.e. (text-indent and padding that offset each other, etc.)

    Responsive CSS and HTML Recipe Page

    1
    MAGENE Sem Joel•320
    @JomagenePosted 3 months ago

    Great job on the project! I really appreciate the effort you've put into it. Your use of semantic HTML elements like table, tbody, tr, and th is excellent, and I love how you're utilizing CSS variables—very clean and maintainable.

    I noticed that you're importing the Outfit and Young Sefir font families using the Google Fonts API, which is a solid approach. However, since it've been provided these fonts in the assets/fonts directory, it might be more efficient to use @font-face for local font integration.

    One suggestion for improving the HTML structure is to consider replacing the bodyContainer with a <main> tag, and you could swap out the <div class="headingPic"> for a <figure> tag, which would enhance the semantics of your layout.

    Additionally, it would be beneficial to implement a CSS reset in your project. Different browsers apply their own default stylings, which can lead to inconsistencies. A CSS reset ensures a consistent look and feel across all browsers. You can refer to this CSS reset article for more details.

    Keep up the great work, and let me know if these suggestions help!

    Marked as helpful
    1
  • MAGENE Sem Joel•320
    @JomageneSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of integrating custom fonts using @font-face and maintaining a responsive layout through a mobile-first approach. Next time, I’d explore CSS Grid for more complex layouts and focus more on performance optimization, like using font-display: swap and serving fonts in WOFF2 format for faster load times.

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

    A significant challenge was creating a responsive design that adapts seamlessly across different screen sizes without overusing media querries. I used Flexbox for layout management, which allowed me to center elements both horizontally and vertically with the my custom classes .flex and .flex-center. Additionally, I employed a media query to adjust the width of the list of links on larger screens, ensuring a consistent and balanced layout.

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

    Any suggestions for enhancing the code organisation and accessibility, would be appreciated.

    Responsive Social Links Profile with Custom Fonts & Flexbox

    3
    MAGENE Sem Joel•320
    @JomagenePosted 3 months ago

    @Rupali Thanks so much for the feedback! Was it helpful? Absolutely!

    You're right about the pixel font sizes. I'll be switching to rem for better scalability and accessibility—I finally understand why it’s so important, thanks to you. Great tip on the <q> tag for quotes; I'll start using that to keep things more semantic. Thanks for spotting the issue with the image being chopped off. I’ll clean that up. And the CSS reset? Yet another great lesson learned! The article you shared is fantastic, and I’ll be implementing a reset to ensure consistency across browsers.

    What a comment! I’ll be applying these updates right away. Thanks again!

    1
  • MAGENE Sem Joel•320
    @JomagenePosted 3 months ago

    Hi @AhmadAboHasaan You've done a wonderful job! Here are a few gentle suggestions:

    Accessibility: Add a descriptive alt text for the image to improve accessibility, e.g., alt="Jessica's Avatar".

    Focus Styles: Adding :focus styles for links can improve accessibility for keyboard users.

    Keep up the excellent work—you're doing great! 😊

    Marked as helpful
    0
  • James Niemerg•40
    @JamesN-devSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I used variable fonts on this one. First time setting that up so it was quite fun. I added fun variable hover states to the title, learning badge, and attribution in footer. I see the potential with variable fonts. Cant wait to use them more!

    I also wanted to make this so no media queries where needed but I did end up using a few for when a phone was very small. Other than that its fully responsive out the box.

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

    The article title and description would not scale. They where responsive and reduce in size but I wanted them to scale down without the use of media queries. In the end i did use media queries if screen is at very small size. It works.

    Fun challenge.

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

    How can I achieve the article text and description to scale without using media queries? For some reason I could get everything else to scale responsibly except those. They would still be responsive but did not scale. So in the end I utilized media queries. Which is fine, but i'd like to design without the need for them.

    Blog-preview-card-solution-html-css

    1
    MAGENE Sem Joel•320
    @JomagenePosted 3 months ago

    Hi @James Niemerg,

    I love the creativity you've shown with the use of variables and how your submission is almost pixel-perfect with the design. Cheer up! It's clear you enjoyed experimenting with them.

    Your goal to avoid media queries and still achieve a responsive design is impressive and not always easy to achieve.

    Regarding your challenge with scaling the article title text size and description without media queries, here's a mathematical approach that might help:

    To achieve scalable text, you can use the formula of a line passing through two points. Let's take the following points: for a large screen (1440px), 1rem equals 16px, and for a small screen (375px), 0.875rem equals 14px. These points can be represented as (1440, 16) and (375, 14).

    Using the formula for a line passing through two points, we can derive the following equation to calculate the font size based on the viewport width (vw):

    font-size: calc((2/1065) * 100vw + 13.298px);

    While it involves some mathematical effort, it can be a fun and effective solution. However, using media queries is also perfectly fine and more straightforward.

    Thank you for sharing your project, and keep up the great work!

    0