@poissonfouSubmitted 28 days 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?..
What specific areas of your project would you like help with?..
P
edpau
@edpauAll comments
- @edpauPosted 6 days ago
Nice code. I want to try this challenge with react too, what is the most challenge part you found? Do you think it will be easier to start the project, if I separate each part in a component first or complete it with one component and lift up the state afterward?
Do you think using react-hook-form will simplify the whole build process?
0 - @catreedleSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of solving the select tip section and the custom input field.
What challenges did you encounter, and how did you overcome them?I was struggling with the custom input, it is resolved with position: absolute.
What specific areas of your project would you like help with?Any input would be appreciated but primarily on Javascript. How can I improve my index.js, also if you find any error.
@edpauPosted 30 days agoHi, nice code, I can follow through your code easily and understand the logic.
I noticed a small bug in your JS, if I input all the values, bill, tip % and number of people, then I decide to change the bill amount, delete all the inputted number, I will trigger the error message and the
emptyCalculationResult()function, all the values at the back will become zero, but on the display it still show I have selected the tip % and inputted number of people and the calculator will not calculate the new result.I also noticed when I hover onto the input, the layout shift, I tried using outline and the layout didn't move. Or set a transparent border. Add a CSS border on hover without moving the element
Marked as helpful0 - @Grego14Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
JavaScript code, maybe change the way I use CSS variables.
What challenges did you encounter, and how did you overcome them?I had a problem in the way I displayed the content on the web using the .json file, solved it by wrapping everything in a function.
What specific areas of your project would you like help with?I would like some advice on the way I use CSS variables and also with media queries.
- @BoffdubSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I had been doing tutorials on W3 Schools and watched a lot of youtube tutorials but I have never built a site before. It's not 100% exactly like it was drawn up. But I'm proud that even when I struggled, I was able to figure out how to make it close to what it looked like.
What challenges did you encounter, and how did you overcome them?I had trouble trying to figure out the table. Because I wasn't sure if the td or the th tag. I eventually figured it out by using the inspect tool in Chrome and as I know basic HTML and CSS, I could figure out that it was a padding issue.
What specific areas of your project would you like help with?I wasn't sure what font-family was and I got that wrong. But wasn't sure how to change it. So, I'd want help on that.
I also feel like there was an easier way of how to do all of these things than I made so I'm curious about that.
@edpauPosted about 1 month agoThe font detail is in the style-guid.md
- Family: [Young Serif](https://fonts.google.com/specimen/Young+Serif) - Weights: 400 - Family: [Outfit](https://fonts.google.com/specimen/Outfit) - Weights: 400, 600, 700Since this challenge they provided you the font in the asset folder, you can use it from there. Please read below for more detail. How to use @font-face in CSS
or you can download it from google font, and connect it as below. Get Started with the Google Fonts API
or you can see how other people change the font in their code.
I also suggest to use a Chrome extension, WhatFont, to check what the font is on your website. WhatFont
Marked as helpful0 - @rafaeldgeoSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud use Lit Library to create custom form element.
What challenges did you encounter, and how did you overcome them?The challenge was use Lit Library to create form custom element, because I'm still learning to use it.
What specific areas of your project would you like help with?I would like feedback about use Lit Library. Thanks!
@edpauPosted about 1 month agoHi, I am looking into setting explicit width and height on the SVG photo, I saw you set it and the SVG is still responsive. You used below to make it responsive, do you mind explaining how it works?
/* max-inline-size: 100%; */ /* block-size: auto; */1 - @Ramirez-ChristopherSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
proud of:
- learning how to import the fonts and use them in my project
- producing modular code by using variables -getting really close to the prototype
different next time: -producing more readable code -follow good coding practices
What specific areas of your project would you like help with?I would like advice on good coding practice for both html and css. Thank you! :) *any other criticism is accepted!
@edpauPosted about 2 months agoHi nice code. Your code is very easy to read and organises.
I will suggest you to look into semantic html and use a modern CSS reset at the start of the styles in every project. Andy Bell's one is a good starting point.
Marked as helpful1 - @burningbeattleSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I’m most proud of successfully implementing the interactive share button feature using JavaScript. The share option is neatly integrated and displays only when the button is clicked, creating a clean and dynamic user experience. I would focus more on accessibility by ensuring better support for screen readers, adding ARIA attributes, and making sure the share option is keyboard-navigable. I might also explore more modern tools like CSS Grid for layout flexibility or CSS variables to allow users to easily change themes.
What challenges did you encounter, and how did you overcome them?I used CSS translate and scale to control the animation, making sure the share option is hidden until needed. Getting the correct toggle behavior on the share button required precise event handling. There was an initial challenge with the button not reverting to its inactive state after clicking. Solution: I resolved this by using the classList.toggle() method in JavaScript, ensuring smooth interaction by dynamically adding and removing the necessary classes.
What specific areas of your project would you like help with?I’d appreciate suggestions on improving the accessibility of the share option and the overall page for users relying on keyboard navigation and screen readers. Although the CSS transitions work well, any advice on optimizing animations for smoother performance, particularly on lower-end devices, would be valuable. Any recommendations on cleaning up or optimizing my CSS and JavaScript structure, especially in handling interactive elements, would be very helpful.
@edpauPosted about 2 months agoI think you have already done a great job on optimising animations, you only used transform.
I found an interesting article. Explain in more detail if you are interested. "Modern browsers can animate two CSS properties cheaply: transform and opacity. If you animate anything else, the chances are you're not going to hit a silky smooth 60 frames per second (FPS). This post explains why this is the case."
For accessibility, I read this and tried to use aria-expanded, aria-controls and aria-haspopup to improve the accessibility of the share menu. These attributes help inform assistive technologies about the current state of the expandable menu. However, improving accessibility has turned to be more challenging than I expected. For the mobile version, I need to hide the author content from screen readers, while for the desktop version, it doesn't need to be hidden. There are many factors to consider. Do you have any suggestions?
0 - @elisilkSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of figuring out how to implement a solution for the hero image, which changes from one image to two and has some absolute positioning. Would love to hear how others implemented this challenge and if people have critiques of the way I did it.
@edpauPosted about 2 months agoNice code. I love your readme, there are a lot of resources, they are very helpful to me.
I also spent a lot of time on the hero images, I want to make the hero image equal cropping on window resize. I am happy to see you did it on yours. I used Flexbox to handle mine, I tried to use position: absolute as well.
I thought Flexbox is cleaner, required fewer lines to begin with. But I ended up adding two extra divs around the hero contents, one for the mobile hero images and one for desktop. I am looking for a better solution, please comment on my code.
Below is the link I learn how to resize an image cropping it equally on each side with CSS. https://stackoverflow.com/questions/35847458/how-to-resize-an-image-cropping-it-equally-on-each-side-with-css
1 - @jboysSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
It felt good to finally learn Tailwind’s grid system and figure out how to make such a layout work smoothly across all screen sizes, not just mobile and desktop.
What challenges did you encounter, and how did you overcome them?Making sure the design looked great on a variety of screen sizes was a bit of a challenge. I overcame this by experimenting with Tailwind’s responsive utilities and adjusting the grid settings until everything aligned nicely, no matter the device. A bit of trial and error 🙃
What specific areas of your project would you like help with?In my grid system, cards with less content will stretch to match adjacent card sizes. If they stretch too much, the card looks a little empty. Any tips on how to prevent "over stretching" or how to make empty cards look less out of place?
@edpauPosted about 2 months agoNice code. I find it very easy to read your code, the use of semantic HTML is excellent. The grid settings with order is very good.
You are right that the cards with less content will stretch to match adjacent card sizes. I don't think we can prevent "over stretching". I will make the height of the card with more content shorter just as the design, i.e. I will reduce the line height of the text, so the cards with less content will be less empty.
Marked as helpful0 - @dedo-devSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
There is one thing that makes me proud, is how this solution looks better than the first one on the code side 🥲
What challenges did you encounter, and how did you overcome them?I encountered one challenge on this project, naming variables for the primary colors. Naming things is the harder part of web development 😂
What specific areas of your project would you like help with?I haven't any particular areas where I need help for this challenge but any suggestions are very welcome.
Thanks ✌️
@edpauPosted 2 months agoI like your code, they are well structured and easy to read, I can see your effort on naming the variables, I also find it challenging to name the variables for the primary colors. I learnt a lot from your code, thank you.
Do you think it is better to use article tag for each card, increase semantics?
0 - @vstmSubmitted 3 months agoWhat challenges did you encounter, and how did you overcome them?
I struggled a bit with the
-tag and the `srcset`/`sizes` attributes. I changed it to atag with `` which worked how I expected.@edpauPosted 3 months agoNice code, I see you done some custom class defined in your Tailwind CSS configuration. Do you have any good guideline for it? I am trying to find some good practice to learn.
There is a minor padding issues in your mobile version, there is no left padding. You may look into adjusting the breakpoint, as I have to expand the window to full width to view the desktop version in my small screen computer.
0 - @biwwabongSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
The speed at which I completed this. That being said there are still a few issues
What challenges did you encounter, and how did you overcome them?I had trouble getting the buttons to be responsive. Not sure I found the best solution, feels like a clumsy way to do it. I had to expand the width of every element to 100% that contained the buttons to get them to work correctly.
@edpauPosted 3 months agoI think setting the
ulwidth 100% is good, it is simple. As long as the container (the card) is responsive, theulwill be responsive, as it always takes all the width of its container.I would use text-align to center the text in each
liand not set eachliandawidth to 100%. https://codepen.io/edpau/pen/wvLYmwvIn my solution for responsive design, I set my card width to 90vw in mobile, and set a max-width with media query (min-width: 400px) to stop the card grow too large. The button's width will grow with the card width.
Marked as helpful1
