@Dadv-a11ySubmitted 5 days ago
P
toshirokubota
@toshirokubotaAll comments
- P@toshirokubotaPosted about 2 hours ago
It looks great. Congratulation! Once minor thing that I've noticed is that there seems an extra break point before reaching for the desktop layout. The layout remains the tablet version while the fonts change. If intended, that's fine. If not, you may want to take a look. That's all!
Good luck with your endeavor and happy coding!
0 - P@CasperTheChildSubmitted 7 days agoWhat are you most proud of, and what would you do differently next time?P@toshirokubotaPosted 5 days ago
Hi, I found your design clean and pretty. I like the sliding transition of the mobile menu. Very nice. I have a couple of suggestions that may improve the functionality of your project. First, we cannot open the answers on the FAQ section with keyboard. You can add a keydown or keyup event handler (with event.code being Enter) and use the same code with the click handler. Second, once the validity check fails on the email field, the error persists until a proper email is provided and submitted. I found the interface a bit too harsh. In my design, I provide a 'focus' event handler on the email field and clear any error flags so that the user can easily clear the error and move on. Great job and hope this helps.
0 - @Tasin269Submitted 14 days agoP@toshirokubotaPosted 8 days ago
Hi, I think you are almost there to complete the project. As you are probably aware, the caption of the image does not move at all. You want to apply the same carousel design to them as you did with the hero images. I found that the layout of the arrows is very tricky. I see that they are not fully visible on your desktop version. So I suspect that you had a similar difficulty as I experienced? I used a grid layout and prepared one extra column and one extra row just to put the arrows at the right place. Nice efforts and good luck with your coding journey.
0 - @Atomico333Submitted 23 days agoP@toshirokubotaPosted 11 days ago
Congratulations on finishing the project. Your implementation responds well with various sizes (especially for table sizes). I just finished the same project, and I found mine did not cope well with the mid size width. I have a few comments that may help improving your coding/design. First, I would use <picture> element wrapping <img> element so that different display/device scenarios can be handled. This way, you can simplify your JavaScript code. Second, you have two identical menus, one for mobile and the other for desktop. You can change the case of text in css with text-transform. So you do not need to provide them. Third, it would be helpful to git-push your original SASS file so that we can follow your coding/design process better. When we only see a generated CSS, your process becomes less clear. Good luck and keep up the good work!
Marked as helpful0 - P@JairRaidSubmitted 18 days agoP@toshirokubotaPosted 13 days ago
It looks very good to me. I like that you made interactive elements focusable with TAB. Good job and good luck!
0 - @rincanelaSubmitted 14 days agoP@toshirokubotaPosted 13 days ago
It looks good. One comment I have is that you probably want to give ALT with a description of the image for image-equilibrium.jpg. The SVG icons are for visual presentation only and ALT can be left blank.
Good luck!!
1 - @mike15395Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I am proud that i completed this challenge with all core functionalities working fine. I would write more modular and maintainable code in future.
What challenges did you encounter, and how did you overcome them?I encountered a series of challenges: 1.Writing core logic for correct and incorrect option 2.displaying correct score 3.CSS for dark mode 4.responsive code
What specific areas of your project would you like help with?Please help me with CSS of options in darkmode and responsiveness in small devices.
P@toshirokubotaPosted about 1 month agoHi great job completing the project. I just finished this myself and it was a lot of work. I did not find any glitches on the app. One comment about the styling is that on a mobile view, fonts are quite large for the view port and as a result, buttons are pushed down. I have to scroll down to submit. So I would adjust font sizes for the mobile view so that everything fits concisely. For the javascript side, I see many querySelector() and querySelectorAll() inside callbacks. This can slow down the app. I would pre-select some essential elements beforehand and save them in variables so that you do not have to query them every time you need them.
Good luck!
0 - P@vanrucSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I improve 1 step on using html/css and tailwindCSS to build responsive layout, control web page elements properly.
P@toshirokubotaPosted about 1 month agoHi, the project looks good. I am not familiar with tailwind, so I cannot comment on your design accurately. Having said that, the hero image is cut off by the fixed height container. You are using a grid for the section and also subgrids. So somehow by the grid specification, the height got fixed, I think. You may want to play with the grid-template-rows and use a flexible unit like fr. But since I am not familiar with tailwind, I cannot pin point the cause.
Good luck with you endeavor and happy coding!
Marked as helpful0 - @samadeola1Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I'm proud to have taken up this challenge, and I know I will get better with more challenges.
What challenges did you encounter, and how did you overcome them?The table gave me a little bit of issue but i think i figured out my way around it
What specific areas of your project would you like help with?if there are easier ways to design the table, i would be open to suggestions
P@toshirokubotaPosted about 1 month agoHi, the solution looks good. The layout looks clean and aligned up nicely. One comment I want to give you is that if you continuously resize the window, then the size shifts abruptly at the breakpoints of your media query. That is caused by 'max-width: 50%' on main at the breakpoint of 768px. I think the responsiveness works better if you remove the style.
Happy coding!
Marked as helpful1 - @samadeola1Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I think i did well, thinking the width might be too much tho
What challenges did you encounter, and how did you overcome them?Nothing much, really, getting the hang of it
What specific areas of your project would you like help with?Anything the community feels needs to be corrected
P@toshirokubotaPosted about 1 month agoHi, your solution looks very good. One comment I can add is that you do not have :focus on button elements. I would add the pseudo class with button:hover. This way, the user can get a feedback from tab based selection of buttons.
Happy coding!
Marked as helpful0 - @IbrahimAlatarSubmitted about 1 month agoP@toshirokubotaPosted about 1 month ago
Hi, your solution looks good! I have a couple of comments. First, there is a border around two avatar photos (Daniel and Patrick) in the original design, if you look closely. The color I used for it was not in the style guide, but according to figma, #A775F1. Second, 'color' is styled twice in '.item .content .sub' selector. One is 'light gray' and the other is 'very dark blakish blue'. Right now, 'light gray' is the one used in rendering. You want to apply these colors differently for each card to have the right contrast with the background. I read somewhere that you often want to set background-color and color in pair. So wherever you change your background color, you want to set a proper foreground color as well.
Good luck!
0 - @FernJBatistaSubmitted about 1 year agoP@toshirokubotaPosted about 2 months ago
Congratulations on your project. It looks very good. I do not have much feedbacks except a couple minor ones. First, you have the 'box-sizing: border-box;' style setting at multiple places. I always have it under :root so that it becomes default and do not have to set it in other places.
Second, this may be a personal preference, but when you narrow the screen, the layout gets really squashed before it changes to the mobile mode at 478px. You may want to move the breakpoint larger so that it switches to the columnar layout sooner. But if you do so, each card may look very empty. You can change the font-size continuously to minimize such empty look.
Good luck, and keep up the good work!
Marked as helpful0 - @FilostkanaSubmitted about 2 months agoP@toshirokubotaPosted about 2 months ago
Looks very nice. I like your attention to the screen reader output.
Keep up the good work!
0 - @ZxjklpSubmitted about 2 months agoP@toshirokubotaPosted about 2 months ago
Very nice. I like the way you handled hover and focus states on interactive elements.
I know this is not a frontend issue, but the password strength should be dependent on not only the selection pool size but also the length of the password.
Great job!
1 - @Juan122113Submitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I was thinking that this work it would take me a lot of time the JS part, but I was able to do it in a relatively short amount of time.
What challenges did you encounter, and how did you overcome them?There were a lot of variables for me, that lead me to mistakes in the code, but with time I overcome them.
What specific areas of your project would you like help with?Any feedback and comments are welcome.
P@toshirokubotaPosted about 2 months agoHi. First of all, congratulations on finishing the challenge faster than you anticipated. Your layout looks almost identical to the original design, which I found was impressive. I often struggled to make it exactly like that.
You were concerned about the number of variables. Maybe you could take advantage of some built-in functions on Form, such as FormData, and Object.fromEntries. In your case, something like that.
const data = Object.fromEntries( new FormData(document.getElementById('form'));It converts all named inputs into entries in JSON object. (The inputs need to be 'named'.) So if you name the first input as 'bill', you can find the value by
data['bill']. I found that the approach makes the tracking of all the input fields easier and reduce the number of variables.You could also do
form.reset()to clear all the input fields, rather than doing it one by one manually.Hope this helps a bit. Good luck!
0 - @Abas-codeSubmitted about 2 months agoP@toshirokubotaPosted about 2 months ago
Very nice! I like the way you handled the active state of each card by changing the opacity. I am also impressed that you took care of a single hour (hr) and multiple hours (hrs). Keep up the good work!!
Marked as helpful0 - @allesonsalesSubmitted 3 months agoP@toshirokubotaPosted about 2 months ago
Hi congratulations on finishing the project. Nice glow on the button, too. I just finished the same project, and found handling errors in a form properly was frustrating. I found using :invalid pseudo class on the input was useful. Instead of adding/removing the .error class, you could use #email:invalid to get a similar result without using javascript. I also found :placeholder-show and :focus-within pseudo classes useful as well for this project.
Good luck on your endeavor!
0 - P@olaide-hokSubmitted about 2 months agoP@toshirokubotaPosted about 2 months ago
Hi, I looked at your project, and it looks good. One thing that I noticed was that on a mobile view, the share tooltip does not fully cover the avatar. You could make the tooltip larger to hide it, but the share button still moves as you open/close the tooltip.
I just finished the same challenge, and what I did was to put the avatar/profile and the share button into a grid container, and put the tooltip also in the same grid cell with the avatar/profile. When you click the button, it toggles the visibility of the tooltip. This way, nothing really moves. For tablet/desktop version, I made the tooltip absolute positioned.
Hope this helps. Good job!
0
