Using JavaScript, something I am new to using. Next time I think I should make it so only 2 decimal places are available.
What challenges did you encounter, and how did you overcome them?Getting the calculate to update with a change of values. I added event listeners for "input."
What specific areas of your project would you like help with?Ways to make code less redundant and more effecient.
Hey Ryanslabroom
your calculator is working well! Just make sure that when you perform multiple calculations, the output doesn’t show 'Infinity' or 'NaN' when the inputs are empty or invalid. Also, consider refining the styles of your project. Good luck with your future projects!
The layout looks good, and the validation is also working. I love the error message animation. Your project is totally complete and perfect. I think you should remove the 'drag and click to upload' text after the image is uploaded, so the user isn't confused about when they can change or remove their image.
Don't worry, with consistent practice in CSS and JavaScript, you'll be able to create projects with ease.
Happy to have understood the bento grid using this challenge
What challenges did you encounter, and how did you overcome them?aligning the cards in the container
What specific areas of your project would you like help with?overall feedback is welcomed
I don't have much to say because the layout is good and responsive, but when I squeeze the window, the layout breaks—meaning the cards overflow. This happens because the fonts aren't shrinking. To fix that, you can use clamp. It's easy to do, and you can check it out on YouTube. There are also some tools for clamp, like the Clamp Calculator.
I think it's good that I completed this project using my skills, which are at a beginner level.I also added the functionality of a persistent cart using local storage.
What challenges did you encounter, and how did you overcome them?There were some problems during development, such as reverting styles to their initial state and clearing the quantity text displayed under the "Add to Cart" button. I resolved most of them by myself, though, to be honest, I did use GPT for a bit of help.
What specific areas of your project would you like help with?Suggestions and feedback are accepted here—don't worry, I promise not to cry (much)!
Can someone tell me why my web layout looks bad in the screenshots?
I'm glad to have finally picked up the basics of Grid styling
What challenges did you encounter, and how did you overcome them?I was unable to easily guide the grid positioning to use when looking at the reference design image so I drew lines on the image to help visualize the grid system to use.
What specific areas of your project would you like help with?Any suggestions as to how to get the images within the grid to to match that of the design reference image are welcome.
Hey John,
I hope you're doing well. I'm a beginner, and I've also completed this project. I understand it can be a bit challenging to make it responsive, but it’s a great project for learning how grids and their styles work.
Using multiple cells (a combination of rows and columns) is definitely a good practice. To position the images correctly, I had to use some tricks. While there might be better methods, here are the approaches I used:
Note that these properties don’t work for background images. For those, you’ll need to use properties like background-size, background-position, and others.
Suggestion: When working with grid layouts, you can simplify your code by using shorthand properties. For example, instead of writing grid-row-start: 2; and grid-row-end: 3;, you can use grid-row: 2 / 3. It’s shorter and easier to read, which can save time and make your code cleaner.
I hope this helps, and I’d love to hear about any other methods you found useful!
This may have been a benefitted from using a framework to allow reusable input components but as is wasn't too bad just sticking to vanillaJS and relying on CSS classes to communicate state (errors).
Ive never created a drag and drop image uploader before so while not too difficult, it was rewarding.
There is no real input validation aside from empty strings and the file uploader has a counter variable that after 1 unsuccessful submission will jus t default to the provided thumbnail but user is encouraged to upload their own image for improved UX!
What challenges did you encounter, and how did you overcome them?Just trying to keep code somewhat clean/readable
What specific areas of your project would you like help with?Nothing comes to mind but always appreciate feedback or suggestions.
Hey Justin,
I hope you're doing well. As a beginner myself, I wanted to share some feedback and suggestions that might help. I checked your live preview, and the form looks great, with some really cool animations! However, I did notice an issue with your background – it doesn’t cover the full body.
Additionally, I tested the form, and it seems the validation isn’t working properly. Specifically, the email validation isn’t functioning correctly for something like example@example.com. I think it would be beneficial to implement a validation for this.
For error styling, CSS has the :valid and :invalid pseudo-classes, which can be used to display errors dynamically. This could be useful for improving the form's validation feedback.
I hope this feedback is helpful, and I'm happy to assist further if needed.
In this project, I added another functionality. With the help of this function, users can view all the tickets for this conference that they purchased for their friends and family. I used localStorage to store the data.
What specific areas of your project would you like help with?There is a lot of messy code. If anyone reviews my code, please provide suggestions.
The screenshot is not correct, and I don't know why. This also happened in a previous project.
This time, I used the `` tag, which saved me time in creating and toggling the thank you message.
What specific areas of your project would you like help with?Please review the HTML, CSS, and JavaScript code and provide feedback on how I can improve this project. I would appreciate any suggestions that would help me learn new concepts.
In this screenshot, the layout doesn't look good, but when I check the live site, it appears as expected. I'm not sure why the layout is not displaying correctly in the screenshot. If you've encountered this issue before, please let me know.
Learned to create a button which changes color of its background and text when hovered over it.
Hey Glitcc,
Your project is amazing! It's exactly like the layout provided. When I made this project, mine wasn’t that good, hahaha. It doesn’t matter whether you learn slowly or quickly; just focus on mastering your fundamentals and don’t rush into learning frontend development.
Good luck with your future projects!
Hey brother, your project’s email validation and success message aren't working.
this was a little tough but i am proud that i was able to get it done. I would look to get this done efficiently
What challenges did you encounter, and how did you overcome them?N/A
What specific areas of your project would you like help with?css positioning
Hey, your solution is looking great! I have some general suggestions:
1 Separate CSS Files: It's a good practice to use a separate file for CSS and place it in its own folder. For example:
project-folder/
├── index.html
└── styles/
└── style.css
This makes it easier for others to access and read your solution.
2 Font Hosting: Consider hosting your own fonts instead of relying heavily on Google Fonts. You can search for "@font-face" to learn how to do this.
3 Design Image: When you work on a project, always check the design image, not just the preview.
If any other suggestions come to mind, I will update this comment.
Good luck with your future projects!
I added overflow hidden for but when i'm to mobile view, the button itsn't appear. so frustrating
Hey, your preview looks good, but there are some minor issues. Here are a few suggestions:
HTML:
Image Tags: I noticed you used two <img> tags in your HTML. While this isn't wrong, if your project requires changing images based on screen size, it's best practice to use the <picture> tag instead. (You can search for "picture tag" on YouTube or Google for more information.)
Heading Spacing: For your h3 heading ("Perfume"), I see you've added spaces using the keyboard. This isn’t a good practice. I recommend using the CSS property letter-spacing for proper spacing.
CSS:
Card Sizing: For projects like this that involve creating cards, I suggest using min-width and max-width properties to ensure the card sizes stay within those limits.
Mobile Version: In the mobile version, only the top corners are rounded, but in your solution, only the right-side corners are rounded. You should apply theborder-radiusproperty for both desktop and mobile versions with different values.
General Suggestions:
Separate CSS Files: It's a good practice to use a separate file for CSS and place it in its own folder (e.g., folder: styles > file: css/style.css). This makes it easier for others to access and read your solution.
Font Hosting: Consider hosting your own fonts instead of relying heavily on Google Fonts. You can search for "@font-face" to learn how to do this.
If you need any help, just let me know. If you want sources, you can find them on the MDN Web Docs or on YouTube. If you can't find what you're looking for, feel free to ask any mentor on this site; they are really good people. You can also directly ask me!
Good luck with your future projects!
It's dynamic and fully responsible website. I added some extra style to make it look good but i will publish it on github. For now i'm just solved the challenge and it's been fun.
What challenges did you encounter, and how did you overcome them?When it's at small screen, the background image is get cropped out. So, i rotate the image when it's in small screen and it's looks perfect.
Hey, brother! The preview link for your project isn't working, but I saw the screenshot. The background looks awesome!
I would like to make modifications to the text balloon that is displayed when the Share button is pressed, specifically about the way in which this type of elements should be designed within the structure of the web page, but right now I can't think of it. nothing.
What challenges did you encounter, and how did you overcome them?This time I had no problems with the length and width of the card, since I was able to set a size that adapts to different devices, this time I had problems with the content that is displayed when the Share button is pressed, in a phone view I didn't have any major problems but when displaying it as a text balloon I couldn't properly handle the position in which it can be found in certain resolutions.
What specific areas of your project would you like help with?As I mentioned above, I had complications regarding the content that is displayed when pressing the Share button, I would like to ask for advice or recommendations to better manage the position in which said content is (speaking from the desktop view, on the phone I think it looks good).
Your design is pretty awesome, and that hover effect on the article is also amazing! Plus, I love the transitions and animations. Good luck with your future projects! Eat, sleep, and rest well.
Feedback is open????
Hello, I appreciate the work you've put into this; the solution looks great, and the footer is quite impressive. However, I did notice that the mobile version could use some improvement in its appearance. It might be beneficial to experiment with it a bit more. This is simply my suggestion, and I understand that you have your own approach to the design.
There is an issue with overflow where the change anchor tag escapes it's flex container on my friends iPhone 14 using safari but I'm unable to replicate the issue with any dev tools or other browsers and do not have my own iPhone to test with. On a variety of different android devices using chrome this issue does not exist and it only exists in Firefox when the width is reduced below 280px.
What specific areas of your project would you like help with?If anyone can help look over my flex containers and items and give me feedback if I've implemented and used them correctly or if there is a better and more efficient way I could have used them please give me critique here so I can improve my skills using flex.
Hey bro, I think you should remove the border from the main component and the button. Instead, use the box-shadow property (e.g., box-shadow: 1px(x-axis) 1px(y-axis) 15px(blur-size) color).
For the overflow issue, you might want to use both min-width and max-width to ensure that the size of your main component lies between those values. For example:
min-width: 200px; max-width: 300px; }
spacing between elements is done using paddings , i don't know if it's the right solution or not for spacing , can someone review and tell me what is the right approach for spacing?
Your solution looks good and well-formatted. I'm not too concerned about spacing right now because I used to approach it the same way when I started. But now, I use Grid and Flexbox. I'm also a beginner, but I have some suggestions for you:
Don’t worry, I’ll provide the links for these in the next comment.
