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

  • Papi• 230

    @Papi84

    Submitted

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

    What are you most proud of? I'm most proud of completing the entire project and seeing my solution work smoothly. This project gave me a deeper understanding of building functional and interactive web pages. Specifically, I’m proud of implementing the calculations accurately and designing a clean, user-friendly interface. It was a great opportunity to apply my HTML, CSS, and JavaScript skills, especially integrating them for a seamless experience.

    What would you do differently next time? Next time, I would focus more on the structure and organization of my code, particularly using more semantic HTML tags to enhance accessibility and SEO. I also realize there are some areas in the JavaScript logic where I could optimize the code for better readability and performance. I’d also like to implement additional features, such as customizing tip percentages or adding validation to improve user experience. Finally, I’d pay more attention to responsive design to ensure a consistent experience across all devices.

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

    One of the main challenges I encountered was managing state updates in JavaScript, especially when calculating the tip and total amounts dynamically based on user input. Initially, the calculations didn’t always update correctly when switching between custom tip percentages, which led to inconsistent results. I overcame this by carefully reviewing the logic and ensuring that all the necessary inputs were being captured and recalculated on every change. Breaking down the problem and using console.log() to debug step by step helped me identify where the code wasn’t behaving as expected.

    Another challenge was making the layout responsive. It took some trial and error to make sure that the app looked good on different screen sizes. I overcame this by refining my CSS, using relative units like percentages and rem for better flexibility, and leveraging media queries to adjust the layout for smaller devices.

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

    JavaScript Optimization: While the current functionality works, I feel like there might be ways to streamline the JavaScript code, particularly how state is managed and how inputs are handled. I'd love feedback on how I can make the code more efficient or readable, especially for larger projects.

    Responsive Design: I’m still learning how to ensure consistent design across all devices. While the app is functional on different screen sizes, I’d appreciate suggestions on improving the responsiveness, especially in terms of layout adjustments and ensuring the UI scales nicely on smaller screens.

    Accessibility Enhancements: I’ve started learning about making web apps more accessible, but I’m not entirely confident that my current solution meets accessibility best practices. Any advice on how to improve this (e.g., using ARIA attributes, semantic HTML, etc.) would be really helpful.

    https://github.com/Papi84/tip-calculator-app-main/blob/main/style.css

    1

    Dylan• 290

    @dquinn089

    Posted

    I have a few suggestions for improvements, as well as a small note about the repository link.

    1. The input fields for the bill and number of people are currently set to default placeholder text. Typically, these fields should have a default placeholder of "0" to better match the design and help guide the user:

    <input type="number" id="bill-input" placeholder="0">

    2. There's no basic validation for missing or invalid inputs. When the user doesn't enter values or inputs invalid data (like a 0 or empty field), the result spans display NaN or Infinity. Implementing basic validation for the input fields will improve user experience and prevent these issues.

    if (isNaN(billValue) || billValue <= 0) {
    alert("Please enter a valid bill amount.");
    return;
}

if (isNaN(peopleValue) || peopleValue <= 0) {
    alert("Number of people must be greater than 0.");
    return;
}

    3. It seems like the repository linked in your submission is for an entirely different project, but the live link is correct. You might want to double-check the repository link and update it so that it's pointing to the correct codebase for this Tip Calculator project.

    I hope this feedback helps guide you on improving this project! Happy Coding!

    Marked as helpful

    0
  • João Xavier• 230

    @joaoxavier-profissional

    Submitted

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

    I would build the desktop style first and then move directly to the javascript

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

    in my development i was using local server and it didn't need async and await, so when i deployed it with github pages, my javascript was returning null to the data.json. So i needed to rewrite my own script with async await to make it work.

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

    javascript, working with json, grid layout.

    Time Tracking dashboard using data.json with javascript async await

    1

    Dylan• 290

    @dquinn089

    Posted

    You're doing a great job with the project! The structure is clear, and you've got a good handle on fetching and updating the data. One tip for improvement would be to ensure that the fetchData() function returns the data only after it's been used to update the cards. This way, the updateCards function will only run after the data is fully loaded and available. Here's a small adjustment:

    const data = await request.json();

// Initial update of the cards
updateCards('weekly'); // Set default timeframe to 'weekly'

return data;

    This ensures that the cards are updated immediately after the data is fetched, and the default timeframe (weekly) is set right away. Happy Coding!

    0
  • P
    Manny Verma• 230

    @mverma45

    Submitted

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

    I am most proud of the fact that I was able to figure out how to determine the different elements of the project and take it bit by bit. Also the fact that I got the text box to behave like an email input box.

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

    The challenges I faced during this was to get the image to the right side, so I had to go into my previous coding challenges and watch some YT and read some stackoverflow to figure what to do. Also watching a YT video from Kevin Powell where he did :root { --clr-neutral-800: hsl(234, 29%, 20%); } I followed his example and did the same makes it look nice in my opinion.

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

    I know my project isn't perfect like the challenge shown, I am having issues with my JavaScript not working. Any help would be appreciated, I will try to get the JS working.

    newsletter-sign-up-with-success-message

    1

    Dylan• 290

    @dquinn089

    Posted

    Nice job on your project so far! Here are a couple of suggestions to improve it. Your JavaScript file is linked as a stylesheet. Change the link tag to a script tag:

    Marked as helpful

    0
  • Luisa Fda. Ramirez• 40

    @LuisaRami2018

    Submitted

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

    I feel good about achieving the challenge in less time by applying my knowledge of HTML and CSS.

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

    I encountered a challenge in this project when I needed to adjust the image using SVG code and also enable the border-radius property. I was able to solve this issue by using a div container and applying the necessary properties to it.

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

    I would like to know if the webpage is using semantic HTML, and if there are alternative CSS design solutions I can explore further.

    Blog preview card project

    1

    Dylan• 290

    @dquinn089

    Posted

    Your project looks great! Here are a couple of suggestions to improve your code and enhance its functionality.

    Improve accessibility by adding alt text:

    <!-- Add meaningful alt text to the image -->
<img src="./assets/images/image-avatar.webp" alt="Author Greg Hooper">

    Consider using CSS variables for spacing to make it easier to manage and adjust padding, margin, and gap throughout your project:

    :root {
    --color-main: #f4d04e;
    --color-title: #121212;
    --color-text: #6b6b6b;
    --spacing-small: 5px;
    --spacing-medium: 16px;
    --spacing-large: 20px;
}

    You can use many types of CSS variables, such as colors, spacing, font sizes, and more, to make your code more maintainable and flexible. Hope this helps, Happy Coding!

    Marked as helpful

    0
  • Ridwan Hasan• 400

    @Ridwan10000

    Submitted

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

    I want help with the desktop tooltip. I could not position it as the design shows.... As I set the .container to overflow:hidden It's not crossing the border of the container while positioning it like the design. Please help.

    Also any suggestions regarding anything else is welcomed.

    Article Preview Component

    1

    Dylan• 290

    @dquinn089

    Posted

    Your code is well-organized and functions great! For a slight improvement, using more semantic HTML elements can improve both accessibility and SEO. For example, wrapping the div elements within the main with more specific tags such as <article> and <section> where appropriate:

    <section class="image">
  <img src="drawers.jpg" alt="A drawer with two painting and a flower vase on it">
</section>
<article class="text">
  <p class="bold-paragraph">Shift the overall look and feel by adding these wonderful
    touches to furniture in your home
  </p>
  <p class="description-paragraph">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>
</article>

    These changes can enhance the user experience, making your code more readable and accessible. Happy coding!

    0
  • Dylan• 290

    @dquinn089

    Posted

    Your project is looking great so far! One important improvement to consider is adding media queries to make your design more responsive for mobile devices. This will ensure your layout looks good on smaller screens. Here's a simple example to help guide you:

    @media (max-width: 600px) {
  .main {
    grid-template-columns:
    grid-template-rows: auto
  }
  .left, .middle1, .middle2, .right {
    width:
    margin:
  }
  .icon {
    position:
    text-align:
  }
}

    This should give you an idea of the proper set up for this method, as well as some properties for you to mess around with and get the right mobile design layout. Happy coding!

    Marked as helpful

    0
  • Darshan• 20

    @darshan744

    Submitted

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

    Analyse the steps to be done first and then coding.Research more about why this code is being written rather than just knowing if i put this it will work

    QRcode using Basic HTML

    2

    Dylan• 290

    @dquinn089

    Posted

    Your QR code preview component is well-structured and looks great! While your current design is centered and looks good on most devices, adding media queries will ensure that your component is responsive on all screen sizes. For example:

    @media (max-width: 400px) {
  .container {
    width: 90%;
    padding: 20px;
  }
  img {
    width: 100%;
    height: auto;
  }
}

    You can enhance readability by using a slightly larger font size and ensuring consistent font usage. Adding more weight to the heading text can also make it stand out more:

    body {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
}
h3 {
  font-size: 1.5em;
  font-weight: 600;
}
p {
  font-size: 1em;
  line-height: 1.5;
}

    These changes will help ensure that your project is more adaptable to different devices and more readable. Great job on your project so far! Happy coding!

    0
  • Dylan• 290

    @dquinn089

    Posted

    Your HTML structure is clear and well-organized. Great job! Add meaningful alt attributes to images for better accessibility. Example:

    <img src="./images/image-daniel.jpg" alt="Portrait of Daniel Clifford" />

    Your CSS is neatly structured with excellent use of CSS Grid. Well done! Use rem units instead of px for better responsiveness. Example:

    .card > div p:last-child {
    font-size: 1.1rem;
}
.card p:not(img + div > p) {
    font-size: 2rem;
}

    With these small changes, you can improve both the accessibility and scalability of your project. Happy coding!

    0
  • P
    BozJR• 220

    @BozJR

    Submitted

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

    Im most proud that i completed it ! this was a little struggle though NGL !

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

    I think I've got the HTML locked in now its just remembering the CSS features to help move things around and then figure out why things cant move around is what I find difficult.

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

    More help is needed for the the CSS flexbox cause just when I think I have it I DONT! I tried so many ways to get this right but the only way I could figure out was to swap 2 x elements around in my HTML which I know should not be the case but every other method i tried resulted in the same wrong action so this was my only choice! see my code compared to OG code to know what I mean.

    Basic four card feature section using simple HTML and CSS.

    1

    Dylan• 290

    @dquinn089

    Posted

    Your code looks fantastic, and you've done a great job with the layout and styling! Here are a couple of tips for potential improvements:

    Accessibility Improvement: Consider adding descriptive alt attributes to your <img> tags to improve accessibility for screen reader users. This simple change enhances the user experience for a broader audience.

    Consistent Color Variables: Great job using CSS variables for colors! For consistency and readability, use lowercase for all custom property names (e.g., --very-dark-blue instead of --Very-Dark-Blue). This maintains a consistent coding style.

    :root {
    --red: hsl(0, 78%, 62%);
    --cyan: hsl(180, 62%, 55%);
    --orange: hsl(34, 97%, 64%);
    --blue: hsl(212, 86%, 64%);
    --very-dark-blue: hsl(234, 12%, 34%);
    --grayish-blue: hsl(229, 6%, 66%);
    --very-light-gray: hsl(0, 0%, 98%);
  
    --font-family1:  "Poppins", sans-serif;
  
    --font-weight-light: 200;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
}

    These are very minor changes but can help enhance your code’s accessibility and maintainability. Happy coding!

    Marked as helpful

    0
  • Simon Capillon• 100

    @simon7195

    Submitted

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

    I'm happy with the model fidelity.

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

    Customize list bullets - I found a technique on this site

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

    Nope

    Responsive recipe page using HTML&CSS

    1

    Dylan• 290

    @dquinn089

    Posted

    Nice work! your code looks very organized, and I liked that you used ol for your "instructions" section. Way better than what I initially did using ul. Also thanks for the link in your solution comments, super helpful resource! Happy coding!

    0
  • Dylan• 290

    @dquinn089

    Posted

    Great job on the project! Your code is well-structured, and the design looks clean and responsive. Here are a couple of tips that might help you enhance it further:

    Accessibility Improvement: Adding descriptive alt text to your images improves accessibility. For example:

    <img src="./images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum product image for desktop" class="img-desk" />
<img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum product image for mobile" class="img-mob" />

    CSS Efficiency: You can combine similar selectors to make your CSS more efficient. For example, both .heading-txt, .org-price, and .desc-txt have the same color property:

    .heading-txt,
.org-price,
.desc-txt {
  color: var(--Dark-grayish-blue);
}

    These are minor improvements, but they can make your code even better. Keep up the excellent work! Happy coding!

    Marked as helpful

    0
  • Dylan• 290

    @dquinn089

    Posted

    Fantastic work! Your solution it practically identical, and your code it very well structured and written! In all reality there really aren't any issues with your solution. The only thing I would recommend is making use of the different elements that HTML has to offer, to create "landmarks" in your code, making it much more readable to other devs. For example: Instead of:

     <body>
    <div class="container">

    do:

    <body>
  <main>
    <div>

    You also have not included responsive design in your CSS, so your entire "container" element is being cut off on the left side of the screen. You can make any necessary adjustments to any of your element's properties by using CSS media queries which can be implemented at the end of your css like this:

    @media () {
    body {
        margin: 
    }
    main {
        padding: 
        border-radius: 
    }

    Hope this helps, happy coding!

    0