P
@Yonerfy
P
Van Tu
@imvan2All comments
- P@imvan2
Hey, this is great! A few things I noticed that can be changed:
- Styles don't really match the screenshot, ie text align of the checkbox labels and the input range styles.
- The right arrow button is missing when hovering over the generate button.
- The 'COPIED' part is kind of hard to read when the password is long.
I like the way you have a warning for the character length and the password requirements. I'm not familiar with Vue so I can't offer any suggestions on that, sorry!
- @devPauloskiP@imvan2
Looks great! Your code was easy to follow and your responsiveness to different screen sizes was good.
- @RickyPWebDevP@imvan2
Hey! This looks great on mobile and desktop. There are few things you add to it imo:
- having an 'active' or 'focus' for your 'Daily'/'Weekly'/'Monthly' buttons (I'd also check on the hover for it, too)
- missing tablet layout
- profile style is missing the bottom border radius
- i would also double check the height for the profile
- the cards bottom border can be seen. this can be solved with this: https://dev.to/rashidshamloo/css-fixing-background-color-bleed-in-rounded-corners-2kh4
- not sure if you have the figma files, but the cards and the ellipsis are missing a hover style (this may only be shown in figma designs)
- P@ganeshreddychimmulaWhat specific areas of your project would you like help with?
My enthusiasm for personal learning and skill development is being challenged by the incredible pace of AI progress. Playing with tools like the latest Gemini has left me feeling demotivated. Is this a common feeling, perhaps an overreaction, or just too soon to judge? Looking for advice or shared experiences.
P@imvan2Looks great. One thing I would advise is to use
.getElementById()instead of.querySelector(). The former is faster in performance for larger codebases if speed is what matters to you.To answer your AI question, it's a common feeling but I've noticed the code AI spits out isn't necessarily the "best" and I've had to revise it multiple times for it to be decent code, especially for more complex projects. I think the issue is the industry making it seem as if it's the greatest thing in the world and having junior devs whip up a full stack web app in less than 2 hours using AI without compromising on the code itself. If the code AI gives is unreadable (or sometimes even not possible), it's useless.
Marked as helpful - @Mnsa2024P@imvan2
Looks great! One thing I would mention is that I don't think your codebase includes semantic HTML, especially for the Share button.
- @KonamtiWhat are you most proud of, and what would you do differently next time?
I was able to fully code the whole design in less than 90mins and I started working on the responsiveness. I am actually proud of being able to code faster just by looking at the design of the project without the figma file.
What challenges did you encounter, and how did you overcome them?I had some challenge with placing the svg image at the top right corner of my first card in the grid-container but I later researched and found I could do that easily in my CSS using, background-image and background-postion-x: calc(); It was a fun discovery. I knew about the calc() value but I didn't know it could be applied to background image.
What specific areas of your project would you like help with?Still trying to fully understand the responsiveness of my images and flexbox.
P@imvan2This is great! Your layout is responsive to different screens and your code looks good. One thing I would add is that typically CSS files are named "style.css" or "styles.css" as the main CSS file.
Marked as helpful - @Bytehax21What are you most proud of, and what would you do differently next time?
Well nothing really idk why but I struggled with this container width alot that it kept becoming larger than the fixed width I setted.
What challenges did you encounter, and how did you overcome them?The container width kept becoming larger when I was inserting padding in it and the content inside was not being set center. So I just increased the Width.
What specific areas of your project would you like help with?How do I Center the blog card on the body like if I set a specific height corresponding to the body height it will ruin the blog card's element.
P@imvan2Great work on this!
For your question:
- How do I Center the blog card on the body like if I set a specific height corresponding to the body height it will ruin the blog card's element.
You need to remove
height: 100vh;in your body selector and instead addmin-height: 100vh;. This will allow the blog card to center. Then remove themargin: 219px auto;in .container and use CSS flexbox or CSS grid in the body tag to center the container.Also, unless you need to put semantic html in divs for styling purposes (like if you were doing
position: absolute), you really don't need the additional divs. For example, for your hero image, your html can be just<img class="hero" src="logo/Blog-Image.png" alt="" />instead of
<div class="image"><img src="logo/Blog Image.png" alt="></div>This reduces the amount of divs you use (which is great for accessibility). I would also remove the div surrounding your entire container - the div after main tag - and treat main tag as the container.
As for the container height itself, I would suggest putting it as
height: auto, instead of specifying a px. This allows the container to change in height by itself, making the container responsive to different screen sizes (meaning you can also remove the @media you have for smaller screens).Let me know if you want any clarifications on this!
Marked as helpful - P@chryspenalberWhat are you most proud of, and what would you do differently next time?
I’m proud of learning and using for the first time SCSS for organized styling. The footer overlay effect using ::before and ::after was also a nice visual touch.
Next time, I’d improve my habilities with SCSS.
What challenges did you encounter, and how did you overcome them?I struggled to apply a blue overlay on the footer background image. I solved it by using ::before and ::after pseudo-elements to separate the background image from the colored overlay with opacity.
What specific areas of your project would you like help with?I'd like to know if I properly use SCSS on this project.
P@imvan2Hello! Great work. I noticed the background image is missing at the bottom. I had the same issue, but you just need to include "../" at the beginning (however many times) until it works for you.
As for the responsiveness, I noticed the footer does not stretch all the way to the full width of the screen in tablet view.
I also would pay close attention to the design, especially the hero images (they are cut off in the design) and the footer button span color.
Marked as helpful - @sumaiyakawsarWhat are you most proud of, and what would you do differently next time?
I’m most proud of successfully implementing the mobile-first approach in SCSS, ensuring that the design is optimized for smaller screens before scaling up to larger devices. This approach helped create a more responsive and user-friendly experience, improving performance and usability on mobile devices. I also appreciated how structuring styles from small to large made the code more maintainable and scalable.
What specific areas of your project would you like help with?I'd appreciate any feedback. If there are any best practices I may have overlooked, I’d love to hear suggestions for improvement.
P@imvan2Hey, this looks great on mobile and desktop! One thing I would suggest is to include responsiveness for tablets.
- @Roshan-MeruguWhat are you most proud of, and what would you do differently next time?
I am most proud of the responsive design achieved through CSS Grid and Flexbox, which makes the page user-friendly across devices. Next time, I would focus on optimizing images better and implementing accessibility features from the start.
What challenges did you encounter, and how did you overcome them?One of the main challenges was ensuring that the layout was responsive across all screen sizes. I overcame this by utilizing media queries effectively and testing on multiple devices to adjust the CSS as needed.
What specific areas of your project would you like help with?I would like feedback on the accessibility of my website. Specifically, I want to know if there are any key areas where I could improve the usability for individuals with disabilities. Additionally, any suggestions on improving my CSS organization would be appreciated.
P@imvan2Hey, it looks great on desktop and mobile! I didn't look at your code, but I noticed on tablets (ipad air, mini, normal ipad) and slightly larger phones your cards are either being pushed to the left all in 1 row (leaving empty space on the right) or in 3 rows and the right row is cut off and has a horizontal scroll to see the rest. I suggest including tablets in your responsiveness!
Marked as helpful - @sumaiyakawsarWhat specific areas of your project would you like help with?
Any feedback is welcome.
P@imvan2Looks great in desktop and mobile! I would suggest maybe adding spacing to the sides of the component in mobile view so you can see the body background color and the card's border radius?
Marked as helpful
