Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • P
    Nate Valline• 350

    @nvalline

    Submitted

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

    I feel like I was able to work through the JS logic pretty easily to get this app to function properly.

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

    The biggest challenge was to get the checkbox styled to the design specs. But that in my opinion was a fairly small challenge.

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

    I would appreciate any tips/suggestions on how to improve my code. Thanks!

    Vanilla JS & SASS

    1

    P
    Gilbert• 290

    @juliengDev

    Posted

    Hello again @nvalline :)

    Here are the points I liked compared to my own approach:

    •	Use of crypto.getRandomValues: This is a good practice to enhance the security of the password generation process.
•	Validation of options: The logic for validating options using FormData is interesting to ensure that at least one option is selected before generating the password. This could be useful if I want to implement more rigorous validation in my own code.
•	Visual feedback on the slider: The visual feedback on the slider’s progression is a nice enhancement for the user interface and could be a good addition to my project.

    The design is faithful to the original mockup, and I'm always impressed by how you're able to achieve an almost pixel-perfect integration.

    I noticed an issue in the application where, if you adjust the slider to set a maximum number of characters but don’t check any options, the output displays undefinedundefinedundefinedundefined. Perhaps you could add a validation step in the logic to handle this case.

    Congratulations on the code and the project! Keep up the great work!

    Marked as helpful

    0
  • P
    Nate Valline• 350

    @nvalline

    Submitted

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

    I decided to go above and beyond and add an error 'toast' on the bill input as well to indicate that it cannot be a negative number.

    I also got a better understanding of parseInt and parseFloat. I have used parseInt several times, but never really considered the differences with parseFloat.

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

    Styling the radio buttons was my biggest challenge as I have never done that before. Luckily the 'all knowing' Google was able to provide me with the correct info.

    I also wanted to format the Bill and Number of People inputs to not allow negative numbers or more than two decimal points for the bill. I was not able to find a solution that worked properly.

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

    If anyone knows how to structure the inputs to not allow negative numbers or to limit them to 2 decimal points that works for this app I would be interested in learning that.

    Also I always appreciate any tips/suggestions to improve the quality of my code.

    Thanks!

    Vanilla JS & SASS

    1

    P
    Gilbert• 290

    @juliengDev

    Posted

    Hello @nvalline,

    First of all, congratulations on the project! It really matches what was expected, and you even went beyond with the bill field. Great job! The design is also faithful to the mockup, and the calculation logic works well too. I learned about the use of radio buttons from your code to handle unique values in a form selection, for example, and I will now apply this in my future projects—so thanks again for that.

    Regarding your question about how to prevent a recorded number from being negative, you can control this directly in the HTML input tag with the following options: type="number" min="0".

    For limiting the value to 2 decimal places, you can use the toFixed method, for example:

    const inputAmount = document.getElementById('inputAmount');

inputAmount.addEventListener('input', (event) => {
  const value = event.target.value;

  // Prevent negative numbers
  if (value < 0) {
    event.target.value = 0;
  }

  // Restrict to 2 decimal places
  event.target.value = parseFloat(value).toFixed(2);
});

    Now, if you want to go a bit further with the project structure in terms of Sass, you can take inspiration from my project. Add me on GitHub and you’ll easily find it—this could give you some ideas for your future development work.

    All my best wishes for the future!

    Marked as helpful

    0
  • P
    Gilbert• 290

    @juliengDev

    Posted

    Hello @AdrienB23,

    Here are the points you could improve:

    •	The responsiveness breaks at around the max-width: 975px breakpoint; the cards take up 100% of the viewport width.
•	The overall size of the layout and elements appears larger compared to the original design.
•	I don’t have access to your codebase on GitHub, so I assume you have left the platform. Therefore, I cannot review your JavaScript code, unfortunately.

    Best of luck with your future projects.

    0
  • P
    Ralph Virtucio• 610

    @ralphvirtucio

    Submitted

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

    I am most proud of how I used the action and method attributes to redirect the main page to a Thank You page and extract the user's email from the URL. However, I would reconsider using these attributes in the future. I read a post in the Frontend Discord community suggesting using a single HTML page where the Thank You message is just a dialog or modal.

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

    The challenges I encountered were form validation and redirecting the main page to the Thank You page. I overcame these challenges by seeking help from the Discord community and reading related MDN articles like client-side form validation and sending form data.

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

    The areas that you can provide help are the form validation and redirecting the main page to Thank you page:

    • Did I cover all scenarios for the validation?

    • Is implementing the redirect with action and method attributes considered a best practice?

    Any feedback is much appreciated !!

    Newsletter sign-up form with success message

    1

    P
    Gilbert• 290

    @juliengDev

    Posted

    Hey there @ralphvirtucio👋! Here are some suggestions to help improve your code:

    Why Not Declare newsletter_heading as h1

    Using Pseudo-Class ::before for Bullets -Instead of using an <img> tag for bullets, you can utilize the ::before pseudo-class to create and style bullets with the background property. This can reduce the number of HTTP requests and improve page performance.

    Email Validation

    The current email validation is insufficient as it allows invalid email formats such as [email protected]. Enhancing the validation with a regular expression (regex) can improve accuracy.

    Alternatively, you can use a validation library such as Validator.js, Just-Validate, or Bouncer for more robust validation.

    Font Size at 62.5% Tips to help you with sizing elements :

    • Setting the font-size to 62.5% on the html element is a common technique to simplify rem calculations. This sets the base font size to 10px (assuming the default browser font size is 16px), making it easier to calculate sizes in rem units (e.g., 1.6rem equals 16px).

    JavaScript Improvements

    • Created a separate validateEmail function for better reusability and readability.
    • Introduced showError and clearError functions to centralize error handling and reduce code duplication.
    • Simplified the handleEmailInput function to just clear errors, as validation is now handled in handleSubmit.

    I discovered something new with your project, so thanks for that! It was about using the action and method attributes to redirect the main page to a Thank You page and extract the user’s email from the URL. I’ve never seen something like this before, and I’m going to check this in detail later because now I’m curious about this method. Overall, are you sure it’s the best way to handle this challenge here? I guess you did some research. I would be glad if you could explain what benefits it brings you. :)

    Great job on the design! It’s really faithful to the original and looks fantastic. Once you address the regex issue for email validation, your challenge will be complete. Keep up the awesome work.

    <Happy Coding/>! 👾 Regards, @juliengDev

    Marked as helpful

    0
  • Kikino02• 160

    @Kikino02

    Submitted

    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?

    Adding pop-ups when the icon was clicked was hard for me...

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

    Please give me advice, how to improve my code...

    Article preview by Kikino

    1

    P
    Gilbert• 290

    @juliengDev

    Posted

    Hi @Kikino02,

    First of all, great job on completing this project! It wasn’t an easy task, and you should be proud of what you’ve accomplished. Here are a few observations and suggestions for improvement:

    1.	Breakpoints: The first breakpoint arrives at 1440px, but it could be more effective to set a breakpoint around 900px. This way, you can ensure elements display correctly before the design breaks.
2.	Animated Transitions: For an enhanced user experience, consider adding an animated transition to the sharing button. This would allow it to appear and disappear more smoothly, creating a more natural feel.
3.	Social Media Links: The social media icons currently don’t have associated URLs, so they don’t redirect to the respective social media sites. Adding these links would improve functionality.
4.	Height Property: I noticed you used the height property several times. It’s generally advised to avoid setting fixed heights in CSS to prevent breaking the design. Allow elements to adapt more naturally by using relative or flexible height values.
5.	Width Property: Similarly, try to avoid using fixed widths. Instead, opt for responsive properties like min-width and max-width to ensure the layout remains flexible.
6.	Responsive Units: Instead of pixels, consider using responsive units like em, rem, %, or vw. Kevin Powell’s courses on responsive design are an excellent resource for this and can help you improve in this area.
7.	Display vs Visibility: It’s often better to avoid using display: none and instead use visibility: hidden and opacity: 0. This approach keeps the element in the document flow, making it easier to animate and transition, which results in a smoother user experience.

    Overall, you’ve done a fantastic job sticking to the design and implementing the features. Congratulations, it wasn’t easy, and you should be proud of your efforts. Keep up the great work!

    Best, @juliengDev

    0
  • P
    Carsten Körner• 170

    @carstenkoerner

    Submitted

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

    I'm proud to have built the first more complex page and to have got it so close to the original.

    I didn't look at all the templates in detail at the beginning, except for the mobile template that I started with. This meant that I was missing a few flexboxes, grids and divs later on, which I then had to add in html. I will do this differently for the next project.

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

    I was working with a Sketch template for the first time and didn't want to take out a subscription for the software. Fortunately, there is the Lunyca app from Icon8, which can read both Figma and Sketch files and is also free.This allowed me to get much closer to the design template than before.

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

    I have not found a solution for how to enlarge the header image with the heads of the people so that it goes a little over the frame on the left and right and is cut off at the frame. If anyone has any tips on this, I would be very grateful.

    Responsive meet landing page

    1

    P
    Gilbert• 290

    @juliengDev

    Posted

    Hey there @carstenkoerner! 👋 Here are some suggestions to help improve your code:

    • Reset Margins and Padding:

      * {
  margin: 0;
  padding: 0;
}

    • Consistent Box-Sizing Model:

      *,
*::before,
*::after {
  box-sizing: inherit;
}

      By setting box-sizing: inherit; for all elements and pseudo-elements, the box model remains consistent throughout the document. Then, setting box-sizing: border-box; on html ensures that all widths and heights include borders and padding, simplifying the calculation of element dimensions.

    • Set Base Font Size:

      html {
  box-sizing: border-box;
  font-size: 62.5%;
}

      Setting the base font size to 62.5% on html makes text size calculations easier. Since 62.5% of the default 16px font size equals 10px, 1rem equals 10px, simplifying conversions between relative (rem) and absolute (px) units. For example, 1.6rem equals 16px, which is more intuitive than working with text sizes based on a default 16px base size.

    • Ensure Full Viewport Height:

      body {
  min-height: 100vh;
}

      By setting min-height: 100vh;, the body of the document covers at least the viewport height, which is especially useful for "hero" layouts or ensuring the footer remains at the bottom of the page.

    • Font Size Adaptability: Consider using the clamp() function for more adaptive font sizes. It allows you to set a range of acceptable font sizes based on viewport dimensions, ensuring better readability across devices.

    • Image Positioning in Header: You mentioned struggling with image positioning in the header. I used absolute positioning with negative left and right values. You can refer to my code for a detailed implementation of this solution.

    <Happy Coding/>! 👾

    0
  • Faisal Baig• 90

    @Faisalbaig1998

    Submitted

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

    I took too much time, I will try to do things quick next time.

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

    I struggled with layout a lot, I saw videos about grid and flex then I applied all the things, some of them worked.

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

    I was struggling with font color and sizes, if someone could help me with this?

    Testimonials grid section

    1

    P
    Gilbert• 290

    @juliengDev

    Posted

    Hey there @Faisalbaig1998 👋! Here are some suggestions to help improve your code:

    HTML Improvements:

    1. Use Semantic HTML Elements:

      • Replace div elements with the class card by using figure, figcaption, and blockquote elements. This is more appropriate for testimonials.

    2. Improve Accessibility:

      • Add meaningful alternative descriptions (alt) for images to enhance accessibility.

    Best Practices for Resetting Your CSS Code:

    1. Reset Margins and Padding:

      * {
  margin: 0;
  padding: 0;
}

    2. Consistent Box-Sizing Model:

      *,
*::before,
*::after {
  box-sizing: inherit;
}

      By setting box-sizing to inherit for all elements and pseudo-elements, the box model remains consistent throughout the document. Then, setting box-sizing: border-box; on html ensures that all widths and heights include borders and padding, simplifying the calculation of element dimensions.

    3. Set Base Font Size:

      html {
  box-sizing: border-box;
  font-size: 62.5%;
}

      Setting the base font size to 62.5% on html makes text size calculations easier. Since 62.5% of the default 16px font size equals 10px, 1rem equals 10px, simplifying conversions between relative (rem) and absolute (px) units. For example, 1.6rem equals 16px, which is more intuitive than working with text sizes based on a default 16px base size.

    4. Ensure Full Viewport Height:

      body {
  min-height: 100dvh;
}

      By setting min-height: 100dvh;, the body of the document covers at least the viewport height, which is especially useful for "hero" layouts or ensuring the footer remains at the bottom of the page. Using CSS variables for colors allows for easier customization and maintenance of the site theme.

    5. Use Relative Units:

      • Use relative units (rem, em) instead of pixels to improve responsiveness.
      • Example: width: 30px; can be replaced with width: 2rem;.

    6. Improve Responsiveness:

      • When resizing the page, the design breaks in several places.
      • Add additional media queries for more varied screen sizes.
      • Example: Add breakpoints for tablets and desktops.

    7. Reduce Redundant Styles:

      • Combine redundant styles for similar elements.

    You said that you was struggling with font color and sizes, if someone could help me with this? here is some recommendations :

    • Use a Design Tool: Open the JPEG in a design tool like Figma, Adobe XD, or Sketch. These tools allow you to inspect and extract style information such as font sizes, colors, and other design details.

    • Extract Colors and Fonts: Use color picker tools within the design software to get the exact hex/RGB values for the font colors. Identify the fonts used in the design. You can use tools like WhatTheFont or Font Squirrel Matcherator to recognize fonts from images if not provided.

    • Set Up CSS Variables: Define CSS variables for colors and fonts to maintain consistency and ease of updates.

    <Happy Coding/>! 👾

    Marked as helpful

    0
  • Justin• 120

    @andrew-j-brown

    Submitted

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

    I am most proud of the following:

    • implementing a mobile first, responsive, CSS grid layout. I feel that it works quite nicely!
    • further practicing the usage of Sass in my projects

    (also, I added some glowing hover effects to the cards for that extra ✨polish✨. I think it looks really cool, you should check it out should you get the chance! 😎)

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

    I struggled a bit at first with the grid layout, as I was a bit rusty in implementing it. Nothing that Google couldn't help with, and honestly the implementation was pretty smooth thanks to proper structure ahead of time.

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

    I'd love some tips regarding proper semantic html elements. I still struggle in confidently choosing the proper elements for my page structure.

    ... the sizing isn't perfect on all the elements, but it's close enough (and I don't have pro for the design docs yet 😭) so I'm just going to leave it as is and keep grinding more projects out.

    Four Card Feature Section

    1

    P
    Gilbert• 290

    @juliengDev

    Posted

    Hello Justin 👋,

    I've had the pleasure of reviewing your project, and I'm impressed with your efforts! Your implementation shows great promise. I'd like to share some observations that might help enhance your work even further.

    Key Strengths:

    • You’ve done an excellent job of visually adhering to the design. Don’t worry too much about positioning; without the pro version, it’s very difficult to get it exactly right.
    • Great use of animations on hover, which add a nice touch to the user experience.
    • Effective use of responsive values like rem for sizing, which ensures better scalability across devices.
    • Utilization of variables, for example: 
      $red: hsl(0, 78%, 62%);
$font-stack: Poppins, Arial, Helvetica, sans-serif;
      This makes your CSS more maintainable and easier to read.

    Areas for Growth:

    Semantic HTML:

    As you requested, here are my thoughts on how this aspect can be improved:

    • Try to structure the main sections as direct children of the body, like <header>, <main>, and <footer>.
    • Consider replacing <section class="container-hero"> with a <header> element and <section class="card-container"> with a <main> element.
    • You can still use <section> elements, but wrapping them within these main elements would be beneficial.
    • I noticed you used the <h1> element twice. It's best to use a hierarchical order for headings: <h1>, <h2>, <h3>, etc.
    • Consider using the technique of setting the root font size to 62.5% (html { font-size: 62.5%; }). This makes it easier to calculate rem values, as 1rem will equal 10px (e.g., 1.6rem will be 16px). This approach simplifies responsive sizing and improves consistency across your design.

    To further improve your code, I recommend checking out the WAVE Web Accessibility Evaluation Tools. They offer a Chrome extension that can be very useful. Additionally, you can review your HTML and CSS code with the Markup Validation Service website.

    I also saw that you used an <img> element for the SVG. There are more appropriate ways to integrate an SVG icon. Feel free to check my code for inspiration if you need.

    Remember, these are suggestions to help you grow. You're doing great work, and each project is a step forward in your development journey. Keep pushing yourself and exploring new techniques!

    I hope you find my feedback valuable. If it was helpful, I'd really appreciate it if you could mark my comment as helpful on the platform. Your feedback helps me improve too! 🌟

    Happy coding, and I'm looking forward to seeing your future projects! 💻✨

    0
  • P
    Daniel Basilio• 350

    @danielbasilio

    Submitted

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

    In a refactoring in the future, I would focus more on the accessibility part and use some framework, probably react

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

    Using the ITCSS methodology was the biggest challenge

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

    In terms of accessibility

    Responsive Product Preview Card Component using sass and css

    1

    P
    Gilbert• 290

    @juliengDev

    Posted

    Hello there! 👋 I’ve had the pleasure of reviewing your project, and I’m impressed with your efforts! Your implementation shows great promise. I’d like to share some observations that might help enhance your work even further.

    Key Strengths:

    • Responsive design with appropriate media queries for mobile and desktop views
    • Clean and well-structured HTML using semantic tags like <section> and <picture>
    • Thoughtful use of CSS variables for colors and consistent styling

    Areas for Growth:

    • Accessibility: Consider adding ARIA labels to improve screen reader compatibility, especially for the button and decorative elements.
    • Responsive Typography and Layout: Translate to English, try using more responsive values like rem, em, and percentages for typography and layout distribution to ensure scalability across various devices.
    • Interactive Elements: Enhance the user experience by adding hover and focus states for interactive elements, particularly the “Add to Cart” button.

    Remember, these are suggestions to help you grow. You’re doing great work, and each project is a step forward in your development journey. Keep pushing yourself and exploring new techniques!

    I hope you find my feedback valuable after the time I’ve spent reviewing your project. If it has been helpful to you, I would appreciate it if you could mark my comment as helpful on the platform. Your feedback helps me improve too! 🌟

    0
  • Carlos Maracara👷👨‍💻• 780

    @MaracaraCarlos

    Submitted

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

    I had a lot of fun doing this challenge, I put my Sass skills into practice. Any suggestion would be appreciated.

    [Sass] Recipe page

    1

    P
    Gilbert• 290

    @juliengDev

    Posted

    Hello there! 👋 I've had the pleasure of reviewing your project, and I'm impressed with your efforts! Your implementation shows great promise. I'd like to share some observations that might help enhance your work even further.

    Key Strengths: The design is very close to the requested layout, showing great attention to detail. Effective use of CSS variables for fonts, demonstrating good practices for maintainability. Responsive design implementation, with a media query for smaller screens, showing consideration for different device sizes.

    Areas for Growth:

    1. Accessibility: • Consider enriching your HTML with more semantic elements like <header>, <footer>, and <article>. • Enhance accessibility by adding ARIA labels where appropriate, especially for complex elements like the nutrition table.

    2. Responsive Design: • Try incorporating more relative units (rem, em, %) for improved flexibility across devices. • Explore robust layout systems like CSS Grid or Flexbox for more dynamic responsiveness.

    3. CSS Organization: • Look into CSS methodologies like BEM or SMACSS for better structure and maintainability. • Group related styles and use comments to clearly separate different sections.

    4. Performance and Optimization:

      • Leverage CSS custom properties (variables) for frequently used values like colors.

    5. Typography and Aesthetics: • Implement a comprehensive typography scale for improved visual hierarchy. • Use unitless values for line-height to enhance responsiveness. • Consider adding more whitespace between sections for improved readability.

    6. Code Quality and Compatibility: • Tidy up by removing unused styles and ensuring consistent formatting. • Enhance browser compatibility with vendor prefixes or tools like Autoprefixer.

    7. Functionality and SEO: • Consider adding interactive elements like a print button or serving size adjuster. • Boost SEO by including relevant meta tags in the <head>.

    Remember, these are suggestions to help you grow. You're doing great work, and each project is a step forward in your development journey. Keep pushing yourself and exploring new techniques!

    I hope you find my feedback valuable. If it was helpful, I'd really appreciate if you could mark my comment as helpful on the platform. Your feedback helps me improve too! 🌟

    Happy coding, and I'm looking forward to seeing your future projects! 💻✨

    0
  • P
    Gilbert• 290

    @juliengDev

    Posted

    Hey @Esmee29, it's me again! :) Great job overall! I noticed a few areas for improvement:

    The padding inside the content box could be adjusted. Your links appear slightly wider compared to the desktop design in the Figma file.

    That said, I've observed that there are often small differences between the design and the final result, so it's not a major issue. Keep up the good work, mate! <3 C

    Marked as helpful

    0
  • P
    Gilbert• 290

    @juliengDev

    Posted

    Great job @Esmee29! I like the way you manage the spacing inside the content box with the use of flex and the gap properties. Nicely done. If you're looking to improve your responsive design, I'd suggest considering the use of max-width instead of width, and utilizing rem or em units, which are more responsive. These small changes can significantly enhance the adaptability of your layout across different screen sizes. For more in-depth learning on this topic, you might find Kevin Powell's course on responsive layouts helpful. While I can't access the link directly, you can search for 'Conquering Responsive Layouts' by Kevin Powell for valuable insights and techniques.

    0