Skip to content
OverviewSolutions
20
Comments
40
P
Tsukimi
@hikawi

All comments

  • Satoko•30
    @okotass
    What are you most proud of, and what would you do differently next time?
    • That I was able to achieve these things:
      • Pixel perfect
      • Mobile First
      • Reduce CSS duplication as much as possible

    I want to keep the above in mind next time.

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

    It was a little difficult to make effective use of the Text preset. Considering the responsive layout, I tried to implement it as it is now, but I am not sure if it is correct or not.

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

    I could not figure out how to reduce the font size for smaller screens without using media queries.

    If you have a better way to use it, we would appreciate it if you could let us know.

    Blog preview card

    2
    P
    Tsukimi•820
    @hikawi

    "I could not figure out how to reduce the font size for smaller screens without using media queries. If you have a better way to use it, we would appreciate it if you could let us know."

    That is actually exactly how you do it. Work from mobile screens, then use min-width queries for larger screens! If you like, look into CSS clamp(), you can make the sizes transition smoothly with it.

    Marked as helpful
  • P
    Sven Notermans•200
    @Sven-27
    What are you most proud of, and what would you do differently next time?

    Had to find out again how to use Sass with regular html and how to compile it.

    And learned to store all of the imports into one folder so that is the only file that needs to be compiled. And the other files can be set as partials.

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

    Took a little while to find how to compile sass to css. So i googled en read the docs on https://sass-lang.com/guide/

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

    All feedback is welcome

    Product Preview Card

    3
    P
    Tsukimi•820
    @hikawi

    Woah this is really smooth and well done.

    I think you perfected this, there's really nothing to speak of haha. I don't know what to say, and no one commenting might discourage you. Amazing work!

  • P
    Nishanth Venkatesan•1,030
    @nishanth1596
    What are you most proud of, and what would you do differently next time?

    In my first attempt, I was unable to achieve the desired layout using Grid, despite spending hours on it. After trying for some more time, I decided to take a break. When I came back, I deleted my old code and approached the task in a different way. Finally, I was able to achieve the layout I wanted.

    Initially, it wasn't easy, but now that I've found the solution, I feel confident that if I encounter a similar challenge in the future, I’ll be able to solve it much faster.

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

    Creating responsive website is very challenging. I still haven't figured it out. I used responsiveness only for desktop and mobile screen.

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

    I need support in making this site complete responsive. For this project, I worked on responsiveness for desktop (1440px) and mobile (375px) only but for other width , styles are getting broken and grid is not aligning at the centre of the width.

    Responsive Testimonials grid section

    #pure-css
    1
    P
    Tsukimi•820
    @hikawi

    I think the problem here is that you force the width and height to be defined, which made it unresponsive. My screen is 1800px and everything is tiny and aligned to the left because of it, and any other screen between 375x to 1440px sees a broken overflown grid.

    Usually I think you should use force width/height for stuff that are almost always the same across screen sizes, for example the "Preview Code" button on this frontend mentor page, it shrinks a bit on smaller screens but across everything it's the same. (They used paddings and changed the font size though but you get the point)

    I would rather use % to make it responsive, and use min-width CSS queries instead of max-width. You can have min-width: 1440px to use the desktop version, anything lower would use the mobile version.

    You might also want to look into grid template areas, would probably fit you a lot.

    Marked as helpful
  • P
    Tsukimi•820
    @hikawi

    Me when I'm a level 50 going to level 1 area (you forgot the card's shadow)

    Marked as helpful
  • Dylan Heslop•2,460
    @dylan-dot-c
    What are you most proud of, and what would you do differently next time?

    This was an iteresting challenge, most proud of how I got to complete it though there are still alot of things that I can do better, but glad I got to complete it.

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

    The state management between ref and reactive was troubling, I had some issues like when you pass data as a prop thet wont be reactive anymore so I kinda had to work around that

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

    Refactoring my code and improving it

    Responsive Product List with Cart: Vue, TailwindCSS, Pinia, RWD

    #accessibility#pinia#vue
    1
    P
    Tsukimi•820
    @hikawi

    Ooo, I saw what you mean by the model's list being scrollable, that's a very clever way of dealing with that part. Your solution is also very well done, code is being split and super easy to follow, which is also why I like Vue a lot.

    I don't know about your issues passing data into props, it should be reactive fine, unless you try to reassign the data into another variable, and not directly accessing with props.data or using computed.

    I noticed that from screens 768px+, the buttons are too big and overlap each other really badly. Also, this is just my preferences, and might not be good practice, but decorative icons like the shopping cart and the carbon-neutral icon don't need alt text, since there is actual text content there explaining what that element is already. If there's just a button with a shopping cart icon, and nothing else, then alt text would be needed, that's what I assume.

    And about your question about frameworks, my favorite is probably Astro + Vue, which is like a SSR implementation, you can choose which part to make interactive and which to be static and rendered on server, and can integrate with UI frameworks like React, Vue, Svelte,... Because of Astro being compatible with all UI frameworks, I like Nanostores as my state management as it doesn't care about what framework. What about you? What's your favorite?

    Marked as helpful
  • P
    Tsukimi•820
    @hikawi

    Great work!

    Although, you forgot that in the details section, bordering countries are buttons too and can be clicked to navigate to that country.

    Marked as helpful
  • abedzeidan•340
    @Abed001
    What are you most proud of, and what would you do differently next time?

    I have finished a great challenge I used in this mortgage calculator solution: tailwind ,react ,context Api and also I worked on the SEO Part.

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

    there are many challenges such as: states management, components rendering on a certain condition and catching a specific states or attribute that need to be changed inside the project.

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

    first I want help regarding responsiveness there are a certain times where design on desktop are the same on tablet but when I use (lg:) in tailwind it does not specify anything regarding tablet size ,what can i do to make (lg:) works for medium and large devices regarding this project. second when I put the hsi colors it dosent work in my project. and finally I always have a problem working with any docs it always seems ambigiuos ,like i always cant find my condition inside the docs so if anyone could give an advice i couldn't finish this project without gemini althougth i didnt took solutions or copy paste any code, i work in a way where i know what i want so i request just that but this is after i try to read the docs so any help would be appreciated.

    Responsive Mortgage Calculator using tailwind, html, react, context

    #tailwind-css
    1
    P
    Tsukimi•820
    @hikawi

    OK solution!

    Maybe it's just me, but I think you should split the code into smaller components because right now it reads like a headache. For example, you can split clicked ? <EmptyResultsView /> : <ResultsView result={result} />.

    You can put the entire hsl() function into tailwind's config, the same way you put the hex code correctly there.

    I don't know what you mean by the responsiveness. If you put p-6 md:p-10, it will mean that for any devices, it will default at p-6, but as soon as the screen's width is 768px (md level) or bigger it will become p-10. This essentially means that for mobiles, up until 767px, has p-6 class applied, and from tablets up until infinity will have p-10 applied.

    It's ok to ask AI for help, but make sure to read what the AI gives, and that you can understand it and know that it is correct. The AI likes to talk, but doesn't know if it talks correctly.

  • P
    Tsukimi•820
    @hikawi

    Nice work, a fellow Vue lover.

    I noticed that the add to cart "buttons" are made with <div> and not the actual <button> element, which really hurts accessibility. I couldn't control anything without using a mouse.

  • P
    Tsukimi•820
    @hikawi

    Great solution. Except that continue button does not have a hover state :p

  • P
    Tsukimi•820
    @hikawi

    I have nothing much to say, it's pretty great.

    It breaks down when you click the any font choices though, rip.

  • P
    Tsukimi•820
    @hikawi

    Great work overall!

    On the home page you're missing the hover states for the pictures and they are not interactive, I would prefer if they lead me to that section in the slideshow. The images here are stretched, probably because they appear in the wrong order.

    Doing all this in pure vanilla JS is a crazy feat, so congrats on that.

  • P
    Tsukimi•820
    @hikawi

    Really amazing work! The animations are great, sometimes it snaps left and right though.

    I had to dig deep to find any real issues, the only thing being missing aria-labels on some images like svg, or the clickable <li> elements not being able to tab to with keyboard.

    Marked as helpful
  • P
    Tsukimi•820
    @hikawi

    Solid solution! The slight animations make it really pleasing to see, with also a functional navigation bar.

    Only thing is that I would want to click on a question in the FAQ section and see it expanded also, not only the button.

  • P
    AdamullaOsas•800
    @AdamullaOsas
    What challenges did you encounter, and how did you overcome them?

    responsiveness, from laziness I just did second file :D (I know it's bad)

    react tailwind quick and easy

    #react#tailwind-css
    1
    P
    Tsukimi•820
    @hikawi

    Great work! I like the little animations.

    Even though, on some screen sizes the about text overflows below the images, and looks kinda off.

  • P
    Tsukimi•820
    @hikawi

    Great work!

    There's really nothing I can comment on about the code style. Only problem I can see is the screen from 768px, the leader text overflows to the above section.

  • CptnRedbeard•40
    @CptnRedbeard
    What are you most proud of, and what would you do differently next time?

    Very proud that I completed this without a tutorial.

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

    I could not get things to align in the center. I had to make the body's position absolute and make the elements I wanted to center as relative.

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

    I do not have any specific areas I would like help with. If there is any way to clean up my code or if I'm using unnecessary stuff I would love to know though.

    Blog Preview Card

    1
    P
    Tsukimi•820
    @hikawi

    Using absolute for the centering is okay too, as long as it comes out great and is easy enough to maintain, any solution is good.

    For me I'd do something like having body be display flex, align items center and justify items center will put everything in the center of the body. Or you can apply margin left and right auto on the card itself, and it will position middle in whatever container it's in.

  • P
    Tsukimi•820
    @hikawi

    Great work!

    Such a baby challenge for you!

  • tailor-made-god•120
    @tailor-made-god
    What are you most proud of, and what would you do differently next time?

    I am proud of only by eyeingout and with few try I can get almost to the design. And next time I will try to do with grid only.

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

    The most challenging part is not using design files and I overcome this by few trial and errors.

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

    I want to know if this alignments done by padding rather than margins, it will be a better code or not.

    Social Links Profile developed by flex box and grid.

    1
    P
    Tsukimi•820
    @hikawi

    Hi! Obviously I can't share the design files, but usually it seems to be done with gap. For example, the links section is a flexbox with gap 16px (1rem), and the entire card is a flexbox with gap 24px (1.5rem).

    Web is weird and there are 200 solutions for 1 problem so margins are okay too.

    Marked as helpful