Frontend Mentor | haquanq's profile

Latest comments

shalri•620
@shalri
Submitted 11 months ago
What are you most proud of, and what would you do differently next time?
I used NextJS for this challenge. Since I plan to integrate Frontend Mentor into my study routine, I might as well play around with NextJS and React alongside the challenges.

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

I liked how I implemented some UX enhancements. The image will change saturation based on the mouse movement.

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout right. I am proud of the results since I was only eyeballing it.
What specific areas of your project would you like help with?
I am good. Enjoying these challenges!
Base Apparel Coming Soon Page
#next#react#tailwind-css#framer-motion
1
haquanq•1,565
@haquanq
Posted 11 months ago
Hey buddy, it looks like you have submitted the wrong page link!!!!
Marked as helpful
Iamtrieves•210
@Iamtrieves
Submitted 11 months ago
What are you most proud of, and what would you do differently next time?
Everything Basically
What challenges did you encounter, and how did you overcome them?
None
What specific areas of your project would you like help with?
Everything
Meet-Landing Page
1
haquanq•1,565
@haquanq
Posted 11 months ago
Bro you submitted on the wrong challenge 😂😂😂
P
DalaScript•600
@DalaScript
Submitted 11 months ago
What are you most proud of, and what would you do differently next time?
- Since I'm not a beginner, I was able to complete the project quickly and efficiently. 🚀✨
- My familiarity with the technologies and my experience allowed me to work smoothly and confidently. 😊💻
What challenges did you encounter, and how did you overcome them?
- There were no significant difficulties during this project. 🌟
- Everything went according to plan, and I was able to implement all features without any major issues. 👍🛠️
What specific areas of your project would you like help with?
- While there were no special difficulties, I would love to get advice from others on how I could improve. 🧩👨‍🏫
- Feedback on my approach and any suggestions for better practices would be greatly appreciated. 🌟💡
QR Code Component using Flexbox, SCSS and bem
#sass/scss#bem
2
haquanq•1,565
@haquanq
Posted 11 months ago
Hello @DalaScript 🙋🙋🙋

Nice work, it looks perfect on the screenshot comparison!!

Here is something you can improve:
- When you use article, always give it a title/heading (often h2-h6 - each page must have one h1). In your case, these bold text is obviously the title/heading of the article so you can use h1 instead of p.
- You can just leave h1 and p without wrapping it in div and the layout still looks the same (avoid using unnecessary div because div has no semantic) .
Nice work, keep it up!! Happy coding 😁😁😁
Marked as helpful
mofada•340
@mofada
Submitted 11 months ago
What are you most proud of, and what would you do differently next time?
In the recipe page project, I used tailwind css for development, and I learned more about responsive design.

I also learned more about the semantic tags of HTML and the styles of :marker.

In the grid and native table attributes, I used the latter because I have hardly used the native table. Through this project, I also learned more about the table.
What challenges did you encounter, and how did you overcome them?
I encountered several small problems. First, the list-style of li is controlled by css

Then the style control of table makes me feel very embarrassed and entangled

Finally, I also encountered a problem with responsive design. I don’t quite understand whether I should develop the mobile terminal or the PC terminal first. According to the responsive design of tailwind css, md @media (min-width: 768px) { ... } should only take effect on screens above 768. So should I develop the mobile terminal first, and then develop the PC terminal based on the mobile terminal?
What specific areas of your project would you like help with? Question
1. question one

There is a small flaw. I used the native table to implement the Nutrition at the bottom. The field on the left has no padding.
1. I tried to add padding-left, but it caused the field on the right to move.
2. Add padding-left to the field on the left, and then set the width, but fixed width will have problems on mobile. So is there any other better way?
2. question two
I still have some doubts about responsive design. In tailwindcss, I can use the md: tag to operate responsiveness. I don’t quite understand whether this means that the mobile terminal should be used first?

For example, the cover: h-[200px] md:h-[300px] at the top, the mobile terminal or the default is 200px, and the PC terminal or when the width exceeds 768px uses 300px
recipe page with tailwind css
#tailwind-css
1
haquanq•1,565
@haquanq
Posted 11 months ago
Hello @mofada,

Answering your questions:
- You can use % unit to set width on each cell on the same row (ex: keep them half by width: 50% on each cell).
- Tailwind by default uses mobile-first principle so by using md:h-[300px] equal to:
```
/* meaning apply below styles when screen at least 768px*/
@media screen and (min-width: 768px) {
    element {
        height: 300px;
    }
}
```
- You can override it's default value in tailwind.config.js file.
Have a nice day!!!
Marked as helpful
Daniel Silva•30
@Daniel13s
Submitted 11 months ago
What are you most proud of, and what would you do differently next time?
I'm proud to have made the interactive part of the site using JavaScript, and next time, I'll comment more in the code
What challenges did you encounter, and how did you overcome them?
Well, I couldn't use the double-click event to open and close the questions, which frustrated me a bit
What specific areas of your project would you like help with?
In the JavaScript events section
FAQ According
1
haquanq•1,565
@haquanq
Posted 11 months ago
Hey Daniel,

I think you should ask more specific question if you really want community members to give your solution feedbacks. Also, please use English on variables name so that when people try to take a look into your source code they know what are you trying to do!

Have a nice day!!!
Aurélien Cabirol•130
@AurelienWebnation
Submitted 11 months ago
What are you most proud of, and what would you do differently next time?
This project is currently the best I made and the most proud of. I really loved coding this dictionary.
What challenges did you encounter, and how did you overcome them?
Astonishment, a challenges I encountered was to set an error on the input when this one is empty. I used an realtime api call with a debounce and you don't need to press enter or click to submit your word. So I can't use the onSubmit function to prevent an empty input. Instead, I choose to made a verification into the handleChange function.
What specific areas of your project would you like help with?
I used the handleChange function to check if the input is empty or not, this is the function :

function handleChange() {
```
if (!event.target.value) {
  setInputError('Whoops, can’t be empty…');
} else {
  setInputError('');
}

setWord(event.target.value);
```
}

I think there is a better way to do this. Actually, the network request will be made, even if the input is empty.
React + Styled Components + Debounce search
#react#styled-components#swr#typescript#vite
1
haquanq•1,565
@haquanq
Posted 11 months ago
Hello @AurelienWebnation,

Nice work on the solution!

I think it is unnecessary to show input error (empty error) when the request will eventually be sent. Maybe considers adding an empty component with descriptive text to encourage users to use the search when the input is empty is more appropriate.

Have a nice day and happy coding!!!